html基础笔记

行级元素和块级元素
<!-- 行内块级元素 -->
<!-- 1、能设置宽高 -->
<!-- 2、能呆在一行 -->
<!-- 常见的行内块级元素：img 表单 input textarea select -->
<!-- 块级元素 -->
<!-- 1、能设置宽高 -->
<!-- 2、不和其他元素呆在同一行，霸占一行 -->
<!-- 常见的块级元素：div p ul li h1-h6 --> /*将块级元素转成行级元素*/display: inline;
<!-- 行级元素 -->
<!-- 1、不能设置宽高 -->
<!-- 2、能呆在一行 -->
<!-- 常见的行级元素：a span em u strong --> /*将行级元素转换为块级元素*/display: block;
引入样式
<!-- 引入样式 -->
<link rel="stylesheet" href="style.css" />
继承性和叠加性
<!-- 叠加性：不同选择器给同一个元素加不同的样式，会同时生效 -->
<!-- 子级元素会继承父级元素的文字样式 -->
文字样式
宽 width
高 height
边框 border: 3px solid blue;
text-align: center; /*字体水平居中*/
line-height: 200px; /*字体垂直居中*/
font-size: 1.6em; /*em为字体单位*/
line-height: 40px; /*行高*/
text-indent: 2em; /*首行缩进*/
font-weight:700; /*文字粗细字体变细，为400*/
 font-style: italic; /*文字倾斜*/
text-decoration: line-through;/*文字的上划线，下划线和中划线，这里是中划线*/
letter-spacing: 1px;/*字符间距*/
内边距padding
padding-top: 20px; padding-right: 60px; padding-bottom: 100px; padding-left: 160px;
/*一个参数的时候，代表4个方向的内边距*/ /*两个参数的时候，第一个代表上下，第二个代表左右*/ /*三个参数的时候，第一个代表上，第二个代表左右，第三个代表下*/
外边距margin
<!-- 左右外边距会累加 --> <!-- 上下外边距会合并，以最大的为准 -->
margin: 10px auto;/*margin里10表示上下的外边距为10像素，然后左右为居中对齐*/
图片精灵
background: url(bg.png) no-repeat 0px -308px;0表示左右，不移动，如果为正值就是向左移动，负值为向右移动；-308代表上下位置，如果正值就是向下移动，负值为向上移动*/
a:visited/*表示已经在本地服务器上访问过的网站，链接为红色*/
<br /><br /><!-- br单独空一行 -->
overflow: none;会没有滚动条，内容过多会溢出设置的边框
overflow: auto;/*表示如果内容少，则没有滚动条，内容多会自动添加滚动条*/
/*img为行内块级元素，必须转换为块级元素才能居中对齐*/
边框
border-top: 10px dotted green;/*dotted表示小圆点
三角形
#sanjiao{
width: 0px;
height: 0px;
border-left: 20px solid white;
border-top: 20px solid red;
border-right: 20px solid white;
border-bottom: 20px solid white;
<!-- float可以让块级元素在保持宽高的情况下排列在一行 -->
<!-- 如果上一行没有浮动元素，那么它跑不上去 -->
<!-- 浮动元素是脱离文档流的，正常元素会忽略它前面的浮动元素 -->
/*顺序：颜色 背景图 重复方式 背景图水平位置 垂直位置*/
background: blue url(xiaogou.jpg) no-repeat 200px 100px;
}
   
/*透明度*/
opacity: 0.8;/*1为不透明，0为完全透明*/
filter: alpha(opacity=80);/*IE系统之前的设置*/
img{
/*display不保留原来位置，隐藏内容；
visibility脑瘤原来的位置隐藏内容*/
/*display: none;*/
visibility: hidden;
}
background: green;/*所有浏览器*/
/*background: blue\9;*//*所有ie*/
background: red\0;*//*ie8 ie9*/
+background: orange;/*ie6 ie7*/
_background: pink;/*ie6*/
+margin-top: 100px;/*表示ie6,7都能识别*/
_margin-top: 0;/*表示排除ie7,只有ie6识别
background: black\9;/*只有ie9以上的识别*/
<!-- 火狐 绿色<br />
ie6 粉色<br />
ie7 橙色<br />
ie8 红色<br />
ie9 红色<br /> -->
background: green;
background: red\9;/*ie*/
background: pink\0;/*ie89*/
+background:black;/*ie67*/
-background: yellow;/*ie6*/
+border: 10px solid red;/*ie67*/
-padding: 200px;/*ie6*/
<h1 id="title" class="hs siwu t" hd="houdun">我是一个h1标题</h1>
1.获得元素的属性 var re = $('#title').attr('hd');alert(re);
2.设置元素属性，将class名字改为qqq,可在浏览器里查看$('#title').attr('class','qqq');
3.添加class,给class添加新的属性$('#title').addClass('aaaa');
4.删除class $('#title').removeClass('siwu');
5.获得内容var re = $('#title').html();alert(re);
6.设置元素内容$('#title').html('我是新设置的内容');