HTML5-语法 - Powered by Discuz! Archiver

马喽發表於 2019-5-19 11:16:00

HTML5--语法

一、标记方法
1、内容类型（ContentType）还是.text/html
2、声明：<!DOCTYPE html SYSTEM “about:legacy-compat”>
3、字符编码：<meta charset="UTF-8"  >
二、语法三要点：
1、可以省略标签的元素：
（1）不允许写技术标记的元素，即只能写成<元素/>形式：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。
（2）可以省略结束标签的元素：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
（3）可以省略整个标签的元素：html、head、body、colgroup、tbody。
2、允许省略boolean值的属性
<table style="height: 288px; width: 571px" border="0" align="left">
<tbody>
<tr>
<td>html5属性</td>
<td style="text-align: center">语法描述</td>
</tr>
<tr>
<td>checked   </td>
<td> checked="checked"        checked=""            checked</td>
</tr>
<tr>
<td>readonly</td>
<td> readonly="readonly"       readonly=""           readonly</td>
</tr>
<tr>
<td>disabled  </td>
<td> disabled="disabled"        disabled=""            disabled</td>
</tr>
<tr>
<td>selected  </td>
<td>  selected="selected"        selected=""            selected</td>
</tr>
<tr>
<td>defer </td>
<td> defer="defer"                 defer=""                 defer</td>
</tr>
<tr>
<td>ismap    </td>
<td> ismap="ismap"                ismap=""               ismap</td>
</tr>
<tr>
<td>nohref  </td>
<td>nohref="nohref"               nohref=""              nohref</td>
</tr>
<tr>
<td>noshade </td>
<td>noshade="noshade"         noshade=""            noshade</td>
</tr>
<tr>
<td>nowrap</td>
<td> nowrap="nowrap"           nowrap=""              nowrap</td>
</tr>
<tr>
<td>multiple</td>
<td>multiple="multiple"           multiple=""            multiple</td>
</tr>
<tr>
<td>noresize</td>
<td> noresize="noresize"         noresize=""            noresize</td>
</tr>
</tbody>
</table>
 
 
 
 
 
 
 
 
                               
                 
举例说明：
如果省略了属性本身，则表达为false；若省略的是属性值，则表达为true。                
以下属性值全为true：
<input type="checkbox" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" checked="">
3、省略属性的引用符
可以用双引号或者单引号引用属性的值，只要属性值中不包括空格、<、>、'、"、‘、=等字符，都可以省略引用符。
举例说明：
<input type="text">                            <input type='text'>                             <input type=text>                               
三、新增元素
1、结构元素 
<section></section>定义文档或应用程序中的一个区段，如章节、页眉、页脚或文档的其他部分
一个section元素通常由内容和标题组成。
当一个容器要被直接定义样式或通过脚本定义行为时，推荐用div，不是section。
<article></article>表示文档中独立的一块内容，如博客、教程、故事、视频及脚本。
一个article元素通常有它自己的标题header，有时还有自己的脚注。
article元素可以嵌套使用。
article元素也可以用来表示插件，作用是使插件看起来像内嵌在页面中。如下所示：
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190602225022805-1599626760.png">
<header></header>有引导和导航的作用。放置页面中一个内容区块或整个页面的标题，也可以包含内容，如搜索表单或logo。
一个页面可以有多个header元素。
在html5中，一个header元素通常包括至少一个heading元素，即h1~h6元素，也可以包括hgroup、table、from、nav元素。
hgroup元素：将标题与子标题分组的元素。
hgroup元素通常将h1~h6元素进行分组；若只有一个主标题，则不需要写hgroup元素。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190602231306134-244071663.png">           
<nav></nav>导航部分，主要放主要的、基本的链接。
一个页面可以有多个nav元素，该元素可以用于以下场合：
传统导航条（将当前页面跳转到网站的其他页面上），侧边栏导航（将当前页面或文章跳转到其他页面或文章中）、页内导航（在本页面的几个组成部分之间跳转）、翻页操作（在多个页面的上下页或博客网站的上下篇文章滚动）。
在html5中不能用menu来代替nav元素，因为menu元素是用在一系列发出命令的菜单上的，是一种交互性的元素，更准确的说是用在web应用程序中的。
<footer></footer>页面的脚注部分，一般包含作者姓名、创作日期、版权信息等。
一个页面可以包含多个footer元素，可以为article和section元素添加footer元素。
<address></address>用于当前article或文档的作者的详细联系方式。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190602233540915-1778811020.png">                       <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190602233600705-120967712.png">
2、块级元素
<aside></aside>放置位于article元素外的相关内容，可以用于摘录引用或边栏的排版效果，用于广告或导航元素。。
aside元素主要有以下两种用法：
（1）被包含在article元素中作为主要内容的附属信息部分，可以是与当前文章相关的信息等。
（2）在article外使用，作为页面或站点全局的附属信息部分，比如侧边栏。
<figure></figure>一般表示文档主体流内容中的一个独立单元，使用<figcaption>为figure添加标题。     <figure><figcaption>...</figcaption></figure>
<dialog></dialog>定义对话。如：
<img src="https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531165006922-1066802596.png">             <img src="https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531170217345-800354055.png">                对话中的每个句子都必须属于<dt> 标签定义的部分。
figure元素：块级图像元素。具有独立性。可以放图片，还可以给audio、video、iframe、embed元素添加说明。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603193801695-297181294.png">                                     <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603193825179-2008555547.png">
figcaption元素：表示figure的标题，一个figure元素内只能放一个该元素。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603194124952-1558626516.png">                                   <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603194138328-1644556513.png">
3、行内元素
用于在视觉上向用户呈现需要突显的文字，比如搜索关键词。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190604001359115-336575641.png">                          <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190604001412630-491844559.png">
mark、em、strong的区别：mark的目的是吸引用户的注意力，提供参考。em是作者为突出文章重点使用的。strong是原文作者用来强调一段文字的重要性的，譬如警告信息、错误信息等。
<time></time>表示日期或时间
<meter></meter>表示度量衡，仅用于已知最大值和最小值的度量。必须定义度量的范围，可以在元素文本或max/min属性中定义
<progress></progress>表示一个任务的完成进度
progress有两个属性值：value表示已经完成的工作量；max表示总共的工作量。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190604002629316-1864926729.png">                            <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190604002646171-1285605971.png">
 <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190605181545109-1705181954.png">   <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190605181659773-332834931.png"> <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190605181844239-10862695.png">
