HTML基础语法｜青训营笔记

一、HTML骨架结构

html(Hyper Text Markup Language)。优势：体积小，易于传播。

01. 网页的固定结构

整体、头部、标题、主体

标签：

（1）双标签：开始标签、停止标签，可以包裹内容；
（2）单标签：无法包裹内容；不需要结束，只要执行代码（换行）即可；
（3）<br/>：换行标签；
（4）<hr/>：分割线标签；

标签关系：

（1）父子关系：嵌套关系；
（2）兄弟关系：并列关系。

02. 排版标签

标题标签：

标题标签用：h系列标签，写在“body”中；
编号从1开始，逐渐增大至6，有且仅有 6 个；
特点：（1）文字都有加粗；（2）字体逐渐减小；（3）独占一行
eg：

<body>
    <h1>love</h1>
    <h2>love</h2>
    <h3>love</h3>
</body>

结果如下所示：

love

- 快捷键：【ctrl + D/command + D 】快捷修改标题的数字（可以产生三个光标，同时修改数字）

段落标签：

1、代码：<p> </p> 双标签：需要表示一段文字的开始与结束；
2、代码自动换行（而不是网页中的文字自动换行）Alt + Z / option + Z；
3、特点：
- （1）独占一行；
- （2）有间隔

换行标签：

</br>：单标签，强制执行；

水平线标签：

<hr>：增加一条水平线，该功能类似于“---”的效果；

03. 文本格式化标签

1、作用：让文字加粗、下划线、倾斜、删除线
2、代码：两者作用相同，但右边列在语句中更强调文字重要性
3、如表格所示：

标签	说明	标签（突出重要性的强调语句时使用）
b	加粗	strong
u	下划线	ins
i	倾斜	em
s	删除线	del

04. 语义化标签

1、实际项目开发中选择标签的原则：标签语义化；
- 即：根据语音选择对应正确的标签；
- 如：标题系列—h系列标签；段落系列—p系列标签；
2、好处：
- 对人：易于理解；对机器：利于机器解析，搜索引擎（SEO）；
3、推荐：strong、ins、del、em对于强调文字重要性更有用

05. 媒体标签

包含图片标签、路径、音频标签、视频标签

5.1 图片标签

图片标签——显示图片（单标签）

1、代码：<img src = “图片名称” alt = “替换文本”> 2、方法：（1）相对路径；（2）将文件拖入VSCode中，复制相应路径后加入
3、特点：（1）单标签；（2）img标签需要展示对应的效果，需要借助标签属性进行设置

标签属性：标签的特征；“src”、“alt”是属性名，引号内的内容是属性值；
“./”是指相对路径，相当于指定当前文件
图示：

注意点：
（1）标签属性写在开始标签内部；
（2）标签上可以同时存在多个属性；
（3）属性之间以空格隔开；
（4）标签名与属性之间必须以空格隔开；
（5）属性之间没有顺序之分；

5.2 音频标签

音频标签——双标签
1、代码：<audio src = “音频名称” controls></audio> 2、支持三种格式的音频：MP3、Wav、Ogg
3、eg：

a) 音频文件没有声音：部分浏览器不支持
b) controls：音频播放控制器

5.3 视频标签

1、代码：<video src = “视频名称” controls></video>
2、支持三种视频格式：MP4、WebM、Ogg；

3、 autoplay muted：自动静音播放

06. 链接标签——双标签

1、链接：单击后从一个页面跳转至另一个页面；
2、称呼：a标签、超链接、锚链接；
3、代码：<a href = “./目标网页.html”>超链接 
（1）网站开发初期不知道对应跳转链接，href的值输入#即可（#空链接） <a href = “#”>空链接</a>
（2）href：跳转地址（网址、空链接、自己书写的网页）；
（3）target：选择是否保留原网页，默认不保留；（4）代码过长时可以使用“自动换行”功能；
4、特点：
（a) 双标签，内部可以包裹内容
（b) 如果需要a标签点击后

