HTML5新特性

特性
1.语意特性,添加<header><header/><nav><nav>等标签
2.多媒体，用于媒介回放的 video 和 audio 元素
3.图像效果，用于绘画的 canvas 元素，svg元素等
4.离线 & 存储,对本地离线存储的更好的支持,local Store,Cookies等
5.设备兼容特性，HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，
6.连接特性，更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能
7.性能与集成特性，HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作
新增标签
1.多媒体：<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track>
2.新表单元素：<datalist> ,<output> , <keygen>
3.新文档节段和纲要:<header>页面头部、<section>章节、<aside>边栏、<article>文档内容、<footer>页面底部、<section>章节、<aside>边栏、<article>文档内容、<footer>页面底部等
使用html5shiv可以解决ie低版本不兼容的问题，只需要在head中加上,当版本低于IE9时，浏览器会加载html5.js脚本，使得支持html5的新功能，也可以将脚本文件下载到本地
```
<head> </head>
```

3.input 有哪些新增类型？

color,选择颜色
date 选择日期
email 用于检测输入的是否为email格式的地址
month 选择月份
number 用于应该包含数值的输入域，可以设定对输入值的限定
range 用于定义一个滑动条，表示范围
search 用于搜索，比如站点搜索或 Google 搜索
tel 输入电话号码
-time 选择时间
url 输入网址
week 选择周和年

4.浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。

共同点：sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。
区别
1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，localStorage不会自动把数据发给服务器，仅在本地保存
2.cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下，存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。localStorage不会自动把数据发给服务器
3.cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据
4.localStorage支持事件通知机制，可以将数据更新的通知发送给监听者。 api 接口使用更方便。而cookie的原生接口不友好，需要程序员自己封装
HTML5中提供了localStorage对象可以将数据长期保存在客户端，除非人为清除，localStorage提供了几个方法:
1.存储:localStorage.setItem(key,value)如果key存在时，更新value
2.获取 localStorage.getItem(key)如果key不存在返回null
3.删除 localStorage.removeItem(key)一旦删除，key对应的数据将会全部删除
4.全部清除 localStorage.clear() 使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
注意：localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。

、Html的基本结构：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

网页的文本、图片等信息；

</body>

</html>

二、Head部分：用于表示网页的元数据即描述网页的基本信息

其常用标签及属性有：

1、title标签：浏览器标签页显示的标题

2、meta标签：其常用属性

①charset:设置文档的字符集编码格式。HTML5中设置字符集编码：<meta charset="UTF-8">

常见的字符集编码格式：

a.GB-2312:国标码，简体中文

b.GBK：扩展的国标码

c.UTF-8：万国码 Unicode 常用

②http-equiv属性:将我们的信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性值：Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。（http-equiv属性只是表明需要设置哪一部分，具体的设置内容，放到content属性中）

③name属性：使用方法同“http-equiv”。将我们的信息写给搜索引擎看

常用且需要掌握的属性值：author（作者） keywords（网页关键字） description（网页描述）这两个属性设置，网页必不可少。

3、link标签：链接网页图标（title前的小logo），其常用属性有：

①rel属性：声明链接文件的类型，此处选icon

②type属性：可以省略

③href属性：表示图片的路径地址

三、body部分：网页的文本、图片等信息

标签的分类：

块级标签：显示为块，前后隔一行（自动换行）

行级标签：按行从左往右逐一显示。

1、常见的块级标签：

①<h1></h1>......<h6><h6>：标题标签，自动加粗，h1最大，h6最小。

②<hr/>：水平线标签，添加一条水平线。

③<p></p>:段落标签，

④<br/>:换行标签，

⑤<blockquote/></blockquote>:引用标签，cite属性，表明引用的来源，一般引用网址

浏览器默认首行缩进。

⑥<pre></pre>:预格式标签，用于重载代码。浏览器默认显示样式：1、显示为等宽字体。 2、代码中的换行、

空格等元素能在浏览器中显示。

【补充】html 文件中空格的表示：

2、基于布局的块级标签

列表：无序列表、有序列表、定义列表

