ggggxc学习笔记----H5新增标签与属性I

本文链接：https://blog.csdn.net/gaoxiaochan/article/details/119539370

HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体！HTML5规范不仅支持先前HTML和XHTML的语法，而且增加了新的功能。

新特性：

1.取消了过时的显示效果标记 <font></font> 和 <center></center> ...添加了很多跟结构相关的元素。例如header,footer,section,article

2. 新表单元素引入

3. 新语义标签的引入

4. canvas标签（图形设计）

5. 本地数据库（本地存储）

6. 提供了一些API。H5提供了各种各样Web应用上的新API，各个浏览器也在快速地封装着这些API。H5已经使富Web应用的实现变成了可能。

7. 指定字符编码

H4中： <meta http-equiv="Content-type" content="text/html;charset=UTF-8"

H5中：<meta charset="UTF-8">

两种方法均有效！

8. 详细分析了各Web浏览器所具有的功能，然后以此为基础，要求这些浏览器所有内部功能都要符合一个通用标准。

优点：跨平台。

缺点：pc端浏览器支持不是特别友好，造成用户体验不佳。

一、新增的主体结构元素：

1) article元素

article元素代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容。

 <article>
    <header>
       <h1>苹果</h1>
       <p>发布日期：<time pubdate="pubdate">2010/10/09</time></p>
    </header>
    <p><b>苹果</b>植物类水果，多次花果.....</p>
    <footer>
    <p><small>著作版权</small></p>
    </footer>
</article>

2) section

用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及标题组成，但section并非是一个普通的容器元素，一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div。我们可以这样理解，section中的内容可以单独存储到数据库中或输入到word文档中。通常不推荐为那些没有标题的内容使用section元素。

作用：对页面上的内容进行分块，或者对文章进行分段。不要与article元素混淆。article元素可以看做是一种特殊种类的section元素，比section元素更强调独立性。

注意：

1. 不要将section元素用作设置样式的页面容器，那是div元素的工作。

2. 如果article,aside,nav元素更符合使用条件，不要使用section

3. 不要为没有标题的内容区块使用section元素。

<article>
  <h1>WebUI课程</h1>
  <p>WebUI致力于前端开发</p>
<section>
  <h2>HTML</h2>
  <p>用于页面结构</p>
</section>
<section>
  <h2>CSS</h2>
  <p>用于页面样式</p>
</section>
</article>

3) nav元素

nav元素是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。

nav使用的场合：传统导航条、侧边栏导航、页内导航、翻页操作

4) aside元素

aside元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。

aside元素主要有以下两种使用方法：

1)被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料，名词解释等。

2)在article元素之外使用，作为页面或站点全局的附属信息部分。典型的形式是侧边栏。

二、新增的非主体结构元素

1) header元素

是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题。一个网页内并未限制header元素的个数，可以拥有多个，可以为每个内容区块加一个header元素。在H5中，一个header元素通常包括至少一个heading元素（h1-h6），也可以包括hgroup,table,form,nav元素。

<header>
  <hgroup>
  <h1>IT技术</h1>
  <a href="#">退出</a>
  <a href="#">[订阅]</a>
  <a href="#">[手机订阅]</a>
  </hgroup>
  <nav>
    <ul>
       <li><a href="#">WebUI</a></li>
       <li><a href="#">Java</a></li>
       <li><a href="#">Android</a></li>
       <li><a href="#">IOS</a></li>
    </ul>
  </nav>

2) hgroup

是将标题以及子标题进行分组的元素，hgroup元素通常会将h1~h6元素进行分组，比如一个内容区块的标题以及其子标题算一组。

<hgroup>
  <h1>IT技术</h1>
  <a href="#">退出</a>
  <a href="#">[订阅]</a>
  <a href="#">[手机订阅]</a>
</hgroup>

3) footer

该元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，例如：作者，相关阅读连接以及版权信息等。与header类似，一个页面中也未限定footer元素的个数。

<footer>
  <ul>
    <li>版权信息</li>
    <li>站点地图</li>
    <li>联系方式</li>
  </ul>
<address>
   电子邮箱....
</address>
</footer>

4) address

用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息。

新增表单元素：output元素

定义不同类型的输出，比如计算结果或脚本的输出，output元素必须从属于某个表单。

通过js来实现输出

HTML5中新增表单元素的属性：

(1)表单内元素的form属性

