首页 前端知识 HTML中常用标签--详解

HTML中常用标签--详解

2024-10-15 23:10:14 前端知识 前端哥 259 881 我要收藏

目录

1.b/strong标签

2.i/em 标签

3.u标签

4.del删除线

5.br换行

6.p标签 *

7.pre 预处理标签

8.span标签**

9.div标签***

10.sub标签

11.sup标签

12.hr标签

13.hn标签

14.HTML5中语义标签

特殊字符

15.多媒体标签

img***

a 标签***

第一种用法:超链接

第二种用法:锚点

audio 标签

video标签

16.表格标签**

基本表格

带标题的表格

跨行跨列表格

表格嵌套

17.列表标签***

ul

ol

dl

18.表单标签***

form标签

input

select

textarea


1.b/strong标签

这个标签是用于加粗文字的,一般用于强调某个部分的作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>b/strong标签的使用</title>
</head>
<body>
2022年3月23日 <b>HTML</b>文档也叫做web <strong>页面</strong> HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词,比如 HTML 标签通常是成对出现的
</body>
</html>

在以后使用中,推荐使用 strong 标签。

2.i/em 标签

它们的使用是让文字变为斜体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>b/strong标签的使用</title>
</head>
<body>
<i>2022年3月23日</i> <b>HTML</b>文档也叫做web <strong>页面</strong> HTML 标签 HTML <em>标记</em>标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词,比如 HTML 标签通常是成对出现的
</body>
</html>

3.u标签

它的作用是给文字添加下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>b/strong标签的使用</title>
</head>
<body>
<i>2022年3月23日</i> <b>HTML</b>文档也叫做web <strong>页面</strong> HTML 标签 HTML <em>标记</em>标签<u>通常</u>被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词,比如 HTML 标签通常是成对出现的
</body>
</html>

4.del删除线

它的使用是给文字添加删除线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>b/strong标签的使用</title>
</head>
<body>
<i>2022年3月23日</i> <b>HTML</b>文档也叫做web <strong>页面</strong> HTML <del>标签</del> HTML <em>标记</em>标签<u>通常</u>被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词,比如 HTML 标签通常是成对出现的
</body>
</html>

5.br换行

不需要</br>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>b/strong标签的使用</title>
</head>
<body>
<i>2022年3月23日</i> <b>HTML</b>文档也叫做web <strong>页面</strong> HTML <del>标签</del> HTML <em>标记</em>标签<u>通常</u>被称为 HTML 标签 (HTML tag)。 <br>HTML 标签是由尖括号包围的关键词,比如 HTML 标签通常是成对出现的
</body>
</html>

6.p标签 *

这个标签是一个段落标签,它本身就自带了行间距。在这个标签中的文件会独占一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p标签的使用</title>
</head>
<body>
<p>HTML 不是编程语言,是一种超文本标记语言,用来制作网页的一门语言,由标签组成的,比如:图片标签、链接标签、视频标签...
    所谓超文本,有两层含义:</p>
<p>html 可以加入图片、声音、动画、多媒体等内容(超越了文本的限制)</p>
<p>html 可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)</p>
<p>HTML 页面也称为 HTML 文档</p>
<p>HTML 文档的后缀名必须是.html 或 .htm,浏览器的作用是读取HTML文档,并以网页的形式显示出它们
    HTML 文档里按下多次空格,在网页中只会显示一个空格,并且在 HTML 文档里按下回车键,在网页中也不会进行换行</p>
</body>
</html>

7.pre 预处理标签

        这个标签的作用是书写的内容与显示的样式内容相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pre标签</title>
</head>
<body>
<pre>
           静夜思
        床前明月光,
        疑是地上霜。
        举头望明月,
        低头思故乡。
</pre>
</body>
</html>

这个标签一般用于显示源码的。

8.span标签**

        它是一个行内标签,它没有什么特殊的意义,但是在使用中却比较多。一般会接合 css 样式来修饰文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
    <style>
        span {
            color: red;
        }
    </style>
</head>
<body>
静夜思版本说明<span>明代版本</span>这是目前流传比较广泛的版本。
</body>
</html>