①有序列表：<ol></ol> 列表项：<li></li>

②无序列表：<ul></ul> 列表项：<li></li>

③定义列表（实现图文混排）:<dl></dl>

列表标题：<dt>一般只有一项</dt>

列表描述项：<dd>可以有很多项</dd>

3、组合标签：<figure></figure>用于显示图片及图片标题

他有两个子标签：<img />图片

<figcaption></figcaption>图片的标题

例如：<figure>

<figcaption>探险家伊泽瑞尔</figcaption>

</figure>

4、分区标签：<div></div>

5、常见的行级标签

<1>span（文本）:无实际意义，用于包裹某部分文字，修改特定样式，例如：

这是<span style="color: red;font-size: 36px;">span</span>中的文字

img（图片）：其常用属性：①src:表示引用图片的地址。

路径地址的写法：相对路径：以当前文件为最准，去寻找图片地址

a、与文件处于同一层的图片，直接写图片名

b、图片在当前文件下一层：文件名/图片名

c、图片在当前文件上一层：../图片名

绝对路径:file:///盘符：/文件夹/图片名，但是严禁使用

图片网址：网络上的图片链接，但是一般不用

②height和width：图片的高度和宽度。可以用CSS样式代替

③title：图片标。当鼠标指上之后显示的文字

④alt:当图片无法显示的时候，显示的文字

<2>em（倾斜强调）

<3>strong（加粗强调）

<4>b（加粗）

<5>i（倾斜）

Strong、em、b、i的区别

1、Strong、em都表示强调，Strong为粗体，em为斜体，而Strong的强调程度逗比em高

2、Strong和b都能加粗，em和i都能倾斜，，但是Strong和em多了一层强调的语义。H5要求标签尽可能实现语义化。

<6>q（短引用）

<7>small/big（缩小/放大字体）：small和big分别是缩小和扩大字体，都可以多层嵌套直至上限或下限

<8>a（超链接）

1、href:超链接的路径，可以是网络链接，也可以是本地文件。

2、target:跳转页面打开的位置。_self自身页面，_blank新页面。

3、title:鼠标指在超链接上显示的名称。

4、Rel（被链接是当前的前/后一篇）:指定被链接文档与当前文档的关系,搜索引擎会利用该属性获取更多的有关链接的信息：

rel="prev"被链接文档是当前文档的前一篇文档，

rel="next"被链接文档是当前文档的后一篇文档,

rel="icon"被链接文档是当前文档的图标

rel="stylesheet"被链接文档是当前文档的样式表

5、Rev（当前是被链接的前/后一篇）

锚链接：

①本页面锚链接:a、设置锚点：<a name="top"></a>

b、跳转锚点：#name名

①页面间锚链接:a、在即将跳转页面的指定位置设置锚点

b、跳转锚点：页面地址.html#name名

<a href="02_常见的块级标签.html#Hbuilder">页面间锚链接</a><br/>

功能性链接： mailto用于给指定邮箱发送邮件

file：///e:/aaa.png打开本地文件

tencent://message/?uin=1315618220 给指定QQ发送息

<9>s标签，有误文本：删除线

<s>这是S标签中的文字</s><br />

<10>cite标签：浏览器显示为倾斜，常用于书、画作、作品的引用

<cite>这是cite中的文本</cite><br />

<11>code:计算机代码，不保留代码格式

<pre>

</pre>

<12>bdo:表示文本方向，属性：dir="ltr"表示从左往右，dir="rtl"表示从右往左

kbd:表示需要用户用键盘输入的内容，浏览器显示为等宽字体

请输入“<kbd>Esc</kbd>”推迟系统<br />

<13>sup:上标文本，sub:下标文本

x<sub>6</sub><br />

<14>u:下划线

<u>这是下划线</u><br />

mark:高亮或标记文本，浏览器显示为黄色背景

6、表格：表格的行：tr，每行中的列：td，表格的表头：th

表格的常用属性：

表格行列属性：[tr和td的属性]：

1、width/heigh：单元格的宽高

2、bgcolor:单元格的背景颜色

3、align:left center right 单元格中的文字水平对齐方式

