文章目录

  • 网页的基本结构
  • 常用标签描述
  • 文字和段落标签
  • 特殊符号(加分号)
  • 列表标签
  • 无序列表
  • 有序列表
  • 定义列表
  • 图像标签
  • 超链接标签
  • base标签
  • 锚链接（也可叫书签）
  • 电子邮件链接
  • HTML表格
  • 表单标签
  • input标签
  • label标签
  • textarea控件（文本域）
  • select下拉菜单
  • from表单域
  • `HTML5 ` 新增标签
  • 多媒体音频标签
  • 多媒体视频标签


网页的基本结构

<!DOCTYPE html>
<html>
	<head>
	<!-- 网页头部内容 -->
		<meta charset="UTF-8">
		<title>标题</title>
	</head>
	<body>
	<!-- 网页主体内容 -->
	</body>
</html>

常用标签描述

<!DOCTYPE>声明文档类型，必须放在HTML文档的第一行，这个声明不是HTML标签
meta标签是告诉浏览器，我们的文档使用的是什么编码类型
<html lang="en"> 指定html语言种类，en定义语言为英文，zh-CN为中文
<meta charset="UTF-8">是解决网页出现中文乱码问题
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>一样的，解决中文乱码<br/>
编码utf-8一般是显示简体中文，繁体中文，英文，日文，韩文都支持
GB2312支持简体中文
<html></html>是告诉浏览器在这个标签之间的内容就是html文件
<head></head>主要是存放网页头部的信息，head标签的所有内容不会在网页上展示
<body></body>部分是网页主体部分
<p></p>标签是段落标签
<span></span>用来布局，一行可以放多个span
<div></div>用来局部，一行只能放一个div
<hr />水平线
<br />换行
<!-- 这是注释 -->  快捷键 ctrl+/
标题标签:<h1></h1>~<h6></h6>
align对齐属性值:left、right、center、justify(对行进行伸展，这样每行都可以有相等的长度)
 是空格
预格式化文本标签<pre></pre>，在里面可以随意打空格和换行，所见即所得，但是比较少用，因为不好整体控制

文字和段落标签

文字斜体：<i></i>、<em></em>
加粗:<b></b>、<strong></strong>
删除线：<s></s>、<del></del>
下划线：<u></u>、<ins></ins>
下标：<sub>
上标：<sup>

特殊符号(加分号)

属性

显示结果

描述

&lt

<

小于号或显示标记

&gt

>

大于号或显示标记

&amp

&

和号

&reg

®

已注册商标

&copy

©

版权

&trade

™

商标

&nbsp

Space

不断行的空白

&yen

¥

人民币

&deg

°

摄氏度

&plusmn

±

正负号

&times

×

乘号

&divide

÷

除号

&sup2

²

平方2（上标2）

&sup3

³

立方3（上标3）

&

&;

列表标签

无序列表

<ul>
		<li>列表项</li>
		<li>列表项</li>
		......
</ul>

无序列表type属性值

值

描述

disc

圆点

square

正方形

circle

空心圆

有序列表

<ol>
		<li>列表项</li>
		<li>列表项</li>
		......
</ol>

有序列表type属性值

值

描述

1

数字1，2,…

a

小写字母a，b,…

A

大写字母A，B,…

i

小写罗马数字i

I

大写罗马数字I

定义列表

<dl>
		<dt>定义列表项</dt>
		<dd>列表项描述</dd>
		<dd>列表项描述</dd>
		<dt>定义列表项</dt>
		<dd>列表项描述</dd>
		......
</dl>
<dd>标签内不能放<dt>，同理，<dt>标签内也不能放<dd>
<dt>和<dd>是同级标签
<dl><dt><dd>组合使用

注意：在真实的网页开发环境中，用ul和ol的地方，我们都需要把它默认的编号去掉，使用图片代替

图像标签

语法：<img src="" alt="" .../>
src内是图片的地址，分为相对地址和绝对地址
alt是图像的代替文字，比如当网速太慢、src属性中的错误、浏览器禁用图像
用户无法查看图像，alt属性可以代替图像显示在浏览器中的内容。
<!-- 同一级路径，图片引用的时候，直接写图片的名字就可以了 -->
<img src="demo.gif" />
<!-- 下一级路径是 需要一个 /  表示的  -->
<img src="images/demo.jpg" />
<!-- 上一级路径 我们用 ../ -->
<img src="../images/demo.gif" />

img属性：

属性

值

描述

src(必写)

URL

显示图像的URL

alt

文本

图像替代文本

height

数值和百分比

图像的高

width

数值和百分比

图像的宽

title

文本

鼠标悬停时显示的内容

border

数字

设置图像边框的宽度

超链接标签

语法：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href:链接地址，可以是内部链接或外部链接。

想要链接效果，又确定不了链接的目标的时候，我们就可以先用空连接代替，空连接就是在href内写个#，即href="#"
超链接标签属性

属性

描述

href

链接地址

target

链接的目标窗口

_self、_blank、_top、_parent

title

链接提示文字

name

链接命名

_self是一个默认值，也就是在当前窗口下打开新的一个页面
_blank是创建一个新的窗口去打开新的页面
_top、_parent和页面的框架结构相关

base标签

1、base可以设置整体链接的打开状态
2、base写到< head></ head>之间
3、把所有连接都默认添加target="_black"

锚链接（也可叫书签）

定义锚（同一页面）
1、定义锚的位置
2、设置寻找锚的链接

<a href="#锚名1">目录1</a>
<a href="#锚名2">目录2</a>
<a href="#锚名3">目录3</a>
<a href="..." name="锚名1">内容</a>
	xxxxxxxxx
	xxxxxxxxxxxx
