HTML标签学习

视频地址：https://www.bilibili.com/video/BV175411c7cM?p=52

一、HTML基础标签

目标：学习HTML排版、媒体、链接等基础标签，完成基础网页的开发。

1 排版标签

1.1 标题标签<h1>-<h6>

• 场景： 在新闻和文章的页面中，都离不开标题，用来突出显示文章主题。
• 代码：

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

• 语义：1~6级标题，重要程度依次递减。单词head的缩写，意为头部、标题。
  • 注意：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分。
• 特点：
  • 文字会变得加粗，字号也会变大，并且从h1→h6文字逐渐减小
  • 独占一行

1.2 段落标签<p></p>

在网页中，要把文字有条理的显示出来，就需要将这些文字分段显示。在HTML标签中，

标签用于定义段落，他可以将整个网页分为若干个段落。

<p>我是一个段落</p>

单词paragraph的缩写，意为段落。
标签语义：可以把HTML文档分隔为若干段落。
特点：

• 文本在一个段落中会根据浏览器窗口的大小自动换行。
• 段落和段落之间保有空隙。

1.3 换行标签<br />

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br/>。

<br />

单词break的缩写，意为打断、换行。
特点：

• <br/>是个单标签
• <br/>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

1.4 水平线标签<hr>

• 场景:分割不同主题内容的水平线
• 代码:<hr>（Horizontal Rule缩写）
• 语义:主题的分割转换
• 特点:
  • 单标签
  • 在页面中显示一条水平线

2 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。

语义	标签	说明
加粗	<strong></strong>或者<b></b>	更推荐使用<strong>标签 加粗语义更强烈
彻斜	<em></em>或者	更推荐使用<em>标签加粗 语义更强烈
删除线	<del></del>或者<s></s>	更推荐使用<del>标签加粗 语义更强烈
下划线	<ins></ins>或者<u></u>	更推荐使用<ins>标签加粗 语义更强烈

3 媒体标签

3.1图片标签

• 场景：在网页中显示图片
• 代码：img src="图像URL" alt=""/>
• 特点：
  • 单标签
  • img标签需要展示对应的效果，需要借助标签的属性进行设置。
• src属性： 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
  （所谓属性：简单理解就是属于这个图像标签的特性。）
• 图像标签的其他属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能显示的文字
title	文本	提示文本。鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

修改width或者height其中的一个，另一个等比例缩放。

图像标签属性注意点：

• 图像标签可以拥有多个属性，必须写在标签名的后面；
• 属性部分不分前后顺序，标签名与属性、属性与属性之间均已空格分开；
• 属性采取键值对的格式，即key="value"的格式，属性=“属性值”。
• 图像标签的src属性是必须要写的。

3.2.路径

1. 目录文件夹和根目录
   • 实际工作中，我们的文件不能随便乱放，否则用起来很难快速，需要一个文件夹来管理他们。
   • 目录文件夹：就是普通文件夹，只不过里面存放了我们作业面所需要的相关素材，比如html文件、图片等。
   • 根目录：打开目录文件夹的第一层就是根目录。
2. VSCode打开目录文件夹

3.3 音频标签

• 场景:在页面中插入音频
• 代码:</ audio>常见属性:
  • src:指定播放音频的路径
  • controls:显示播放音频的控件（该属性属性值可省略)
  • autoplay:音频加载完毕会自动播放（该属性部分浏览器不支持，了解)
  • loop:当音频结束时重新开始播放（了解)
• 注意点:

  • 音频标签是HTML5中新增标签，老版本浏览器无法识别（兼容性问题)

    <audio src= " ./music.mp3" controls>
    您的浏览器版本过低，无法播放音频!
    </audio>
    

  • 音频标签目前支持三种格式:MP3、Wav、0gg

3.4 视频标签

• 场景:在页面中插入视频
• 代码:
• 常见属性:
  • src:指定播放视频的路径
  • controls:显示播放视频的控件（该属性属性值可省略)
  • autoplay:视频加载完毕会自动播放（拓展:在谷歌浏览器中可以配合muted属性实现自动静音播放).
  • loop:当视频结束时重新开始播放（了解)
• 注意点:
  • 视频标签是HTML5中新增标签，老版本浏览器无法识别（兼容性问题)

    <video src=" ./video.mp4" controls>
    您的浏览器版本过低，无法播放视频!
    </video>
    

  • 视频标签目前支持三种格式:MP4，WebM，和Ogg

4.链接标签

4.1 链接标签的介绍

• 场景:点击之后，从一个页面跳转到另一个页面
• 代码: <a href="./目标网页.html">超链接</a>（anchor的缩写）
• 称呼:a标签、超链接、锚链接
• 特点:
  • 双标签，内部可以包裹内容
  • 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

1.4.2 链接标签的href属性

