二：以理论结合实践方式梳理前端 HTML ——— 常用 HTML 标签

最新推荐文章于 2024-07-22 22:37:58 发布

十三餍

最新推荐文章于 2024-07-22 22:37:58 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/weijun20180101/article/details/123610356

版权

HTML 专栏专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML 常用标签

HTML 标签的学习虽不难，但是却需要多的实践，只有自己亲手敲敲代码，才能看出每个 HTML 标签具有什么样式的页面效果，这里给介绍一些常用标签

标题与段落标记

标签 <h1> ~ <h6> 分别用于定义一至六级的标题，标签 <p> 用于定义段落，都是块级元素，因此浏览器渲染完成后会自动换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <p>在一级标题下显示的段落</p>
    <h2>二级标题</h2>
    <p>在二级标题下显示的段落</p>
    <h3>三级标题</h3>
    <p>在三级标题下显示的段落</p>
    <h4>四级标题</h4>
    <p>在四级标题下显示的段落</p>
    <h5>五级标题</h5>
    <p>在五级标题下显示的段落</p>
    <h6>六级标题</h6>
    <p>在六级标题下显示的段落</p>
</body>
</html>

格式化文本标记

用于文本内容的展示，HTML 也有定义了多种标签用于不同文本效果的展示，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <b>粗体</b><br />
    <i>斜体</i><br />
    <ins>下划线</ins><br />
    <del>删除线</del><br />
    <small>减小字号</small><br />
    这是<sup>上标</sup><br />
    这是<sub>下标</sub><br />
</body>
</html>

链接标记

<a> 标签用于定义超链接，链接的内容可以是文本，也可以是图像，常具备如下属性：

href: 定义超链接的地址，其值可以是任意有效的文档相对或绝对路径 URL
name: 定义锚点的名称，用于创建文档内的书签，跳转到文档内指定的锚点位置
target: 规定在哪打开目标文档，配合 href 属性组合使用，可选值如下：
- _self: 默认值，在相同窗口或相同框架中载入目标文档
- _parent: 在父窗口或父框架中载入目标文档
- _blank: 在新窗口中载入目标文档
- _top: 在包含该链接的整个窗口中载入目标文档
- framename: 在指定的框架中载入目标文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.google.com/" target="blank">谷歌</a><br />
    <a href="https://www.yahoo.com/" target="blank">雅虎</a><br />
    <a href="https://www.baidu.com/" target="blank">百度</a>
</body>
</html>

图像标记

<img> 标签用于定义图像，更准确的说法应该是链接图像，实际上其定义的是被引用图像的占位控件，常用的属性如下：

src: 指定图像文件的存放位置，其值可以是任意有效的相对或绝对路径 URL
alt: 当图片无法显示时，将显示 alt 中定义的替代文本，使用 alt 属性是一个良好的习惯
height: 设置图像的高度
width: 设置图像的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>第一张图片</h3>
    <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" alt="无法显示图片" />
    <h3>第二张图片</h3>
    <img src="https://www.example.com/" alt="无法显示图片" />
</body>
</html>

表格标记

<table> 标签定义表格，<th> 标签定义表头，<tr> 标签定义行，<td>: 定义表格单元，表格单元可以包含各种元素，常用的属性如下：

border: 定义表格边框宽度，单位为 px，如果没有定义，则默认不显示边框
cellpadding: 规定单元格边沿与其内容之间的空白，单位为 px
cellspacing: 规定单元格之间的空白，单位为 px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
</body>
</html>

可以使用 rowspan 处理跨行的单元格，使用 colspan 处理跨列的单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" cellpadding="20">
        <tr>
            <td colspan=2>这是跨列单元格</td>
        </tr>
        <tr>
            <td rowspan=2>这是跨行单元格</td>
            <td>Hello</td>
        </tr>
        <tr>
            <td>World</td>
        </tr>
    </table>
</body>
</html>

列表标记