9.div标签***

它是一个块状标签,一般用于页面布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div标签</title>
</head>
<body>
<div class="div2">
div标签是一个块状标签,
一个 div 标签会独占一行,
</div>
​
<div id="div1">
它没有任意的属性,
但是我们可以给它自定义一个属性,
例如,id、class 等。
</div>
</body>
</html>

10.sub标签

这个标签的作用是指定下标,一般用于数字方面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sub</title>
</head>
<body>
log<sub>2</sub>
</body>
</html>

11.sup标签

这个标签的作用是指定上标,一般用于数字方面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sup</title>
</head>
<body>
2<sup>3</sup>=8
</body>
</html>

12.hr标签

这个标签用于给页面划水平线。不需要</hr>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>hr</title></head><body>静夜思<hr size="5" width="100" align="left">床前明月光,疑是地上霜。举头望明月,低头思故乡。</body></html>  

标签属性说明:

size:用于指定线的粗线,值越大线越粗
width:用于指定线的宽度,值越大越宽
align:用于指定线的对齐方式,有以下三个值:
   left:居左对齐
   center:居中对齐,它是默认值
   right:居右对齐

13.hn标签

这个标签中的 n 是 1 ~ 6 的数字,一般用于标题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hn</title>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</body>
</html>

14.HTML5中语义标签

这个标签是 HTML5 中定义的新的语义标签,有以下几个:

  • header:用于定义页面的顶部

  • article:用于表示文章的内容

  • section:用于定义内容的分块信息

  • nav:用于定义页面的导航部分

  • aside:用于定义页面的侧边栏

  • footer:用于定义页面的页脚部分

  • address:用于定义用户邮件、地址等信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5新标签的使用</title>
</head>
<body>
<header>这是头部信息</header>
<nav>首页 | 新闻 | 音乐  | 游戏</nav>
<aside>侧边栏</aside>
<footer>@copyright; 2024</footer>
</body>
</html>

特殊字符

在 HTML 中有很多特殊字符,如下表所示

特殊字符转义码
空格&nbsp;
<&lt;
>&gt;
版权&copy;

15.多媒体标签

img***

这个标签的作用是在页面中引入图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签</title>
</head>
<body>
<img src="image/5.jpeg" width="200" height="50" border="1" alt="这是图片" title="这是图片">
</body>
</html>

标签属性说明:

src:这个属性非常重要,用于指定图片显示的路径,可以是相对路径,也可以是绝对路径。(简单来        说,在 windows 中带了盘符,在 Linux 中以/开头的路径,在链接中以 http:// 开头的就是绝对路径,其他都是           
相对路径。相对路径的参考点就是这个对象本身。)
width:用于指定图片显示的宽度,如果只指定宽,则高会根据宽度来等比例绽放
height:用于指定图片显示的高度,如果只指定高,则宽度会根据高度来等比例绽放。注意:width和height两个属性不要同时指定。
border:用于指定力图片显示的边框粗细,默认是无边框
alt:是在图片不能正常显示时才会显示这个文字内容
title:用于当鼠标移动到图片上时显示的提示信息。一般用于搜索引擎优化。

a 标签***

这个标签是用于作链接的标签。

第一种用法:超链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签</title>
</head>
<body>
<a href="https://www.baidu.com">百度</a><br>
<a href="http://www.baidu.com" target="_blank">打开百度</a><br>
</body>
</html>

属性说明:

href:这个属性是一个必须属性,用于指定要打开的目标地址
target:链接打开的方式,有以下几个值:
   - _blank:在新窗口打开
   - _self:在本窗口打开,默认值
   - _top:在父窗口打开,一般用于 frame 框架时
   - _parent:在父窗口打开,一般用于 frame 框架时
第二种用法:锚点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点</title>
</head>
<body>
<a href="#bottom">底部</a> | <a href="demo2.html#bottom">demo2.html</a>
<img src="image/6.jpeg">
<a name="bottom"></a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo2</title>
</head>
<body>
<a href="demo1.html">demo1.html</a>
<img src="image/7.jpeg">
<a name="bottom"></a>
</body>
</html>

