HTML及其标签详解

深藏阁楼爱情的钟 2024-03-22 21:06 32阅读 0赞

![在这里插入图片描述][21b2d43429a44467b3359855123a8549.png]

#### 文章目录 ####

*  一、HTML简介
 *   *  1、网页
     *   *  1>什么是网页
         *  2>什么是HTML
     *  2、Web标准
     *   *  1>为什么需要Web标准
         *  2>Web标准的构成
     *  3、HTML语法规范
     *   *  1>基本语法
         *  2>标签关系
 *  二、HTML标签
 *   *  1、基本标签
     *  2、标题标签
     *  3、段落和换行标签
     *  4、文本格式化标签
     *  5、< div>和< span>标签
     *  6、图像标签
     *  7、超链接标签
     *  8、表格标签
     *   *  1>表格属性
         *  2>表格结构标签
         *  3>合并单元格
     *  9、列表标签
     *   *  1>无序列表
         *  2>有序列表
         *  3>自定义列表
     *  10、表单标签
     *   *  1>表单域
         *  2>表单控件
         *   *  <input表单元素
             *  <select下拉表单元素
             *  <textarea文本域表单元素

## 一、HTML简介 ##

### 1、网页 ###

#### 1>什么是网页 ####

> **网站**是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。  
> **网页**是网站中的一“页”，通常是 HTML格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。

#### 2>什么是HTML ####

> **HTML** 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。  
> HTML不是一种编程语言，而是一种标记语言 (markup language)。 标记语言是一套标记标签 (markup tag)。

***超文本的含义*：**

1.  它可以加入图片、声音、动画、多媒体等内容（超越了文本限制 ）。
2.  它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）。

### 2、Web标准 ###

> Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

#### 1>为什么需要Web标准 ####

由于不同浏览器解析出来的效果不一致，开发者需要开发多个版本。

Web 标准可以让不同的开发人员写出的页面更标准、更统一；内容能被更广泛的设备访问；更容易被搜寻引擎搜索；使网站更易于维护；提高页面浏览速度。

#### 2>Web标准的构成 ####

Web标准主要包括结构（Structure） 、表现（Presentation）和行为（Behavior）三个方面。  
![在这里插入图片描述][13fa9cf024604854a023ad5d6a107b00.png]

<table> 
 <thead> 
  <tr> 
   <th>标准</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>结构</td> 
   <td>结构用于对<strong>网页元素</strong>进行整理和分类，HTML</td> 
  </tr> 
  <tr> 
   <td>表现</td> 
   <td>表现用于设置网页元素的颜色、大小等<strong>外观样式</strong>，CSS</td> 
  </tr> 
  <tr> 
   <td>行为</td> 
   <td>行为指网页模型的定义及<strong>交互</strong>的编写，Javascript</td> 
  </tr> 
 </tbody> 
</table>

结构写到 HTML 文件中， 表现写到 CSS 文件中， 行为写到 JavaScript 文件中。

![在这里插入图片描述][803dc634f2cd45399abd43a3008b7fdd.png]

### 3、HTML语法规范 ###

#### 1>基本语法 ####

1.  HTML 标签是由尖括号包围的关键词，如 < html >
2.  **双标签**：成对出现（大多数都是双标签），如< html>< /html>
3.  **单标签**：单个标签（很少），如< br/>

#### 2>标签关系 ####

*  包含关系

*  并列关系

## 二、HTML标签 ##

### 1、基本标签 ###

<table> 
 <thead> 
  <tr> 
   <th>标签名</th> 
   <th>定义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt; html&gt;&lt; /html&gt;</td> 
   <td>HTML标签</td> 
  </tr> 
  <tr> 
   <td>&lt; head&gt;&lt; /head&gt;</td> 
   <td>文档的头部</td> 
  </tr> 
  <tr> 
   <td>&lt; title&gt;&lt; /title&gt;</td> 
   <td>文档的标题</td> 
  </tr> 
  <tr> 
   <td>&lt; body&gt;&lt; /body&gt;</td> 
   <td>文档的主体</td> 
  </tr> 
 </tbody> 
</table>

<html>
       <head>
          <title> 文章标题</title>
       </head>
       <body>
          文章主题在这里！
       </body>
    </html>

### 2、标题标签 ###

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

*  加了标题的文字会变的加粗，字号也会依次变大。
 *  一个标题独占一行。  
    ![在这里插入图片描述][5535b27751874ec0888e7a6119247d31.png]

### 3、段落和换行标签 ###

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，< p>标签用于定义段落，它可以将整个网页分为若干个段落。

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

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

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

### 4、文本格式化标签 ###

