HTML基础标签详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46881759/article/details/126190387

这篇博客详细介绍了HTML的基础标签，包括注释、标题、段落、水平线、换行、文本格式化、图像、链接、锚点定位、特殊字符、列表、表格、表单以及新语义化标签的使用方法和属性。同时，提到了多媒体标签audio和video的相关属性。

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

1.注释标签

作用：方便阅读和理解HTML文档。

基本语法格式:

<!-- 注释语句 -->

2.标题标签 h

作用：为了使网页更具有语义化。

HTML提供了6个等级的标签即<h1>、<h2>、<h3>、<h4>、<h5>、<h6>作为标题使用。

基本语法格式：

    <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>

特性：文字加粗独占一行字号逐级递减上下有空白行

注意：h1比较重要通常留给logo使用

3.段落标签 p

作用：在网页中把文字有条理的显示出来。

基本语法格式：

<p>
        我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字
        我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字
        我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字
        
        
</p>

特性：独占行上下有空白行

4.水平线标签

作用：在网页中常看到一些水平线将段落与段落分开，使文档结构清晰，层次分明。

基本语法格式:

<hr>

5.换行标签

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

基本语法格式:

<p>
        <!-- 浏览器会把换行和多个空格 翻译成一个空格 -->
        我 <br> <br>
        是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字
        我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字
        我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字
        我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字
       
</p>

6.div span

div span是没有语义的是我们网页布局主要的2个盒子

 <!-- div 没有语义  独占一行  -->
    <div>我是文字</div>
    <div>我是文字</div>
 <!-- span 没有语义 一行可以有多个span -->
    <span>我也可以放文字</span>
    <span>我也可以放文字</span>

7.文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

 <!-- 一行可以有多个 -->
    <b>加粗</b>
    <i>倾斜</i>
    <u>下划线</u>
    <s>删除线</s>
    <br>
    <strong>加粗</strong>
    <em>倾斜</em>
    <ins>下划线</ins>
    <del>删除线</del>

8.图像标签img

想在网页中显示图像就需要使用图像标签

<!-- <img src="images/oldman.jpg"> -->

    <!-- 绝对路径 -->
    <img src="/Users/maboxuan/Desktop/b0367/html/day01基础标签/job/圣诞/images/oldman.jpg" alt="">

    <!-- 相对路径  ./ 表示进入当前文件所在文件夹  ./可以省略-->
    <img src="images/oldman.jpg">

    <!-- ../ 表示跳出当前文件所在的文件夹 ../../ -->
    <img src="../job/圣诞/images/oldman.jpg" alt="">

该语法中src属性用于指定图像文件的路径和文件名,他是img标签的必需属性。

9.链接标签

 <a href="http://www.baidu.com">百度</a>
 <a href="01-img标签.html">img</a>

href:用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。Hypertext
Reference的缩写。意思是超文本引用
target:用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。

10.base标签

base写到<head> </head> 之间

<!-- base标签设置在head标签里面  实现整体a标签的打开方式 -->
<base target="_blank">

11.锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步:

1.使用<a href="#id名">链接文本"</a>创建链接文本。

2.使用相应的id名标注跳转目标的位置。

 <a href="#one">第1集</a>
 <h4 id="one">
        第1集(分集以TV版为准)
 </h4>

12.特殊字符标签（常用）

  空格符

< 小于号

> 大于号

13.列表标签

把...制成表,以表显示

列表最大的特点就是整齐、整洁、有序

13.1无序列表ul

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

基本语法格式:

<ul>
        <li>列表第一项</li>
        <li>列表第一项</li>
        <li>列表第一项</li>
        <li>列表第一项</li>
        <li>列表第一项</li>
</ul>

13.2有序列表ol

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

有序列表的基本语法格式:

<ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
</ol>

13.3自定义列表.

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

基本语法:

<dl>
        <dt>列表项头</dt>
        <dd>.liebiao1</dd>
        <dd>.liebiao2</dd>
        <dd>.liebiao3</dd>
</dl>
<dl>
        <dt>列表项头</dt>
        <dd>.liebiao1</dd>
        <dd>.liebiao2</dd>
        <dd>.liebiao3</dd>
</dl>

14.表格 table

<table border="1" cellspacing="0" width="300" height="200" align="center">
        <caption>表格的名字</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <!-- th 默认的样式 文字加粗 居中 -->
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tfoot>

    </table>

14.1合并单元格

跨行合并: rowspan 跨列合并: colspan

公式:删除的个数 =合并的个数- 1

14.2总结表格

1.表格中由行中的单元格组成。