4、valign:top center bottom 单元格中的文字垂直对其方式

5、nowrap:单元格中文字不换行

【注意】当表格属性与行列属性冲突时，行列属性优先级高

7、表单（form）

【两个重要属性】：action-表单提交的服务器地址 method-表单提交数据的方法（get/post）

get/post区别:

1>get使用URL传参：http://服务器地址?name1=value1&name2=value2

（?表示传递参数，?后面采用name=value的形式传递，多个参数之间用&连接） ① URL传参不安全，所有信息可在地址栏看到，并且别人可以很容易url注入，来攻击自己的数据库。

② URL传参数据量有限，只能传递少量数据。

2>post:使用http请求传递数据。URL地址看不到数据信息，安全且传递信息量没有限制

综上所述：大部分使用post传参，但是get传参比Post快

【input标签及属性】

①type：input输入框的类型，可选值有：

②name：input输入框的别名，必填，因为传参的时候采用name=value的形式传递。

③value：input输入框的默认值

④placeholder:提示内容，当输入框有value时，提示内容消失。

【input特殊属性值】

① checked="checked"默认选中

② disabled="disabled"设置控制不能使用，按钮上不能点击，输入框上不能修改，而且如果

输入框时disabled，则输入框信息不传递到后台

③hidden=“hidden”隐藏。等同于<input type="hidden" name="username"value="1234" />

等同于配合disabled或根据其他需要，使用隐藏域传递信息.

【input-type属性详解】

①text：文本输入框

②password：密码输入框，内容不对外显示

③radio：单选按钮

checkbox:复选按钮

a、单选按钮，name和value属性需同时存在，提交时，提交的是value中的属性值

例如：<input type="radio" name="sex" value="男"/>提交显示为"sex=男"

b、radio凭借name属性区分是否为同一组，name相同为同组，且只能选择一个

c、checked="checked"默认选中，（radio只可以选一个，checkbox可以选多个）

④submit：提交按钮，提交表单数据

⑤reset：重置按钮，重置为默认状态

⑥file：文件上传按钮

⑦image：图片提交按钮，功能同submit，可以提交数据

⑧button：普通按钮，没什么软用

⑨其他常用属性值：见下图

【select标签】下拉选择标签

写法：

</select>

常用属性

①name属性：写在select里，所有选项只有一个name

②multiple属性：multiple="multiple"设置select为多选，一般不用

③option常用属性：value=""属性，当option没有value属性时，往后台传递的是<option></option>中间的文字，

当有value属性时，传递的是value的属性值。

title=""属性,鼠标之上后现实的文字

select="select"默认属性值

④optgroup属性：用于option属性分组，用lable属性表示分组名。

</optgroup>

【textarea】:文本域，其常用属性：

①设置宽度高度 style="width: 150px;height: 200px;

②readonly="readonly"：只读模式，不允许修改编辑

③style="resize: none;"设置为宽度高度不允许修改

④style="overflow:;"设置文字超出区域时，如何处置，常用属性值有：

hidden 超出区域的文字，隐藏无法显示

scroll 无论文字多少，均显示滚动

auto 自动，根据文字多少自动决定是否会显示为滚动条

【fieldset 、legend】表单的边框与标题

<fieldset> //边框

<legend> //标题

</legend>

</fieldset>

如果想让标题嵌入到边框中，需将标题标签写到边框标签里面

一个表单可以有多组标题加边框组合

【h5智能表单】

1、H5新增input的form属性，用于指定特form表单的id，实现input无需放在form标签之中，即可通过表单进行提交

……

</form>

2、 input元素的新增属性：

Autocomplete：自动完成功能，记录用户之前输入的内容，并在用户下次输入时提示用户输入

》》》属性值：on/off

》》》可以再form表单使用，对整个表单的所有控件进行自动完成的开关也可以在input上使用，

对特定输入框进行修改

》》》绝大部分浏览器默认开启

Autofocus：自动获得焦点，autofocus="autofocus"只能获得一个焦点

Form：所属表单，通过id确认属于哪个表单