• 属性名：href
• 属性值：目标网页的路径（点击之后跳转去哪一个网页）
  • 外部链接:<a href="https: / /www . baidu.con/”>百度一下</a>
  • 内部链接: <a href="-/目标网页.html">目标网页</a>
• 显示特点（了解)∶
  • a标签从未点击过，默认文字显示蓝色
  • a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色)
  • a标签默认文字有下划线

1.4.3 链接标签的target属性

• 属性名: target(目标)
• 属性值:目标网页的打开形式
  • _self:默认值，在当前窗口中跳转（会覆盖原网页).
  • _blank:在新窗口中跳转〔原网页保留)

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

2.列表标签

目标:能够使用无序列表、有序列表、自定义列表标签，实现网页中列表结构的搭建

• 场景：在网页中按照行展示关联性的内容，如:新闻列表、排行榜、账单等
• 特点：按照行的方式，整齐显示内容
• 种类：无序列表、有序列表、自定义列表
  

2.1 无序列表

无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者其他文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。
无序列表会带有自己的样式属性，但在实际使用中，我们会使用CSS来设置。

小技巧：Visual Studio Code中，添加8个数字从1依次递增的li的快捷方式：ul>li{$}*8

清除li左边的黑色圆的css语句：

2.2 有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。

1. <ol></ol>中只能嵌套<li><li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
3. 有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置。

2.3 自定义列表

自定义列表的使用场景：
自定义列表常用语对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

一个大标题，下面好几个小标题都是围绕解释它的。
在HTML标签中，<dl>标签用于定义描述列表(或定义列表），该标签会与<dt>(定义项目/名字)和<dd>（描述每一个项目/名字)一起使用。
其基本语法如下:

1. <dl></dl>里面只能包含<dt>和<dd>。
2. <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

3.表格标签

目标:能够使用表格相关标签和属性，实现网页中表格结构的搭建

3.1 表格的基本结构

• 场景:在网页中以行+列的单元格的方式整齐展示数据，如:学生成绩表
• 基本标签：

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

• 注意点:
  • 标签的嵌套关系: table > tr > td

3.2 表格相关属性

• 场景︰设置表格基本展示效果
• 常见相关属性：

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

• 注意点：
  • 实际开发时针对于样式效果推荐用CSS设置
• 示例代码如下：

<table border="1" width="400" height="300">
	<tr>
		<td>姓名</td>
		<td>成绩</td>
		<td>评语</td>
	</tr>
	<tr>
		<td>小哥哥</td>
		<td>100</td>
		<td>真帅气</td>
	</tr>
	<tr>
		<td>小哥哥</td>
		<td>100</td>
		<td>真帅气</td>
	</tr>
</table>

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

• 场景:在表格中表示整体大标题和一列小标题
• 其他标签：

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

• 注意点:
  • caption标签书写在table标签内部
  • th标签书写在tr标签内部（用于替换td标签)
• 示例代码：

<table border="1" width="400" height="300">
	<caption>学生成绩表</caption>
	<tr>
		<th>姓名</td>
		<th>成绩</td>
		<th>评语</td>
	</tr>
	<tr>
		<td>小哥哥</td>
		<td>100</td>
		<td>真帅气</td>
	</tr>
	<tr>
		<td>小哥哥</td>
		<td>100</td>
		<td>真帅气</td>
	</tr>
</table>

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

• 场景︰让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
• 结构标签:

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

• 注意点:
  • 表格结构标签内部用于包裹tr标签
  • 表格的结构标签可以省略
• 示例代码：

<table border="1" width="400" height="300">
	<caption>学生成绩表</caption>
	<thead>
		<th>
			<td>姓名</td>
			<td>成绩</td>
			<td>评语</td>
		</th>
	</thead>
	<tbody>
		<tr>
			<td>小哥哥</td>
			<td>100</td>
			<td>真帅气</td>
		</tr>
		<tr>
			<td>小哥哥</td>
			<td>100</td>
			<td>真帅气</td>
		</tr>
	</tbody>		
	<tfoot>
		<tr>
			<td>总结</td>
			<td>200</td>
			<td>不错</td>
		</tr>
	</tfoot>
</table>

3.5 合并单元格

• 场景：将水平或垂直多个单元格合并成一个单元格

• 合并单元格步骤：

  • 明确合并哪几个单元格
  • 通过左上原则，确定保留谁删除谁
    • 上下合并→只保留最上的，删除其他.
    • 左右合并→只保留最左的，删除其他
  • 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan)

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

• 注意点:
  只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨: thead、tbody、tfoot)

• 示例代码：

<table width="300" height="308" border=""1">
<tr>
<td colspan="2">1</td><td></td>
</tr>
<tr>
<td></td><td></td><td></td></tr>
<tr>
ctd colspan=""3"></td>
</tr>
<!--开发中，我们用的最多的就是跨列合并-->
</table>

