HTML总结
一.基本概念
1.网站和网页
（1）网站由N个网页组成，网页中包含文字，图片，视频，音频，链接，程序等等......
（2）网页的内容由Html技术实现
（3）网页的后缀通常都是.html
2.常见的浏览器
（1）谷歌
（2）火狐
（3）欧朋
（4）Safari
（5）IE
（6）不同的浏览器有不同的内核
3.网页结构
网页总共有3层结构：结构层，样式层，交互层。
（1）结构层使用Html技术实现
（2）样式层给网页提供样式美化
（3）交互层使用JS来实现，JavaScript是前端程序员最应该掌握的技术
4.开发工具
（1）Vs Code工具: 小巧，插件强大，功能齐全，推荐使用
（2）HBuilder X:国产软件
（3）DW:使用的较少，不推荐使用
5.标签，属性，元素
（1）标签：标签是由<>组成，标签分为单标签，双标签，行标签，块标签还有人妖标签，标签和标签之间有关系，分父子关系和兄弟关系。
（2）属性：属性写在开始标签中，以xxxx="xxxx"这种形式出现，一个标签可以有N个属性。
（3）属性分为两类，公有属性和特有属性。公有属性:class,id,title,style.
（4）元素:标签+属性+标签之间的内容。
二.HTML的基本框架
1.文档声明： html5的文档声明，告诉浏览器我们以什么样的标准来写我们的代码。
2.html元素：是一个网页的根元素，lang属性是指定网页的语言 zh-cn表示中文。
3.head元素：网页的头部标签，基本上对网页的样式设置都会在head实现
(1)title属性:指定网页的标题，比如
<html>
<head>
<title>你好世界</title>
</head>
</html>
(2)meta属性:charset="utf-8"如果不指定会出现乱码
4.body元素：网页的主要内容都是写在body中，是网页的主题
三.常用的标签
1.h标签-标题标签：h标签由h1到h6逐级递减
<h1>你好我是h1标签</h1>
<h2>你好我是h2标签</h2>
<h3>你好我是h3标签</h3>
<h4>你好我是h4标签</h4>
<h5>你好我是h5标签</h5>
<h6>你好我是h6标签</h6>
2.p标签-段落标签:浏览器会自动换行
<P>
我是段落标签，独占一行
</P>
3.br标签-换行标签：使用br标签会强制换行，是单标签
<br>
4.文本格式化
(1)加粗标签-strong:使字体变粗
<strong>加粗标签</strong>
(2)倾斜标签-em标签或者i标签:使字体倾斜
<em>倾斜标签</em>
<i>倾斜标签</i>
(3)删除线-del或者s标签
<del>删除线</del>
<s>删除线</s>
(4)下划线-ins标签或者u标签
<Ins>下划线</Ins>
<u>下划线</u>
5.无语义标签-div标签和span标签
<div>
我是一个div
</div>
<span>我是span标签</span>
6.图片标签:单标签-
(1)属性
src:图片的路径来源
alt:当图片加载错误显示的提示文字
title：把鼠标放在图片上显示的文字
width:图片的宽度
height:图片的高度
border:图片的边框
<img src="图片路径" alt="当图片加载错误显示的提示文字" title="把鼠标放在图片上显示的文字" width="图片的宽度" height="图片的高度" border="图片的边框">
(2).属性的特点
(1)属性之间部分先后顺序
(2)属性名与属性值之间以键值的形式存在
(3)属性名与属性值之间以等号分割 属性值要以引号包裹
7.路径和链接
(1)路径
相对路径:在同一个文件夹直接找名字，../向上一级,/向下
绝对路径
属性：
href:制定跳转的页面
title:鼠标悬停显示的文字
target:_self(默认会覆盖原来的窗口) _blank(会以新的窗口打开) 窗口的打开方式
(3)锚点
连接使用井号
目标标签id值与链接井号后面一致
8.注释与特殊字符
<!--我是注释-->编辑器使用Ctrl+/快捷键
四.列表标签
1.无序列表-
<ul>
<li>无序列表</li>
</ul>
2.有序列表-
<ol>
<Li>有序列表</Li>
</ol>
3.自定义列表-
<dl>
<dt>自定义列表</dt>
<dd>自定义列表</dd>
</dl>
五.表格类标签
1.标签
(1)表格-
<table>
</table>
(2)行-
<tr></tr>
(3)单元格-
<table>
<tr><td>单元格</td></tr>
</table>
(4)表头-，加粗 加黑 自动居中
<table>
<tr><th>表头</th></tr>
</table>
(5)居中 显示外部 写在内部 表格的标题-
<table>
<caption></caption>
</table>
(6)结构头-
<thead></thead>
(7)结构体-
<tbody></tbody>
(8)结构底-
<tfoot></tfoot>
2.属性
(1)width:宽度
(2)height:高度
(3)cellspacing:单元格与单元格之间的高度
(4)cellspadding:单元格与内容之间的距离
(5)align:left/center/right:注意:当给表格设置居中整个表格会居中(文字不会居中) 当指定tr 或者td 文字居中
(6)colspan:列合并
(7)rowspan:行合并
六.表单类标签
1.input属性
(1)text:文本框
<input type="text">
(2)password:密码框
<input type="password">
(3)radio:单选按钮
<input type="password">
(4)checkbox:复选框
<input type="checkbox">
(5)button:普通按钮
<input type="button">
(6)reset:重置按钮 需要配合form表单才有作用
<form action="">
<button type="reset">重置</button>
</form>
(7)submit:提交按钮
<form action="">
<button type="submit">提交</button>
</form>
(8)image 属性 src
<input type="image">
(9)file文件按钮 上传图片
<input type="file">
2.name属性
(1).发送后台...
(2).name的标识对于单选按钮只能选择一个
3.value:文本框默认显示的文字
4.默认选中:checked 可以写一个属性 也可以属性名=属性值
5.label用法
(1).请输入
(2).请输入
6.文本域
<textarea name="" id="" cols="30" rows="10"></textarea>
7.下拉列表
<select name="" id="">
<option value="">选项一</option>
<option value="">选项二</option>
<option value="">选项三</option>
</select>
8.form表单
(1)action:提交后的地址
(2)method="get/post" 提交(传输)后台的方式
(3)name="a"高速服务器 有那个表单提交过来的
<form action="" method="" name=""></form>
\
