标签语义化
- i: 表示特殊语气/习语
- em: 强调
- strong: 重要性
em会对文本含义有改变作用，类似读一句话时重读某一个字或词会表达不一样的意思一样; strong会突出包含文本的重要性、严重性和紧急性等。
figure
- 文档中的一些嵌入式内容，比如引用的图片，插图，表格，代码段等，可以作为独立的单元，当这部分转移到附录中或者其他页面时不会影响到主体，这样的元素都可以放在
<figure>元素内，而且可以搭配其子元素<figcaption>作很好的元素说明或者备注信息;
table
<caption>: 表格的标题，跳脱于表格之外;
<thead>：表格的表头行，定义表格的表头内容;
<tbody>：表格的主体部分，表格的主体部分;
<tfoot>：表格的脚注部分，tfoot要和thead，tbody结合起来使用;
form
<label>标签的用法：label标签，为input元素定义标注，改进了表单控件的可用性，当你点击到label标签时，会自动聚焦到对应控件上，label标签一般有两种用法
- label的for属性与控件的id相对应，比如：
<label for="username">请输入用户名: </label>
<input type="text" id="username" name="username">
- label中内嵌控件，比如:
<label>请输入用户名<input type="text" id="username" name="username"></label>
此外，
- placeholder属性，其值会在输入字段为空时显示，并会在字段获得焦点时消失；
- 表单中的单选radio控件和复选checkbox控件以及下拉框select控件，可以为radio, checkbox添加checked属性以及为option添加selected属性让其默认选中
title和alt属性
title属性可以用在任何元素上，当用户把鼠标移动到元素上时，就会出现title的内容
alt属性是当图片加载失败时, 起到对图片说明的作用
iframe的优缺点
优点
- 解决加载缓慢的第三方内容如图标和广告等的加载问题
- 能并行加载脚本
- 方便管理，指的是如果有多个页面需要用到iframe的内容，那么只要修改iframe的内容就可以实现统一管理
- iframe可以原封不动的把嵌入的网页显示出来
缺点
- 会产生很多的页面，不容易管理
- 会增加服务器的http请求对大型网址不可取
- 会阻塞父页面的load事件
- iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载，也就是说子文档和父文档的请求数会被计算在一起
- 不利于搜索引擎优化，也就是不利于SEO
解决办法
如果需要使用iframe，最好是通过JavaScript动态给iframe添加src属性值，这样可以绕开以上两个问题.
盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
设置透明度
区别：opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性
1、opacity
取值在0到1之间，0表示完全透明，1表示完全不透明。
.aa{
opacity: 0.5;
}
2、rgba
rgba(R, G, B, alpha)
R,G,B: 取值0255, 表示红绿蓝三原色
alpha: 透明度, 取值01
.aa{
background: rgba(255,0,0,0.5);
}
relative和absolute
relative是相对定位，相对的是此元素未设置css前的位置
absolute是绝对定位，一般配合父级的相对定位使用，设置absolute的元素，其位置相对于设置了relative定位的父级元素定位, 所谓的"子绝父相"
