1. html 文档结构
- element = tag + attribute
- 元素 = 标签 + 属性
- html文档 =
<!DOCTYPE> + <html> - html文档根元素 =
<head> + <body>
2.html 渲染方式
- 自动修复: 校正语法,缺失元素
- 显示顺序: 书写顺序一致,左->右,上->下,同步/异步.
3. html 页面三宝
- element: DOM元素
- css: 层叠样式表
- JavaScript: 前端脚本
4. html 渲染
- 排列顺序: 可以自定义
- 元素类型:
- 块 block:
h1,p,div,ul,table,footer,nav等等; - 行内 inline:
a,li等; - 行内块 inline-block: 通常用来描述外部资源,图像,视频,表单控件等;
- 行内元素,默认”水平排列”, 自动换行,默认从左到右显示;
- 可以通过自定义布局和JS调整显示位置;
5. Emmet语法
<!-- 1. 标签与内容 `{text}` --><!-- 2. 属性与语法糖 [键值对]{内容} --><!-- [id=app]{app} --><!-- [class="title"]{title} --><!-- #app{app1} --><!-- .title{title} --><!-- 3. 重复: '*' --><!-- .container{box}*3 --><!-- 4. 父与子: `*` --><!-- ul>li{item}*3 --><!-- 5. 兄弟关系: `+` --><!-- h3{标题}+p{内容} --><!-- 6. 父级: '^' --><!-- .box>span{text}^h3{小标题} --><!-- 7. 分组: '(...)' --><!-- nav>h3{导航}+ul>li*3>a{link} --><!-- 8. 序号: '$','$@3' --><!-- ul>li{item-$@3}*3 -->