突出重要性, 比普通文字更重要

<table> 
 <thead> 
  <tr> 
   <th>语义</th> 
   <th>标签</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>加粗</td> 
   <td>&lt; strong&gt;&lt; /strong&gt;</td> 
  </tr> 
  <tr> 
   <td>倾斜</td> 
   <td>&lt; em&gt;&lt; /em&gt;</td> 
  </tr> 
  <tr> 
   <td>删除线</td> 
   <td>&lt; del&gt;&lt; /del&gt;</td> 
  </tr> 
  <tr> 
   <td>下划线</td> 
   <td>&lt; ins&gt;&lt; /ins&gt;</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][af89b8ebaa4f460a97be10dfff9f75f1.png]

### 5、< div>和< span>标签 ###

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

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

### 6、图像标签 ###

< img> 标签用于定义 HTML 页面中的图像。

**src 是< img>标签的必须属性，它用于指定图像文件的路径和文件名。**

***图像标签属性说明：***

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>图片路径</td> 
  </tr> 
  <tr> 
   <td>alt</td> 
   <td>图片不能显示用来代替的文字</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>鼠标放到图像上显示的文字</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>设置图像的宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>设置图像的高度</td> 
  </tr> 
  <tr> 
   <td>border</td> 
   <td>设置图像边框粗细</td> 
  </tr> 
 </tbody> 
</table>

*  图像标签可以拥有多个属性，必须写在标签名的后面。
 *  属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

> 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
> 
> 绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

### 7、超链接标签 ###

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

***语法格式：***

<a href="跳转目标url地址" target="目标窗口弹开方式">文本或图像</a>

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>href</td> 
   <td>指定链接目标的url地址</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>链接打开方式，默认为_self，在新窗口打开为_blank</td> 
  </tr> 
 </tbody> 
</table>

***链接分类：***

1.  **外部链接**: 例如 < a href="http:// www.baidu.com "> 百度< /a >。
2.  **内部链接**:直接链接内部页面名称即可
3.  **空链接**: 如果当时没有确定链接目标时，< a href=“\#”> 首页 < /a > 。
4.  **下载链接**: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
5.  **网页元素链接**: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
6.  **锚点链接**: 点击链接,可以快速定位到页面中的某个位置.（在链接文本的 href 属性中，设置属性值为 \#名字 的形式，找到目标位置标签，里面添加一个 id 属性 = 刚才的名字）

### 8、表格标签 ###

*  < table>< /table>用于定义表格
 *  < tr>< /tr>定义表格中的行
 *  < td>< /td>定义表格中的单元格
 *  < th>< /th>表头单元格（居中加粗）

![在这里插入图片描述][a4335d152d594594970e18e60054486e.png]

***语法格式：***

<table>
            <tr>
                <td>单元格内的文字</td>
                ...
            </tr>
            ...
    </table>

#### 1>表格属性 ####

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>align</td> 
   <td>left、center、right</td> 
   <td>表格相对周围元素对齐方式</td> 
  </tr> 
  <tr> 
   <td>border</td> 
   <td>1或“ ”</td> 
   <td>是否有边框</td> 
  </tr> 
  <tr> 
   <td>cellpadding</td> 
   <td>像素值</td> 
   <td>边沿与内容间空白值 ，默认1</td> 
  </tr> 
  <tr> 
   <td>cellspacing</td> 
   <td>像素值</td> 
   <td>单元格之间的空白 ，默认2</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>像素值或百分比</td> 
   <td>规定表格的宽度</td> 
  </tr> 
 </tbody> 
</table>

#### 2>表格结构标签 ####

1.  < thead>< /thead>：用于定义表格的头部。< thead> 内部必须拥有 < tr> 标签。 一般是位于第一行。
2.  < tbody>< /tbody>：用于定义表格的主体，主要用于放数据本体 。
3.  以上标签都是放在 < table>< /table> 标签中。

#### 3>合并单元格 ####

1.  先确定是跨行还是跨列合并。
2.  找到目标单元格。
3.  删除多余的单元格。

***方式：***

*  跨行合并：最上侧单元格为目标单元格,rowspan=“合并单元格个数”，目标单元格为最上侧的
 *  跨列合并：最左侧单元格为目标单元格,colspan=“合并单元格个数”，目标单元格为最左侧的  
    ![在这里插入图片描述][f5d3df13c19e465f98a7b53e0bb3d603.png]

### 9、列表标签 ###

表格是用来显示数据的，那么列表就是用来布局的。列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据不同的使用情景，列表可以分为三类：**无序列表**、**有序列表**和**自定义列表**。

#### 1>无序列表 ####

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