<a href="..." name="锚名2">内容</a>
	xxxxxxxxx
	xxxxxxxxxxxx
<h1 id="锚名3">内容</h1>

定义锚（不同页面）

网页1：<a href="网页名称#锚名">...</a>
网页2：<a name="锚名">...</a>

电子邮件链接

<a href="mailto:邮件地址">...</a>

HTML表格

<table>表格
<tr>行
<td>单元格
基本语法与结构
<table>     <!--表格开始-->
	<caption>...</caption><!--表格标题，居中显示-->
	<tr>		<!--tr行标签-->
		<td>...</td>	<!--td单元格-->
		...
	</tr>
	<tr>
		<th>...</th> <!-- 表格头，内容居中、加粗显示-->
		...
		
	</tr>
</table>	<!--表格结束-->

带结构的表格
表格划分为三部分：表头、主体、脚注
thead：表格的头（放表格的表头）
tbody：表格的主体（放数据本体）
tfoot：表格的脚（放表格的脚注）

<table>
	<caption>表格标题</caption>
	<thead>
		<tr>
			<th>表头</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>主体</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>脚注</td>
		</tr>
	</tfoot>
</table>

html5标识 常用html5标签大全_ide

< table>表格属性

属性

值

描述

width

像素值

规定表格的宽度

align

left、center、right

表格相对周围元素的对齐方式

border

像素值

规定表格边框的宽度

Bgcolor

rgb(x,x,x)、#xxxxxx、Colorname

表格的背景颜色

cellpadding

像素值（默认为1像素）

单元格内容与单元格边框的距离

cellspacing

像素值（默认为2像素）

单元格之间的距离

frame

属性值

规定外侧边框的哪个部分是可见的

rules

属性值

规定内侧边框的哪个部分是可见的

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
合并单元格三部曲：
1、先确定跨行还是跨列
2、根据先上后下，先左后右的原则找到目标单元格，然后写上合并方式还有要合并的单元格数量比如< td colspan=“3”>< td>
3、删除多余的单元格

表单标签

input标签

语法：

<input type="属性值" value="你好"/>

常用属性

属性

属性值

描述

type（指定不同的控件类型）

text

单行文本输入框

password

密码输入框

radio

单选按钮

checkbox

复选框

button

普通按钮

submit

提交按钮

reset

重置按钮

image

图像形式的提交按钮（必须包含src属性）

file

文件域（可上传文件）

name（用于区别不同的表单）

由用户自定义

控件的名称

value

由用户自定义

input控件中的默认显示的文本

size

正整数

input控件在页面中的显示宽度

checked（单选或多选按钮一开始就被选中）

checked

定义选择控件默认被选中的项

maxlength

正整数

控件允许输入的最多字符数

H5新增input标签

html5标识 常用html5标签大全_html5标识_02

新增表单属性

html5标识 常用html5标签大全_表单_03

label标签

为input元素定义标注（标签）
作用：当我们鼠标点击label标签里面的文字时，光标会定位到指定的表单里面
绑定元素有2种方法
1、用label直接包括input表单

<label> 用户名： <input type="text" /> </label>

2、通过for和id控制

<label for="nc"> 昵称： </label>  
<input type="text" id="nc" />

textarea控件（文本域）

语法：
cols=“每行中的字符数” rows="显示的行数

<textarea>文本内容</textarea>

作用：通过textarea控件可以轻松地创建多行文本输入框
文本框和文本域的区别

表单

名称

区别

默认值显示

用于场景

input type=“text”

文本框

只能显示一行文本

单标签，通过value显示默认值

用户名、昵称、密码等

textarea

文本域

可以显示多行文本

双标签，默认值写到标签中间

留言板

select下拉菜单

语法：

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	···
</select>
注：
<select></select>中至少包含一对<option></option>
option中定义selected="selected"时，当前项即为默认选中项

from表单域

收集的用户信息通过form表单域传递给服务器
目的：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器
语法：

<form action="url地址" method="提交方式" name="表单名称">
	各种表单控件
</form>

常用属性

属性

属性值

作用

action

URL地址

用于指定接收并处理表单数据的服务器程序的url地址

method

get/post

用于设置表单数据的提交方式，其取值为get或post

name

名称

用于指定表单的名称，以区分同一页面中的多个表单

HTML5 新增标签

  • header — 头部标签
  • nav — 导航标签
  • article — 内容标签
  • section — 块级标签
  • aside — 侧边栏标签
  • footer — 尾部标签

html5标识 常用html5标签大全_表单_04

多媒体音频标签

  1. 多媒体标签有两个，分别是
  • 音频 – audio
  • 视频 – video
  1. audio 标签说明
  • 可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，
  • 但是：播放格式是有限的
  1. audio 支持的音频格式
  • audio 目前支持三种格式

html5标识 常用html5标签大全_控件_05

4. audio 的参数

html5标识 常用html5标签大全_控件_06


5.audio 代码演示

<body>
  <!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
  <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->

  <!-- 
    因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件
   -->
  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
  </audio>
</body>

多媒体视频标签

1.video 视频标签

  • 目前支持三种格式

html5标识 常用html5标签大全_html_07

2.语法格式

<video src="./media/video.mp4" controls="controls"></video>

3.video 参数

html5标识 常用html5标签大全_ide_08

4.video 代码演示

<body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>

5.多媒体标签总结

  • 音频标签与视频标签使用基本一致
  • 多媒体标签在不同浏览器下情况不同，存在兼容性问题
  • 谷歌浏览器把音频和视频标签的自动播放都禁止了
  • 谷歌浏览器中视频添加 muted 标签可以自己播放
  • 注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册