【博学谷学习记录】超强总结，用心分享|前端开发HTML知识总结

HTML知识总结

字体加粗标签

注释快捷键 Ctrl + /

代码后缩进：shift + tad

1HTML标签

1.1排版标签介绍

1.1.1标题标签

<h1>1级标题<h1/>
<h2>2级标题<h2/>
<h3>3级标题<h3/>
<h4>4级标题<h4/>
<h5>5级标题<h5/>
<h6>6级标题<h6/>

特点：文字都有加粗、文字都有变大，并且从h1~h6文字逐渐减小、独占一行

1.1.2段落标签

<p>我是一段文字</p>

特点：段落之间存在间隙、独占一行

1.1.3换行标签

<br>

特点：单标签、让文字强制换行

1.1.4水平线标签

<hr>

特点：单标签、在页面中显示一条水平线

1.2文本格式化标签的介绍

场景：需要让文字加粗、下划线、倾斜、删除线等效果

标签	说明	标签	说明
b	加粗	strong	加粗
u	下划线	ins	下划线
i	倾斜	em	倾斜
s	删除线	del	删除线

1.3媒体标签

1.3.1图片标签的介绍

场景：在网页中显示图片

<img src="" alt="">

属性：

1.alt：替换文本，当图片不显示的时候显示的

2.title:当鼠标悬停时，才显示的文本（可用于其他标签）

特点：单标签

属性注意点：

1.标签的属性可以写在开始标签内部

2.标签上可以同时存在多个属性

3.属性之间以空格隔开

4.标签名与属性之间必须以空格隔开

5.属性之间没有顺序之分

1.3.2图片标签的width和height属性

属性名：width和height

属性值：宽度和高度（数字）

注意点：

1.如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（图片不会变形）

2.如果同时设置了width和height两个，若设置不当此时图片可能会变形

1.3.3路径

1.3.3.1绝对路径

指从目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

例如：

盘符开头： D:\day01\images\1.jpg
完整的网络地址： http://www.itcast.cn/2018czgw/images/logo.gif(了解)

1.3.3.2相对路径（常用）

从当前文件开始出发找目标文件的过程

同级目录：当前文件和目标文件在同一目录中

方法一: <img src="目标图片.gif">
方法二: <img src="./目标图片.gif">

下级目录：目标文件在下级目录中

<img src="data:images/目标图片.gif">

上级目录：目标文件在上级目录中

<img src="../cat.gif">![](https://img2023.cnblogs.com/blog/3065952/202212/3065952-20221220201432969-1397582974.png)

1.3.4音频标签

<audio src="./music.mp3" controls></audios>

常见属性：

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

注意点：音频标签目前支持三种格式：MP3、Wav、Ogg

1.3.5视频标签

<video src="./video.mp4" controls></video>

常见属性：

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需要配合muted实现静音播放）
loop	循环播放

1.4链接标签

<a href="./目标网页.html">超链接</a>
<a href="http://www.baidu.com/">跳转到百度</a>

1.4.1链接标签的target属性

<a href="http://www.baidu.com/" target="_blank">百度一下</a>

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

2列表标签

2.1无序列表

标签名	说明
ul	表示无序列表的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

注意：ul标签中只允许包含li标签、li标签可以包含任意内容

2.2有序列表

标签名	说明
ol	表示有序列表的整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一行的内容

注意点：ol标签中只允许包含li标签、li标签可以包含任意内容

1.
2.
3.

2.3自定义列表

标签名	说明
dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

注意点：dl标签中只允许包含dt/dd标签、dt/dd标签可以包含任意内容

显示特点：dd前会默认显示缩进效果

3表格标签

3.1表格的基本标签

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

表格嵌套关系：table > tr > td

3.2表格相关属性

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

3.3表格标签和表头单元格标签

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意：caption标签书写在table标签内部、th标签书写在th内部（用于替换td标签）

<table>
        <caption>学生成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>丽丽</td>
            <td>95分</td>
            <td>不错，真棒</td>
        </tr>
        <tr>
            <td>美美</td>
            <td>15分</td>
            <td>你还有进步的空间</td>
        </tr>
    </table>

3.4表格的结构标签（了解）

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

<table border="1">
        <caption>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>丽丽</td>
                <td>95分</td>
                <td>不错，真棒</td>
            </tr>
            <tr>
                <td>美美</td>
                <td>15分</td>
                <td>你还有进步的空间</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>郎才女貌</td>
                <td>郎才女貌</td>
            </tr>
        </tfoot>
    </table>

3.5合并单元格

步骤：

1.上下合并—只保留最上的，删除其他的

2.左右合并—只保留最左的，删除其他的

3.给保留的单元格设置：跨行合并（rowspan）或跨列合并（colspan）

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

4表单

4.1 input系列标签

<input type="text">

标签名	type属性值	说明
input	text	文本框，用于输入多行密码
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于之后上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置（添加表单域form）
input	button	普通按钮，默认无功能，之后配合js添加功能value="按钮提示文字"

type属性值	属性名	说明
text	placeholder	占位符。提示用户输入内容的文本
radio	name	分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中
radio	checked	默认选中
file	multiple	多文件选择
	value	提示文字 value="按钮提示文字"

4.2 button按钮标签

标签名	type属性值	说明
button	submit	提交按钮。点击之后提交数据给后端服务器
button	reset	重置按钮。点击之后恢复表单默认值
button	button	普通按钮。默认无功能，之后配合js添加功能

<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>

4.3 select下拉菜单标签

标签组成：select：下拉菜单的整体

​ option：下拉菜单的每一项

属性 ： selected：默认选中

4.4 textarea文本域标签

常见属性：

• cols: 规定了文本域内可见宽度

• rows: 规定了文本域内可见行数

  <textarea  cols="30" rows="10"></textarea>
  

4.5 label标签

使用方法 1：

1.使用label标签把内容（如：文本）包裹起来

2.在表单标签上添加id属性

3.在label标签的for属性中设置对应的id属性值

<input type="radio" name="sex" id="nan"><label for="nan">男</label></input>

使用方法 2：

1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来

2.需要把label标签的for属性删除即可

<label><input type="radio" name="sex">女</label>

5语义化标签

5.1没有语义的布局标签-div和span

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

5.2有语义的布局标签（了解）

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

5.2字符实体