html5和css3入门知识点概括

一.前言

        在看了前面的几个案例，想必大家对这个产生了很大的兴趣，所以我特意将之前我们所用到的知识点以及其余必备知识都给大家整理出来了，其中标注红色字体的为比较重要的内容，并不代表其他知识就不需要了哦。

二.

​​​P1:

1. 标签有2种关系，分别是父子关系（嵌套），兄弟关系（并列）
2. vscode自带父子关系跟兄弟关系的对应关系
3. 向后缩进：tab；
4. 向前缩进：shift+tab

P2:

1. 注释：注释能方便理解，方便查找或方便项目组里的其他程序员了解你的代码，而且可以方便以后你对自己代码进行修改。在学习和工作中，关键代码都要加注释。
2. <!--...--> 表示注释标签，用来在原文档中插入注释，注释不会在浏览器中显示。
3. 在vscode中，添加/删除注释的快捷键：Ctrl+/
4. 每次更新完代码之后，Ctrl+S对其进行保存。

P3:

1. 标题标签一般用在新闻标题，文章标题，网页区域名称，产品名称等
2. 标题标签名：h1~h6（双标签）
3. 显示特点：1）文字加粗 2）字号逐渐减小 3）独占一行（换行）
4. 在实际工作中，h1标签在一个网页中只能用一次，用来放新闻代码标题或网页的logo
5. 段落标签：一般用在新闻段落，文章段落，产品描述信息等等。
6. 段落标签名：p(双标签）
7. 显示特点：1）独占一行 2）段落之间存在间隙
8. 复制的快捷方式：点击要复制东西最左边的所在行数，然后再Ctrl+C

P4:

1. 换行：<br>(单标签）
2. 水平线：<hr>（单标签）
3. 在两行中间加上换行标签才能在浏览器显示换行后的结果，用enter换行浏览器不能识别。

P5：

1. 文本格式化标签作用：为文本添加特殊格式，以突出重点，常见的文本格式：加粗，倾斜，下划线，删除线等。
2. 标签的主要部分有：1）开始标签：包含元素的名称，被左，右角括号所包围，表示元素从这里开始或者开始起作用。2）结束标签：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾。 3）内容：元素的内容。
3. 文本格式化标签每一种效果都有两个标签名。一般选择strong表示加粗效果；em表示倾斜效果；ins表示下划线；del表示删除线。

P6:

1. 图像标签：作用在网页中插入图片。
2. <img src=”图片的URL”>
3. 其中src用于指定图像的位置和名称，是<img>的必须属性。
4. 当想插入一个图片时，以./开头，VScode会有提示功能。
5. 图像标签的属性：有四种：1)alt:作用是替换文本，当图片无法显示的时候显示的文字2)title：作用是提示文本，鼠标悬停在图片上面的时候显示的文字.     3)Width:作用是图片的宽度，值为数字，没有单位。 4) Height：作用是图片的高度，值为数字，没有单位。
6. 属性名=“属性值”
7. 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序。

P7:

1. 在相对路径写法中，.   表示当前文件所在文件夹。
2. ..   表示当前文件的上一级文件夹。
3. /   表示进入某个文件夹里面。
4. 绝对路径：从盘符出发查找目标文件，windows默认是\,其他系统是/，建议统一写为/
5. 还可以复制在线网址图片的地址。
6. 文件的在线网址是：https://www.qianduange.cn/upload/article/logo.png
7. 绝对路径的应用场景：友情链接。

P8:

1. 超链接：点击跳转到其他页面
2. 超链接标签：如：<a href=”www.baidu.com”>跳转到百度</a>
3. 也可以跳转到我们自己电脑上的文件所在位置（用相对路径)
4. 在href属性后面添加target=”_blank”就可以在新窗口打开网页
5. 开发初期，不知道超链接的跳转地址，href属性值写#,表示空链接，不会跳转。

P9：

