HTML 中的常用标签用法

待我称王封你为后i 2023-09-27 19:17 12阅读 0赞

**目录**

HTML 结构

HTML 常见标签

注释标签

标题标签: h1-h6

段落标签: p

换行标签: br

格式化标签

图片标签: img

超链接标签: a

表格标签

--------------------

## HTML 结构 ##

HTML 代码是由 "标签" 构成的，如下代码：

<body>hello</body>

> **标签名 (body) 放到 < > 中**
> 
> **大部分标签成对出现，<body>为开始标签，<\\body>为结束标签**
> 
> **少数标签只有开始标签, 称为 "单标签"**
> 
> **开始标签和结束标签之间, 写的是标签的内容. (hello)**

开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)

<body id="myId">hello</body>

## HTML 常见标签 ##

### 注释标签 ###

注释不会显示在界面上. 目的是提高代码的可读性

> ctrl + / 快捷键可以快速进行注释/取消注释

### 标题标签: h1-h6 ###

有六个, 从 h1 - h6. 数字越大, 则字体越小

<h1>hello</h1>
    <h2>hello</h2>
    <h3>hello</h3>
    <h4>hello</h4>
    <h5>hello</h5>
    <h6>hello</h6>

### 段落标签: p ###

把一段比较长的文本粘贴到 html 中，会发现并没有分成段落，例如以下文本

![1761e4dbd6d94e8694433df215223ed9.png][]

通过 p 标签改进上述代码, 每个段落放到 p 标签中.

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，
        <p>使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>
         超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

显示结果：

![e24b2dbed5bc4fc0ba7f799dc688b015.png][]

> p 标签之间存在一个空隙
> 
> 当前的 p 标签描述的段落，前面还没有缩进
> 
> 自动根据浏览器宽度来决定排版
> 
> html 内容首尾处的换行，空格均无效.
> 
> 在 html 中文字之间输入的多个空格只相当于一个空格
> 
> html 中直接输入换行不会真的换行，而是相当于一个空格

### 换行标签: br ###

br 是 break 的缩写，表示换行

br 是一个单标签(不需要结束标签)

br 标签不像 p 标签那样带有一个很大的空隙

代码示例

![317c2dd8b30f472883df20a8e665cde3.png][]

运行结果

![465f6d4c693f4f4484ba6d070a3090b2.png][]

### 格式化标签 ###

加粗: **strong 标签 和 b 标签**

倾斜: **em 标签 和 i 标签**

删除线: **del 标签 和 s 标签**

下划线: **ins 标签 和 u 标签**

<strong>strong 加粗</strong>
    <b>b 加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <s>删除线</s>
    <ins>下划线</ins>
    <u>下划线</u>

运行结果：

![5ecd58d64ea2436b8dfb2422f4299a51.png][]

### 图片标签: img ###

img 标签必须带有 src 属性. 表示图片的路径

运行

![04d4455127244c37b0134f8a4aec6273.png][]

img 标签的其他属性

> **alt**: 替换文本，当文本不能正确显示的时候, 会显示一个替换的文字
> 
> **title**: 提示文本，鼠标放到图片上, 就会有提示
> 
> **width/height**: 控制宽度高度，高度和宽度一般改一个就行，另外一个会等比例缩放，否则就会图片失衡
> 
> **border**: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定

### 超链接标签: a ###

href: 必须具备，表示点击后会跳转到哪个页面

target: 打开方式，默认是 \_self. 如果是 \_blank 则用新的标签页打开

运行结果：

![4f79f42ec9f04a1b901488cfd54d4567.png][]

点击它就会跳转到百度界面

空链接: 使用 \# 在 href 中占位

下载链接: href 对应的路径是一个文件 (可以使用 zip 文件)

锚点链接: 可以快速定位到页面中的某个位置

<a href="#one">第一集</a>
    <a href="#two">第二集</a>
    <a href="#three">第三集</a>
    <p id="one">
       第一集剧情 <br>
       第一集剧情 <br>
       ...
    </p>
    <p id="two">
       第二集剧情 <br>
       第二集剧情 <br>
     ...
    </p>
    <p id="three">
       第三集剧情 <br>
       第三集剧情 <br>
     ...
    </p>

### 表格标签 ###

table 标签: 表示整个表格

tr: 表示表格的一行

td: 表示一个单元格

th: 表示表头单元格，会居中加粗

thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)

tbody: 表格得到主体区域

> align 是表格相对于周围元素的对齐方式，align="center" (不是内部元素的对齐方式)
> 
> border 表示边框. 1 表示有边框(数字越大, 边框越粗),"" 表示没边框.
> 
> cellpadding: 内容距离边框的距离，默认 1 像素
> 
> cellspacing: 单元格之间的距离，默认为 2 像素 width / height: 设置尺寸

运行结果：

![6641acc98ab84381877265b25f95141b.png][]

--------------------

感谢大家的观看，希望对大家有帮助！

[1761e4dbd6d94e8694433df215223ed9.png]: https://img-blog.csdnimg.cn/1761e4dbd6d94e8694433df215223ed9.png
[e24b2dbed5bc4fc0ba7f799dc688b015.png]: https://img-blog.csdnimg.cn/e24b2dbed5bc4fc0ba7f799dc688b015.png
[317c2dd8b30f472883df20a8e665cde3.png]: https://img-blog.csdnimg.cn/317c2dd8b30f472883df20a8e665cde3.png
[465f6d4c693f4f4484ba6d070a3090b2.png]: https://img-blog.csdnimg.cn/465f6d4c693f4f4484ba6d070a3090b2.png
[5ecd58d64ea2436b8dfb2422f4299a51.png]: https://img-blog.csdnimg.cn/5ecd58d64ea2436b8dfb2422f4299a51.png
[04d4455127244c37b0134f8a4aec6273.png]: https://img-blog.csdnimg.cn/04d4455127244c37b0134f8a4aec6273.png
[4f79f42ec9f04a1b901488cfd54d4567.png]: https://img-blog.csdnimg.cn/4f79f42ec9f04a1b901488cfd54d4567.png
[6641acc98ab84381877265b25f95141b.png]: https://img-blog.csdnimg.cn/6641acc98ab84381877265b25f95141b.png