在 HTML 中列表可以分为三种：无序列表 <ul>、有序列表 <ol>、自定义列表 <dl>，其中无序列表与有序列表内每一项使用 <li> 标签标记

通过设置无序列表 <ul> 的 type 属性，指定项目符号，可选如下：

disc: 默认值，黑色实心圆
circle: 空心圆
square: 黑色实心方块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>Fruit</h3>
    <ul type="circle">
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
    </ul>
</body>
</html>

通过设置有序列表 <ol> 的 type 属性，指定项目符号，可选如下：

1: 默认值，按数字排序（1、2、3、4、…）
a: 按小写字母排序（a、b、c、d、…）
A: 按大写字母排序（A、B、C、D、…）
i: 按小写罗马数字排序（i、ii、iii、iv、…）
I: 按大写罗马数字排序（I、II、III、IV、…）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>Drink</h3>
    <ol type="a">
        <li>Coffee</li>
        <li>Milk</li>
        <li>Tea</li>
    </ol>
</body>
</html>

自定义列表是项目及其注释的组合，以 <dl> 标签开始，每个自定义列表项以 <dt>开始，每个自定义列表项的定义以 <dd> 开始

表单标记

可以使用 <form> 标签定义表单，用于接收不同类型的用户输入，常用的属性如下：

name: 表单名称
action: 规定在提交表单时执行的动作
method: 规定在提交表单时使用的方法，默认为 GET
target: 规定在提交表单时的地址目前，默认为 _self

在 <form> 标签下，存在几个表单元素，其中最重要的莫过于 <input> 标签，常用的属性如下：

name: <input> 元素的名称
type: 定义不同的输入类型，常用的值如下：
- text: 单行文本输入字段
- password: 密码输入字段
- radio: 单选按钮
- checkbox: 复选按钮
- submit: 提交按钮
- button: 按钮
value: 输入字段的值 / 默认值
placeholder: 输入字段的提示信息
checked: 输入字段默认选定，一般用于单选或复选按钮
disabled: 输入字段无法使用
readonly: 输入字段无法修改
required: 输入字段必需填写
pattern: 规定输入字段满足的正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        First name:<br/>
        <input name="firstname" type="text" required /><br/>
        Last name:<br/>
        <input name="lastname" type="text" required /><br/>
        <br/><input type="submit" value="Submit" onclick="sayHello()"/>
    </form>
    <script type="text/javascript">
        function sayHello(){
            alert('hello')
        }
    </script>
</body>
</html>

音频标记

为了确保音频文件能在所有浏览器中都能够播放，使用以下这些标签

<object> : 定义内嵌对象：<object height="300" width="500" data="song.mp3"></object>
<embed>: 定义嵌入内容：<embed height="300" width="500" src="song.mp3" />
<audio>: 定义声音，是 HTML 5 多媒体标签

属性	值	描述
autoplay	autoplay	就绪后马上播放
controls	controls	显示播放控件
loop	loop	循环播放
muted	muted	静音播放
preload	preload	就绪后等待播放，若设置 autoplay，则忽略 preload
src	url	指定播放音频的资源地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio controls="controls">
        <source src="song.mp3" type="audio/mp3" />
        <source src="song.ogg" type="audio/ogg" />
        <!-- 如果失败，再尝试使用 <embed> 播放 -->
        <embed height="300" width="500" src="song.mp3" />
    </audio>
</body>
</html>

视频标记

为了确保视频文件能在所有浏览器中都能够播放，使用以下这些标签

<object> : 定义内嵌对象：<object height="300" width="500" data="movie.swf"></object>
<embed>: 定义嵌入内容：<embed height="300" width="500" src="movie.swf" />
<video>: 定义声音，是 HTML 5 多媒体标签