Required：必填,required="required",设置必填，否则停止提交

Pattern：使用正则表达式验证input的模式

Placeholder：提示，当有value时取消提示。

1.html中文问题

<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>

2.标签

<p> 这是一个开始标签 
</p> 这是一个结束标签 
<p> Hello World </p> 标签之间的文本叫做内容
<h1>大标题</h1>
<h2>小一点的标题</h2>
<h3>再小一点的标题</h3>
<h4>更小一点的标题</h4>

3.元素

<html> 头标签
 
 <body> 身体标签 
 
 <h1>标题</h1> 
 <br/> 换行
<hr/> 水平线
<p>段落表示</p> 
 </body>
 
</html>

4.属性

<h1 align="center">居中标题</h1>
写在开始标签里的 align="center" 就叫属性 
align 是属性名 
center 是属性值 
属性值应该使用双引号括起来

5.注释

<!--注释内容-->

6.标题

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题5</h6>

7.段落

<p>段落1 </p>
<p>段落2 </p>
<p>段落3 </p>

8.粗体--斜体

<b>b标签粗体效果</b>
<strong>strong标签粗体效果</strong> <br/> <!--推荐使用-->
<i>使用 i 标签带来的斜体效果</i>
<em>使用 em 标签带来的斜体效果</em> <!--推荐使用-->

9.预格式显示Java代码

<pre>
public class HelloWorld {
 
 public static void main(String[] args) {
 System.out.println("Hello World");
 }
}
 
</pre>

10.删除--下划线

<del>使用del标签实现的删除效果</del>
<ins>使用ins标签实现的下划线效果</ins>

11.图像

<img src="图片路径"/>
<!--图像大小-->
<img width="200" height="200" src="图片路径"/>
<!--图像位置-->
<div align="left">
 <img src="http://www.hmttv.cn/uploadfile/2024/0808/20240808042009780.gif"/>
</div>
 
<div align="center">
 <img src="http://www.hmttv.cn/uploadfile/2024/0808/20240808042009780.gif"/>
</div>
 
<div align="right">
 <img src="http://www.hmttv.cn/uploadfile/2024/0808/20240808042009780.gif"/>
</div>
<!--替换图片文字,加载不出图片时显示文字-->
<img src="http://how2j.cn/example_not_exist.gif" alt="这个是一个图片" />

12.超链接

<a href="http://www.12306.com">12306</a>
<!--target属性表示在新页面打开超链接-->
<a href="http://www.12306.com" target="_blank">http://www.12306.com</a>
<!--超链接上显示文字-->
<a href="http://www.12306.com" title="跳转到http://www.12306.com">www.12306.com</a>
<!--图片超链接-->
<a href="http://www.12306.com">
<img src="http://www.hmttv.cn/uploadfile/2024/0808/20240808042009780.gif"/>
</a>

13.表格

<!--
 table:表格
 tr:行
 td:列
 border:带边框的表格
 width:表格高度,px及像素的意思
 td-width:单元格宽度绝对值,也可用百分比显示(50%)
 algin:单元格水平对齐(left,right,center)
 valgin:单元格垂直对齐(top,middle,bottom)
 colspan:水平合并
 rowspan:垂直合并
 bgcolor:背景颜色
-->
<table border="1" width="200px">
 <tr>
 <td width="50px">1</td>
 <td algin="center">居中</td>
 <td algin="left">靠左</td>
 <td algin="right">靠右</td>
 <td width="80%">1</td>
 <td valign="middle" >中间</td>
 <td valign="top" >顶部</td>
 <td valign="bottom" >底部</td>
 <td colspan="2" >1，2</td>
 <td rowspan="2">1,3</td>
 <td bgcolor="pink">b</td>
 </tr>
</table>

14.列表

<!--ul无序,ol有序-->
<ul>
<li>无序</li>
<li>列表</li>
</ul>
<ol>
<li>有序</li>
<li>列表</li>
</ol>

15.div域span

<!--
div是块元素，即自动换行 
常见的块元素还有h1,table,p 
span是内联元素，即不会换行 
常见的内联元素还有img,a,b,strong
业界通常结合css来控制页面布局
-->
<div>
 第一个div