4、多媒体元素         video（视频）                        audio（音频）
5、交互性元素
<details></details> 表示详细信息，提供一个展开/收缩区域。可与summary（提供标题或图例）配合使用。用户单击标题时，会显示details。
（1）没有sunmary情况：                                              （2）有sunmary情况：
<img src="https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531172604513-1872636449.png">                                                                   <img src="https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531172948074-852353353.png">
  结果：                                                                                           结果：
<img src="https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531172628259-1308328514.png"> <img src="https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531172639736-1578029819.png">                                             <img src="https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531173219402-1364845120.png">       <img src="https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531173249980-2003889412.png">
该元素并没有严格地限制于纯文本标记，它可以是一个登录表单、一段说明性的视频、以图形为源数据的一个表格，或者提供给使用辅助性技术的用户的一个表格式的结构说明。
details元素可以可选择地接受open属性，来确保页面载入的时候该元素是可以打开的。
<details open>
 <datagrid></datagrid>表示可选数据的列表，通常用于显示树列表
<menu></menu>表示菜单列表，通常用于列出表单控件
<img src="https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531215657642-1369653103.png">                                         <img src="https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531215637293-74371199.png">
command元素：表示命令按钮，如单选按钮，复选框或按钮
      <img src="https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531214910151-543597069.png">                       <img src="https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531214837323-36229797.png">
fieldset元素：将表单内的相关元素分组。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603143729685-389345757.png">                                  <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603143751810-227983008.png">
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603150932902-2058614041.png">                          <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603150950138-1665447182.png">
output元素：显示一些计算的结果或脚本等其他结果。必须从属于表单。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603163220776-494926920.png">                                                  <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603163244778-1602935533.png">
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603162226353-480209077.png">                  <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603162246827-9874605.png">
6、新增的input元素类型
email类型：用于包含e-mail地址的输入域
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603011825839-1491325452.png">
email类型的文本框具有multiple属性，表示允许输入多个email地址，且用逗号隔开。
url类型：用于包含url地址的输入域
 <input type="url" value="http://www.qq.com" />
number类型：用于包含数值的输入域
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603102828845-1877461888.png">                       <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603103020986-967341825.png">
range类型：用于包含一定范围内数字值的输入域
具有max和min属性，默认最小为0，最大为100。在Opera浏览器中，以滑动条方式进行值的指定；在Opera10中是输入文本的方式。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603104114606-2027998322.png">      <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603104130003-1506102388.png">
date pickers：数据检出器
search类型：用于搜索域，如站点搜索或google搜索。默认是圆角矩形文本框，firefox显示的依然是常规矩形。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603151648917-1836223834.png">                       <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603151707855-89873783.png">
tel类型：用于input元素中输入电话号码，没有特殊校验规则，在实际开发中可以通过pattern属性指定输入电话格式进行验证。
 <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603160009588-2041728018.png">                                               <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603155950747-1267523399.png">