***语法格式：***  
![在这里插入图片描述][124f4203e77440428dac10b8cd7078ab.png]

*  无序列表的各个列表项之间没有顺序级别之分，是并列的。
 *  < ul>< /ul> 中只能嵌套 < li>< /li>
 *  < li> 与 < /li> 之间相当于一个容器，可以容纳所有元素。

#### 2>有序列表 ####

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

***语法格式***：  
![在这里插入图片描述][46ad88fe4f85455884a27bc1c731f85e.png]

#### 3>自定义列表 ####

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

< dl> 标签用于定义描述列表（或定义列表），该标签会与 < dt>（定义项目/名字）和  
< dd>（描述每一个项目/名字）一起使用。

***语法格式:***  
![在这里插入图片描述][9e66c4263cd5436ead4af99007d8cea8.png]

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

### 10、表单标签 ###

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

#### 1>表单域 ####

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

***常用属性***：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>action</td> 
   <td>指定接收并处理表单数据的服务器程序的url地址</td> 
  </tr> 
  <tr> 
   <td>method</td> 
   <td>设置表单数据的提交方式，其值为get或post</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>指定表单的名称，区分一个页面的多个表单</td> 
  </tr> 
 </tbody> 
</table>

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

#### 2>表单控件 ####

##### <input表单元素 #####

type 属性设置不同的属性值用来指定不同的控件类型

***type属性值***

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>txet</td> 
   <td>定义单行输入文本</td> 
  </tr> 
  <tr> 
   <td>password</td> 
   <td>定义密码字段</td> 
  </tr> 
  <tr> 
   <td>radio</td> 
   <td>定义单选按钮</td> 
  </tr> 
  <tr> 
   <td>checkbox</td> 
   <td>复选框</td> 
  </tr> 
  <tr> 
   <td>submit</td> 
   <td>把表单域form里表单元素的值提交给后台服务器</td> 
  </tr> 
  <tr> 
   <td>reset</td> 
   <td>重置按钮，清除表单所有数据</td> 
  </tr> 
  <tr> 
   <td>button</td> 
   <td>定义可点击按钮</td> 
  </tr> 
  <tr> 
   <td>file</td> 
   <td>文件域，上传文件使用</td> 
  </tr> 
 </tbody> 
</table>

***除type外其他属性***：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name</td> 
   <td>定义input元素名称</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>规定input元素的值</td> 
  </tr> 
  <tr> 
   <td>checked</td> 
   <td>input元素首次加载时被选中</td> 
  </tr> 
  <tr> 
   <td>maxlength</td> 
   <td>规定字符最大长度</td> 
  </tr> 
 </tbody> 
</table>

*  name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
 *  name 表单元素的名字, 要求单选按钮和复选框要有相同的name值.
 *  checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.

***label标签***

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

语法格式：

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

##### <select下拉表单元素 #####

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

***语法格式***：  
![在这里插入图片描述][a8b331f6cc834a0bad6eb86192bf7377.png]

*  < select> 中至少包含一对< option> 。
 *  在< option> 中定义 selected =“ selected " 时，当前项即为默认选中项。

##### <textarea文本域表单元素 #####

当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 < textarea> 标签。在表单元素中，< textarea> 标签是用于定义多行文本输入的控件。使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

***语法格式***：

*  cols=“每行中的字符数” ，rows=“显示的行数”

[21b2d43429a44467b3359855123a8549.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/844ec4635ac940aeb32f9f06f49880b9.png
[13fa9cf024604854a023ad5d6a107b00.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/f4e8b53ef6164b35b4a2bebd23999021.png
[803dc634f2cd45399abd43a3008b7fdd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/e53488e4535940969b1d5165d376803c.png
[5535b27751874ec0888e7a6119247d31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/14f3727fd6734e8aa961e0e7f1b29d7b.png
[af89b8ebaa4f460a97be10dfff9f75f1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/c8e595e5280c42c582f051676432385e.png
[a4335d152d594594970e18e60054486e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/8f4abe4f497c418198911373bd6941ce.png
[f5d3df13c19e465f98a7b53e0bb3d603.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/ddd375db00a64cf9b026301946aa6d52.png
[124f4203e77440428dac10b8cd7078ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/435d41f7b3ff4642a9c76bd45d7c42ed.png
[46ad88fe4f85455884a27bc1c731f85e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/ea656b9aab3a47ccbced217f31a1cc6c.png
[9e66c4263cd5436ead4af99007d8cea8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b244c5159f0942d1bf77f0d2e806b75b.png
[a8b331f6cc834a0bad6eb86192bf7377.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/8266eaf99ead42339cdc6b804e007884.png