1、文档结构
<!-- 1.文档类型元素 --><!-- 2.根元素：浏览器渲染html的起点，入口 --><!-- lang="zh-cn"：属性，标签的特征，用“键，值对”的方式来表示 --><html lang="zh-cn"><!-- 根元素只有两个子元素 <head><body> --><!-- 2.1 头元素：浏览器，搜索引擎SEO --><head><!-- 2.1.1 元标签，中介，媒婆 --><!-- 页面编码 --><meta charset="utf-8" /><!-- 兼容模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome" /><!-- 视口设置：视口（可视窗口） --><meta name="viewport" content="width=device-width, initial-scale=1" /><!-- 页面标题 --><title>html结构</title><!-- 页面主体 --><body><!-- <girl-friend height="170" weight="110" bwh="88,86,84">小小</girl-friend> --><!--1. 元素: 女朋友2. 标签: <girl-friend>，自定义标签3. 属性: height,weight,bwh(bust,waist,hips)通用属性, 姓名,性别,年龄,学历--><h1 id="header" class="title" style="color: red">Hello, world</h1><!--1. 元素: 大标题2. 标签: <h1>3. 属性: id,class,style (通用属性/预定义)，ID属性优先级高预置标签: w3c制定,各家浏览器实现--><!-- 双标签: 起始标签和结束标签,内容写到他们之间,属性写到起始标签中 --><!-- 单标签: 空标签,它的内容由某个属性来设置,本质上"资源占位符" --><!-- <input type="text" value="admin" /><img src="url" alt="" /><link rel="stylesheet" href="style.css" /> --><!--1. 双标签: 自身内容,由开发人员自己写2. 单标签: 外部资源的占位符,空标签3. 预定义标签: <h1>,<input>,<div>,<ul>...4. 预定义属性: id,class,style,src,type,value,name...5. 自定义标签: <girl-friend>6. 自定义属性: height,weight,bwh(bust,waist,hips)7. 标准化的自定义属性: "data-"自定义属性固定前缀--><!--标准化的自定义属性："data-"自定义属性固定前缀。 `data-`前缀，如`data-email`--><h3 data-email="1499@qq.com">测试</h3><!--document.querySelector('h3').dataset.email'1499@qq.com'--></body></head></html>
二、元素布局
<!-- 传统 div + id --># 传统页面内容布局少可用<div id="header">页眉</div><div id="main">主体</div><div id="footer">页脚</div><!-- # : 表示 id --># 自动生成：<!-- div#header{页头} --><!-- #header{页头} --><!-- <div id="header">页头</div> --><!-- 优化: div + class 目前是主流 --><div class="header" id="header">页眉</div><div class="main">主体</div><div class="footer">页脚</div><!-- emmet: . 表示class --># 自动生成：<!-- <div class="footer">xxxx</div> --><!-- 默认标签就是div,可不写 --><!-- <div class="footer">xxxx</div> --><!-- class权重要小于id --><hr /><!-- 语义化 --><header>页眉</header><main>主体</main><footer>页脚</footer><!-- 标签权重更低更好,一目了然,直观；但是数量有限 --><hr /><!-- <style># 给header标签给予属性，颜色为红色.article.header {color: red;}</style><article><header class="article header">文章头部</header><main>文章主体</main><footer>文章底部</footer></article> --><!-- 语义化标签,数量有限,且会导致元素的层级过深 --><!-- tag + class --><div class="article header">文章头部</div><p class="article main">文章主体</p><div class="article footer">文章底部</div>
3、图文语义化
<!-- 语义化 --><figure><!-- 图片 --><a href=""> <!--可放链接--><img src="https://img.php.cn/upload/course/000/000/068/6396fa6140e14800.png" alt="" /></a><!-- 文字 --><figcaption>第二十二期_前端开发</figcaption></figure>
4、演示图像,链接
<!-- 图像 --><img src="https://img.php.cn/upload/course/000/000/068/6396fa6140e14800.png" alt="php.cn22期" width="200" /><!-- 链接 --><a href="https://php.cn">php.cn</a><!--文字点击跳转--><a href="https://php.cn" target="_blank"><!--常用前2个：_blank：新窗口打开链接_self：当前窗口打开链接_parent：在父级框架打开链接_top：在整个窗口中打开链接framename：在指定框架中打开链接--><button>click</button><!-- 按钮点击跳转 --></a><a href="https://www.php.cn/course/1492.html"><img src="https://img.php.cn/upload/course/000/000/068/6396fa6140e14800.png" alt="php.cn22期" width="200"/></a><!-- A标签里面的是点击跳转内容方式 -->
5、列表元素
<!-- 列表 --><!-- 无序 ul+li--><!-- 有序 ol+li--><!-- 自动填写：ul>li*2{item$} --><!-- 1. 无序 ul+li 复合元素,用一组标签进行描述 --><ul><li>item1</li><li>item2</li></ul><ol><li>item1</li><li>item2</li></ol><!-- 自定义列表: 类似名词解释,dl+dt+dd --><dl><!-- 标题 --><dt>html:</dt><!-- 内容 --><dd>结构化标记语言</dd></dl>
```