color类型：提供颜色选择器，默认为黑色。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603155758118-383194107.png">                               <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603155845928-109710775.png">
日期和时间的输入类型：
date-----------日、月、年    该类型的input元素以日历的形式方便用户输入
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603094732765-363135168.png"> 
  <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603094800258-986503309.png"> 
month---------------月
 <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603101530347-993048433.png">
week类型的input元素用来输入周号的文本框。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603102400207-1294151101.png">
time--------------时间（小时和分钟）
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603095107278-1120089213.png">                              <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603095146370-1801709815.png">
 datetime------------日、月、年（UTC时间）    用来输入UTC日期和时间的文本框，且提交时对输入内容有效性检查。
time元素的机器可读部分是在datetime属性中的，格式有以下类型：
<time datetime="2011-10-12">2011年10月12日</time>
<time datetime="2011-10-12">10月12日</time>
<time datetime="2011-10-12T20:00">晚上8点</time>   日期与时间用T文字分开
<time datetime="2011-10-12T20:00Z">晚上8点</time>     Z表示给机器编码时使用UTC标准时间
<time datetime="2011-10-12T20:00+09:00">美国晚上8点</time>          加上了时差，表示向机器编码另一地区时间；若编码本地时间，则不需要加时差
 datetime-local------------日、月、年（本地时间）      用来输入本地日期和时间的文本框，且提交时对输入内容有效性检查。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603095931946-416418796.png">
pubdate属性：布尔属性，表明哪个time元素代表了发布日期
如：<time datetime=2011-10-11 pubdate>2011年10月11日</time>
7、新增的属性
与表单相关的属性：
autocomplete：是否保存输入值以备使用。保护敏感用户数据，避免本地浏览器对它们进行不安全的存储。
有三个值："on":显示指定候补输入值的数据列表。使用datalist元素和list属性提供候补输入值的数据列表，自动完成时，将该datalist元素中的数据作为候补输入数据在文本框                             中显示。
                   "off":不指定。
                    " ":使用浏览器默认值。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603002622262-2064511591.png">                  <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603002712191-169315510.png">
适用于<form>标签，以及以下类型的<input>标签：text、search、url、telephone、email、password、date pickers、range、color。
autofocus：适用于所有<input>标签的类型，规定在页面加载时，域自动地获得焦点。
 <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603002951047-1954947941.png">                           <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603003013064-1670400601.png">
一个页面只能有一个控件具有该属性。
list属性：该属性的值是datalist元素的id，datalist元素类似于select选择框，但是期望值不在选择列表内时，允许自己输入。
适用于以下类型的<input>标签：text、search、url、telephone、email、date pickers、number、range、color。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603004032952-818497231.png">                                                                                                <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603004058117-2110232565.png">
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603165550490-685127926.png">                                <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603165643831-1915396801.png">
form override attributes：表单重写，允许用户重写form元素的某些属性设定，适用于以下类型的<input>标签：submit、image。
formaction-----重写action属性                  formenctype-----重写enctype属性                 formmethod-----重写method属性         
formnovalidate-----重写novalidate属性                                                                          formtarget-----重写target属性
height、width属性：  <input type="image" src="images/1.jpg" width="200" height="200"/>
min、max属性：规定输入值的范围。默认的min为0，max为100
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603004852538-207976934.png">                         <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603004915000-1751827312.png">                
step属性：为输入域规定合法的数字间隔（若step=“3”，则合法数是-3、0、3、6等）
<img src="https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531230307550-1132426134.png">    <img src="https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531230328424-935513350.png">  <img src="https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531230347464-1525241576.png"> <img src="https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531230401839-1936415263.png">
step属性的值取决于控件的类型，对于range控件，step默认为1。
为配合step属性，html5引用的stepUp和stepDown两个函数，分别根据属性的值来增加或减少控件的值。
multiple属性：规定输入域中可选择多个值，适用于以下类型的<input>类型：email、file
novalidate属性：规定在提交表单时不应该验证form或input域，适用于<form>以及以下类型的input标签：text、search、url、telephone、email、password、date pickers、range、color。
pattern属性：用于验证input域的模式，模式是正则表达式。适用于以下类型的input标签：text、search、url、telephone、email、password。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190601001055095-849413741.png">                               <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190601001242817-351382869.png">       <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190601001311419-334326157.png">
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603170737094-37737252.png">                        <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603170810851-1248427774.png">        
placeholder属性：提供一种提示（hint），描述输入域的期待值。适用于以下类型的input标签：text、search、url、telephone、email、password。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190601000222979-1465521396.png">              <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190601000237614-347410151.png">
 required属性：必须填写的项。
  <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603010552419-1253063614.png">                             <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603010528887-1657146805.png">
 该属性是最简单的一种表单验证方式。
