-
全局属性： 1.可直接在标签里插入的： data-自定义属性名字； hidden（直接放上去就是隐藏 相当于HTML 4 的display）； spellcheck="true"（纠错）； tabindex="1"（Tab跳转顺序 按Tab键）； contenteditable="true"(可编辑状态，单击内容，可修改)； 2.在JavaScript里插入的 window.document.designMode = 'on'（JavaScript的全局属性，整个页面的文本都可以编辑了）；查看全部
-
data-yourvalue、hidden、Spenllecheck、tabindex、contenteditable、desginMode； 全局属性： 1.可直接在标签里插入的： data-自定义属性名字； hidden（直接放上去就是隐藏 相当于HTML 4 的display）； spellcheck="true"（textarea纠错）； tabindex="1"（按Tab键跳转顺序 ）； contenteditable="true"(可编辑状态，单击内容，可修改)； 2.在JavaScript里插入的 window.document.designMode = 'on'（JavaScript的全局属性，整个页面的文本都可以编辑了）； html：manifest="cache.manifest"（定义需要用到离线应用文件是哪一个）； meta：charset="utf-8"（规定字符及）；查看全部
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新标签特性</title>
<style>
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">话题</a></li>
<li><a href="#">活动</a></li>
<li><a href="#">社区</a></li>
</ul>
</nav>
</header>
<section>
<div>
<h2>或许是因为一个人而恋上了一座城，或许是因为一座城而恋上了一个人。</h2>
</div>
</section>
<section class="act">
<div class="up">
<div class="left-part"></div>
<div class="right-part"></div>
<div class="bulletin">
<h3>公告栏</h3>
<p>于千万人之中遇见你所要遇见的人，于千万年之中，时间的无涯的荒野里，没有早一步，也没有晚一步，刚巧赶上了，那也没有别的话可说，惟有轻轻地问一声：“噢，你也在这里吗？”</p>
</div>
</div>
</section>
<section>
<div>这里是幻灯片效果位置</div>
</section>
<section>
<p hidden> 正文内容</p>
<h3>社区文章</h3>
<article>
<article class="item">
<figure>
<img src="" alt="展示图片">
</figure>
<div class="header">
<h4>明天可能会下雨
<span><time datetime="2018-03-26" pubdate="2018-03-26">2018-03-26</time></span>
</h4>
</div>
<div class="body"></div>
<div class="footer"></div>
</article>
</article>
<aside>
</aside>
</section>
<footer>
<div>底部菜单
<ul>
<li><a href="#">你还不来，我怎敢老去。</a></li>
<li><a href="#">你还不来，我怎敢老去。</a></li>
<li><a href="#">你还不来，我怎敢老去。</a></li>
<li><a href="#">你还不来，我怎敢老去。</a></li>
</ul>
</div>
</footer>
</body>
</html>查看全部 -
新增标签： 结构标签（section、article、aside、header、hgroup、footer、nav、figure）; 表单标签(email、url、number、range、Date Pickers、search、color); 媒体标签(video、audio、embed); 其他功能标签(mark、progress、time、ruby、rt、wbr、canvas、command、details、datalist、keygen、output、source、menu) 删除标签：可以用css代替的标签、不再使用iframe、只有个别浏览器支持的标签、其他不常用的标签查看全部
-
3-1 HTML5新增及废除属性 新增属性： 表单属性、链接属性、其他属性； 删除属性： 可以用css删除的属性、多余属性、其他属性； 新增属性： html：manifest="cache.manifest"（定义页面需要应用文件是哪一个）； meta：charset="utf-8"（规定字符及）； link：size="16x16"（设置图标大小）； base：torget="_blank"（超链接打开方式）； script：defer和async（加载方式）： defer src=""（加载后不执行，页面加载完毕后，在执行）； async src=""（加载后马上执行，同时页面继续加载）； a：media=""（表示对设备进行优化，handhelp对“手持“设备进行支持，tv对”电视“设备进行支持）； a：hreflang="zh"（设置语言，这里设置语言是中文）； a：ref="external"（设置超链接的引用，这里超链接为外部链接）； ol:start="50"（起始值），reversed(倒叙)； menu：type="toolbar(工具条),contextmenu（上下栏菜单）,list（平常列表菜单）"； style：scoped (内嵌CSS)； iframe：samless(当有这个属性时，这个框架是没有边框和边距的)； iframe：srcdoc、sandbox（当srcdoc出现在sandbox前面时，会自动忽略sandbox）； sanbox：禁止提交表单、内嵌网页和外面的内容没有关联、禁止运行javascript脚本。 sandbox="allow-forms(允许提交表单)、allow-same-origin（允许是相同的原）、allow-script（允许在里面执行脚本）、allow-top-navigation（允许是外面的页面进行跳转）"； 2015年2月8号查看全部
-
增加标签： 1、结构标签 （1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分； （2）article：特殊独立区块，表示这篇页眉中的核心内容； （3）aside：标签内容之外与标签内容相关的辅助信息； （4）header：某个区块的头部信息/标题； （5）hgroup：头部信息/标题的补充内容； （6）footer：底部信息； （7）nav （8）figure：独立的单元，例如某个有图片与内容的新闻块。 2、表单标签 （1）email：必须输入邮件； （2）url：必须输入url地址； （3）number：必须输入数值； （4）range：必须输入一定范围内的数值； （5）Date Pickers：日期选择器； a.date：选取日、月、年 b.month：选取月、年 c.week：选取周和年 d.time：选取时间（小时和分钟） e.datetime：选取时间、日、月、年（UTC时间） f.datetime-local：选取时间、日、月、年（本地时间） （6）search：搜索常规的文本域； （7）color 3、媒体标签 （1）video：视频 （2）audio：音频 （3）embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。 4、其他功能标签 （1）mark：标注（像荧光笔做笔记） （2）progress：进度条；<progress max="最大进度条的值" value="当前进度条的值"> （3）time：数据标签，给搜索引擎使用；发布日期<time datetime="2014-12-25T09:00">9：00</time> 更新日期<time datetime="2015-01-23T04:00" pubdate>4:00</time> （4）ruby和rt：对某一个字进行注释；<ruby><rt>注释内容</rt><rp>浏览器不支持时如何显示</rp></ruby> （5）wbr：软换行，页面宽度到需要换行时换行； （6）canvas：使用JS代码做内容进行图像绘制； （7）command：按钮； （8）deteils ：展开菜单； （9）dateilst：文本域下拉提示； （10）keygen:加密；查看全部
-
HTML5新增的其他标签 1、mark 高亮文本 2、progress 进度条 3、time 时间 <time datetime="2013-10-20T09:00Z" pubdate>9:00</time> 4、ruby 文本解释 5、wbr 软换行，类似于br，当页面很窄时文本会自动换行，否则正常排版。 <p> " 如果想学习AJAX，那么你必须熟悉XML " <wbr></wbr> " Http Request 对象 " </p> 6、canvas 图形绘制 7、command 命令 8、details 伸缩栏，可展开内容 <details open> <summary>MacBook Pro Specification</summary> <ul> <li>...</li> <li>...</li> <li>...</li> </ul> </details> 9、datalist 输入框提示查看全部
-
HTML5新增表单控件标签 1、email 必须输入email 2、url 必须输入url地址 3、number 必须输入数值 4、range 必须输入一定范围内数值 5、Date Pickers （日期选择器） date 选取日、月、年 month 选取月、年 week 选取周和年 time 选取时间（小时和分钟） datetime 选取时间、日、月、年（UTC时间） datetime-local 选取时间、日、月、年（本地时间） 6、search 用于搜索域，域显示为常规的文本域。 7、color查看全部
-
section：独立内容区块； article：特殊独立区块，页眉核心内容； aside：标签内容之外与标签想关的内容； header：头部内容； figure：独立单元，例如某个有图片与内容的新闻块 hgroup：头部信息； footer：底部信息； nav：导航； number：必须输入的数值 range：必须输入的一定范围的数值 data pickers：日期选择器 a.data 选取日月年 b.month 选取月年 c.week 选取周和年 d.time 选取时间（小时，分钟） e.datetime 选取时间，日，年 f.datetime-local 选取时间 日月年（本地时间） search 搜索常规文本域 video 视频 audio 音频 embed 嵌入内容，MP3，flash等 mark 标注 progress 进度条<progress max="最大" value="当前进度条值"> time： 数据标签，给搜索引擎用， 如<time datetime="2012-2-1T09:00">9:00</time> <time datetime="2012-2-1T09:00" pubdate>9:00</time> ruby和rt 对一个字进行注释 <ruby> <rt> 注释内容 </rt> <rp> 浏览器不支持的时候显示内容</rp> <ruby> wbr 转换行 页面宽度到需要转行时转行 canvas 使用js代码做内容进行图像绘制 command 按钮 deteils 展开菜单 dateilst 文本域下拉提示 keygen 加密查看全部
-
其他新增标签（menu：有很多种类型,只是提供语义化的划分，真正实现还是需要我们自己来做）查看全部
-
新增属性：（表单属性、链接属性、其他属性） 1.<meta http-equiv="pragma" content="no-cache">禁止页面缓存。 2.manifest:定义离线应用所需的文件。<html manifest="cache.manifest"> 3.<meta charset="utf-8">指定页面的字符集 4.sizes：指定浏览器选项卡上显示的网页logo，使用方法如下： <link rel='icon' href='demo_icon.gif' type='image/gif' sizes='16*16'> 5.<base href="http://localhost/" target="_blank">超链接打开方式，在新窗口打开页面地址以http://localhost/ 开头 + 相对 地址 6.script：defer和async（加载方式） defer--当浏览器读到<script src..> 脚本文件下载后不执行，等页面加载完成后才执行（推迟执行） async--当浏览器读到<script src..> 脚本文件下载后立刻执行，但并不停止执行后续的代码（异步执行） 7、<a media="hreflang" href="#">对相应的设备进行优化，handheld（手持设备），tv(电视) <a href="http://www.mukewang.com/" hreflang="zh" ref="external">慕课网</a> a：hreflang="zh"（设置语言，这里设置语言是中文,表示网址使用的网址是中文） a：ref="external"（设置超链接的引用，表示网址使用的是外部的） 8、start 起始值 reversed 倒序 如：<ol start="50" reversed> <li>1</li> <li>2</li> <li>3</li> </ol> 9、<menu type="">type的三个类型contextmenu（上下文菜单），list（列表菜单），toolbar（工具栏）查看全部
-
全局属性：hidden隐藏值spellcheck无法纠错 tabindex根据设置数字跳转恩TAB键，contenteditable页面可编辑文字，引用js属性designMode打开后页面全部可编辑查看全部
-
2、表单标签 （1）email：必须输入邮件； （2）url：必须输入url地址； （3）number：必须输入数值； （4）range：必须输入一定范围内的数值； （5）Date Pickers：日期选择器； a.date：选取日、月、年 b.month：选取月、年 c.week：选取周和年 d.time：选取时间（小时和分钟） e.datetime：选取时间、日、月、年（UTC时间） f.datetime-local：选取时间、日、月、年（本地时间） （6）search：搜索常规的文本域； （7）color 3、媒体标签 （1）video：视频 （2）audio：音频 （3）embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。 4、其他功能标签 （1）mark：标注（像荧光笔做笔记） （2）progress：进度条；<progress max="最大进度条的值" value="当前进度条的值"> （3）time：数据标签，给搜索引擎使用；发布日期<time datetime="2014-12-25T09:00">9：00</time> 更新日期<time datetime="2015-01-23T04:00" pubdate>4:00</time> （4）ruby和rt：对某一个字进行注释；<ruby><rt>注释内容</rt><rp>浏览器不支持时如何显示</rp></ruby> （5）wbr：软换行，页面宽度到需要换行时换行； （6）canvas：使用JS代码做内容进行图像绘制； （7）command：按钮； （8）deteils ：展开菜单； （9）dateilst：文本域下拉提示； （10）keygen:加密；查看全部
-
二、新增与删除标签 新增标签： 1.结构标签(结构标签是新增标签中最重要的) 这些结构标签过去都是通过div实现的，为了给它进行语义化的划分，所以把div派生出下面这些不同的标签。 (1)section标签：表示页面中一个独立的内容区块，比如，章节、页眉、页脚或页面的其他部分。而且它里面可以有自己的大纲结构，就是从h1~h6，表示文档结构。 (2)article标签：特殊的独立区块，它表示这篇页面的核心内容就是一篇文章 (3)aside标签：article标签这篇文章的辅助内容 (4)header标签：一个页面中的头部信息 (5)hgroup标签：头部信息/标题的补充内容 (6)footer标签：页面底部的信息 (7)nav标签：导航 (8)figure标签：表示一块独立的内容，比如一块图片与文字的新闻块 2.表单标签 （1）email：必须输入邮件； （2）url：必须输入url地址； （3）number：必须输入数值； （4）range：必须输入一定范围内的数值； （5）Date Pickers：日期选择器； a.date：选取日、月、年 b.month：选取月、年 c.week：选取周和年 d.time：选取时间（小时和分钟） e.datetime：选取时间、日、月、年（UTC时间） f.datetime-local：选取时间、日、月、年（本地时间） （6）search：搜索常规的文本域； （7）color 3.媒体标签 (1)video标签：视频 比如，<video src=”movie.ogg” controls=”controls”>video标签</video> (2)audio标签：音频 比如，<audio src=”someaudio.wav”>audio标签</audio> (3)embed标签：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。查看全部
-
一、HTML5语法 沿用了HTML的语法(已往过去的语法，是SGML语法的一个子集)，更简洁，更人性化。 1.DOCTYPE及字符编码 ① DOCTYPE：<!doctype html> ② 字符编码：<meta charset="utf-8"> ③ 给文档指定语言：<html lang="zh-CN"> 2.大小写都可以 ① 目的是为了兼容更多的文档，在HTML5里不区分大小写 ■建议：写代码最好规范，最好小写 3.布尔值 ① <input type="checkbox" checked/> 在这里checked写上就表示true，如果不写就表示false。而不用像HTML4中要写成checked="checked"了。 4.省略引号 ① <input type="text" /> ② <input type='text'> ③ <input type=text> 上面三种写法都可以，当然如果属性值中出现空格，就必须写引号或双引号 ■建议：属性中，引号最好是双引号 5.可以进行省略的标签 (1) 不允许写结束符的标签：area , basebr , col, command , embed , hr , img , input , keygen , link , meta , param , source , track , wbr (2) 可以省略结束符的标签：li , dt , dd , p , rt , optgroup , colgroup , thread , tbody , tr , td , th (3) 可以完全省略的标签：html , head , body , colgroup , tbody 另外，title标签也不是必须要写的 ■建议：可以省略的标签，最好还是不要省略，这样才会更加规范查看全部
举报
0/150
提交
取消