HTML笔记（第一部分）

HTML（超文本标记语言）
超文本真正的含义：是指连接单个网站内或多个网站间网页的链接

——是HTML的基本组成单位，小写更加规范

1. 单标签
   （/可以省略）
   如：

2. 双标签（大部分都是）

如：

3. 标签之间的关系：并列关系，嵌套关系，可以使用tab键进行缩进

1. 用于给标签提供附加信息ℹ️
2. 形式：
   —>标签属性（写在起始标签或单标签中）
3. 有些特殊的属性，没有属性名，只有属性值，如：
4. 标签中不要出现同名的属性，否则后写的会失效
   如：

1. 在网页中，查看某段结构具体代码—鼠标右键，选择“检查”
2. “检查”看到的代码是经过浏览器处理之后的源代码
   “查看网页源代码”是程序员自己编写的源代码
3. 网页的基本结构
   （1）想要呈现在网页中的内容写在body标签中
   （2）head标签中的内容不会出现在网页中，head标签中的title标签可以指定网页的标题

1. 安装中文语言包
2. 使用VSCode打开文件夹的两种方式：可以直接在桌面右击文件夹选择使用Code 打开，或者打开VSCode 选择打开文件夹
3. 调整字体大小：左下角齿轮打开设置，搜索字体，选择字号即可
4. 设置主题

1. 在所写代码页右击，选择Open with Live Server (服务器打开)
2. 安装Live Server插件的好处：可以随时刷新，无需再次打开一个网页

运行时按下保存键的快捷键：ctrl+S
撤销快捷键：ctrl+Z

3. 自动保存（不建议使用，损耗电脑性能）：在设置中搜索自动保存，选择afterDelay

注意点：

1. VSCode打开的必须是文件夹，而不是文件
2. 打开的网页必须是标准的HTML结构，否则无法自动刷新

1. 特点：注释的内容会被浏览器忽略，不会呈现到页面中，但源代码中依然可见
2. 作用：对代码进行解释和说明
3. 写法：
   形式：

注意点：

注释不可以嵌套

注释的快捷键：ctrl+/ （光标放置所需注释的那一行即可）

1. 作用：告诉浏览器当前网页的版本
2. 写法：（其他的具体写法请参考：W3C官网-文档声明）
3. 注意：文档声明，必须在网页的第一行，且在html 标签的外侧

1. 计算机对数据的操作：
   存储时：编码
   读取时：解码
2. 使用原则：存储时采用哪种方式（合适的字符编码）编码，读取时就采用哪种方式解码
   使用场景：一段文字中，有中文，英文，泰文，缅甸文时，使用UFT-8编码可以是他们都被翻译出来
