史上最全的html5知识点（自用笔记一）
史上最全的html5知识点（一）
- 新增的主体结构元素
-
- article元素
- section元素
- nav元素
- aside元素
- time元素和pubdate属性
- 新增的非主体结构元素
-
- header元素
- address元素
- footer元素和hgroup元素
- 网页编排规则
- 表单新增元素与属性
-
- form属性和formation属性
- formmethod和formenctype属性
- formtarget属性和autofocus属性
- required是属性和labels属性
- control属性和placeholder属性
- list属性和autoComplete属性
- pattern属性和selectiondirection属性
- indeterminate属性和image提交按钮的height属性与width属性
新增的主体结构元素
article元素
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章、一篇论坛的帖子、一段用户评论或独立的插件，或是其他任何独立的内容
article元素可以嵌套使用
article元素可以用来表示插件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>article元素title>
head>
<body>
<h1>h1>
<aticle>
<header>
<h1>主体结构元素h1>
<p>hello,欢迎来到我的世界p>
header>
<article>
<header>
作者
header>
<p>评论p>
<footer>timefooter>
article>
<footer>
<p>这是底部p>
footer>
aticle>
<article>
<h1>这是一个内嵌h1>
<object>
section元素
section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常用内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而不是section元素。
PS：1、不要将section元素作为设置样式的页面容器
2、如果article元素、aside元素、nav元素更符合使用条件，那就不要使用section元素。
3、没有标题内容，不要使用section元素
<html lang="en">
<head>
<meta charset="UTF-8">
<title>section元素title>
head>
<body>
<section>
<h1>苹果h1>
<p>这是一个水果，很好吃p>
section>
<article>
<h1>苹果h1>
<p>这是一个苹果，很好吃p>
<section>
<h2>红富士h2>
<p>红富士的苹果真的好吃p>
<section>
<h2>国光h2>
<p>国光的水果也不错p>
section>
section>
article>
body>
html>
nav元素
nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的连接组放进元素即可
nav元素应用场景：
- 传统导航条
- 侧边栏导航
- 页内导航
- 翻页操作
PS：html5中不能使用menu元素代替nav元素
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nav元素title>
head>
<body>
<nav>
<ul>
<li><a href="#">主页a> li>
<li><a href="#">开发文档a> li>
ul>
nav>
<article>
<header>
<h1>HTML5u与CSS3h1>
<nav>
<ul>
<li><a href="#">HTML5历史a>li>
<li><a href="#">CSS3历史a> li>
ul>
nav>
header>
<section>
<h1>HTML5历史h1>
<p>内容p>
section>
<section>
<h1>CSS3历史h1>
<p>内容p>
section>
<footer>
<a href="#">删除a>
<a href="#">修改a>
footer>
article>
<footer>
<p><small>版权声明：small>p>
footer>
body>
html>
aside元素
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容部分。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>aside元素title>
head>
<body>
<header>
<h1>js入门h1>
header>
<article>
<h1>语法h1>
<p>文章正文p>
<aside>
<h1>名词解释h1>
<p>语法：这对于语言来说很重要p>
aside>
article>
<aside>
<nav>
<h2>评论h2>
<ul>
<li><a href="#">2021-1-23a> li>
<li><a href="#">认真学一学a> li>
ul>
nav>
aside>
body>
html>
time元素和pubdate属性
time元素代表24小时制或者是某一个日期
<html lang="en">
<head>
<meta charset="UTF-8">
<title>time元素title>
head>
<body>
<time datetime="2021-1-23">2021-1-23time>
<time datetime="2021-1-23T20:00">2021-1-23time>
<time datetime="2021-1-23T20:00Z">2021-1-23time>
<time datetime="2021-1-23T20:00+09:00">2021-1-23time>
body>
html>
pubdata属性是一个可选的bool类型，可以用在article元素中time元素上，代表文章的发表日期之类。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pubtate属性title>
head>
<body>
<article>
<header>
<h1>橙子h1>
<p>发布日期
<time datetime="2021-1-23" pubdate>2021-1-23time> p>
<p>舞会时间
<time datetime="2021-1-23">time>p>
article>
body>
html>
新增的非主体结构元素
header元素
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或者页面内一个内容区块的标题，但是也可以包含其他内容。例如数据表格，搜索表单或者相关的logo图片。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>header元素title>
head>
<body>
<header>
<h1>IT技术h1>
<a href="http://www.baidu.com">百度一下a>
<nav>
<ul>
<li><a href="#">学习a>li>
<li><a href="#">笔记a>li>
ul>
nav>
header>
body>
html>
address元素
address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等等。address应该不只是用来呈现电子信息或者真实地址，还可以用来展示文档相关的联系人的所有联系信息。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>address元素title>
head>
<body>
<address>
<a href="#">Marya>
<a href="#">Boba>
address>
<footer>
<div>
<address>
<a href="#">Marya>
IT技术
address>
<time datetime="2021-1-23">2021-1-23time>
div>
footer>
body>
html>
footer元素和hgroup元素
footer元素可以作为其上一层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读连接及版权信息等。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>footer元素title>
head>
<body>
<footer>
<ul>
<li><a href="#">版权信息a> li>
<li><a href="#">联系方式a> li>
ul>
footer>
<article>
<footer>
这是一个底部
footer>
article>
<section>
<footer>
这是底部
footer>
section>
body>
html>
hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hgroup元素title>
head>
<body>
<article>
<header>
<hgroup>
<h1>这是文章标题h1>
<h2>这是一个子标题h2>
hgroup>
<p><time datetime="2021--1-23">2021-1-23time> p>
header>
<div>
这是内容
div>
<footer>
这是底部
footer>
article>
body>
html>
网页编排规则
- 显示编排内容区域块
- 隐示编排内容区域块
- 标题分级
- 不同区域块使用相同级别的标题
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页编排title>
head>
<body>
<header>
<h1>网页标题h1>
<nav>
<ul>
<li><a href="#">首页a>li>
<li><a href="#">帮助a>li>
ul>
nav>
header>
<article>
<hgroup>
<h1>文章主标题h1>
<h2>文章子标题h2>
hgroup>
<p>文章正文p>
<section>
<div>
<article>
<h1>评论标题h1>
<p>评论正文p>
article>
div>
section>
article>
<footer>
<small>版权所有small>
footer>
body>
html>
表单新增元素与属性
form属性和formation属性
在html4中，表单内的从属元素必须书写在表单内部，而html5中，可以把他们书写在页面上任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属指定表单了。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formtitle>
head>
<body>
<form id="testform">
<input type="text">
form>
<textarea form="testform">textarea>
body>
html>
在html4中，一个表单内的所有元素只能通过表单的action属性被统一提交到一个页面，而html5中可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮可以将表单提交到不同页面
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formactiontitle>
head>
<body>
<form id="testform">
<input type="submit" name="s1" value="v1" formaction="http://localhost:8080/helljsp01/test01.jsp">这是第一个页面
<input type="submit" name="s2" value="v2" formaction="http://localhost:8080/helljsp01/test02.jsp">这是第二个页面
form>
<textarea form="testform">textarea>
body>
html>
formmethod和formenctype属性
在html4中，一个表单内只能有一个action属性来对表单内所有元素统一指定提交页面，所以每一个表单内页只有一个method属性来统一指定提交方法。在html5中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formmethod属性title>
head>
<body>
<form id="testform">
<input type="submit" name="s1" value="v1" formmethod="post" formaction="http://localhost:8080/helljsp01/test01.jsp">提交
<input type="submit" name="s2" value="v2" formmethod="get" formaction="http://localhost:8080/helljsp01/test02.jsp">提交
form>
body>
html>
关于post和get的区别后面会讲
在html4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前应该如何对表单内的元素进行编码。在html5中，可以使用formenctype属性对表单元素分别指定不同的编码方式。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formentype属性title>
head>
<body>
<form>
<input type="text" formenctype="text/plain">
<input type="text" formenctype="multipart/form-data">
<input type="text" formenctype="application/x-www-form-urlencoded">
form>
body>
html>
formtarget属性和autofocus属性
在html4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。在html5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所加载的页面。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formtargettitle>
head>
<body>
<form>
<input type="submit" name="s1" value="v1" formtarget="_blank" formaction="http://localhost:8080/helljsp01/test01.jsp">这是第一个页面(在新的页面中打开）
<input type="submit" name="s2" value="v2" formtarget="_parent" formaction="http://localhost:8080/helljsp01/test02.jsp">这是第二个页面（在当前页面打开）
form>
body>
html>
为文本框、选择框或按钮控件加上autofocu属性，当画面打开时，该控件自动获得光标焦点
<html lang="en">
<head>
<meta charset="UTF-8">
<title>outofocus属性title>
head>
<body>
<form>
<input type="text">
<input type="text" autofocus>
form>
body>
html>
required是属性和labels属性
html5中新增的required属性可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>required属性title>
head>
<body>
<form action="http://localhost:8080/helljsp01/test01.jsp">
<input type="text" required="required">
<button type="submit">提交button>
form>
body>
html>
在html5中，为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个Nodelist对象，代表该元素所绑定的标签元素所构成的集合。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>labels属性title>
head>
<body>
<script>
function Validtate(){
var txtName=document.getElementById("txt_name");
var button=document.getElementById("btnValidate");
var form=document.getElementById("testform");
if (txtName.value.trim()==""){
var label=document.createElement("label");
label.setAttribute("for","txt_name");
form.insertBefore(label,button);
txtName.labels[1].innerHTML="请输入姓名";
txtName.labels[1].setAttribute("style","font-size:19px;color:red");
}
}
script>
<form id="testform">
<label id="label" for="txt_name">姓名:label>
<input id="txt_name">
<input type="button" id="btnValidate" value="验证" onclick="Validtate()">
form>
body>
html>
效果：
control属性和placeholder属性
在html5中，可以在标签你内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>controltitle>
head>
<body>
<script>
function setValue() {
var label=document.getElementById("label");
var textbox=label.control;
textbox.value="010010";
}
script>
<form>
<label id="label">
邮编：
<input id="txt_zip " maxlength="6">
<small>请输入六位数字small>
label>
<input type="button" value="设置默认值" onclick="setValue()">
form>
body>
html>
效果：
placeholder只指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示字。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<input type="text" placeholder="请输入用户名">
body>
html>
list属性和autoComplete属性
在html5中，为单行文本框添加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是html5中新增的元素，该元素累死选择框，但是当用户想要设定的值不在选择列表内，允许自动输入。datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datalisttitle>
head>
<body>
<form>
<input type="text" name="greeting" list="greetings">
<datalist id="greetings" style="display: none">
<option value="HTML5学习">HTML5学习option>
<option value="C语言学习">C语言学习option>
datalist>
form>
body>
html>
效果：
autocomplet属性帮助输入所用的自动完成功能，是一个既节省输入时间又十分方便的功能。在HTML5之前，因为谁都可以看见输入的值，所以在安全方面存在缺陷，只要使用autocomplete属性，安全性方面也可以得到很好的控制。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>autocompletetitle>
head>
<body>
<input type="text" name="greeting" autocomplete="" list="greetings">
body>
html>
pattern属性和selectiondirection属性
在html5中，对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会针对这些进行检查，检查其内容是都符合给定格式。在输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示提示文字，提示输入的内容必须符合给定格式。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pattern属性title>
head>
<body>
<form action="http://localhost:8080/helljsp01/test01.jsp">
请输入内容：
<input pattern="[A-Z]{3}" name="part">
<input type="submit" >
form>
body>
html>
效果：
输入格式正确会跳转到指定页面
SelectionDirection属性这对input元素与textarea元素，html5增加了SelectionDirection属性。当用户在这两个元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，改属性为“forward”，当用户反向选取文字时，该属性为“backward”。当用户没有选取任何文字时，该属性值为“forward”
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SelectionDirection属性title>
head>
<body>
<script>
function AD() {
var control=document.forms[0]['text'];
var Direction=control.selectionDirection;
alert(Direction);
}
script>
<form>
<input type="test" name="text">
<input type="button" value="点击我" onclick="AD()">
form>
body>
html>
indeterminate属性和image提交按钮的height属性与width属性
复选框的indeterminate属性，对于复选框CheckBox元素来说，过去只是选取与非选取这两种状态。在html5中，可以使用JavaScript脚本代码中对该元素使用跟indeterminate属性，以说明复选框处于“尚未明确是否选取”状态。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>indeterminate属性title>
head>
<body>
<input type="checkbox" indeterminate id="cb">属性测试
<script>
var cb=document.getElementById("cb");
cb.indeterminate=true;
script>
body>
html>
效果：
针对类型为image的input元素，在html5新增了两个属性，height和width分别用来指定图片按钮的高度与宽度。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iammgetitle>
head>
<body>
<form action="test.jap" method="post">
姓名：<input type="text" name="name">
<input type="image" src="t016362ac5edaa42581.jpg" alt="编辑" width="20" height="20">
form>
body>
html>