首页 / HTML / 前端-HTML和HTML5常用标签
前端-HTML和HTML5常用标签
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了前端-HTML和HTML5常用标签，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含12094字，纯文字阅读大概需要18分钟。
内容图文
HTML是HyperText Markup Language（超文本标记语言）的简称，它是一种用于创建网页的标准标记语言。
标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。
HTML 运行在浏览器上，由浏览器来解析。
注意：html标签不区分大小写，但是推荐全小写
html文档的后缀名
.html和.htm两种都可以，没有区别。
标签的分类
围堵标签：有开始标签和结束标签，例如<html></html>
自闭标签：开始标签和结束标签都在一个标签中，如<br/>
标签的嵌套
标签可以嵌套，但是嵌套的层级不能错乱
正确案例：<p><a></a></p> 错误案例：<p><a></p></a>
标签的属性
标签的内部是可以定义属性的，属性由键值对组成，值需要用双引号引起来，多个属性用空格隔开
<
标签名称 属性名1
="属性值"
属性名2
="属性值"
></
标签名称
>
<
p
id
="p1"
name
="p1"
></
p
>
HTML文档的基本结构
HTML文档也叫web页面。
HTML注释以<!--开头，以-->结尾，其中内容可以为一行或多行。 注释的部分浏览器不解析，注释是为了给程序员看，更好的了解html代码
<!--
声明当前文档是html5文档
-->
<!
DOCTYPE html
>
<!--
html,根元素 ，围堵标签
-->
<
html
>
<!--
head,头元素：
作用：
1、用于指定HTML文章中的一些元数据，例如元数据 meta：定义页面的编码格式，title:定义页面的标题
2、引入外部的资源文件--未来讲解
-->
<
head
>
<
meta
charset
="utf-8"
/>
<
title
>这是我的第一个HTML页面</title></head><!--body，主体：浏览器显示的内容都将在这里编写格式化代码的快捷键：ctrl+shift+f（英文状态下使用）
--><body>
hello html 这是我的第一个HTML页面
</body></html>
HTML常用标签
1.文本标签
1）标题标签 h1--h6:字体逐渐缩小
一般用在文章的标题上。
<
h1
>1级标签</h1><h2>2级标签</h2><h3>3级标签</h3><h4>4级标签</h4><h5>5级标签</h5><h6>6级标签</h6>
2）段落标签
一般用在正文。
<
p
>正文</p>
3) 换行标签
一般用在段落中强制换行。
<
p
>牡丹才是正国色，<br/>花开时节动京城</p>
页面显示为：
牡丹才是正国色，
花开时节动京城
4）水平线标签
一般用来分隔内容。
<
hr color="" size=""
/>
5）范围标签
一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使用。
<
p
><
span
style
="color:red;"
></
span
></
p
>
2.图片标签
1) 基本属性
<
img
src
=""
title
=""
width
=""
height
=""
/>
2) 设置图片的热点区域
<
img
src
=""
usemap
="#test"
/>
<
map
name
="test"
>
<!--
shape是形状 coords是坐标（多个值之间用逗号隔开）
-->
<
area
shape
=""
coords
=""
href
=""
titile
=""
/>
</
map
>
3.列表标签
一般用在导航上
1) 无序列表
<!--
推荐ul标签中只有li
-->
<
ul
>
<
li
>
</
li
>
</
ul
>
2) 有序列表
<
ol
>
<
li
>
</
li
>
</
ol
>
4.定义描述标签
一般用在图文混编的场景中
<!--
dl用于包裹dt、dd
-->
<
dl
>
<!--
dt用来放图片或标题
-->
<
dt
></
dt
>
<!--
dd用来补充对dt的描述说明
-->
<
dd
></
dd
>
</
dl
>
5.布局标签 层 div
一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局。
6.标签分类
html标签可以分为块状元素和行级元素两类。
块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；
行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。
区分的简单方法：是否独占一行。
块状元素和行内元素的区别：
1、 块级元素会独占一行，其宽度自动填满其父元素宽度； 行内元素会排列到同一行里，其宽度随元素的内容变化而变化。
2、块级元素可以设置宽高；行内元素设置宽高无效。
3、块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖 直方向的padding没有效果。
以上标签的分类
属于块状元素的：
标题标签 h1-h6,
段落标签 p ,
水平线标签 hr,
有序列表标签 ol--li，
无序列表标签 ul--li，
定义描述标签 dl-dt-dd，
容器标签 div：
属于行级元素的：
范围标签：span
图像标签：img
超链接
超链接标签一般有两个作用：1、用来实现页面间的跳转 2、实现锚链接功能
页面间的跳转
<!--
target有两个值：默认为_self，在当前页打开 常用值_blank，在新页面打开
-->
<
a
href
="目标资源路径"
target
="打开资源的位置"
>点一点</a>
锚链接
当一个页面长度超过一屏的时候，想迅速跳转到指定位置，例如大家经常浏览网页的时候，滑动超过一 屏，右下角经常会出现返回顶部连接，这个就是锚链接实现的。
这个定位可以实现本页面间的锚链接，也可以实现不同页面间的锚链接。
<
a
href
="#锚点名称"
target
="_self"
>锚链接</a><!-- 目标位置定义锚点：<a name="锚点名称"><a/>
若为跨页面的锚点，则<a href="锚点页面名称.后缀名#锚点名称" />
-->
表格标签
规则表格
<!--
table:定义表格
常用属性：
height：高度
width：宽度
border：边框
cellpadding：内容与单元格之间的距离
cellspacing：单元格和单元格之间的距离
-->
<
table
border
="1"
cellpadding
="0"
cellspacing
="0"
width
="90%"
height
="280p×"
>
<!--
tr:定义行
常用属性：
align：文率水平方向上的对齐方式，
有三个取伯，默认left-左对齐 center-居中对齐 right-右对齐
-->
<
tr
>
<!--
th和td标签都用来定文单元格，
th：一般用来定义表头单元格
td:一般用来定义表头单元格
常用属性：valian文本垂直方向上的对齐方式 top顶部对齐 bottom底部对齐 middle垂直居中
-->
<
th
align
="center"
>序号</th><th>商品名称</th><th>价格</th></tr></table>
不规则表格--跨行和跨列
<!--
合并3列
-->
<
td
colspan
="3"
><
td
/>
<!--
合并3行
-->
<
td
rowspan
="3"
><
td
/>
表格的高级标签--标题标签和逻辑分区标签
<
table
border
="1"
cellpadding
="0"
cellspacing
="0"
width
="90%"
height
="280p×"
>
<!--
表格的标题标签
-->
<
caption
></
caption
>
<!--
逻辑标签：thead、tbody、tfoot
如果没有设置，默认所有行在tbody下
-->
<
tr
>
<
th
align
="center"
>序号</th><th>商品名称</th><th>价格</th></tr></table>
表单
概念：用于采集用户输入的数据。用于和服务器进行交互。
<!--
method共七种提交方式，get和post常用
get：
请求参数会在地址栏中显示，会封装到请求行中
请求参数大小有限制
不太安全
post：
请求参数不会在地址栏中显示，回封装到请求体中
请求参数没有大小限制
比较安全
enctype:表单中有上传文件时必备属性，且取值为multipart/form-data
-->
<
form
action
="指定提交数据的URL"
method
="post"
enctype
="multipart/form-data"
>
<!--
添加表单项元素
表单项中的数据要提交，必须指定其name属性
-->
</
form
>
表单项元素中的一些属性：
id:元素的唯一表示，不重复
name:表单项元素的名称，很重要--提交数据到服务器之后，服务器获取数据通过该名称
value:表单项元素的值，服务器获取数据通过name获取到的就是value
type:表示表单项元素的呈现形式
class:表示样式名称
readonly:表示只读，用户只能看不能改
disabled：表示禁用，该元素不能改而且背景是灰色
表单项元素
文本框、密码框、单选按钮、复选框、文件域、日期-h5中的新特性、隐藏域、下拉列表框、文本域
<!--
type：输入框的显示形式，默认为text
placeholder：文本框中显示的提示文字，用户输入时提示文字自动消失
-->
<
input
type
="text"
id
="name1"
name
="name1"
placeholder
="请输入用户名"
/>
<!--
type="password"为密码框，输入内容后显示的是黑色实心圆，而非明文
required:表示用户必须填写，没有填写提交表单失败并给出提示
-->
<
input
type
="password"
id
="pas"
name
="pass"
required
/>
<!--
type="radio"为单选按钮，成组出现，name相同为一组，同组互斥
checked表示默认选中
-->
<
input
type
="radio"
name
="gender"
value
="男"
checked
/>
<
input
type
="radio"
name
="gender"
value
="女"
/>
<!--
type="checkbox"为复选框，成组出现，name相同为一组，同组可多选
checked表示默认选中
-->
<
input
type
="checkbox"
name
="hobby"
value
="swim"
checked
/>
游泳
<
input
type
="checkbox"
name
="hobby"
value
="movie"
checked
/>
电影
<
input
type
="checkbox"
name
="hobby"
value
="music"
/>
音乐
<!--
type="file"为文件域
multiple：表示可以同时上传多个文件
-->
<
input
type
="file"
name
="file1"
multiple
="multiple"
/>
<!--
type="date"：表示年月日
type="datetime-local"：表示年月日时
-->
<
input
type
="date"
name
="day"
/>
<!--
type="hidden"为隐藏域，页面看不见效果
作用：隐藏一些用户不关心但程序书写需要的值
-->
<
input
type
="hidden"
name
="id"
value
="0002"
/>
<!--
select下拉列表框，name属性
option：select中是选项
value表示值，selected表示默认选中
-->
<
select
name
="month"
>
<
option
value
="1"
>1月</option><option value="2" selected>2月</option><option value="3">3月</option></select><!--
textarea为文本域
cols：指定列数，每一行有多少个字符
rows：默认多少行
readonly：表示只读，内容不可修改
disabled：表示不可用，样式呈现灰色
--><textarea rows="10" cols="10" readonly disabled></textarea>
按钮
<!--
type：
submit：提交按钮，提交到form的action指定路径
image：等于提交按钮，没有value属性，有src属性
reset：清空表单中所有用户输入，回到默认原始状态，相当于刷新了页面
button： 普通按钮，没有任何功能
-->
<
input
type
="submit"
value
="登录"
id
="loginBtn"
/>
<
button
type
="submit"
>登录</button><input type="image" src="image/login.gif" id="loginBtn1"/><input type="reset" value="重置" id="resetBtn"/><button type="reset">重置</button><input type="button" value="普通按钮" id="btn"/><button type="button">按钮</button>
标签
<!--
label:指定输入项的文字描述信息
label的for属性一般会和input的id属性对应，
对应之后点击label区域，回让inpu输入框获取焦点
-->
<
label
for
="name1"
>用户名：</label><input id="name1"/>
框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
例如京东个人中心页面，点击左侧内容的时候，只有右边页面在变动。
<!--
iframe：定义内嵌框架
常用属性：
src="URL"：该URL指向不同的网页
height、width定义高宽，默认以像素为单位，也可使用百分比
frameborder：定义是否显示边框，设置为0，即移除边框
name：框架名称
iframe显示一个目标链接的页面，目标链接的属性必须使用iframe的属性，如下：
点击查询链接时，百度页面将在本页内嵌框架中显示
-->
<
p
><
a
href
="https://www.baidu.com"
target
="content"
>查询</a></p><iframe name="content" src="src/message.html" width="100%" height="100%"></iframe><!-- 框架集 --><frameset cols="" rows=""><frame src=""/></frameset>
常用的布局组合标签
div-ul-li/div-ol-li：常用于导航布局
div-dl-dt-dd:常用于图文混编布局
div-form:常用于表单布局
div-table:常用于局部规则数据展示布局
HTML4与HTML5的区别
HTML4和HTML5分别是超文本标记语言的第四次和第五次修改，他们分别是html语言第4和第5版 本.HTML4是为了适应pc时代产生的，HTML5是为了适应移动互联网时代,为了在移动设备上支持多媒体。
HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式。被认为是互联网的核心技 术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互 都进行了规范。
HTML5技术在未来主要发展的市场还是在移动端互联网领域，现阶段移动浏览器有应用体验不佳、网页 标准不统一的劣势，这两个方面是移动端网页发展的障碍，而HTML5技术能够解决这两个问题，并且将 劣势转化为优势，整体推动整个移动端网页方面的发展。
HTML4
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
lang
="en"
>
<
head
>
<
meta
http-equiv
="content-type"
content
="text/html; charset=UTF-8"
/>
</
head
>
</
html
>
HTML5
<!
DOCTYPE html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
/>
<
title
></
title
>
</
head
>
</
html
>
HTML5中新增的语义标签
| 标签 | 描述 |
| article | 定义页面独立的内容区域。 |
| aside | 定义页面的侧边栏内容。 |
| bdi | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| details | 用于描述文档或文档某个部分的细节 |
| dialog | 定义对话框，比如提示框 |
| summary | 标签包含 details 元素的标题 |
| header | 定义了文档的头部区域 |
| footer | 定义 section 或 document 的页脚。 |
| nav | 定义导航链接的部分。 |
| progress | 定义任何类型的任务的进度。 |
| section | 定义文档中的节（section、区段）。 |
| time | 定义日期或时间。 |
| wbr | 规定在文本中的何处适合添加换行符。 |
HTML5表单
form新属性
autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。 当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。
注意: autocomplete 适用于 <input>标签，以及以下类型的 <input>标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
<
form
action
=""
autocomplete
="on"
>
姓名:
<
input
type
="text"
name
="name"
><
br
>
电话:
<
input
type
="text"
name
="phone"
><
br
>
邮箱:
<
input
type
="email"
name
="email"
autocomplete
="off"
>
<
br
>
<
input
type
="submit"
>
</
form
>
测试的时候需要先输入一遍，然后再刷新页面再次输入看到效果。
有些浏览器可能不自动支持，需要自己启用。
input 新属性
list属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
<
input
list
="companys"
>
<
datalist
id
="companys"
>
<
option
value
="alibaba"
>
<
option
value
="baidu"
>
<
option
value
="tencent"
>
<
option
value
="zijie"
>
<
option
value
="didi"
>
</
datalist
>
multiple属性
multiple 属性是一个 boolean 属性
multiple 属性规定 <input>元素中可选择多个值。
注意: multiple 属性适用于以下类型的 <input>标签：email 和 file
上传多个文件: <input type="file" name="img" multiple>
placeholder
placeholder 属性提供一种提示（hint），描述输入域所期待的值。 简短的提示在用户输入值前会显示在输入域上。
注意: placeholder 属性适用于以下类型的<input>标签：text, search, url, telephone, email 以及 password。
<
input
type
="text"
name
="userName"
placeholder
="请输入用户名"
>
required
required 属性是一个 boolean 属性，required 属性规定必须在提交之前填写输入域（不能为空）。
注意:required 属性适用于以下类型的<input>标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
用户名: <input type="text" name="username" required>
HTML5新的表单元素
| 标签 | 描述 |
| datalist | input标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |
| keygen | 规定用于表单的密钥对生成器字段。 |
| output | 标签定义不同类型的输出，比如脚本的输出。 |
HTML5中新的input类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们 了。即使不被支持，仍然可以显示为常规的文本域。
HTML5中新增的音频
直到现在，仍然不存在一项旨在网页上播放音频的标准。大多数音频是通过插件（比如 Flash）来播放 的。
然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了在网页上嵌入音频元素的标准，即使用<audio>元素
<
audio
controls
>
<
source
src
="horse.ogg"
type
="audio/ogg"
>
<
source
src
="horse.mp3"
type
="audio/mpeg"
>
您的浏览器不支持 audio 元素。
</
audio
>
PS：control 属性供添加播放、暂停和音量控件。
在
<
audio
> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用
第一个支持的音频文件
目前<audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:
音频格式的MIME类型
| Format | MIME-type |
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
HTML5中新增的视频
<
video
width
="320"
height
="240"
controls
>
<
source
src
="movie.mp4"
type
="video/mp4"
>
<
source
src
="movie.ogg"
type
="video/ogg"
>
您的浏览器不支持Video标签。
</
video
>
<
video
>
元素提供了 播放、暂停和音量控件来控制视频。
同时
<
video
>
元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的
视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时
保留特定的空间，页面就会根据原始视频的大小而改变。
<
video
> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
当前<video>元素支持三种视频格式： MP4, WebM, 和 Ogg:
| Format | MIME-type |
| MP4 | video/mp4 |
| Ogg | audio/ogg |
| WebM | video/webm |
HTML5中已经移除的元素
- frame
- frameset
- noframes
HTML中的转义符号
| 转移符号 | 描述 |
|
|
转义为空格 |
| < | 转义为小于号< |
| ≤ | 转义为小于等于号≤ |
| > | 转义为大于号> |
| ≥ | 转义为大于等于号≥ |
| © | 转义为版权符号 ? |
原文：https://www.cnblogs.com/yi-ji/p/14678357.html
内容总结
以上是互联网集市为您收集整理的前端-HTML和HTML5常用标签全部内容，希望文章能够帮你解决前端-HTML和HTML5常用标签所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。