020113 HTML 知识

HTML 知识

MDN: https://developer.mozilla.org

1. 文档结构

1. 结构化: 层级,树形(根,枝,叶)

2. DOM: 文档对象模型

1. 文档: html 文档

2. 对象: 文档及内部成员

3. 模型: 文档结构抽象表示

注: html 不区分大小写, 但推荐全小写

2. 元素,标签与属性

1. 元素: 页面成员

2. 标签: 描述元素

3. 属性: 标签特征

3. 标签

1. 双标签: 元素

2. 空标签: 元素占位符

3. 预定义标签: 浏览器自动识别,有预定义样式

4. 自定义标签: 内容和行为由用户自定义后浏览器才能识别

4. 属性

1. 使用键值对描述,class="title"

2. 预定义属性: id,class,style,src,type,name,...

3. 通用属性: id,class,style

4. 自定义属性: data-前缀,如data-email

5. 语义化布局标签

1. 优点直观,SEO,缺点数量有限,且层级会过深

2. 有限的回退到tag + class,如<div class="xxxx">

6. 图文元素

<figure>  <img src="xxxx" alt="xxxx" />  <figcaption>title</figcaption></figure>

7. 图像,链接,列表

<!-- 图像 --><img src="url" alt="title" /><!-- 链接 --><a href="url" target="_blank">link</a><!-- 列表 --><!-- 无序 --><ul>  <li>item1</li>  <li>item2</li>  <li>item3</li></ul><!-- 有序 --><ol>  <li>item1</li>  <li>item2</li>  <li>item3</li></ol><!-- 自定义 --><dl>  <dt>title</dt>  <dd>description</dd></dl>