在H5中，可以将表单内的从属元素书写在页面上的任何地方，然后为该元素指定一个form属性，属性值为该表单的id。

<form id="testForm">
   <input type="text" name="a">
   <input type="submit">
</form>
<textarea name="b" form="testForm"></textarea>

(2)formaction属性

在H5中，可以为所有的提交按钮，诸如<input type="submit"> <input type="image"> <button type="submit">等增加不同的formaction属性，使单击不同的按钮时可以将表单提交到不同的页面。

<form>
  <input type="submit" name="" formaction="a.action">
  <input type="submit" name="" formaction="b.action">
  <input type="submit" name="" formaction="c.action">
</form>

(3)formmethod

在H5中，可以使用formmethod属性为每个form表单元素分别指定不同的提交方法

<form>
  <input type="text" name="name">
  <input type="submit" name="" formmethod="post">
  <input type="submit" name="" formmethod="get">
</form>

(4)formenctype

在H5中，可以使用该属性对表单元素分别指定不同的编码方式

<form>
  <input type="submit" formaction="a.action" formenctype="multipart/form-data">
</form>

multipart/form-data：不进行编码，使用包含文件上传控件表单时，必须使用该值

text/plain：表单数据中的空格被转换为"+"但不对表单数据特殊字符进行编码

(5)formtarget属性

在H5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需要加载的页面。

_blank 在新的浏览器窗口中打开

_self 默认值，当前窗口中打开

_parent 父框架中打开

_top 当前浏览器窗口中打开

framename 指定框架中打开

(6)autofocus属性

为文本框选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点。

(7) required属性

在H5中，该元素可以应用在大多数元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户必须输入内容。

(8)control属性

在H5中，可以在标签（label元素）内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素。

<label for="oneIP" id="one">oneIp:</label>
<input type="text" id="oneIP">
<script>
  var one = document.getElementById("one");
  one.control.value = "hello";
</script>

(9)placaholder属性

是指当文本框<input type="text">或者<textarea>处于未输入状态时显示输入提示。

(10)文本框的list属性

在H5中，可为单行文本框<input type="text">增加一个list属性，该属性值为某个datalist元素的id,datalist是H5中新增的元素，该元素类似于选择框，但是当用户想要设定的值不在选择列表之内时，允许自行输入。datalist元素本身并不显示，而是当文本框获取焦点时以提示输入的方式显示。

<input type="search" list="list1">
  <datalist id="list1">
   <option value="one">one</option>
   <option value="two">two</option>
   <option value="three">three</option>
  </datalist>

(11)文本框的autocomplete属性

自动完成，该属性取值为"on"/"off"/"",当取值为on时，可以显式指定候补输入的数据列表。使用datalist元素与list属性提供候补输入的数据列表，在执行自动完成时，可以将该detalist元素中的数据作为候补输入的数据在文本框中自动显示。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

(12)文本框的pattern属性

将pattern属性值设为某个格式的正则表达式，在提交时会对这些进行检查，检查其内容是否符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。

(13)type属性

search：与text文本框类似，但是用于搜索，在IOS操作系统的移动设备中，当search类型的元素获得焦点时，面板中"前往"按钮上的文字将变成"搜索"

tel：与text文本框类似，但是用于电话，在IOS操作系统的移动设备中，当tel类型的input元素获得焦点时，设备上将显示输入电话号码所使用的数字面板。

url：与text文本框类似，但是要求用户必须在其中输入url格式的内容

email：与text文本框类似，但是要求用户必须在其中输入email格式的内容

属性：multiple 允许该文本框输入一串以逗号分隔的email地址。

datatime-local,data,month,week,time：日期与时间输入文本框

number：数值输入文本框

属性：

min 最小值

max 最大值

step 步长，每次修改时增长的幅度

range：只允许输入一段范围内数值的文本框。

min 用于设定最小值

max 用于设定最大值。

step 每次拖动的步幅度

color：颜色选择文本框

表单验证：

1.自动验证

 <input type="text" required pattern=""/>

2.取消验证

1) form属性novalidate=true 可以关闭整个表单验证

2) input/submit属性formnovalidate 可以关闭单个元素表单验证

3.显式验证

form与input元素都具有一个checkValidity方法，调用该方法可以显式地对表单内所有元素内容或单个元素内容进行有效性验证。checkValidity方法将验证结果用boolean的形式返回。

 var email = document.getElementById("email");

 email.checkValidity() //调用方法执行校验