audio 标签

这个标签是用于播放音乐的标签。常用支持格式为 mp3 格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
</head>
<body>
<audio src="https://www.runoob.com/try/demo_source/horse.mp3" controls="controls" autoplay="autoplay"></audio>
​
<audio controls>
    <source src="https://www.runoob.com/try/demo_source/horse.mp3">
</audio>
</body>
</html>

标签属性说明:

1. controls:它是用于对播放器进行控制器的,即显示播放器的控制按钮
2. src:用于指定音频文件的路径
3. autoplay:指定是否自动播放
4. loop:指定是否循环播放

video标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video</title>
</head>
<body>
<video src="https://www.runoob.com/try/demo_source/movie.mp4" controls autoplay width="200"></video>
​
<video controls>
    <source src="https://www.runoob.com/try/demo_source/movie.mp4">
</video>
</body>
</html>

标签属性说明:

1. src:指定要播放的视频地址,可以是相对路径,也可以是绝对路径。这个标签所支持的视频格式不多,  目前只把持 mp4、ogg 两种
2. controls:显示播放控制按钮
3. autoplay:自动播放
4. loop:自动循环
5. width:设置播放器的宽度
6. height:设置播放器的高度

16.表格标签**

在我们进行数据展示时,很多时候都会用到表格,特殊是在后台进行数据管理时,或者显示列表数据时,就会用表格。

要使用表格就需要用到 table 标签,而表格是由行和列组成。行的标签是 tr,而列的标签是 td 或 th。

基本表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单表格</title>
</head>
<body>
<table width="100" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
</body>
</html>

表格的标签和属性说明:

table:用于绘制表格
tr:用于绘制表格的行
td:用于绘制表格的列(单元格)
width:指定表格的宽度,也可以是 td 的属性
border:指定表格的边框粗细
cellspacing:指定单元格之间的间距
cellpadding:指定单元格边框与单元格中内容的距离
align:用于指定表格对齐方式:
   - left:左对齐,默认值
   - center:居中对齐
   - right:右对齐
   
   align属性可以是 table,也可以是 tr,还可以是 td。如果是 table 的,表示对整个表格有效;如果是 tr 的,表示对当前行有效;如果是 td 的表示只对当前的单元格有效。
​

带标题的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带标题的表格</title>
</head>
<body>
<!-- 我们画一个三行三列的表格 -->
<table width="200" border="1" cellspacing="0">
    <caption>第二个表格</caption>
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td></td>
        <td>hello</td>
        <td></td>
    </tr>
    </tfoot>
</table>
</body>
</html>

        使用 caption 来指定表格的标题,使用 thead 标签来指定表格的头,tbody 来指定表格数据区,tfoot 指定表格的尾部

td 和 th 的区别:

  1. td中的内容是普通格式,而 th 中的内容是加粗的格式

  2. td中的内容是左对齐,而 th 中的内容是居中对齐

跨行跨列表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨行跨列的列表</title>
</head>
<body>
<table width="200" border="1" cellspacing="0">
  <tr align="center">
    <td colspan="2">1</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr align="center">
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td rowspan="2">8</td>
  </tr>
  <tr align="center">
    <td>9</td>
    <td>10</td>
    <td>11</td>
  </tr>
</table>
</body>
</html>

相关属性说明:

1. colspan:用于指定要跨多少列,它的值是一个数字
2. rowspan:用于指定要跨多少行,它的值是一个数字

表格嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格嵌套</title>
</head>
<body>
<table width="150" border="1" cellspacing="0">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>
            <table width="100%" border="1" cellspacing="0">
                <tr>
                    <td>41</td>
                    <td>42</td>
                </tr>
                <tr>
                    <td>43</td>
                    <td>44</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

17.列表标签***

在 HTML 中,列表标签有以下几种:

  • ul

  • ol

  • dl

ul

它是无序列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul</title>
</head>
<body>
<ul type="circle">
    <li>西安</li>
    <li>北京</li>
    <li>重庆</li>
    <li>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>
