本文详细介绍了HTML5的基础概念，包括HTML文档结构、常用标签、表单元素、超链接、表格、多媒体和HTML5的新特性。还讨论了HTML的注释、属性设置、布局技巧以及HTML5中新增的表单属性和input类型。此外，文章提到了HTML5的音频和视频标签，以及一些已被移除的元素。内容涵盖了网页开发的关键知识点。
HTML5
HTML概念
HTML是HyperText Markup Language的简称，中文名称：超文本标记语言，它是一种用于创建网页的标准标记语言。
标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。
HTML 运行在浏览器上，由浏览器来解析。
一些基本概念
1.html文档的后缀名
.html和.htm两种都可以，没有区别。授课中都是.html后缀名，个人习惯不同而已。
2.标签的分类
围堵标签：有开始标签和结束标签，例如
自闭和标签：开始标签和结束标签都在一个标签中
3. 标签可以嵌套，但是嵌套的语法要正确
正确案例：<p><a></a></p>
错误案例：<p><a></p></a>
4.标签的内部是可以定义属性的，属性由键值对组成，值需要用双引号引起来，多个属性用空格隔开
<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
例如：
<p id="p1" name="p1"> </p>
5.html标签不区分大小写，但是推荐全小写
开发工具
截至本文发布推荐HBuilder
HTML文档的基本结构
HTML文档也叫web页面。
基本结构
<!-- 声明当前文档是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的注释
语法：
HTML注释以<!-- 开头 ，以-->结尾。
注释的部分浏览器不解析，注释是为了给程序员看，更好的了解html代码
<!--
这里编写HTML注释，
可以是一行，也可以是多行
-->
HTML中常用标签
这里只列举部分常用的
文本标签
标题标签 h1–h6:字体逐渐缩小
一般用在文章的标题上。
段落标签
一般用在正文。
换行标签
一般用在段落中强制换行。
水平线标签
一般用来分隔内容。
范围标签
一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使用。
PS：不是因为有了范围标签，局部内容的样式才有变化；是为了改变局部内容样子，我们才通过范围标签包裹，然后修改它的样式。
图片标签
基本属性
设置图片的热点区域–了解
设置图片的热点区域:
<img src="img/ bg1.png" usemap="#地图名称"/>
<map name="自定义图名称"></map>
<area shape="形状名称”3种取值:
circle-圆形
rect-矩形
poly-多边形
coords="坐标（多个值之间用逗号隔开)"
circle-圆形有3个数字:分别是圆心的横坐标、纵坐标和圆半径
rect-矩形有4个数字:分别是左上角的横纵坐标、右下角横纵坐标
poly-多边形取决于边数:按顺时针写好每个点的横纵坐标
href="点击该剧由的时候跳转的目标URL"
title="鼠标悬浮在该区域的时候的提示文字"/>
通过这种方式可以实现，点击一张图片的不同部分实现不同的链接跳转。
注意map的name和usemap的值的匹配。还有多边形的实现顺序：顺时针
列表标签
一般用在导航上
分为：
无序列表
有序列表
定义描述标签
一般用在图文混编的场景中。
布局标签层 div
一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局。
标签分类
html标签可以分为块状元素和行级元素两类。
块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；
行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。
PS:区分的简单方法：是否独占一行。
块状元素和行内元素的区别：
1、 块级元素会独占一行，其宽度自动填满其父元素宽度；
行内元素会排列到同一行里，其宽度随元素的内容变化而变化。
2、块级元素可以设置宽高；行内元素设置宽高无效。
3、块级元素可以设置margin，padding属性；
行内元素的水平方向的padding会有边距效果，但是竖直方向的padding没有效果。
我们上面已经提到过的标签中归类一下：
属于块状元素的：
标题标签 h1-h6,
段落标签 p ,
水平线标签 hr,
有序列表标签 ol–li，
无序列表标签 ul–li，
定义描述标签 dl-dt-dd，
容器标签 div
属于行级元素的：
范围标签：span
图像标签：img
超链接
超链接标签一般有两个作用：
1、用来实现页面间的跳转
2、实现锚链接功能
页面间的跳转
锚链接
使用场景：
当一个页面长度超过一屏的时候，想迅速跳转到指定位置，例如大家经常浏览网页的时候，滑动超过一屏，右下角经常会出现返回顶部连接，这个就是锚链接实现的。
这个定位可以实现本页面间的锚链接也可以实现不同页面间的锚链接。
本页面的锚链接
页面间的锚链接
同页面间的锚链接可以直接从一个页面跳往另一个页面的指定位置。
表格标签
规则表格
不规则表格–跨行和跨列（行与列的合并）
关键属性：
colspan：列合并
rowspan：行合并
表格的高级标签–标题标签和逻辑分区标签
关键标签：
<caption>
<thead>
<tbody>
<tfoot>
表单–非常重要
概念：用于采集用户输入的数据。用于和服务器进行交互。
常用属性:
action:指定提交数据的URL
method:指定提交方式,一共7种,以下2种比较常用
get:
1.请求参数会在地址栏中显示。会封装到请求行中
2.请求参数大小是有限制的。
3.不太安全。
post:
1.请求参数不会再地址栏中显示。会封装在请求体中
2.请求参数的大小没有限制。
3.较为安全。
enctype:表单中有上传的文件的时候必备该属性，且取值为multipart/form-data
表单项元素中的一些属性：
id:元素的唯一表示，不重复
name:表单项元素的名称，很重要--提交数据到服务器之后，服务器获取数据通过该名称
value:表单项元素的值，服务器获取数据通过name获取到的就是value
type:表示表单项元素的呈现形式
class:表示样式名称
readonly:表示只读，用户只能看不能改
disabled:表示禁用，该元素不能改而且背景是灰色
常用的表单项元素
文本框
密码框
单选按钮
复选框
文件域
日期-h5中的新特性
隐藏域（携带参数时好用，用户看不见）
下拉列表框
文本域
常用于展示大段文字
按钮
分为：
提交按钮
图片按钮
重置按钮
普通按钮
button标签可以与input实现的按钮相互替换，但图片按钮只有input有
标签（label）
框架
框架概念
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
例如大家可以观察一下自己的京东个人中心页面，点击左侧内容的时候，只有右边页面在变动。
框架语法
iframe:定义内嵌框架
常用属性:
src=“URL”:该URL指向不同的网页
height 和 width属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位,但是你可以指定其按比例显示(如:“80%”")。
frameborder属性用于定义iframe表示是否显示边框。
设置属性值为“0”或“no”移除iframe的边框
name:内嵌框架的名称,自定义。
iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的属性。
比如上图中：点击查询连接的时候,百度页面将在本页的内嵌框架中显示。
框架集–了解（已废弃）
常用的布局组合标签
div-ul-li/div-ol-li：常用于导航布局
div-dl-dt-dd:常用于图文混编布局
div-form:常用于表单布局
div-table:常用于局部规则数据展示布局
HTML5新的表单属性
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>
测试的时候需要先输入一遍，然后再刷新页面再次输入看到效果。 有些浏览器可能不自动支持，需要自己启用。
HTML5 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 属性规定 元素中可选择多个值。
注意: 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
email
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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频音频</title>
</head>
<body>
<h1>音频</h1>
<audio controls>
<source src="audio/wgs.ogg" type="audio/ogg">
<source src="audio/zjl.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<h1>视频</h1>
<video width="1320" height="640" controls>
<source src="audio/ruhai.mp4" type="video/mp4">
<source src="audio/wgs.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
</body>
</html>
HTML5中已经移除的元素
frame
frameset
noframes
HTML中的转义符号bn N7（这里只列举了常用的）
| 转移符号 | 描述 |
|---|---|
|  ； | 转义为空格 |
| <； | 转义为小于号< |
| &le； | 转义为小于等于号≤ |
| >； | 转义为大于号> |
| &ge； | 转义为大于等于号≥ |
| ©； | 转义为版权符号 © |
扫一扫
2419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