</div>
 
<div>
 第二个div <!--换行-->
</div>
 
<span>
 第一个span
</span>
 
<span>
 第二个span <!--不换行-->
</span>

16.字体

<!--color表示颜色,size表示字体大小-->
<font color="blue" size="+2">蓝色大2号字体</font>

17.内联框架

<!--
iframe相当于浏览器里面有个小浏览器，在这个小浏览器中，打开另一个网页
-->
<iframe src="http://how2j.cn/" width="600px" height="400px">
</iframe>

18.文本框

<!--普通文本框-->
<input type="text">
<!--设置文本框长度-->
<input type="text" size="10">
<!--初始值文本框-->
<input type="text" value="有初始值的文本框">
<!--有背景文字的文本框,使用属性placeholder-->
<input type="text" placeholder="请输入账号">

19.密码框

<!--输入的数据会自动显示为星号-->
<input type="password">

20.表单

<!--
action获取数据提交后的页面,初学者体验效果就好
get和post的区别 
get 
是form默认的提交方式 
如果通过一个超链访问某个地址，是get方式 
如果在地址栏直接输入某个地址，是get方式 
提交数据会在浏览器显示出来 
不可以用于提交二进制数据，比如上传文件 
post 
必须在form上通过 method="post" 显示指定 
提交数据不会在浏览器显示出来 
可以用于提交二进制数据，比如上传文件
-->
<form action="http://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

21.单选框

<!--两个单选，都可以同时选中。但不能取消-->
单选1 <input type="radio" >
单选2 <input type="radio" >
<!--checked默认选中-->
默认选中 <input type="radio" checked="checked" >
<!--多个可单选框,activity参数-->
学习java<input type="radio" name="activity" value="学习java" > <br/>
java<input type="radio" checked="checked" name="activity" value="tokyohot" > <br/>
dota<input type="radio" name="activity" value="dota" > <br/>
LOL<input type="radio" name="activity" value="lol"> <br/>

22.复选框

<!--复选框,checkbox-->
学习java<input type="checkbox" value="学习java" > <br/>
学习<input type="checkbox" checked="checked" name="activity" value="tokyohot" > <br/>
dota<input type="checkbox" value="dota" > <br/>
LOL<input type="checkbox" value="lol"> <br/>

23.下拉列表

<!--
<select> 即下拉列表 
需要配合<option>使用
size:表示显示高度
multiple:可以用ctrl多选中
selected:默认选中
-->
<select size="2" multiple="multiple >
 <option >1</option>
 <option >2</option>
 <option selected="selected" >3</option>
</select>

24.文本域

<!--
文本域可以有多行，并且可以有滚动条
cols:显示宽度
rows:显示行数
-->
<textarea cols="30" rows="8">abc
def
</textarea>

25.普通按钮

<!--参数button,普通按钮不具备提交from表单的效果-->
<input type="button" value="一个按钮">

26.提交按钮

<!--
<input type="submit"> 即为提交按钮 
用于提交form，把数据提交到服务端
-->
<form action="/study/login.jsp" method="get">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

27.重置按钮

<!--
<input type="reset"> 重置按钮 可以把输入框的改动复原
-->
<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>

28.图像提交

<!--<input type="image" > 即使用图像作为按钮进行form的提交-->
<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="image" src="http://www.hmttv.cn/uploadfile/2024/0808/20240808042009780.gif">
</form>

29.按钮

<!--
<button></button>即按钮标签 
与<input type="button">不同的是，<button>标签功能更为丰富 
按钮标签里的内容可以是文字也可以是图像 
如果button的type=“submit” ，那么它就具备提交form的功能
-->
<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<button type="submit">登陆</button>
 
</form>

30.html综合演示

简单登陆注册模板.html

演示结果:

在线咨询

上一篇：实现快捷生成HTML代码
下一篇：谁说国产编译器没救了？这个 C/C++ 和 JavaScript 编译器来了 - 程序人生 2020

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5新特性

3.input 有哪些新增类型？

4.浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。

您的项目需求