html文档分析
//文档头--告诉浏览器用哪种方式编译代码
<!DOCTYPE html>
//文档体hmtl标签中包含head、body标签--lang设置语言，当前cn代表中文，en代表英文
<html lang="cn">
//head头部放置的是配置文件，后面css样式（内联、外链）也会放入head头部标签内
<head>
//charset设置编码方式
<meta charset="UTF-8">
//视口标签
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
//title标签--网页标题
<title>Document</title>
</head>
//body标签内书写自己的代码，书写网页结构
<body>
</body>
</html>
html基本标签、属性
//标签属性<标签名 K='v'>，如下标签为例，img就是标签名，src、alt、title都是k，k代表属性（一个标签可以有多个属性，属性之间用空格隔开），v代表属性的值，src放置图片地址，alt在img不能正常显示图片的时候提示文字，title鼠标在标签上停留会显示对应文字
<img src='logo.png' alt='logo图片' title='页面logo'>
//常用标签
//img引入图片
<img src=''>
//放在head头部内。内属性rel定义文档与外部资源的关系,href链接外部资源位置。rel='stylesheet'为css样式，href为css格式，rel为shortcut icon时设置网页标题前的小图标，href为ico格式，一般名字为favicon.ioc,type属性为'image/x-icon'。
//css也可以在head内添加<style></style>标签，内直接书写css样式。也可以在行内直接书写，不过维护艰难、权重过高，强烈不建议使用行内css样式
//行内样式：<p style='color:#ffffff'></p>
<link rel='stylesheet' href='cssname.css'>
<link rel='' href='favicon.ico' type='image/x-icon'>
//JavaScript，一般建议放在文档底部，也可以放head内，需要设置网页加载完成后再执行，否则可能获取不到html标签。可以直接在标签内写入js代码，也可以加src属性引入外部js文件。
<script src='jsname.js'></script>
//h1-h6标题标签，一般一个网页只有能一个h1标签，h1语义非常重，一般作网页引入logo，两个h2标签，三个h3标签，其余不限。使用标签的目的不是为了程序员，而是浏览器排名，正确使用标签可以使网页排名更靠前。
<h1></h1>
//p段落标签，引入一段文字，一般不内嵌p或者其他块级标签，可以内嵌a标签或者小标签span、b、em、i、u等行内标签
<p></p>
//a超链接标签，href放置的是跳转页面或者位置的地址，target属性是_blank的时候，页面会在新标签页打开，不写或者为_self的时候在本标签页打开。a标签可内嵌任何有需要跳转功能的标签。
<a href='' target=''></a>
//ul ol列表标签，需要内嵌li标签，ul是无序列表，ol是有序列表。ul用来实现类似的布局，导航栏一般都用ul li实现。
<ul>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
</ol>
//div用来实现布局
<div></div>
//小标签语义轻，用来引入小元素
<span></span>无格式
<b></b>加粗
<i></i>斜体
<em></em>强调文本，斜体
<u></u>下划线标签
<del></del>删除线，一般代表已删除文本
<ins></ins>插入下划线，一般代表新添加的文本
<sup></sup>上标
<sub></sub>下标
**常用网页框架标签**
<header>页头</header>
<nav>导航栏</nav>
<main>主体</main>
<aside>侧边栏</aside>
<article>文章</article>
<footer>页脚</footer>
标签分类
**行内标签：**
span：无格式
a：超链接，可定义锚点，定义neme后可以在另一个a的href='#+name'连接锚点
b：字体加粗
big：大号字体加粗
i：斜体
em：强调文本斜体
u：下划线
del：删除线，一般代表已删除文本
ins：插入下划线，一般代表新添加的文本
strong：语气更强的强调的内容
br：换行
cite：引用进行定义
code：定义计算机代码文本
label：备注标签
select：单选或多选下拉列表
small：小号字体效果
sup：上标
sub：下标
textarea：文本域
audio：src引入音频文件
video：src引入视频文件
iframe：src嵌入子页面，有frameborder属性
等
**行内块标签：**
img：引入图片
input：定义输入框、按钮、单选多选框等
td：在table的tr里定义列
**块级标签：**
<header>页头</header>
<nav>导航栏</nav>
<main>主体</main>
<aside>侧边栏</aside>
<article>文章</article>
<footer>页脚</footer>
section：解释文档，定义文档的某个区域，比如章节，头部，底部或文档其他区域。可以内嵌标签
-----以上标签还是html新添标签
caption：定义表格标题
dd：定义列表中定义条目
dl：定义列表
dt：定义列表中的项目
div：定义文档中的分区或节
form：创建html表单
h1：定义最大标题
h2：定义副标题
h3-h5：定义标题
h6：定义最小标题
hr：水平线
fieldset：元素可将表单内的相关元素分组
legen：为fieldset元素定义标题，必须与fieldset标签内搭配使用，不然无效果，无意义
ul：定义无序列表
ol：定义有序列表
li：定义列表项目，在ul、ol中使用
p：定义一段文字
table：定义html表格，th标签定义标题，tr定义行，td定义列
**自闭合标签**
input：定义输入框、按钮、单选多选框等
meta：提供有关页面的元信息
link：内属性rel定义文档与外部资源的关系，href链接外部资源位置
br：换行
hr：水平线
img：引入图片
标准流
一般写网页优先使用标准流，具有稳定性，然float，再position。不建议使用relative。
标准流：
行内标签
块级标签
非：
行内块
加float浮动的标签（自动变为行内块）
position中
fixed：固定位置，脱离标准流，有四个坐标
absolute：绝对位置，脱离标准流，有四个坐标（需在父元素添加相对定位）
relative：相对位置，半脱离标准流，没有四个坐标，占用本来的位置
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
