html总结（基础知识笔记）
一.基本概念
初始html
网站和网页
1.网站中有N个网页
2.网页中包含：文字，图片，视频，音频，链接，程序...
3.网页的内容由html实现
4.网页的后缀通常都是.html
浏览器和渲染引擎
1.常见的浏览器：谷歌，火狐，IE，Safari，欧朋
2.不同的浏览器有不同的内核（渲染引擎）
网页的三层结构
1.结构层：使用html技术实现，说白了，就是给网页提供内容
2.样式层：给网页提供样式 （布局，美化）
3.交互层：使用JS实现，JS是前端程序员最最最需要掌握的技术
开发工具的选择
推荐使用Vs Code工具，好处：小巧，插件多
VS COde里的快捷键
shift + alt + 向下箭头 => 复制上一行 tab => 向后移动代码 shift + tab => 向前移动代码 ! + tab => html基本骨架 !是英文的! div.wraper + tab => 生成一个带名字的div 鼠标中键 + 向下拽 => 同时选中多行
键盘上的del键 => 删除文件 F2 => 重命名 shift + alt + f => 格式化代码 ctrl + f => 查找内容并替换内容
标签，属性，元素
1.标签：标签都是使用<>包起来的，分单标签和双标签，分男标签（块级标签），女标签（行级标签），人妖标签（行内块标签） 标签与标签之间是有关系的，分兄弟关系和父子关系
2.属性：写在开始标签中，以xxx="xxx"这种形式出现，一个标签中可以有N个属性 属性也分两类：公有属性，特有属性 公有属性：class，id，title，style
3.元素：标签+属性+标签之间的内容
二.html的基本骨架
文档声明
html5的文档声明
html元素：是一个网页的根元素，只有这一个
lang属性：指定网页的语言 zh-CN表示中文
head元素：是网页的头部：基本上在对网页的设置，都会在head实现 title属性：指定网页的标题 meta属性：charset="utf-8" 如果不指定，会出现乱码
body元素：网页主要的内容都是写在body中的
三.html常用的标签
h系列 > h1-h6 逐级递减
如下：
p标签 >
段落标签 浏览器会自适应换行
换行标签 >
<br/> 单标签，强制换行
文本格式化系列标签 >
加粗： <strong></strong>-或者-<b></b>
倾斜： <em></em>-或者-<i></i>
删除线： <del></del>-或者-<s></s>
下划线： <ins></ins>-或者-<u></u>
无语义标签 >
<div></div> 可以理解为盒子标签，用来页面布局
<span></span> 属于行内元素，用法多元化，配合自己理解
图片标签 > ![]()
属性
src：图片的路径（来源）
alt：当图片加载错误时显示的文字
title：当鼠标悬停在图片上显示的文字
width：图片的宽度
height：图片的高度
border：图片的边框
属性的特点
1.属性之间的部分先后顺序
2.属性名与属性值之间以等号分隔 属性值要以引导包裹；
3.属性名与属性值之间以键值对的形式存在
路径与链接 >
路径
从当前路径出发，一级一级找，用./或../ 相对路径 向上一级../ 向下/
绝对路径
从根目录出发，一级一级直到找到文件
链接标签 a >
外部链接: <a href="http://www.qq.com"></a>写完整的 协议 域名 网址
内部链接: <a href= "index.html"> </a>直接写文件名即可
属性 >
href：指定跳转的页面
titlt：鼠标悬停显示的属性
target：_self(默认会覆盖原来的窗口)
_biank(会以新的窗口打开)，窗口的打开方式
#：会阻止页面跳转但是会刷新页面
锚点 >
链接使用# > 目标标签id值与连接#号后面一致
注释与特殊字符 >
注释 >
<!-- 我是注释 --> > 编辑器使用Ctrl+/快捷键
特殊字符 >
| 转义符 | 写法 | 样式 | |
|---|---|---|---|
| 大于 | > | 注意加;号 | |
| 小于 | < | < | 注意加;号 |
| 圈R | ® | ® | 注意加;号 |
| 圈C | © | © | 注意加;号 |
| TM | &trade | ™ | 注意加;号 |
| 钱 | ¥ | ¥ | 注意加;号 |
| 摄氏度 | ° | °C | 注意加;号 |
四.列表类标签 >
有序，无序，自定义（列表）>
无序列表：<ul><li></li></ul>
无序列表：<ol><li></li></ol>
无序列表：<dl><dt></dt><dd></dd></dl>
五.表格类标签 >
标签 >
表格 table
表格中的行 tr(table row)
表格的表头单元格 th
行中的单元格 td(table data)
表格的标题 caption
表格的表头 thead
表格的主体 tbody
表格的页脚 tfoot
表示边框 border
去掉边框之间的间隙 cellspacing
表示跨行 后面数字表示跨几行 rowspan
表示跨列 后面数字表示跨几列 colspan
属性 >
sellspacion： 单元格与单元格之间的距离
sellspadding：单元格与内容之间的距离
colspan： 列合并
rowspan： 行合并
注意:当给表格设置居中整个表格会居中(文字不会居中)当指定tr 或者td文字居中
e align: left/center/right
六.表单类标签 >
表单属性 >
表单
dorm 表单
input 单行文本输入框 复选框 单选框 按钮等元素
textarea 多行文本框
select option 下拉选择框
button 按钮
label 表单元素的标题
input元素的使用 >
input元素中的type属性: （表单控件）
1.text： 文本输入框（明文输入）
password： 文本输入框（密文输入）
3.radio： 单选框 可以使用name实现多选一
checked 表示默认选中
4.checkbox： 复选框
5.button： 按钮
6.reset： 重置
7.submit： 提交表单数据给后端服务器
8.file： 文件上传 使用multiple表示多文件选择
input元素中的其它属性 >
1.readonly： 只读
2.disabled： 禁用
3.checked： 默认被选中，只有当type为radio或checkbox时可用
4.autofocus： 当页面加载时，自动聚焦
5.name： 名字，提交数据给服务器时，用于区分数据类型
6.placeholder： 提醒用户输入信息内容
7.value： 表示输入框中的内容
后端接收到数据的格式是：name的属性值 = value的属性值
