关于HTML5

关于HTML5

HTML知识点

HTML是HyperText Markup Language的简称，中文名称：超文本标记语言，它是一种用于创建网页的 标准标记语言。

标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。

HTML 运行在浏览器上，由浏览器来解析。

html文档的后缀名 .html和.htm两种都可以，没有区别。授课中都是.html后缀名，个人习惯不同而已。

标签的分类

围堵标签：有开始标签和结束标签 <p></p>

自闭和标签：开始标签和结束标签都在一个标签中 <br/>

html标签不区分大小写，但是推荐全小写。

HTML文档也叫web页面。

HTML的注释<!--注释-->

标签

标题(1~6)	<h1></h1>,<h2></h2>...
段落	<p></p>
换行	<br/>
水平线	<hr/>
范围	<span 属性></span>
图片	<img/>
图片热点	<map><area/></map>
无序列表	<ul><li></li></ul>
有序列表	<ol><li></li></ol>
定义列表项	li
容器	<dl><dt></dt><dd></dd></dl>
定义名称	dt
补充描述	dd
已废弃。使用 代替它	dir
已废弃。使用 代替它	menu
布局	<div></div>
超链接	<a></a>
表格	<table></table>

图片热点

范围选择

<img src="img/Snipaste_2021-07-22_16-46-04.jpg" usemap="#myMap"/>
		<map name="myMap">
			<area shape="circle" coords="100,100,100" href="index.html#sport" title="dami" />
		</map>
		<!--
        	shape=形状 
        	coords=根据二维坐标选取的范围 ，不同形状取点不同
        	title=进入范围，可以显示文本
        -->

注意：

1.map没有实物，需要搭建在图片上

2.引用时，需要通过name调用具体的map

调用	usemap
形状	shape
范围	coords
显示文本	title

锚点链接

基本知识

<a href="#sport" target="_self">这是启点</a>

href:链接地址

target：链接地址的打开方式，常用_self本页打开_blank新页面

<a name="sport">这是终点</a>

链接地址	href
链接打开方式	target

表格

规则表格

<table border="1" width="50%" height="100" cellpadding="50">
        	<tr align="center" valign="bottom">
        		<td>hhh</td><td align="left" valign="top">hhh</td><td></td>
        	</tr>
        	<tr align="left">
        		<td>hhh</td><td></td><td></td>
        	</tr>
        	<tr align="right">
        		<td>hhh</td><td></td><td></td>
        	</tr>
        </table>
        <!--
        	border=边线宽度
        	width=表格宽 
        	height=表格高
        	cellpadding=内边距
        	align=水平位置 
        	valign=垂直位置
        -->

注意：

1.实际结果以最小的单位为主，如tr的align="center"无法控制到带有align="left"的td

边线宽度	border
表格宽	width
表格高	height
内边距	cellpadding
水平位置	align
垂直位置	valign

不规则表格

<table border="1" cellpadding="0" cellspacing="0" height="200" width="400" >
        	<tr>
        		<td colspan="3"></td>
        	</tr> 
        	<tr>
        		<td></td>
        		<td></td>
        		<td rowspan="3"></td>
        	</tr>
        	<tr>
        		<td></td>
        		<td></td>
        	</tr>
        	<tr>
        		<td></td>
        		<td></td>
        	</tr>
        </table>

注意：

1.rowspan向下取格，缺少部分，将调整最下方的表格的高度进行补充

2.rowspan取格时默认占有其位置，意味着下方的表格需要减少<td>的创建，如3行3列，占用一列后只需要创建2列。

合并列	colspan
合并行	rowspan

标题标签与逻辑分区

<table border="1" cellpadding="0" cellspacing="0" width="90%" height="300">
        	<caption>表格标题</caption>
        	<thead style="background-color: rgb(200,0,20);">
	        	<tr>
	        		<th>列标题1</th><th>列标题2</th>
	        	</tr>
        	</thead>
        	<tbody>
	        	<tr> 
	        		<td>数据1</td><td>数据2</td>
	        	</tr><tr> 
	        		<td>数据1</td><td>数据2</td>
	        	</tr>
        	</tbody>
        	<tfoot>
        		<td>总计</td><td>总计</td>
        	</tfoot>
        </table>
        <!--
        	caption=表格标题
        	thead=表头
        	tbody=表主体
        	tfoot=表结尾
     		th=表标题标签
        -->