3. 总结：
   （1）平时编写代码时，统一采用UTF-8编码最稳妥
   （2）为了让浏览器在渲染html文件时，不犯错误，通过meta标签配合charset属性指定字符结合`

游览器会分析语言，可以把其他语言翻译为中文（刷新，或者按住shift再点刷新进行强制刷新）

1. 具体写法：
2. lang属性的编写规则：
   第一种写法：（语言-国家/地区），例如 zh-CN(中文-中国大陆)—>简体中文
   第二种写法：（语言-具体种类，已经不推荐使用），例如zh-Hants（中文-简体）

HTML标准结构如下(快捷键 ！+enter 快速生成)

快速删除一整行代码快捷键：ctrl+shift+k

3. 配置网页最前端的漂亮小图标（xx.ico），放在VS所打开的文件夹中，其他文件夹不行
4. 配置内置插件emmet，可以对生成结构的属性进行定制

可以借鉴查询的网站

• W3C官网
• W3School
• MDN----平时用的最多

1. h1最好写一个，h2-h6能适当多写
2. h1-h6不能相互嵌套
3. p标签很特殊！里面不能有：h1-h6，p，div标签

语义----含义
语义化原则：标签默认的效果不重要（用CSS可以修改默认效果），语义最重要
概念：特定的标签表达特定的含义

优势：

1. 代码的可读性强清晰
2. 有利于SEO（搜索引擎优化） 爬虫 代码 机器人
3. 方便设备解析（屏幕阅读器，盲人阅读器）

将代码中该行向上/下再复制一行的快捷键：shift+alt+“上”/“下”；

1. 块级元素，特点：独占一行
   规则1：块级元素中能写：行内元素，块级元素（几乎什么都能写）

2. 行内元素，特点：不独占一行
   规则2：行内元素中能写：行内元素，但不能写：块级元素

3. 备注：已经不推荐使用marquee标签了

特殊规则：h1-h6不能相互嵌套
特殊规则：p标签中不能写块元素

1. 用于包裹：词汇，短语等
2. 通常写在排版标签(h1-h6,div,p)里面
3. 排版标签更宏伟（大段的文字），文本标签更微观（词汇，短语）
4. 文本标签通常都是行内元素

常用的：

生活中的例子：div是大包装袋，span是小包装袋

不常用的略…

1. 基本使用

（将图片拉至同一个文件夹中，使他们同级出现）
如：

使整个VS界面放大/缩小快捷键：shift+ctrl+“+”
https://blog.csdn.net/2302_80624693/article/details/代表当前位置，同级
/代表下一级
…/代表上一级

1. 相对路径：以当前位置作为参考点，去建立路径
   注意点：
   （1）相对路径中的https://blog.csdn.net/2302_80624693/article/details/可以省略不写
   （2）文件位置一旦变化，图片则无法使用
2. 绝对路径：以根位置作为参考点
   分为两类：本地绝对路径，网络绝对路径
   本地绝对路径（更换设备，则无法使用）(很少使用)
   网络绝对路径（使用图片在浏览器的网址，若服务器开启了防盗链，会造成图片引入失败）

常见的图片格式

1. jpg格式：有损压缩，占用空间小，不支持透明背景，动态图，例如：网站的产品宣传图；
2. png格式：无损压缩，占用空间略大，支持透明背景，不支持动态图，例如：公司logo图，重要配图等；
3. bmp格式：保留细节更多，占用空间极大，不支持透明背景，动态图，例如：大型游戏中的图片；
4. gif格式：支持颜色较少，支持简单透明背景，支持动态图，例如：网页中的动态图片；
5. webp格式：具备上述的优点，兼容性不好；
6. base64格式:把图片进行base64编码，形成文本，例如：一些较小的图片，或者需要和网页一起加载的图片

主要作用：从当前页面进行跳转。

一.挑战到页面

注意点：

1. 代码中多个空格，多个回车，都会被浏览器解析成一个空格！
2. 虽然a是行内元素，但a元素可以包裹除它自身外的任何元素！

二.挑战文件

注意点：

1. 若浏览器无法打开文件，则会引导用户下载；
2. 若想强制触发下载，使用download属性，属性值即为下载文件的名称。

三.挑转锚点
什么是锚点？—网页中的一个标记点
具体使用方法：

• 第一步：设置锚点

注意点：

1. 具有href属性的a标签是超链接，具有name属性的a标签是锚点；
2. name和id都是区分大小写的，且id最好别是数字开头。

• 第二步：挑转锚点

四.唤起指定应用

1. 有序列表
   概念：有顺序或侧重顺序的列表

2. 无序列表（用的多）
   概念：无顺序或不侧重顺序的列表

注意！li 标签最好写在 ul 或 ol 种，不要单独使用

3. 列表嵌套
   概念：列表中的某项内容，又包含一个列表（注意：嵌套时，务必把解构写完整）

4. 自定义列表
   （1）概念：一个包含术语名称以及术语描述的列表
   （2）一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称，一个 dd 就是术语描述（可以有多个）

1. 基本结构：表格标题，表格头部，表格主体，表格脚注`
2. 每一行：
3. 每一个单元格：表格头部用,表格主体和表格脚注用

具体编码：

4. 表格的常用属性
   见上述代码

5. 跨行和跨列
   （1）rowspan：指定要跨的行数
   （2）colspan：指定要跨的列数
   （合并之后会有多出来的格子需要删减掉）

注意点：

1. 不要用来增加文本之间的行间距，后面会学CSS
2. 的语义是分隔，如果不想要要语义，只想要画一条水平线，应该使用CSS

一.简单梳理：

示例代码：

二. 常用的表单控件

1.表单——文本框和密码框(可以不写value)

文本输入框：

密码输入框：

常用的属性如下：
属性：数据的名称
属性：输入框的默认输入值
属性：输入框最大可输入长度

2.表单——单选框和复选框(一定要写value)

单选框：（男/女）

复选框：（抽烟/喝酒/烫头）

3.表单——隐藏域

用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据。（更安全，防止批量注册）

4.表单——提交与重置

提交按钮

注意：

1. button标签type属性的默认值是submit
2. buttom不要指定name属性
3. input标签编写的按钮，使用value属性可以指定按钮文字
   重置按钮

注意：

1. button不要指定name属性
2. input标签编写的按钮，使用value属性可以指定按钮文字

5.表单——普通按钮

注意点：普通按钮的 type 值为 button ,若不写 type 值是 sumbit 会引起表单的提交

6.表单——文本域和下拉框

文本域：

代码：

常见属性如下：

1. rows 属性：指定默认显示的行数，会影响文本域得高度
2. cols 属性：指定默认显示的列数，会影响文本域的宽度
   （给的只是初始值，用户可以自行调整）
3. 不能编写 type 属性，其他属性，与普通文本输入框一致

下拉框：
代码：

常用属性及注意事项：

1. name 属性：指定数据的名称
2. option 标签设置 value属性，如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置value属性）
3. option 标签设置了 selected 属性，表示默认选种

7.表单——禁用表单控件

表单控件的标签设置即可禁用表单控件
这些都可以设置属性

8.表单——label标签

label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点
(点击文字，获得焦点)
两种与label关联方式如下：

1. 让label标签的for属性的值等于表单控件的id

2. 把表单控件套在label标签的里面

9.表单——fieldset与legend

（对表单控件进行分类）
可以为表单控件分组，标签是分组的标题
示例：