# html总结
html的基本概念
网页和网站
- 网站中包含许多个网页
- 网页是由n个网页组成的网站,每个网页中都可以包含图片，文字，视频，超链接以及程序
- 网页的内容一般由html实现，网页的后缀都是html
网页的三层结构
- 结构层：由html实现，主要是用来给网页提供内容
- 样式层：由css实现，主要给网页进行美化
- 交互层：由js实现，主要是用来与服务器进行交流，同时js也是前端程序员最重要的技术
渲染引擎
- html一般由客户端承载，常用的客户端一般为浏览器和手机app
- 不同的客户端有不同的渲染引擎，常用的客户端为谷歌、火狐、edge、safari以及欧朋浏览器
开发工具
- 推荐使用vscode工具，推荐原因：小巧、方便、插件多
vscode中常用的个快捷按键
- shift+alt+向下箭头 => 复制上一行
- tab => 向后移动代码
- ! +tab => HTML的基本骨架，注意区分！号的中英文
- shift + tab = >向前移动代码
- div + xxx + tab =>生成一个带名字的div,"xxx"是div的名字
- 鼠标中键 + 向下拖拽 => 同时选中多行
- del = 快速删除选中的代码
- F2 = 重命名
- shift + alt + f =>格式化代码
- ctrl +f =>查找并替换内容
- Ctrl + / => 快速注释
标签、属性、元素
- 标签都是用<>包起来的，标签一般分为两种，分别是但标签和双标签，单双标签又分为男标签、女标签和人妖标签。
- 标签与标签之间的关系分为两种：分别是男标签和女标签
常见的标签
- 文本标题标签：h1-h6 特点是字体加粗变大并且逐级减小且独占一行
-
运行效果如下
- 段落标签：<p></p> 主要作用与文章分段，特点是段落之间有缝隙、独占一行
- 运行效果如下
- 换行标签：<br> 主要用来让文字强制换行 是一个单标签
- 运行效果如下
- 水平分割线：在页面中显示一条水平线，用来分隔内容。特点是：单标签
- 文本修饰标签 1.<b></b>和<strong></strong>作用：用来让文字加粗。区别：<b></b>仅仅有是加粗<strong></strong>不仅仅有加粗的意思还用来强调语境
2.<u></u>和<ins></ins>作用：主要用来在文字下面加上一条下划线。区别：<u></u>仅仅有是加粗<ins></ins>不仅仅有加粗的意思还用来强调语境
3.<i></i>和<em></em>作用：用来让字体倾斜。区别：<i></i>仅仅有是加粗<em></em>不仅仅有加粗的意思还用来强调语境
4.<s></s>和<del></del>作用：用来给文字添加一条删除线。区别：<s></s>仅仅有是加粗<del></del>不仅仅有加粗的意思还用来强调语境
- 图片标签：<img>:主要用来显示一张图片。特点：<img>标签需要借助标签的属性才能发挥作用、此标签可以并排显示（人妖标签）
- 图片的路径：图片的路径分为绝对路径和相对路径 1.绝对路径：一般是指图片的绝对位置，可直接到达目标位置。
2.相对路径：一般从当前文件夹出发开始寻找目标
2.无序列表：<ul><li></li></ul>
3.自定义列表：<dl><dd></dd><dt></dt></dl>
- 表格类标签： 1.<table></table>:表格
2.<tr></tr>:行
3.<td></td>:单元格
4.<th></th>:表头、加粗、加黑、自动居中
5.<caption></caption>:表格的标题，写在内部显示在外部、自动居中
6.<thead></thead>:结构头
7.<tbody></tbody>:结构体
8.<tfoot></tfoot>:结构底、
- 表单类标签
1.form表单：主要作用是手机客户端信息发送给后台
- action：提交给后台的地址
- method="get/post":提交给后台的方式
- name="a"告诉服务器由哪个表单提交过来的 2.下拉列表：
3.文本域textarea：主要用来让用户留言
4.label：用来链接文字与输入框，让用户点击文字也能聚焦到对应的输入框
5.input属性：需要配合对应的属性才能发挥作用
属性
- 分为公有属性和私有属性 1.共有属性有：class、id、title、style等
2.私有属性：src等
- 表格标签的属性： 1.border：表格的边框，默认是0
2.width：表格的宽度
3.height：高度
4.cellspacing：单元格与单元格之间的距离
5.cellspadding：单元格与内容之间的距离
6.align：life/center/right使代码向左、中、右居中
7.colspan：合并单元格的列
8.rowspan：合并单元格的行
- 表单类标签的属性
1.input属性：
- text：文本框
- password：密码框
- radio：单选按钮
- checkbox：复选按钮
- button：普通按钮
- reset：需要配合form表单才能有用，一般用来重置表单中的选项
- submit：提交按钮
- image：属性src
- file：用来上传文件 2.name属性：对于单选按钮，只能选一个
3.value属性：文本框默认现实的文字
4.checked属性：默认选中
元素
- 元素：标签+属性+标签之间的内容
HTML的基本框架
文档声明
- ：用来告诉浏览器以什么样的标准来解析代码
html元素
- 每个网页都有一个html元素并且只有一个，是网页的根元素
- lang属性：用来指定网页的语言
head元素
- 网页的头部，基本上对网页的设置都会在此标签里面实现
- title属性：用来指定整个网页的标题
- meta属性：用来指定解码方式，一般用charest="utf-8"如果不指定可能会出现乱码
body元素
- 用来包含网页的主要内容，基本上网页的所有内容都是写在这里面
注释
- 一般用<!---->
小结：
- 网页框架主要运用html中的各种标签以及属性进行编写，搞清楚各种标签配合各个属性的作用就可以写出基本的网页框架。
