骨架
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
</html>
<!DOCTYPE html> 指定了当前的文档类型为 HTML5 版本,必须放在文档的最上面
标签分类
双标签:<标签名></标签名>
单标签:<标签名/>
标签关系
嵌套关系:
<head>
<title></title>
</head>
head 标签和 title 标签是嵌套关系
并列关系:
<head>
<title></title>
</head>
<body></body>
head 标签和 body 标签是并列关系
字符编码
<head>
<meta charset="UTF-8">
</head>
指定当前的文档字符集类型为 utf-8
常用标签
名称 | 语法 | 说明 |
---|---|---|
标题标签 | <hn>标题名<hn/> | 标题标签有 6 个基本,因此 n 的取值为 1-6,取值越小,标签越大 |
段落标签 | <p>文本内容</p> | 段落标签中的文本内容会根据浏览器的大小自动换行 |
水平线标签 | <hr/> | 水平线标签会在页面上展示一条水平线 |
换行标签 | <br/> | 换行标签能够达到强制换行的效果,比如在一个段落中,需要对文本进行强制换行,就可以使用换行标签 |
盒子标签 | <div/> | 没有任何语义,只是将页面中的内容进行分割 |
盒子标签 | <span/> | 没有任何语义,只是将页面中的内容进行分割 |
标签属性
可以给任何一个标签添加属性,一个标签可以添加多个属性,多个属性之间用空格间隔。每一个属性都有默认的属性值,如果属性省略了属性值,就会使用默认属性值。
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
文本格式化标签
标签 | 效果 |
---|---|
<b></b> | 文字以粗体显示 |
<i></i> | 文本以斜体显示 |
<s></s> | 文本以加删除线显示 |
<u></u> | 文本以加下划线显示 |
图片标签
语法:
<img />
属性:
属性 | 说明 |
---|---|
src | 图像路径 |
alt | 图片不能显示时替换的文本 |
title | 鼠标悬停时显示的内容 |
width | 图片的宽度 |
height | 图片的高度 |
border | 图片边框的宽度 |
超链接标签
<a href="跳转目标" target="弹出方式">文本或图片</a>
href 属性用于指定标签的目标 url,如果没有目标 url 时,属性值可以使用 #。target 指定页面的打开方式,属性值 seif 在当前页面打开,属性值 blank 表示在新窗口打开。
<head>
<base target="_blank"/>
</head>
可以使用 base 标签来设置整个页面超链接标签的跳转方式
无序列表
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
显示效果:
- 列表1
- 列表2
- 列表3
有序列表
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
显示效果:
- 列表项1
- 列表项2
- 列表项3
自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>
显示效果:
-
名词1
- 名词1解释1
- 名词1解释2 名词2
- 名词2解释1
- 名词2解释2
表格标签
<table>
<tr>
<th>表头1</th>
<th>表头1</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
...
</tr>
...
</table>
table 标签用来定义一个表格,tr 标签表示表格的一行,必须嵌套在 table 标签中。td 标签表示表格的一个单元格,必须嵌套在 tr 标签中。th 标签表示表头,可以嵌套在 table 标签中,也可以签到在 tr 表中。
属性 | 说明 | 属性值 |
---|---|---|
border | 设置表格边框的宽度(默认值为 0) | 像素 |
cellspacing | 设置单元格边框的空白间隙 | 像素(默认 2 像素) |
cellpadding | 设置单元格内容与单元格边框的间隙 | 像素(默认 1 像素) |
width | 设置表格的宽度 | 像素 |
height | 设置表格的高度 | 像素 |
align | 设置表格的对其方式 | left、center、right |
单元格内的文字 | 单元格内的文字 |
合并单元格:
rowspan 跨行合并
colspan 跨列合并
多媒体标签
audio 标签用来展示音频播放
<audio src=""></audio>
src 属性用来指定音频文件的路径,autoplay 属性用来控制是否自动播放,controls 属性用来控制是否显示默认播放控件,loop 属性用来控制是否循环播放。
<audio>
<source src=""/>
<source src=""/>
<source src=""/>
...
</audio>
一个 audio 标签内部可以添加多个音频源
video 标签展示视频播放
<video src=""></video>
autoplay 属性用来控制是否自动播放,controls 属性用来控制是否默认播放,loop 属性用来控制是否循环播放,width 属性用来设置播放窗口的宽度,height 属性用来控制视频播放的高度。
<video>
<source src=""/>
<source src=""/>
<source src=""/>
...
</video>
一个 video 标签内部可以添加多个视频源
表单
表单用来收集数据提交给服务器,一个表单由表单标签、提示信息标签、表单域标签三部分组成。表单标签具有文本输入,密码输入、复选、提交表单、重置表单的功能。