H5/C3基础(4)

7、HTML常用标签

学习标签技巧：重点记住每个标签的语义。简单理解标签含义 ，即这个标签是用来干嘛的。

根据标签的语义，在适合的地方给一个最为合理的标签，可以让页面结构更清晰。

7.1标题标签<h1> - <h6>（重要）

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题，即<h1> - <h6>。

例 ：

<h1> 一级标题 </h1>

“h”是单词head的缩写，意为头部、标题。

标签语义：作为标题使用，并且依据重要性递减。

特点：

1.加了标题的文字会变的加粗，字号也会依次变大。

2.一个标题独占一行。

​ 口诀：

<h1> 标题一共六级选。 </h1>
<h2> 文字加粗一行显。 </h2>
<h3> 由大到小依次减。 </h3>
<h4> 从重到轻随之便。 </h4>
<h5> 语法规范书写后。 </h5>
<h6> 具体效果刷新见。 </h6>

7.2段落和换行标签（重要）

7.2.1段落标签

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

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

<p> 段落标签 </p>

“P”是单词 paragraph的缩写 ，意为“段落”。
标签语义：可以把html文档分割为若干段落。

特点：

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

7.2.1换行标签

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

单词 break 的缩写，意为打断、换行。
标签语义：强制换行。

特点：

1.<br />是单标签

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

7.3文本格式化标签

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

7.4

和 标签

<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。

div是division的缩写，表示分割、分区。Span意为跨度、跨距。

特点：

1.<div>标签用来布局，但是现在一行只能放一个<div>。（大盒子）

2.<span>标签用来布局，一行上可以多个<span>。（小盒子）

7.5图像标签和路径（重点）

7.5.1图像标签

在HTML标签中，标签用于定义HTML页面中的图像。
<img src=”图像URL”/>
Img是image的缩写，意为图像。
src是<img>标签的必须属性（属于图像标签的性质），它用于指定图像文件的路径和文件名。
图像标签的其他属性

Alt用法： <img src=”图像URL”alt=”这是一张图片”/>

Title用法：<img src=”图像URL”alt=”这是一张图片”title=”图片哦！”/>

Width和height用法：<img src=”图像URL”alt=”这是一张图片”title=”图片哦！”width=”数字”hight=”数字”/>（一般宽度和高度只修改一个，另一个会等比例缩放）

Border用法：<img src=”图像URL” alt=”这是一张图片”title=”图片哦！”width=”数字”hight=”数字”border=”数值”/>

注意点：

1.图像标签可以有多个属性，必须写在img标签名的后面。

2.属性之间是不分先后顺序的，标签和属性、属性和属性之间均以空格分开。

3.属性采取的是键值对的格式，即key=”value”的格式，属性=”属性值”。

7.5.1路径

（1）前期铺垫知识

1.目录文件夹和根目录

实际工作中，我们的文件不能随便乱放，否则用起来很难快速找到他们，因此我们需要一个文件夹管理他们。

目录文件夹：就是普通文件夹，里面只不过存放了我们做网页所需的相关素材，比如HTML文件、图片等。

根目录：打开目录文件夹的第一层就是根目录。

2.VSCode打开目录文件夹

方便管理文件

（2）路径

页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图片文件（images），这是再查找图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为：

1.相对路径

以引用文件所在位置为参考基础，而建立出的目录路径。（简单说 图片相对于HTML页面的位置）

2.绝对路径

指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。（“D:\web\img\logo.gif” 或 “http://www.itcast.cn/images/logo.gif”）。

7.6超链接标签（重点）

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面 </a>。

7.6.1超链接标签的语法格式
<a href=”跳转目标”target=”目标窗口的弹出方式”> 文本或图像 </a>

“a”单词anchor的缩写，意为：锚。

“href”用于指定链接目标的URL地址，（必须属性）当为标签应用href属性时，它就具有超链接的功能。

“traget”用于指定链接页面的打开方式，其中_self为默认值（当前页面打开 ），还有_blank（在新窗口中打开）打开方式

7.6.2超链接标签分类

1.外部链接：<a href=“http://www.baidu.com”>百度</a>

2.内部链接：<a href=“index.html”>名称</a>

3.空链接：<a href="#">

4.下载链接：如果 href=“文件名称或者压缩包”，或下载这个文件。

5.网页元素链接：在网页中的各种网页元素，如 文本、图像、表格、音频、视频等都可以添加超链接（将文字部分变成图像等，例如 <a href=“http://www.baidu.com”><img src=”图片名称”/></a>）。
6.锚点链接：点此链接，可以快速定位到页面中的某个位置
（1）.在链接文本的href属性中，设置属性值为#名字的形式，如 <a href="#two">一集</a>。
（2）.找到目标位置标签，在里面添加一个id属性=刚才的名字，如：<h3 id=“two”>一集的介绍</h3>

例：

7.7表格标签

表格是实际开发中非常常用的标签：
1.表格的主要作用
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
2.表格的基本语法

（1）<table> </table>用于定义表格的标签。

（2）<tr> </tr>用于定义表格中的行，必须嵌套在<table> </table>中。

（3）.<td> </td>用于定义表格中的单元格，必须嵌套在<tr> </tr>中。（td是表格指数table data ，即数据单元格的内容。）

3.表头单元格标签

一般表头单元格位于表格的第一行或者第一列（突出重要性），表头单元格里面的文本内容 加粗 居中 显示。

<th>标签表示HTML表格的表头部分（ table head 的缩写）。

4.表格属性

表格标签这部分属性实际开发我们不常用，后面的CSS来设置。

重点：