适用于以下类型的input标签：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file。        
 与链接相关的属性：
 media属性：为a与area元素增加了media属性，该属性规定目标URL是为什么类型的媒介/设备进行优化的。只能在href属性存在时使用。
 hreflang、rel属性：为area元素增加了hreflang、rel属性，以保持与a、link元素的一致。
sizes属性：为link元素增加了新属性sizes。该属性可以与icon元素结合使用，以指定关联图标（icon元素）的大小。
target属性：为base元素增加了target属性，主要目的是保持与a元素的一致性，同时target元素由于在web应用程序中，尤其是在与iframe结合使用时，是非常有用的。
其他新增属性：
reversed属性：为ol元素增加reversed属性，它指定列表倒序显示。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190601010749199-1375275047.png">         <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190601010816705-1899142879.png">
charset属性：为meta元素增加charset属性。
type、label属性：为menu元素增加的属性。label属性为菜单定义了一个可见的标注，type属性让菜单可以以上下文菜单、工具条或列表菜单三种形式出现。
scoped属性：为style元素添加的属性，用来规定样式的作用范围，为script元素增加async属性，它定义脚本是否异步执行。
manifest属性：为html元素增加的属性，开发离线web应用程序时与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息。为iframe元素增加sandbox、seamless、srcdoc三个属性，用来提高页面安全性，防止不信任的web页面执行某些操作。
全局属性：任何元素都适用的属性
contentEditable属性：允许用户编辑元素中的内容（该元素必须是可以获得鼠标焦点，且单击后向用户提供一个插入符号），它的值为布尔类型。
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190602172910920-1191561377.png">                   <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190602172925080-1315007233.png">                           <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190602173050507-2014758601.png">
ondblclick="contentEditable=true" ：表示双击后才可以编辑。
此外，该属性有个隐藏的inherir（继承）状态，若父元素可编辑，则子元素也是可编辑的。
iscontentEditable属性：为true是可编辑，为false是不可编辑。
 designMode属性：指定整个页面是否可以编辑，只能在js脚本里被编辑修改，该属性有两个值：off和on。       <body ondblclick="document.designMode='on';">
脚本指定该属性的方法：document.designMode="on"。
大部分浏览器支持designMode属性，而IE8不支持，但是IE9允许。
hidden属性：布尔值。不可见状态是true，可见状态是false。  hidden="true"相当于css中的display:non。
  <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190602210125026-1279505118.png">
<img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190602210221205-860905901.png">            <img src="https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190602210311387-1895232676.png">
spellcheck属性：布尔型，告诉浏览器检查元素的拼写和语法。可以不写该属性，但是一旦书写，必须有值。支持该属性的浏览器有Chrome、Opera和Safari，IE与Firefox暂未支持。若是元素的readOnly属性或disabled属性设为true，则不执行拼写检查。
tabindex属性：用户使用键盘导航一个页面时，控制页面上的元素获得焦点的顺序。   
  tabindex有三个值：0 ，-1，以及X（X里32767是界点，稍后说明）
  在IE中，tabindex范围在1到32767之间（包括32767）；在FF、 Chrome无限制，不过一旦超出32768，顺序跟tabindex=0时一样。这个估计跟各个浏览器对int型的解析有关
  原本在Html中，只有链接a和表单元素可以被键盘访问（即使是a也必须加上href属性才可以)，但是aria允许tabindex指定给任何html元素。
  当tabindex=0时，该元素可以用tab键获取焦点，且访问的顺序是按照元素在文档中的顺序来focus，即使采用了浮动改变了页面中显示的顺序，依然是按照html文档中的顺序来定位。
  当tabindex=-1时，该元素用tab键获取不到焦点，但是可以通过js获取，这样就便于我们通过js设置上下左右键的响应事件来focus，在widget内部可以用到。
  当tabindex>=1时，该元素可以用tab键获取焦点，而且优先级大于tabindex=0；不过在tabindex>=1时，数字越小，越先定位到。   
        
  
来源：https://www.cnblogs.com/heisetianshi/p/10888540.html

頁: [1]

琼殿技术论坛's Archiver

HTML5--语法