07. 列表标签

1、无序列表：<ul> </ul>
2、有序列表：<ol> </ol>

08. 超链接

<a herf = “http://www.bilibili.com”>跳转到掘金</a>
布局标签：

二、路径

1、加载相应文件时需要先找到相应文件；
2、分类：绝对路径；相对路径；

01. 绝对路径

1、绝对路径：目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
（盘符 ： C / D……盘 ； mac没有盘符 ， 默认“ \”， 即“ \ ” —— 根盘符）
2、绝对路径劣势：不易于更改网页的存放地址，不利于分享网页查看信息（必须保持在一个文件夹中）

02. 相对路径

1、相对路径：从当前文件开始寻找目标文件
a) 当前文件：当前的html网页
b) 目标文件：要找到的图片
2、分类：
（1）同级目录：两者在同一文件、同一级别
代码：

<img src = “目标文件.gif”>
<img src = “./目标文件.gif”>（“./”表示当前）

（2）下级目录：目标文件在网页的下一级别目录中，双击进入是下级
代码：

<img src = “./目标文件夹名称/目标图片.gif”>
<img src = “./images/目标图片.gif”>
“ images ” 表示的是目标文件所在的文件夹名称

（3）上级目录：目标文件在上级目录中，返回是上级
代码：../ 返回上一级别

<img src = “../images/目标图片.gif”>
表示先返回上一级，然后打开images文件夹中打开目标图片

三、表单标签

01. input标签——通过控制type改变显示效果

使用场景：登陆、注册、填写表单、搜索……

1.1 input标签

1、场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页；
2、type属性值（手动换行）：

<body>
    "text"类型是文本框：<input type="text"><br>
    "password"类型是密码框：<input type="password"><br>
    "radio"类型是单选框：<input type="radio"><br>
    "checkbox"类型是复选框：<input type="checkbox"><br>
    "file"类型是上传文件：<input type="file"><br>
    "submit"类型用于提交：<input type="submit"><br>
    "reset"类型用于重置：<input type="reset"><br>
</body>

1.2 form表单域

1、确定并限制“submit”、“reset”的操作范围
2、value标签可以更改按钮的显示名字
3、eg：<form action = “提交到的位置”></form>

02. button按钮标签

1、场景：在网页中显示用户点击的按钮
2、标签名：button
3、标签：

03. select下拉菜单标签

1、场景：在网页中提供多个选择项的下拉菜单表控件
2、标签组成：
a) select标签：下拉菜单的整体
b) option标签：下拉菜单的每一项
3、常见属性：selected：下拉菜单的默认选中，如果标识示的话则第一个默认选中

04. textarea文本域标签

1、场景：在表单中提供可输入多行文本的表单控件（会自动换行）
2、常见属性：（实际开发中用CSS实现）
a) cols：规定了文本域可见宽度
b) rows：规定了文本域内的可见行数
3、注意点：
a) 右下角可以拖拽改变大小（可以通过CSS更改）
b) 实际开发时针对样式效果推荐用CSS设置

05. label标签

1、场景：常用于绑定内容与表单标签的关系
2、使用方法一：

a) 使用label标签把内容（如文本）包裹起来；
b) 在表单标签上添加id属性；
c) 在label标签中的for属性中设置对应的id属性值；
3、使用方法二：
a) 直接使用label标签把内容（如文本）和表单包裹起来；
b) 把label标签的for属性删除即可；
4、代码：

<!-- 第一种实现方法 -->
<input type='radio' name='gender' id='male'><label for='male'>male</label>
<!-- 第二种实现方法 -->
<input type='radio' name='gender' id='female'><label for='female'>female</label>

四、字符实体

网页无法识别多个空格，只会显示一个空格

01. 字符实体标签

1、场景：在网页中展示特殊符号效果时，需要用字符实体替代
2、结构：&英文；
常见字符实体：