从以下几方面了解HTML5:
1.HTML5的优势:
- 跨平台
HTML5可以运行在PC端、IOS或Android移动设备端
- 兼容性
Web兼容性比较棘手,尤其是IE6,几乎要为每一个浏览器做兼容处理。但是HTML5的出现趋于成熟,只要浏览器支持HTML5就可以实现所预定效果,不必再为各种浏览器做判断兼容处理。
- 各大浏览器厂商的支持
大部分现代的浏览器都支持了HTML5,且已经应用到网站制作、游戏开发、移动应用开发等多个领域。
2.HTML5的新增结构元素:
元素 | 说明 |
---|---|
header | 定义了文档的头部区域 |
nav | 定义导航链接的部分 |
section | 定义文档中的节(section、区段) |
article | 定义页面独立的内容区域 |
aside | 定义页面的侧边栏内容 |
footer | 定义section或document的页脚 |
注:新增元素需要IE9以上或最新Chrome等浏览器支持。
下面介绍这些新增结构元素的使用:
1.header元素:
HTML5出现以前,body间可以如下书写:
<div id="header">网页头部</div>
或
<div class="header">网页头部</div>
HTML5出现以后,body双标签之间可以如下书写:
<header>网页头部</header>
这样书写就简化了代码,并且提高了可读性。
2.nav元素:
nav元素代表页面的一部分,是一个可以作为页面导航的链接组,可以转到当前页面其他部分或其他页面。
语法:
<nav>
<ul>
<li>博客首页</li>
<li>心情日志</li>
<li>我的邮箱</li>
</ul>
</nav>
3.section元素:
section不只是一个普通的容器元素,主要用于表示一段专题性的内容,通常用于带有标题和内容的区域,如文章的章节、对话框中的标签页等。
section元素用于主体部分,语法:
<section>
<h1>新浪微博</h1>
<p>新浪微博APP发行于...</p>
</section>
4.article元素:
article元素是一个特殊的section元素,但无论从结构上还是内容上,article元素比section元素的独立性和完整性强。
此元素用于body主体部分,语法:
<article>
<h1>新浪微博</h1>
<p>新浪微博APP发行于...</p>
</article>
5.aside元素:
在网页制作中主要有以下两种使用方法:
(1)包含在article元素中作为主要内容的附属信息显示,如与当前文章有关的相关自来哦、名词解释等。
<article>
<h1>...</h1>
<p>...</p>
<aside>...<aside>
</article>
(2)在article元素之外使用,作为页面或站点全局的附属信息,最典型的应用是侧边栏。
<aside>
<h2>..</h2>
<ul>
<li>...</li>
<li>...</li>
</ul>
</aside>
6.footer元素:
此元素一般用在页面或区域底部,通常包含文档的作者、版权信息、使用条款链接等。
语法:
<footer class="yanshi">
脚注信息
</footer>
2.HTML5的新增网页元素:
元素 | 说明 |
---|---|
video | 定义视频,如电影片段或其他视频流 |
audio | 定义音频,如音乐或其他音频流 |
canvas | 定义图形 |
datalist | 定义可选数据的列表 |
time | 定义日期或时间 |
mark | 在视觉上向用户呈现那些需要突出的文字 |
progress | 运行中的进度(进程) |
注:这几个元素主要完成Web页面具体内容的引用和表述,是丰富内容展示的基础。
下面介绍这些新增网页元素的使用:
1.datalist元素:
此元素用于为文本框提供一个可选数据的列表,用户可以直接选择预先设定好的某一项,也可以输入自己需要而列表中并不存在的内容,从而减少输入的麻烦。
datalist元素是由一个或多个option元素组成的,并且每个option都应被设置value属性。
此元素用于body主体部分,语法:
<input type="text" list="list1"/>
<datalist id="list1">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="橘子">橘子</option>
</datdalist>
运行结果图:
2.time元素:
此元素使用不使用没有什么区别,只是使用后容易被搜索引擎搜索到。
语法:
<p>我们在每天早上<time>9:00</time>开始营业!</p>
<p>我在<time datetime="2020-02-14">情人节</time>有个约会。</p>
3.mark元素
当文字处于mark元素之内时,页面上显示的文字会有背景,用于突出重点。
语法:
<mark>天气渐渐变暖了</mark>
4.progress元素:
此元素在页面上显示为一个进度条,value属性表示已完成进度,max属性表示总进度。
语法:
<progress value="20" max="100"></progress>
2.HTML5的新增全局属性:
属性 | 说明 |
---|---|
contentEditable | 是否允许用户编辑内容 |
designMode | 整个页面是否可编辑 |
hidden | 是否对元素进行隐藏 |
spellcheck | 是否必须对元素进行拼写或语法检查 |
tabindex | 规定元素的Tab键移动顺序 |
下面介绍这些新增网页元素的使用:
1.contentEditable元素:
contentEditable属性可以设置两个值,即true或false决定是否可被编辑,若未指定true或false,该元素的编辑状态将由父元素来决定。
在编辑完元素后,若想要保存,则只能把元素的innerHTML属性发送到服务器端进行保存。用法如下:
<ul contentEditable="true">
<li>列表</li>
</ul>
2.designMode元素
designMode属性可以设置两个值,即on或off决定页面是否可被编辑,若可编辑,即页面内任何支持designMode属性的元素都变成了可编辑状态。使用JavaScript指定designMode属性的用法如下所示:
<script>
document.designMode=on;
</script>
3.hidden元素
HTML5中所有的元素都允许使用hidden属性,该属性是bool类型,设为true为不可见,设为false为可见。
4.spellcheck元素
该属性是HTML5中针对单行文本框和多行文本框设置的,是bool类型,设为true进行语法检查,否则不检查,但如果元素的readOnly属性和disabled属性生效的话,spellcheck属性将失效。
4.tabindex元素
是网页开发中的一个基本概念,当不断按tab键让窗口或页面中的控件获取焦点,对窗口或页面中的所有控件进行遍历的时候,每一个控件的tabindex属性表示该控件是第几个被访问到的。