表格标题	caption
表头	thead
表主体	tbody
表结尾	tfoot
表标题标签	th

转义字符

转移符号	描述
&nbsp	转义为空格
&lt	转义为小于号
&le	转义为小于等于号
&gt	转义为大于号
&ge	转义为大于等于号
&copy	转义为版权符号©

表单

表单框架

<!--描述：form:用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
    常用属性: 
        action:指定提交数据的URL
        method:指定提交方式,一共7种,以下2种比较常用
            get:
            1.请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
            2.请求参数大小是有限制的。
            3.不太安全。
            post:
            1.请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
            2.请求参数的大小没有限制。
            3.较为安全。
        enctype:表单中有上传的文件的时候必备该属性，且取值为multipart/form-data
-->
        <form action="index.html" method="get" enctype="multipart/form-data">
        	
        </form>

提交数据的URL	action
指定提交方式	method
上传属性	enctype

表单属性

id	元素的唯一表示，不重复
name	表单项元素的名称，很重要–提交数据到服务器之后，服务器获取数据通过该名称
value	表单项元素的值，服务器获取数据通过name获取到的就是value
type	表示表单项元素的呈现形式
class	表示样式名称
readonly	表示只读，用户只能看不能改

其他属性

disabled	表示禁用，该元素不能改而且背景是灰色
placeholder	默认提示文本
required	对此处未填写的反馈
checked	单选的默认选择
multiple	表示可以上传多个文件

input相关形式

文本框

文本框:type=“text” ,text也是input的默认值

id:表示元素的唯―标识,不推荐重复

name:表单元素的名称，很重要，未来提交数据到服务器的时候，服务器端通过name获取value

placeholder:文本框中显示的提示文字，用户输入自己内容的时候提示文字自动消失

<input type="text" id="user" name="user" placeholder="请输入账号:" />

密码框

密码框:type=“password”，用户输入内容之后显示的是黑色实心圆，而不是明文显示内容

required:表示用户必须填写此内容，如果没有填写，提交表单的时候失败并给出提示

<input type="password" id="pass" name="pass" required="请输入密码" />

单选按钮

单选按钮: type=“radio”

单选按钮都是成组出现，name相同的才表示一组，同组当中的按钮都互

value:服务器通过name获取到的值就是value

checked:表示默认选中﹔值可以省略，直接写一个属性名，也可以写checked=“checked” ,

男<input type="radio" name="gender" value="男" checked="checked"/>
女<input type="radio" name="gender" value="女" checked="checked"/>

checked以执行顺序为结果

复选框

复选框: type=“checkbox”"

复选框都是成组出现，name相同的才表示一组，同组当中的复选框可以选多个

value:服务器通过name获取到的值就是value

checked:表示默认选中﹔值可以省略，直接写一个属性名，也可以写checked=“checked” ,

<input type="checkbox" name="hobby" value="swin" />游泳
<input type="checkbox" name="hobby" value="nab" />NBA
<input type="checkbox" name="hobby" value="game" />游戏
<input type="checkbox" name="hobby" value="music" />音乐

文件域

文件球:文件上传type=“file”

表单中如果有文件上传,表单中最好有enctype="multipart/Form-data"

multiple属性:表示可以同时上传多个文件

<input type="file" name="filed" multiple="multiple" />

日期

日期-h5新特性:

type="date”表示年月日

type="datetime-local”表示既有年月日又有时间

<input type="date" name="dated" />

<input type="datetime-local" name="newDate" />

隐藏域

隐藏域: type="hidden”

页面上看不到任何效果

作用:隐藏一些用户不关心但是程序员小哥哥小姐姐需要的值

<input type="hidden" name="useId" value="1" />

文本	text
不可见文本	password
单选框	radio
复选框	checkbox
文件	file
日期	date/datetime-local
隐藏域	hidden

下拉列表

下拉列表框: select中写name

option: select中的所有选项,其中value表示下拉列表中被选中的项的对应值其中selected表示默认选中

<select name="month">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

文本域

textarea:文本域

cols:指定列数,每一行有多少个字符

rows :默认多少行。

readonly:表示只读,内容不可修改

