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：定义链接地址，其值可以是任何有效文档的相对或绝对 URLname：定义锚的名称，用于创建文档内书签，跳转到文档内的指定位置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：指定图像文件的地址，其值可以是任何有效的相对或绝对 URLalt：指定当图片无法显示时显示的文字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：规定单元格边沿与其内容之间的空白，单位为 pixelscellspacing：规定单元格之间的空白，单位为 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：规定在提交表单时使用的方法，默认为GETtarget：规定在提交表单时的地址目标，默认为_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>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML学习笔记(二) 常用标签
本文地址： https://pptw.com/jishu/290233.html