属性	值	描述
autoplay	autoplay	就绪后马上播放
controls	controls	显示播放控件
loop	loop	循环播放
muted	muted	静音播放
preload	preload	就绪后等待播放，若设置 autoplay，则忽略 preload
src	url	指定播放视频的资源地址
poster	url	指定点击播放按钮前或进行视频下载时显示的图像
width	pixels	设置视频播放器的宽度
height	pixels	设置视频播放器的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video width="320" height="240" controls="controls">
        <source src="movie.mp4" type="video/mp4" />
        <source src="movie.ogg" type="video/ogg" />
        <source src="movie.webm" type="video/webm" />
        <!-- 如果失败，再尝试使用 <embed> 播放 -->
        <object data="movie.mp4" width="320" height="240">
        	<embed src="movie.swf" width="320" height="240" />
        </object>
    </video>
</body>
</html>

头部标记

<head> 元素是所有元信息的容器，它们不会再浏览器中显示，只是包含页面的一些元数据信息

<title>: 标签用于定义文档标签：<title>Title of the document</title> 将会显示在浏览器选项卡中，并且添加书签时，将作为书签名
<meta>: 标签提供关于 HTML 文档的元数据，元数据不会显示在页面上，但是对于机器来说却是可读的
- <meta charset="utf-8">: 指定文档的字符编码格式为 utf-8 格式
- <meta name="author" content="ryf">: 指定文档的作者
- <meta name="description" content="This is the description">: 指定文档的描述内容
<link>: 标签定义文档或外部资源之间的关系，常用于链接外部样式表
<style>: 标签定义文档内部样式表
<script>: 标签定义文档或外部脚本之间的关系
<base>: 标签定义页面上所有链接的默认属性

标签归纳

双标签

成对的标签，有开始标签和结束标签

html、head、title、style、script、noscript、body、h1、h2、h3、h4、h5、h6、p、a、map、
canvas、audio、video、div、span、header、footer、section、article、aside、main、nav、
iframe、ul、ol、li、dl、dt、dd、table、colgroup、caption、thead、th、tbody、tfoot、
tr、td、form、fieldset、legend、textarea、button、select、optgroup、option、label、
b、i、code、sub、sup、ins、del、em、strong、small、kbd、samp、var、pre、abbr、address、
bdo、blockquote、q、cite、dfn、s、s、u、bdi、mark、meter、progress、ruby、rp、rt、
time、wbr、nobr

单标签

不可以包括文本或子标签，使用反斜杠结束

base、meta、link、br、hr、img、area、source、col、input

块级标签

在页面中渲染后会自动换行，默认宽度为 100%，用于布局

html、body、h1、h2、h3、h4、h5、h6、p、a、canvas、div、header、footer、section、
article、aside、main、nav、iframe、ul、ol、li、dl、dt、dd、caption、thead、th、
tbody、tfoot、td、form、legend、pre、address、blockquote

内标签

仅仅较于块级标签的一部分，用于处理文本或某种静态资源

img、area、audio、video、span、input、textarea、button、select、label、b、i、code、
sub、sup、ins、del、em、strong、small、kbd、samp、var、abbr、bdo、q、cite、dfn、s、
u、bdi、mark、meter、progress、ruby、rp、rt、time

空标签

页面中不展示，不占位，仅仅用于修事页面，或控制页面

!DOCTYPE、!--...--、base、title、meta、link、style、script、noscript、br、hr、map、
source、table、colgroup、col、tr、fieldset、optgroup、option、wbr、nobr

嵌套规则

块级元素可以包含内联元素或某些块级元素，但内联元素却不能包含块级元素，内联元素只能包含其他的内联元素
部分块级元素（h1、h2、h3、h4、h5、h6、p、dt）不能包含其他或同类块级元素
块级元素与块级元素并列，块级元素不能与内联元素并列
具有语义性的块级元素不能同级语义型块级元素，例 header 块级元素不能内嵌 footer 或 header

十三餍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二：以理论结合实践方式梳理前端 HTML ——— 常用 HTML 标签

常用 HTML 标签
复制链接

扫一扫

专栏目录