</ul>
</body>
</html>

标签和属性说明:

ul:用于指定无序列表
li:指定列表中的某一项
type:指定无序列表的格式,有以下几个值:(了解)
    - disc:实心圆形,默认值
    - square:实心方形
    - circle:空心圆形

ol

它是有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ol</title>
</head>
<body>
<ol type="1">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
</ol>
<ol type="a">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
</ol>
<ol type="A">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
</ol>
<ol type="i">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
</ol>
</body>
</html>

type属性有以下值:

1. 数字:默认值
2. a:以小写字母 a 开始
3. A:在大写字母 A 开始
4. i:以罗马字开始

dl

它数据列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dl</title>
</head>
<body>
<dl>
    <dt>陕西地名</dt>
    <dd>西安</dd>
    <dd>潼关</dd>
    <dd>宝鸡</dd>
</dl>
</body>
</html>

18.表单标签***

form标签

这个标签是用于表单提交的标签,一般在与用户交互时就会用到 form 标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单标签</title>
</head>
<body>
<form name="form1" action="demo1.html" method="post">
    <input type="submit" value="提交">
</form>
</body>
</html>

标签属性说明:

name:用于给这个表单取一个唯一的名称,便于后续使用 js 来操作这个表单
action:表单提交的地址
method:表单提交的方式,有以下两个值:
    - get:表单以 get 方式提交
    - post:表单以 post 方式提交

补充get和post提交的区别:

  1. get提交的数据会以参数的形式体现在浏览器地址栏中,而 post提交的数据是在请求头中

  2. get提交方式提交的数据不能超过4k大小,而post提交方式理论上是没有大小限制的

input

这是表单元素中非常重要一组标称,它有很多类型:

  • text:最常见的类型,用于提交文本字符串内容

  • password:用于提交密码数据

  • radio:单选按钮

  • checkbox:多选按钮

  • submit:提交按钮

  • reset:重置按钮

  • button:普通按钮

  • image:图片按钮

  • file:文件上传域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form2表单元素之input的使用</title>
</head>
<body>
<form action="" method="post">
    <input type="text" name="name" placeholder="姓名"><br>
    <input type="password" name="password" placeholder="密码"><br>
    <input type="number" name="age" value="18" placeholder="年龄"><br>
    <input type="email" name="email" placeholder="邮箱"><br>
        <input type="radio" name="gender" value="男"> 男 <input type="radio" name="gender" checked value="女"> 女 <br>
    <input type="checkbox" name="love" value="看书" checked> 看书 <input type="checkbox" name="love" checked value="电影"> 电影 <input type="checkbox" name="love" value="游戏"> 游戏<br>
    <input type="file" name="file"><br>
    <input type="button" name="btn" value="普通按钮"> <br>
    <input type="reset" name="reset" value="重置"><br>
    <input type="submit" name="submit" value="提交"><br>
    <input type="image" src="image/8.jpeg" width="50">
</form>
</body>
</html>

select

select是下拉列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单之下拉列表</title>
</head>
<body>
<form action="" method="post">
    <select name="city">
        <option>--请选择--</option>
        <option value="西安">西安</option>
        <option selected value="北京">北京</option>
        <option value="上海">上海</option>
    </select>
​
    <hr>
​
    <select name="hobby" size="3" multiple>
        <option value="看书">看书</option>
        <option value="电影">电影</option>
        <option value="音乐">音乐</option>
        <option value="游戏">游戏</option>
    </select>
</form>
</body>
</html>

标签属性说明:

name:表单提交时要获取对应元素值是所需要的属性
value:指定select中每一个子元素的值
size:指定 select 可看到的元素个数,默认值是 1
multiple:表示可以多选

textarea

这个标签是用于输入大文本内容的标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单之textarea</title>
</head>
<body>
<form action="" method="post">
    <textarea name="content" cols="50" rows="5">内容</textarea>
</form>
</body>
</html>

标签属性说明:

name:用于获取元素值的属性
cols:用于指定文本框的宽度
rows:用于指定文本框的高度

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18976.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!