1.记住这些英语单词，后面CSS会使用。

2.直观感受表格的外观形态。

height 像素值或百分比 规定表格的高度。

5.表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。

在表格标签中（都放在 <table> </table> 标签中），分别用： <thead>标签 表格的头部区域（ 内部必须有 <tr> 标签 ） 、<tbody>标签 表格的主体区域。这样可以更好的分清表格结构。

6.合并单元格

特殊情况下，可以把多个单元格合并为一个单元格。

1.合并单元格方式

（1）跨行合并 ：rowspan=”合并单元格的个数 ”
（2）跨列合并 ：colspan=”合格单元格的个数 ”

2.目标单元格（写合并代码）

（1）跨行 ：最上侧单元格（要合并的那几行单元格的第一行）为目标单元格，写合并代码。
（2）跨列 ：最左侧单元格（要合并的那几列单元格的第一列）为目标单元格，写合并代码。

3.合并单元格的步骤

（1）确定合并方式（跨行还是跨列）。
（2）找到目标单元格，写上 合并方式=”合并数量”。例：<td colspan=“2”></td>。
（3）删除多余单元格（假设第一行第二行合并，那么第二行代码就不需要了，删除即可）。

7.总结

表格学习整体分为三大部分：

（1）表格的相关标签

（2）表格的相关属性

（3）合并单元格

7.8列表标签

表格是用来显示数据的，列表是用来布局的。

列表最大特点就是 整齐 整洁 有序 ，它作为布局更加自由和方便。

1.列表的分类

（1）无序列表（重点）

<ul>标签 表示HTML页面中项目的无需列表，一般会以项目符号呈现列表项，而列表项使用 <li>标签 定义。

例：

注意：

1.无序列表的各个列表项之间没有顺序级别之分，是并列的

2.<ul> </ul> 中只能嵌套 <li> </li> ，直接在 <ul> </ul> 中输入其他标签或者文字是不允许的。

3.<li> </li> 中间相当于一个容器，可以容纳所有元素。

4.无序列表会带有自己的样式属性，但实际使用时，我们会使用CSS来设置。
补充：去掉li前面的项目符号（小圆点）
语法：

（2）有序列表（理解）

有序列表即为有序排列顺序的列表，其各个列表项 会按照一定的顺序排列定义。

在HTML标签中，<ol> </ol>标签 用于定义有序列表，列表排序以数字来显示，并且使用 <li> </li>标签 来定义列表项。

例：


注意：

1.<ol> </ol> 中只能嵌套 <li> </li>,直接 <ol> </ol>标签 中输入其他标签或者文字的做法是不被允许的。

2.<li> </li>标签中 可以容纳所有元素。

3.有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置。

（3）自定义列表（重点）

自定义列表的使用场景：

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

例：

例：

1.<dl> </dl> 里面只能包含 <dt> </dt> 。

2.<dt>和<dd>个数没有限制， 经常是一个<dt>对应多个<dd>

总结：

注意：

1.学会什么时候用无序列表，什么时候用自定义列表。

2.无序列表和自定义列表代码怎么写？

3.列表布局在学习完CSS后再来完成。

7.9表单标签

1.为什么需要表单？

使用表单目的是为了 收集用户信息 。

在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要表单。

2.表单的组成。

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

3.表单域

表单域 是一个 包含表单元素的区域。

在HTML标签中， <form>标签 用于定义表单域，以实现用户信息的传递和收集。

<form> 会把它范围内的表单元素信息提交给服务器。

常用属性：

4.表单控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

（1）.input 输入表单元素

在英文单词中，input是输入的意思，而在表单元素中 <input>标签 用于收集用户信息。

在 <input>标签 中，包含一个 type 属性，根据不同 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。）

<input type=”属性值”/>
<input /> 标签为单标签

type 属性设置不同的属性值用来指定不同的控件类型。（类型如下）

例：



除 type 属性外，<input>标签 还有其他很多属性，其常用属性如下 ：

注意：

1.单选按钮和复选框必须有相同的name值。

2.name和value是每个表单元素都有的属性值，主要给后台人员使用的。

Name 取同一个值

如：

可以由多选多变成多选一（只有在radio中可以）

新增：

<label>标签 为 input 元素定义标注（标签） 。

<label>标签 用于绑定一个表单元素，当点击 <label>标签 内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

语法：

核心：<label>标签 的 for属性 应当与相关元素的 id属性 相同

（2）.select 下拉表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用 <select>标签 控件定义 下拉列表 。

语法：

注意：

1.<select> 中至少包含一对<option>。

2.在 <option> 中定义 selected=”selected”时，当前项即为默认选中项。

（3）.textarea 文本域元素

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea>标签。（留言、介绍、评论）

在表单元素中， <textarea>标签 是用于定义多行文本输入的控件。

语法：

1.通过 <textarea>标签 可以轻松地创建多行文本输入框

2.Cols=”每行的字符数” ， rows=”显示的行数” ，我们在实际开发中不会使用，都是使用CSS来改变大小的。

7.10查阅文档

• 百度
• W3C（w3school）
• MDN

8、HTML中的注释标签和特殊字符

8.1、注释

如果需要在HTML文档中添加一些便于阅读和理解但是又不需要显示在页面中的注释文字，就需要使用注释标签。

HTML中的注释标签 ： <!-- 注释文字 --> 。（快捷键 ：ctrl + / ）

• 注释内容是给程序员看的这个代码是不执行不显示在网页中的。
• 注释是为了更好的解释代码的功能，便于开发人员理解和阅读代码，程序是不会执行注释内容的。

8.2特殊字符