disabled:表示不可用,样式呈现灰色

<textarea rows="15" cols="14" readonly="readonly" disabled="disabled">
     一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十
</textarea>

cols指定的是字节，汉字需要2倍计算。

按钮

<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="button" value="按钮" />
<input type="image" src="img/Snipaste_2021-07-22_16-46-04.jpg" />
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

标签

label:指定输入项的文字描述信息

<label for="user">用户</label>
<input type="text" id="user" name="user" placeholder="请输入账号:" />

注意

label的for属性一般会和input 的id属性值对应。如果对应了,则点击label区域,会让input输入框获取焦点。

框架iframe

iframe:定义内嵌框架

常用属性:src=“URL”":该URL指向不同的网页

height和width屈性用来定义iframe标签的高度与宽度。

​ 属性默认以像素为单位,但是你可以指定其按比例显示(如:“80%” )。

frameborder尾性用于定义iframe表示是否显示边框。

​ 设置属性值为"0”移除iframe的边框:

name:内嵌框架的名称,自定义。

iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的属性，如下实例:点击查询连接的时候,百度页面将在本页的内嵌框架中显示

<p><a href="http://www.baidu.com" target="content">aaa</a></p>
<iframe name="content" src="index.html" width="100%" ></iframe>

注意：目标是src的URL不是超链接的URL

src	指向不同的网页
frameborder	边框
name	内嵌框架的名称

框架集

frameset:定义一个框架集。

该元素被用来组织一个或者多个frame元素。每个frame有各自独立的文档。

frameset元素规定在框架集中存在多少列或多少行，以及每行每列占用的百分比/像素。

常用属性: cols=“数值列表,多个值之间用逗号分隔”"

rows=数值列表,多个值之间用逗号分隔""

cols=""25%,,25%"表示框架集中有3列,第一列和第3列宽度各占页面的25%,中间的表示第二列占页面剩余宽度的50%

frame是iframe的前身，使用时常常只添加src属性，其他由frameset决定

<frameset cols="25%,*" rows="50%,25%,*">
    <frame src="index.html" />
    <frame src="index.html" />
    <frameset cols="25%,*">
        <frame src="index.html" />
        <frame src="index.html" />
        <noframes>该浏览器不支持</noframes>
    </frameset>
    <noframes>该浏览器不支持</noframes>
</frameset>

标签布局组合

div-ul-li/div-ol-li：常用于导航布局

div-dl-dt-dd:常用于图文混编布局

div-form:常用于表单布局

div-table:常用于局部规则数据展示布局

HTML4和HTML5

DOCTYPE 不同

指定字符编码语法不同

HTML4:使用meta元素的形式指定文件中的字符编码(通过 content元素的属性来指定)

HTML5:使用对元素直接追加charset属性的方式来指定字符编码。

注意：两种方法都有效，但是不能同时混合使用两种方式，从H5开始，对于文件的字符编码推荐使用 UTF-8。

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" />

HTML5

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />

HTML5新标签

form新属性 autocomplete

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

autocomplete 适用于以下类型的input标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

form新的表单元素

datalist	input标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
keygen	规定用于表单的密钥对生成器字段。
output	标签定义不同类型的输出，比如脚本的输出。

input 新属性 list，multiple，placeholder，required

list

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

效果同select

multiple

multiple 属性是一个 boolean 属性.

multiple 属性规定 元素中可选择多个值。

注意: multiple 属性适用于以下类型的 标签：email 和 file

placeholder

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

注意: placeholder 属性适用于以下类型的 标签：text, search, url, telephone, email 以及 password。

required

required 属性是一个 boolean 属性.

required 属性规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

新增的音频

HTML5 规定了在网页上嵌入音频元素的标准，即使用

<audio controls> 
	<source src="" type="audio/MIME类型"/>
	<!--支持三种音频格式文件:MP3,Wav和Ogg-->
</audio>

control 属性供添加播放、暂停和音量控件。

<audio>元素允许使用多个 <source> 元素。 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

音频格式的MIME类型

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

新增的视频

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持Video标签。
</video>

如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时 保留特定的空间，页面就会根据原始视频的大小而改变。

视频格式的MIME类型

Format	MIME-type
MP4	video/mp4
Ogg	audio/ogg
WebM	video/webm