2.表格中没有列元素，列的个数取决于行的单元格个数。

15.表单 form

15.1input控件

<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。

input 标签 type 属性

属性值：

text 当行文本输入框 password 密码输入框 radio checked 单选按钮 checkbox checked 复选框

button 按钮 submit 具有提交功能的按钮 reset 重置按钮 image 图片形式提交的按钮 file 文件域提交文件的

属性

name (input)控件的名称

value 控件中的默认文本值

maxlength 允许输入的最多字符数

 <form action="#" method="get">
        用户名：<input type="text" name="username" value="请输入中文名字">
        身份证：<input type="text" name="idcard" size="70" maxlength="18" value="请输入18位">
        <br>
        <label for="psd">密码：</label> <input type="password" name="password" id="psd">
        <br>
        性别：
        <input type="radio" name="sex" value="nan" id="nan"> <label for="nan">男</label>
        <input type="radio" name="sex" value="nv" id="nv"> <label for="nv">女</label>
        <br>
        爱好：
        <!-- checked 默认选中 -->
        <input type="checkbox" name="like" value="chou" checked> 抽烟
        <input type="checkbox" name="like" value="he"> 喝酒
        <input type="checkbox" name="like" value="tang"> 汤头
        <br>
        普通按钮:
        <input type="button" value="按钮" name="narmal-buttom">
        <br>
        <!-- submit 是可以把前台用户提交的数据 提交给后台 -->
        <input type="submit" name="submit" value="立即注册">
        <input type="reset" name="reset" value="重新填写">
        <br>
        <!-- 具有提交功能的图片形式的按钮 -->
        <input type="image" src="./images/oldman.jpg">
        <br>
        <input type="file">

        <!-- name 给表单控件起名字  分类 -->
        <!-- 单选按钮和复选框 属于一类 起相同的name名  才能实现单选 -->

        <!-- value 负责值 -->
   </form>

15.2label标签

label标签为input元素定义标注(标签)。

作用:用于绑定一个表单元素,当点击labe|标签的时候,被绑定的表单元素就会获得输入焦点

如何绑定元素呢?

for属性规定label与哪个表单元素绑定。

15.3 textarea控件(文本域)

<form action="#">
        <textarea name="liuyan" cols="30" rows="10">111111</textarea>
</form>

15.4下拉菜单

使用select控件定义下拉菜单

option 选项

optgroup lable=””分组

基本语法格式:

<select name="year">
        <option value="1994">1994</option>
        <option value="1995">1995</option>
        <option value="1996">1996</option>
        <option value="1997">1997</option>
        <option value="1998">1998</option>
        <option value="1999">1999</option>
        <option value="2000">2000</option>
        <option value="2001">2001</option>
        <option value="2002">2002</option>
</select>
<select name="month">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
</select> 
<select name="city">
        <optgroup label="黑龙江">
            <option value="ha">哈尔滨</option>
            <option value="ha">双鸭山</option>
            <option value="ha">牡丹江</option>
            <option value="ha">佳木斯</option>
            <option value="ha">鹤岗</option>
        </optgroup>
        <optgroup label="辽宁">
            <option value=""  selected    >盘锦</option>
            <option value="">沈阳</option>
            <option value="">大连</option>
        </optgroup>


</select>

15.5表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

常用属性:
1. action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method用于设置表单数据的提交方式，其取值为get或posto
3. name用于指定表单的名称，以区分同一个页面中的多个表单。
注意:每个表单都应该有自己表单域。

16.新语义化标签
header: 定义文档的页眉
nav:定义导航链接的部分
footer: 定义文档或节的页脚
article: 标签规定独立的自包含内容
section:定义文档中的节(section、区段)

aside: 定义其所处内容之外的内容

18.1新属性

<form action="#">
        <input type="text" placeholder="11111" autofocus required>
        <input type="file" multiple>
        <input type="email" name="" id="">
        网址：<input type="url">
        <input type="range" min="1" max="10" value="3">
        <input type="time">
        <input type="submit">


</form>

17.多媒体标签

audio 音频 video 视频

audio 音频属性

controls 显示默认播放控件

autoplay 自动播放谷歌不支持

loop 循环播放

video 视频属性

controls 显示默认播放控件

autoplay 自动播放谷歌不支持

loop 循环播放

能设置宽高

muted 静音播放谷歌用muted静音自动播放

多浏览器支持的方案source

<audio src="recourse/music1.mp3" controls autoplay></audio>
<video src="./recourse/movie.mp4" controls autoplay muted width="400"></video>