常用HTML标签及其属性-整理

最新推荐文章于 2025-04-27 15:49:47 发布

码农叮叮车

最新推荐文章于 2025-04-27 15:49:47 发布

阅读量1.8k

点赞数 12

分类专栏：前端文章标签： html5

本文链接：https://blog.youkuaiyun.com/qq_51593012/article/details/125741658

版权

前端专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了HTML的基础知识，包括HTML的性质、网页的基本结构、常用标签的使用，如标题、段落、图片、超链接、列表和表格。此外，还涉及到了表单元素以及HTML5中新增的标签，帮助读者全面理解并掌握HTML的初步应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.HTML初识

HTML不是一种编程语言，而是一种标记语言，是用来描述网页的一种语言，各种类型网页开发的基础型语言；HTML使用标签描述网页中图片、文本、音乐、视频、超链接等；

2.网页的基本结构

（1）<!DOCTYPE> 标签：声明必须是 HTML 文档的第一行。用来指示浏览器关于页面使用哪个 HTML 版本进行编译的指令；

（2）<html> 标签：此元素可告知浏览器其自身是一个 HTML 文档；

（3）<head> 标签：用于定义文档的头部，它是所有头部元素的容器；

（4）<body> 标签：body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

3.HTML基本标签

（1）<hn>-</hn> 标题标签：是标明文章、作品等内容的简短语句，n为1~6；

（2）<p>-</p> 段落标签：在网页中描述具有一个相对完整的内容；

（3）<em>-</em> 斜体标签：实现的一种倾斜的字体样式；

（4）<strong>-</strong> 粗体标签：实现的一种加粗的字体样式；

（5）<hr/> 水平线标签：在网页中加入平行线用来区分上下文；

（6）<br/> 换行标签：跳到下一个新行；

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>标题标签1</h1>
    <h2>标题标签2</h2>
    <h3>标题标签3</h3>
    <h4>标题标签4</h4>
    <h5>标题标签5</h5>
    <h6>标题标签6</h6>
    <p>段落标签</p><br/>
    <em>斜体标签</em>
    <strong>粗体标签</strong>
    <hr/>
</body>
</html>

效果

4.图片标签

图像标签使用img标签，它是一个单标签。

其属性有：

（1）src：引用图片的路径；

（2）alt：在图片不能正常加载时显示的提示语；

（3）title：鼠标划上去显示的内容；

（4）width/height：设置图片的宽度和高度。

示例

<img src="./img/return.png" alt="提示语" title="图片标签" width="20px" height="20px">

注意相对路径和绝对路径的区别：

相对路径：不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置；

绝对路径：一般是指带有盘符的路径或完整网络地址。

5.超链接

HTML 使用超级链接与网络上的另一个文档相连。点击链接可以从一个页面跳转到另一个页面，格式为<a href="链接目标url地址">-</a>

其属性值有：

（1）href：必须存在，指的是链接跳转地址；

（2）target：表示链接的打开方式：

_blank：新窗口

_parent：父窗口

_self：本窗口（默认）

_top：顶级窗口

示例

<a href="#" target="_blank">超链接</a>

6.列表标签和表格标签

列表标签：

（1）<ul>-</ul> 标签：用来声明无序标签；

（2）<li>-</li> 标签：用来表示列表项；

（3）<ol>-</ol> 标签：用来声明有序列表；

（4）<dl>-</dl> 标签：用来声明自定义列表；

（5）<dt>-</dt> 标签：用来表示列表标题；

（6）<dd>-</dd> 标签：用来表示列表内容。

注意：

<li>标签分别与<ul>和<ol>配合使用，<dl>与<dt>与<dd>都是配合使用，不存在单独使用！

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <ul>
    <li>111</li>
    <li>222</li>
   </ul>
   <ol>
    <li>333</li>
    <li>222</li>
   </ol>
   <dl>
    <dt>标题</dt>
    <dd>111</dd>
    <dd>222</dd>
   </dl>
</body>
</html>

效果

表格标签：

（1）<table>-</table> 标签：定义表格；

（2）<tr> 标签：表格均有若干行组成使用tr定义

（3）<td> 标签：每行被分割为若干单元格使用td定义；

（5）<th> 标签：定义 HTML 表格中的表头单元格；

（5）跨行跨列：rowspan跨行，colspan跨列。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <table cellspacing="0"  align="center" border="1" width="300px" height="200px">
    <tr >
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>手机号</th>
        <th>微信</th>
    </tr>
    <tr>
        <td rowspan="2">单元格</td>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td>222</td>
        <td colspan="2">222</td>
        <td>222</td>
    </tr>
   </table>
</body>
</html>

效果

7.表单标签

表单在网页中主要负责数据采集，定义采集数据的范围。

（1）<form>-<form> 标签：定义表单标签；

<form action="#" method="post"></form>

（2）<input> 标签：定义输入字段，用户可以在其中输入数据；

<input type="text" name="username">

（3）<select>-</select> 标签：创建下拉列表；

<select>
     <option>男</option>
     <option>女</option>
</select>

（4）<textarea>-</textarea> 标签：多行的文本输入；

（5）<fieldset> ：可将表单内的相关元素分组；

（6）<label> 标签：对表单元素进行标注，增强鼠标的可用性；

8.拓展

HTML5中标签补充

元素	描述
<address>	HTML `<address>` 元素表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。联系人
<article>	HTML `<article>`元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。文章
<aside>	HTML `<aside>` 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。遮罩层、模态框
<footer>	HTML <footer> 元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。网站底部
<header>	HTML `<header>` 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。网站顶部
<main>	HTML `<main>` 元素呈现了文档的 `body` 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。网站中部
<nav>	HTML `<nav>`元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。导航