一.html文档结构的功能与作用
1.<!DOCTYPE html>文档类型元素相当于一个自我介绍
<!DOCTYPE html>
2.lang=”zh-CN”是一个属性，lang键，zh-CN值
<html lang="zh-CN">
3.根元素只有两个子元素，html是根元素，<head><body>是子元素。
<head>是给开发者看的，属于一个头元素，搜索引擎seo
4.UTF-8是一个页面编码
<meta charset="UTF-8">
5.X_UA-compatible兼容模式，content=”IE=edge是一个将采用浏览器支持的最高文档模式渲染页面
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6.viewport是一个可视窗口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7.页面标题，在网址上方，标题搜索引擎seo
<title>Document</title>
二.页面显示的主体结构，单标签，双标签，用户可以看到的页面
<!-- height身高，weight体重，bwh三围 --> <girl-fiend height="170" weight="110" bwh="88.86.84"> 朱老师</girl-fiend> <!-- 元素：老师--> 标签：<girl-fiend> 属性:height身高，weight体重,bwh三围(bust胸部,waist腰部,hips臀部) 预制标签：w3c制定，各家浏览器实现
1.双标签：起始标签和结束标签，内容写到他们之间，属性写到起始标签中
2.单标签：空标签，他的内容由某个属性来设置，本质上的“资源占位符”
<input type="text" value="admin"><img src="url" alt="图片不显示，显示文字"><link rel="stylesheet" href="css">
3.双标签:自身内容，由开发人员自己写
单标签：外部资源的占位符，空标签 预定义标签:<h1> <input><div><ul> 预定义属性:id,class,style,src,type,value,name... 自定义标签：<girl-friend> 自定义属性:height,weight,bwh(bust,waist,hips) 标准化自定义属性:“data-”自定义属性前缀 -->
<h1 id="uname" data-email="qq@qq.com">文本</h1>
4.div+class是主流
<div class="header">页眉</div> <div class="main">主体</div> <div class="footer">页脚</div>
5.语义化
<header>页眉</header> <main>主体</main> <footer>页脚</footer>
6.tag+class
<div class="article header">页眉</div> <div class="article main">主体</div> <div class="article footer">页脚</div> <style> .article.header { color: green; } </style>
三.图文语义化
1.传统的图文解决方案
<div class="box"> <img src="url" alt="php中文网"> emmet: <p class="tetle">前端开发</p> </div>
2.语义化图文解决方案
<figure> <a href=""> <img src="url" alt="php中文网钟老师"> </a> <figcaption>php中文网22期教学</figcaption> </figure>
3.链接
<a href="https://php.cn">钟老师</a>
4._self当前窗口
<a href="https://php.cn" target="_blank"> <button>登陆</button> </a> <a href="https://php.cn"> <imgsrc="https://img.php.cn/upload/webcode/000/887/227/63bf9e0e37573421.png" alt="二十二期前端开发"> </a>
四.有序列表，无序列表，自定义列表
无序列表ul+li
语义化ul>li{item$}*6
<ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li></ul>
语义化 ul>li*5>a{link$}
<ul> <li><a href="demo1.html">link1</a></li> <li><a href="demo2.html">link2</a></li> <li><a href="demo3.html">link3</a></li> <li><a href="demo2.html">link4</a></li> <li><a href="demo2.html">link5</a></li> <li><a href="demo2.html">link6</a></li></ul>
有序列表ol+li
语义化 ol>li{item$}*5
<ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li></ol>
自定义列表dl dt dd
<dl> <!-- 标题 --> <dt>1/13作业</dt> <!-- 描述内容 --> <dd>完成作业</dd></dl>
