重学前端—— html <知识查漏补缺系列>-一一网

HTM ： window 98 和老的linux 只认3位，不认三位以上的（HTML）

XHTML： html 书写规范、应用规范
HTML5：新增了部分标签
HTML5技术：增加了音视频功能、增加了DOM操作等等新功能（属于新的API，HTML5技术属于JavaScript技术）

DOCTYPE html ：html5声明方式，CSS1Compat模式

document.compatMode：

CSS1Compat：W3C的标准兼容性模式
BackCompat：浏览器的怪异兼容性模式

head

title

主页：网站名称 + 主要的关键字/关键字的描述
详情页：详情名称 + 网站名称 + 简介
列表页：分类名称 + 关键字 + 网站名称
文章页：标题 + 分类 + 网站名称

基础标签

h 标签

h1
- 外边距：21.44
- 字体：2em
h2
- 外边距：19.92
- 字体：1.5em
h3
- 外边距：18.72
- 字体：1.17em
h4
- 外边距：21.28
- 字体：1em
h5
- 外边距：22.17
- 字体：0.83em
h6
- 外边距：24.97
- 字体：0.67em

p

外边距：16像素

首行缩进

<p style="text-indent: 2em;">首行缩进示例</p>
复制代码

strong、b

加粗标签
strong：语义标签，语气加强
b：物理性标签

em、i

em：语义标签，语气加强
i：物理性标签，一般不用于斜体，用于图标标签

del / ins

del：delete
- 删除线
- 样式实现方式 style=”text-decoration: line-through”
ins：insert
- 下划线
- 样式实现方式：style=”text-decoration: underline”

address

斜体，语义化，表示地址
不常用

更多标签

div

块级标签
标签容器

a

超链接标签
打电话（tel:18773803xxx）
发邮件（mailto:xietiansheng9@gmail.com）
锚点定位（#box）

协议限定符

 <!--不刷新页面-->
 <a href="javascript:;"></a>
 <a href="javascript:void(0)"></a>
 <!--弹窗-->
 <a href="javascript:alert('弹窗');"></a>
复制代码

sub / sup

sub：subscripted
sup：superscripted
下角标标签

<div>前端开发<sup><a href="http://www.baidu.com">[1]</a></sup></div>
<div>2<sup>3</sup></div>
<div>H<sub>2</sub></div>
复制代码

span

没有任何样式的标签
低调、安静、最常用

ol、ul

ol 有序列表（Order List）
- type="a | A | i | I | 1"
  - a：小写英文字母排列
    - 超过26个，第27个用aa标识，以此类推
  - A：大写英文字母排列
  - 1：阿拉伯数字排列
  - i：小谢罗马数字排列
  - I：大写罗马数字排列
- start="1"
  - 起始值
  - 除了数字其他都不行
- reversed="reversed"
  - 倒序
  - 数字倒序小于零后会从-1开始排列
ul 无序列表（UnOrder List）
- type="disc | square | circle"
  - disc：小圆点
  - square：正方形
  - circle：空心圆

table

属性
- border="1"：单元格边框
- cellpadding="10"：单元格内边距
- cellspacing="10"：单元格间距
子级标签
- <caption>：标题标签
- <th>：table header cell 表头标签
- <tr>
  - table row 表格行标签
  - rowspan="2" 行合并
- <td>
  - table data cell 单元格标签
  - colspan="2"：合并单元格（超出部分自动忽略）
  - align="center"：居中（样式设置统一居中）
- <thead><tbody><tfoot>
  - 这三个标签需要同时存在，哪怕没有tfoot内容，也需要放置空标签
  - 页面加载，会优先在家页眉和页尾
  - 如果没有这三个标签，会等数据加载出来才会渲染表格
  - 这三个标签顺序可以自由排列，但不影响最终效果

iframe

掘金好文# 你不了解的iframe

关于不使用的标签

<br>
- 每个浏览器换行的间隔不一样
<hr>
- 每个浏览器显示的分割线效果不同

<frameset>

页面加载过慢
js交互不友好
对搜索引擎不友好
不能放在 body 标签内

    <!-- frameset 布局示例 -->
    <frameset rows="10%, 90%">
        <frame src="top.html" />
        <frameset cols="20%, 80%">
            <frame src="left.html" />
            <frame name="mainFrame" src="http://baidu.com />
        </frameset>
    </frameset>
复制代码

关于空格

<!--正常换行-->
<div style="width:100px;height:100px;border: 1px solid #000">
  我               
  
    是前端工程师我是前端工程师
</div>
复制代码

释

空格换行都属于文本分隔符

关于换行

<!--正常换行-->
<div style="width:100px;height:100px;border: 1px solid #000">
  我是前端工程师我是前端工程师
</div>
<!--不换行-->
<div style="width:100px;height:100px;border: 1px solid #000">
  asidjfisadfsadfiosadjfiosadjfsadof
</div>
<!--正常换行-->
<div style="width:100px;height:100px;border: 1px solid #000">
  I'm a front end engineer
</div>
复制代码