1. 音频标签：<audio src=“”> </audio>
2. 在html5中，如果属性名与属性值相同，可简写一个单词
3. 音频标签中的属性：1）src为必须属性：作用是音频URL，支持的格式有mp3,ogg,wav 。    2)controls:显示音频控制面板 。3）loop：可循环播放。  4）autoplay:可自动播放，为了提高用户的体验，浏览器一般禁用了此功能。
4. 视频标签：<video src=””></vidio>
5. 视频标签的属性只比音频标签多了一个muted属性，用来静音播放。Autoplay属性在静音播放的前提下，能够自动播放。

P10:

1. 列表：作用是布局内容排列整齐的区域。
2. 列表分类：无序列表，有序列表，定义列表
3. 无序列表： 作用是布局排列整齐的不需要规定顺序的区域。
4. 无序列表标签：ul嵌套li,ul是无序列表，li是列表条目
5. ul标签里面只能包括li标签，li标签里面可以包裹任何内容。
6. 有序列表：需要规定顺序。
7. 有序列表标签：ol嵌套li，ol是有序列表，li是列表条目
8. ol标签里面只能包裹li标签。li标签里面可以包裹任何内容。
9. 定义列表：标签为dl,dl嵌套dt和dd，dt是定义列表的标题，dd是定义列表的描述/详情。
10. 同样的，dl里面只能包含dt和dd。dt和dd里面可以包含任何内容。

P11:

1. 表格标签：table嵌套tr,tr嵌套td和th.
2. 其中table为表格的标签名，tr为行，th为表头单元格，td为内容单元格。
3. 提示：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。
4. 表格结构标签：作用是用表格结构标签把内容划分区域，让表格结构更加清晰，语义更清晰。其中thead为表格头部标签，说明表格头部内容。tbody表示表格主题，说明主要内容区域。tfoot为表格底部，说明汇总信息区域。

P12:

1. 合并单元格：将多个单元格合并成一个单元格，以合并同类信息。
2. 合并单元格的步骤：1）明确合并目标  2）保留最左最上的单元格，添加属性（取值是数字，表示要合并的单元格数量），其中，跨行合并，保留最上单元格，添加属性rowspan。跨列合并，保留最左单元格，添加属性colspan 3）删除其他单元格。

P13:

1. 表单作用：收集用户信息。
2. 使用场景：登录页面，注册页面，搜索页面。
3. input标签type属性值不同，则功能不同
4. type属性值：1）text：文本框，用于输入单行文本
5. 2）password：密码框
6. 3）radio：单选框
7. 4）checkbox：多选框
8. 5）File：上传文件
9. input标签占位文本：提示信息。格式为：<input type=”...” placeholder=”提示信息”.
10. 深入单选框：常用属性有：name。作用是控件名称，说明控件分组，同组只能选中一个（实现了单选功能）。 2）checked：作用是默认选中，属性名跟属性值相同，简写为一个单词。
11. 深入文件：添加multiple属性，就能实现选择多个文件的功能。
12. 深入多选框：多选框也叫复选框。默认选中也是为checked

P14:

1. 下拉菜单：标签：select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项。
2. 下拉菜单的默认选中属性为selected，属性名跟属性值也是一样的。

P15:

1. 文本域作用：多行输入文本的表单控件。
2. 文本域标签：<textarea>默认提示文字</textarea>

P16:

1. label标签用来增大点击范围。
2. 写法一:label标签之包裹内容，不包裹表单控件。设置label标签堵塞for属性值和表单控件的id属性值相同。
3. 写法二：使用label标签直接包裹文字和表单控件，不需要属性。

P17:

1. button按钮：<button type=””>按钮</button>
2. 其中type的属性值有：1）submit,表示提交按钮，点击后可以提交数据到后台（默认功能） 2）reset,表示重置按钮，点击后将表单控件恢复默认值。 3）button,普通按钮，默认没有功能，一般配合javascript使用。
3. 注意，在使用清空按钮的时候，要将它们都存放到一个form的表单区域，统一管理才能实现功能，form有个属性为action，为发送数据的地址。

P18:

1. 无语义的布局标签：作用是布局网页（划分网页区域，拜访内容）
2. 其中div:独占一行；span：不换行。
3. 字符实体：作用是在网页中显示预留字符。其中空格的实体名称是&nbsp；小于号的实体名称是 &lt 大于号的实体名称是&gt.