HTML学习笔记(二) 常用标签-阿里云开发者社区

这篇文章将会介绍一些常用的 HTML 标签

学习 HTML 标签并不困难，重要的是自己多实践，亲手敲敲代码，熟悉不同标签的使用场景和渲染效果

1、标题与段落

标签 <h1> ~ <h6> 分别用于定义一至六级标题，标签 <p> 用于定义段落

它们都是块级元素，因此浏览器会自动地在标题和段落的前后添加空行

<!DOCTYPE html>
<html>
    <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>

2、格式化文本

对于文本内容的展示，HTML 也有定义多种标签以达到不同的展示效果，具体请看下面的例子

<!DOCTYPE html>
<html>
    <body>
        <b>粗体</b>
        <br />
        <i>斜体</i>
        <br />
        <ins>下划线</ins>
        <br />
        <del>删除线</del>
        <br />
        <big>增大字号</big>
        <br />
        <small>减小字号</small>
        <br />
        这是<sup>上标</sup>
        <br />
        这是<sub>下标</sub>
        <br />
    </body>
</html>

3、链接

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

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

<!DOCTYPE html>
<html>
    <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>
        <br />
    </body>
</html>

4、图像

<img> 标签用于定义图像，更准确的说法应该是链接图像，实际上其定义的是被引用图像的占位空间

常用的属性如下：

src：指定图像文件的地址，其值可以是任何有效的相对或绝对 URL
alt：指定当图片无法显示时显示的文字
height：设置图像的高度
width ：设置图像的宽度

<!DOCTYPE html>
<html>
    <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>

5、表格

<table> 标签定义表格，<th> 标签定义表头，<tr> 标签定义行，<td> 定义表格单元

常用的属性如下：

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

<!DOCTYPE html>
<html>
    <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>

假如需要处理 跨行或跨列的单元格 该怎么办呢？

我们可以使用 colspan 属性定义跨越的列数，使用 rowspan 属性定义跨越的行数

<!DOCTYPE html>
<html>
    <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>

6、列表

在 HTML 中列表可以分为三种，分别是无序列表、有序列表和自定义列表

（1）无序列表

无序列表使用 <ul> 标签标记，其中每一个列表项用 <li> 标签标记

在 <ul> 标签中有一个 type 属性，用于指定项目符符号，其可选值如下：

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

<!DOCTYPE html>
<html>
    <body>
        <h3>Fruit</h3>
        <ul type="circle">
            <li>Apple</li>
            <li>Banana</li>
            <li>Cherry</li>
        </ul>
    </body>
</html>

（2）有序列表

有序列表使用 <ol> 标签标记，其中每一个列表项用 <li> 标签标记

在 <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>
    <body>
        <h3>Drink</h3>
        <ol type="a">
            <li>Coffee</li>
            <li>Milk</li>
            <li>Tea</li>
        </ol>
    </body>
</html>

（3）自定义列表

自定义列表是项目及其注释的组合

自定义列表以 <dl> 开始，每个自定义列表项以 <dt> 开始，每个自定义列表项的定义以 <dd> 开始

<!DOCTYPE html>
<html>
    <body>
        <h3>Plan</h3>
        <dl>
            <dt>DONE</dt>
            <dd>- What did you do yesterday?</dd>
            <dt>TODO</dt>
            <dd>- What will you do tomorrow?</dd>
        </dl>
    </body>
</html>

7、表单

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

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

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

name：元素名称
type：定义不同的输入类型，常用的值如下：

text ：单行文本输入字段
password：密码输入字段
radio ：单选按钮
checkbox：复选按钮
submit：提交按钮
button：普通按钮

value：输入字段的值
placeholder：输入字段的提示信息
checked ：输入字段默认选定，一般用于单选或复选按钮
disabled：输入字段无法使用
readonly：输入字段无法修改
required：输入字段必需填写
pattern ：规定输入字段满足的正则表达式

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function sayHello() {
            alert('hello')
        }
    </script>
</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>
</body>
</html>

8、音频

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

<object> ：定义内嵌对象，是 HTML 4.01 多媒体标签

<object height="300" width="500" data="song.mp3"></object>

<embed> ：定义嵌入内容，是 HTML 5 多媒体标签

<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	指定播放音频的资源地址

<audio controls="controls">
    <!-- mp3 格式在 Internet Explorer、Chrome、Safari 中有效 -->
    <source src="song.mp3" type="audio/mp3" />
    <!-- ogg 格式在 Firefox、Opera 中有效 -->
    <source src="song.ogg" type="audio/ogg" />
    <!-- 如果失败，显示错误信息 -->
    Your browser does not support the audio tag.
</audio>

最佳解决方案：先尝试使用 <audio> 播放音频，如果失败，再尝试使用 <embed> 播放

<audio controls="controls">
    <source src="song.mp3" type="audio/mp3" />
    <source src="song.ogg" type="audio/ogg" />
    <embed height="300" width="500" src="song.mp3" />
</audio>

9、视频

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

<object> ：定义内嵌对象，是 HTML 4.01 多媒体标签

<object data="movie.swf" width="320" height="240"/>

<embed> ：定义嵌入内容，是 HTML 5 多媒体标签

<embed src="movie.swf" width="320" height="240"/>

<video> ：定义视频，是 HTML 5 多媒体标签，其属性及值列举如下：

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

<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" />
    Your browser does not support the video tag.
</video>

最佳解决方案：先尝试使用 <video> 播放视频，如果失败，再尝试使用 <object> 和 <embed> 播放

<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" />
    <object data="movie.mp4" width="320" height="240">
      <embed src="movie.swf" width="320" height="240" />
    </object>
</video>

10、头部

头部元素不会在浏览器中被渲染，它们只是用于包含一些页面的元数据

<head> 元素是所有头部元素的容器，以下列举的头部元素都可以添加到 <head> 中：

<title> ：定义文档标题

文档标题将会显示在浏览器选项卡中，并且在添加书签时，会作为建议的书签名

<head>
    <title>Title of the document</title>
</head>

<meta> ：提供关于 HTML 文档的元数据，有一些公司甚至会自己编写元数据协议

可以指定字符编码

<head>
    <meta charset="utf-8">
</head>

也能为文档添加作者和描述

<head>
    <!-- name 属性用于指定标签的类型，content 属性用于指定实际的内容 -->
    <meta name="author" content="whfang">
    <meta name="description" content="This is the description">
</head>

<link> ：定义文档与外部资源之间的关系

常常用于连接样式表

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

也常用于链接图片，例如为网站添加一个图标

<head>
    <link rel="shortcut icon" type="image/x-icon" href="myicon.ico">
</head>

<style> ：定义文档样式

<head>
    <style type="text/css">
        <!-- 这里定义样式 -->
    </style>
</head>

<script> ：定义脚本资源

<head>
    <script type="text/javascript" src="myscript.js"></script>
</head>

<base> ：定义页面上所有链接的默认属性

<head>
    <base href="......" />
    <base target="_blank" />
</head>

HTML学习笔记(二) 常用标签

1、标题与段落

2、格式化文本

3、链接

4、图像

5、表格

6、列表

（1）无序列表

（2）有序列表

（3）自定义列表

7、表单

8、音频

9、视频

10、头部

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

HTML学习笔记(二) 常用标签

1、标题与段落

2、格式化文本

3、链接

4、图像

5、表格

6、列表

（1）无序列表

（2）有序列表

（3）自定义列表

7、表单

8、音频

9、视频

10、头部

热门文章

最新文章

相关课程

相关电子书

相关实验场景