三、表单标签

目标:能够使用表单相关标签和属性，实现网页中表单类网页结构搭建

3.1 为什么需要表单

使用表单目的是为了收集用户信息。
在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

3.2 表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素)和提示信息3个部分构成。

3.3 表单域

表单域是一个包含表单元素的区域。
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器.

<form action="url地址” method="提交方式" name="表单域名称">
各种表单元素控件
</form>

常用属性:

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域。

4.1 input表单元素

详见: https://blog.csdn.net/MRname/article/details/50750243.

4.1.1 input系列标签的基本介绍

• 场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
• 标签名: input
  • input标签可以通过type属性值的不同，展示不同效果
• type属性值：

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

1.2 input系列标签-文本框

• 场景:在网页中显示输入单行文本的表单控
• type属性值：text
• 常用属性:

属性名	说明
placeholder	占位符。提示用户输入内容的文本

1.3 input系列标签-密码框

• 场景:在网页中显示输入密码的表单控件
• type属性值：password
• 常用属性（同文本框)∶

属性名	说明
placeholder	占位符。提示用户输入内容的文本

• 注意点:
  • type属性值不要拼错或者多加空格，否则相当于设置了默认值状态: text→文本框

4.1.4 input系列标签-单选框

• 场景：在网页中显示多选一的单选表单控件

• type属性值: radio

• 常用属性:

  属性名	说明
  name	分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中
  checked	默认选中

• 注意点:

  • name属性对于单选框有分组功能
  • 有相同name属性值的单选框为一组，一组中只能同时有一个被选中

4.1.5 input系列标签-复选框

• 场景：在网页中显示多选多的多选表单控件

• type属性值: checkbox

• 常用属性（同单选框)∶

  属性名	说明
  checked	默认选中

4.1.6 input系列标签-文件选择

• 场景：在网页中显示文件选择的表单控件

• type属性值: file

• 常用属性:

  属性名	说明
  multiple	按住ctrl键，可以选择多文件

4.1.7 input系列标签-按钮

• 场景：在网页中显示不同功能的按钮表单控件

• type属性值：

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

• 注意点:

  • 如果需要实现以上按钮功能，需要配合form标签使用.
  • form使用方法：用form标签把表单标签一起包裹起来即可

4.2 button按钮标签

• 场景：在网页中显示用户点击的按钮

• 标签名: button

• type属性值（同input的按钮系列):

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

• 注意点:

  • 谷歌浏览器中button默认是提交按钮
  • button标签是双标签，更便于包裹其他内容:文字、图片等

4.3 select下拉菜单标签

4.4 textarea文本域标签

• 场景：在网页中提供可输入多行文本的表单控件
• 标签名: textarea
• 常见属性:
  • cols：规定了文本域内可见宽度
  • rows:规定了文本域内可见行数
• 注意点:
  • 右下角可以拖拽改变大小
  • 实际开发时针对于样式效果推荐用CSS设置
    

4.5 label标签

label标签不属于表单，只是经常和表单搭配使用。

• 场景：常用于绑定内容与表单标签的关系
• 标签名: label
• 使用方法①:
  1.使用label标签把内容（如:文本)包裹起来
  2.在表单标签上添加id属性
  3.在label标签的for属性中设置对应的id属性值
• 使用方法②:
  1.直接使用label标签把内容（如:文本）和表单标签一起包裹起来
  2.需要把label标签的for属性删除即可

举例：
增加点击范围–单选按钮的点击范围过小，可以使用label标签，从而让用户点击说明文字时，也能选中单选按钮。

<body>
<input type="radio" id="male" name="sex"></input><label for="male">男</label>
<label><input type="radio" name="sex">女</label>
</body>

5.语义化标签

目标:能够认识开发中常用的没有语义布局标签（div、span ）和有语义的布局标签

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

• 场景︰实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
• div标签:一行只显示一个(独占一行)
• span标签:一行可以显示多个
  <div>和<span>是没有语义的，他们就是一个盒子，用来装内容的。

<div>这是头部<div/>
<span>今日价格</span>

div是division的缩写，表示分割、分区。span意为跨度、跨距。
特点：

• <div>标签用来布局，但是现在一行只能放一个<div>。大盒子。
• <span>标签用来布局，一行上可以多个<span>。小盒子

5.2 有语义的布局标签

• 场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
• 标签:

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

• 注意点:
  • 以上标签显示特点和div一致，但是比div多了不同的语义
  • 这几个标签都是用来布局的，语义很明显。但是兼容性很差ie 678 不支持，pc端慎重考虑

6.字符实体

7.综合案例

5.查阅文档
推荐网址：
百度
W3C:http://www.w3cschool.com.cn/ https://www.w3cschool.cn/html/
MDN:https:developer.mozilla.org/zh-CN/

2.5 HTML中的注释和特殊字符