![]()
HTML 知识
MDN: https://developer.mozilla.org
![]()
1. 文档结构
结构化: 层级,树形(根,枝,叶)
DOM: 文档对象模型
文档: html 文档
对象: 文档及内部成员
模型: 文档结构抽象表示
注: html 不区分大小写, 但推荐全小写
![]()
2. 元素,标签与属性
元素: 页面成员
标签: 描述元素
属性: 标签特征
![]()
3. 标签
双标签: 元素
空标签: 元素占位符
预定义标签: 浏览器自动识别,有预定义样式
自定义标签: 内容和行为由用户自定义后浏览器才能识别
![]()
4. 属性
使用键值对描述,
class="title"预定义属性:
id,class,style,src,type,name,...通用属性:
id,class,style自定义属性:
data-前缀,如data-email
![]()
5. 语义化布局标签
优点直观,SEO,缺点数量有限,且层级会过深
有限的回退到
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>