详解HTML5常用的语义化标签_html5教程技巧

来源:脚本之家  责任编辑:小易  

HTML5+CSS3从入门到精通李东博 著推荐指数:★简介:本书通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+CSS3设计构建网站的必备知识,相对于专业指南、高级程序设计、开发指南同类图书,本书是一本适合快速入手的自学教程。响应式Web设计:HTML5和CSS3实战BenFrain(作者),王永强(译者)推荐指数:★简介:全书主要是带领读者做一个小网页来写的,其实响应式的东西讲得比较少,大半内容是介绍H5和css3的基础知识。如果同时想了解H5和css3和响应式设计入门,这本书不错。HTML5移动Web开发实战详解林珑(作者)推荐指数:★简介:本书由浅入深,全面、系统、详尽地介绍了HTML5相关技术和其在移动开发领域的应用。书中提供了大量的代码示例,读者可以通过这些例子理解知识点,也可以直接在开发实战中稍加修改应用这些代码。《HTML5移动Web开发实战详解》涉及面广,从基本原理到实战,再到项目工作流,几乎涉及一个合格的前端开发工程师需要具备的所有重要知识。疯狂HTML5/CSS3/JavaScript讲义李刚(作者)推荐指数:★简介:这是一本全面介绍HTML 5、CSS3和JavaScript前端开发技术的图书,系统地介绍了HTML 5常用的元素和属性、HTML5的表单元素和属性、HTML5的绘图支持、HTML5的多媒体支持、CSS 3的功能和用法、最前沿的变形与动画功能等。除此之外,《疯狂HTML 5/CSS3/JavaScript讲义》还系统地介绍了JavaScript编程知识,包括JavaScript基本语法、DOM编程,以及HTML5新增的本地存储、离线应用、JavaScript多线程、客户端通信支持、WebSocket编程等。HTML5触摸界面设计与开发伍兹(StephenWoods)(作者),覃介右谷岳(译者)推荐指数:★简介:《HTML5触摸界面设计与开发》专注于触摸界面的开发,内容的结构和优化网站的思路大概一致。上半部分涵盖了能使各类网站,特别是移动网站变快的基本概念。书的后半部分是专门讲触摸界面的,特别是尽可能地让它们更平稳和快速。本书适合具有一定经验的Web开发者阅读参考。HTML5与CSS3权威指南(上下册)(第3版)陆凌牛(作者)推荐指数:★简介:本书分为上下两册。上册全面系统地讲解了HTML5相关的技术,以HTML5对现有Web应用产生的变革开篇;下册全面系统地讲解了CSS3相关的技术,以CSS3的功能和模块结构开篇,顺序讲解了各种选择器及其使用、文字与字体的相关样式、盒相关样式、背景与边框相关样式、布局相关样式、变形处理、动画、颜色相关样式等内容。HTML5+CSS3+jQueryMobile轻松构造APP与移动网站陈婉凌 著推荐指数:★简介:全书以HTML与CSS为主,配合jQuery制作网页,并搭配jQueryMobile制作移动网页,通过具体的范例从基础到高级循序渐进地讲解。首先介绍了HTML5网页开发和CSS网页美化,还介绍了目前热门的移动设备网页技术,读者无须学习复杂的程序,就能够轻松创建移动设备的网页;最后通过两个移动设备网页制作实例让读者进行实战练习,以加深理解。理论部分介绍比较扎实,美中不足的是实战案例相对较少。HTML5程序设计(第2版)柳伯斯(Peter Lubbers)阿伯斯(BrianAlbers)萨利姆(Frank Salim)(作者),柳靖 李杰(译者)推荐指数:★简介:《HTML5程序设计(第2版)》首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化,同时揭示了HTML5背后的设计原理。本书在上一版的基础上新增了SVG和拖放API相关内容,并对部分内容进行了更新。从第2章起,分别围绕构建令人神往的富Web应用,逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、WebWorkers、Storage等API的使用,辅以直观明了的客户端和服务器端示例代码,让开发人员能够迅速理解和掌握新一代Web标准所涵盖的核心技术。本书面向有一定经验的Web应用开发人员,对HTML5及未来Web应用技术发展有浓厚兴趣的读者也可以学习参考。JavaScript语言精粹(修订版)道格拉斯·克罗克福德(Douglas Crockford)(作者);赵泽欣 等(译者)推荐指数:★简介:JS是门混乱的语言,这本书能够帮助你区分哪些是语言的精华,哪些是糟粕。作者从语法、对象、函数、继承、数组、正则表达式、方法、样式和优美的特性这9个方面来呈现这门语言真正的精华部分,通过它们完全可以构建出优雅高效的代码。作者还通过附录列出了这门语言的毒瘤和糟粕部分,且告诉你如何避免它们。最后还介绍了JSLint,通过它的检验,能有效地保障我们的代码品质。HTML5App商业开发实战教程—基于WeX5可视化开发平台马科(主编)推荐指数:★简介:这是目前唯一一本真正的HTML5App开发教材,目前已在复旦、北大、西安交大、北京理工等五十多所高校投入教学使用。它的特点是由浅入深、由易到难,将开发技巧、和开发工具结合在一起阐述,同时选取了多个商业项目APP的实战案例进行要点讲解,通俗易懂www.zgxue.com防采集请勿采集本网。

快速查询

【栗子】H5新增了和标签,这使得网页不再必须要flash制作播放器了,并且HTML5在不同区域的标签进行了添加,例如和,分管文章部分和header部分。资料扩展: HTML5的设计目的是为了在移动设备上支持多媒体。

article | aside | nav | section | header | footer

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas. CSS3: CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D

架构预览

2、aside为语义化标签,通常用来描述与文档主体内容不相关的内容。比如,博客文章用atricle标签,而博客旁边的文章信息栏(作者头像、博文分类、作者等级等于博客正文内容无关的)用aside。百度知道是问答

nav 定义导航链接的部分

一阶段:html标签、html5新增标签、css样式、css3样式、媒体查询等;二阶段:Java、jQuery、ajax、面向对象、http传输协议等;三阶段:canvas、js高级应用、JS-SDK、H5新增技术;四阶段:node.js、vue.js

在页脚显示一个站点的导航链接,如首页、服务信息页面、版权信息页面等

227 12.1.4 标签实例 228 12.2 新增的元素和废除的元素 228 12.2.1 新增的结构元素 228 12.2.2 新增的块级的语义元素 230 12.2.3 新增的行内的语义元素 231 12.2.4 新增的嵌入多媒体元素与交互性元素 231

<nav> <ul> <li><a href=”#”>Home</a></li> <li><a href=”#”>CSS</a></li> <li><a href=”#”>Html5</a></li> </ul></nav>

article 定义文章

装载显示一个独立的文章内容,论坛帖子、新闻、博客文章、用户评论等,artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。

<article> <h1>标题</h1> <p> 内容</p> <article>用户评论</article> <article>回复评论</article></article>

section 定义文档中的节

章节、页眉、页脚或文档中的其他部分,

<section> <h1>标题1</h1> <p>内容1</p></section><section> <h1>标题2</h1> <p>内容2</p></section>

aside 定义文章的侧栏

广告,成组的内容,友情链接,侧边栏等

<aside> <h1> 侧栏标题1</h1> <p>这是侧栏内容1</p></aside><aside> <h1> 侧栏标题2</h1> <p>这是侧栏内容3</p></aside>

header 定义文档的页眉

通常是一些引导和导航信息

<header> <p>logo</p> <nav> <ul> <li>Home</li> <li>Html5</li> </ul> </nav> </header>

footer 定义文档或节的页脚

在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息

<footer> <p>© 2019 All Rights Reserved. </p></footer>

参考文献

1 html5 | http://caibaojian.com/html5

2 w3school | https://www.w3school.com.cn/

3 MDN | https://developer.mozilla.org/zh-CN/docs/Web/HTML/

下面是其它网友的补充

百度 IFE 任务一要求构建一个页面结构,看似简单,但需充分考虑到语义化。这篇文章简单谈谈 HTML5 语义化中的页面结构语义化的一些经验和理解。

1、为什么需要语义化

易修改、易维护。

无障碍阅读支持。

搜索引擎友好,利于 SEO。

面向未来的 HTML,浏览器在未来可能提供更丰富的支持。

2、结构语义化

语义元素均有一个共同特点——他们均不做任何事情。换句话说,语义元素仅仅是页面结构的规范化,并不会对内容有本质的影响。

下图展示了一个典型的页面结构。

头部

<header>元素有两种用法,第一是标注内容的标题,第二是标注网页的页眉,如上图你看到的那样。除非必要(内容标题附带其它信息的情况下:发布时间、作者等),一般不在内容中使用<header>。因而,网页中可以包含多个<header>元素。按照 HTML5 的规定,<header>都应包含某个级别的标题,所以应隐式或显式地包含标题,通常将不希望显示的标题设置为display: none;,一方面遵守规范,另一方面则提供了无障碍阅读而不至于影响到页面设计。

导航栏

导航栏使用<nav>看起来是理所当然的,进一步,它也用于一组文章的链接。一个页面可以包含多个<nav>元素,但通常仅仅在页面的主要导航部分使用它。

《HTML5:The Missing Manual》中指出了在侧栏使用<nav>标签的两个案例:

<!-- 案例一 --><nav> <!-- 此处是链接 --> <aside></aside> <aside></aside></nav><!-- 案例二 --><aside> <nav> <!-- 此处是链接 --> </nav> <section></section> <div></div></aside>

如果侧栏中包含其它不同于链接的其它区块,那么,使用第二种方案显然更为合适。

导航通常包含一组链接,普遍认为,链接使用列表来组织。

<nav> <ul> <li><a href="#" title="链接">链接</a></li> <li><a href="#" title="链接">链接</a></li> <li><a href="#" title="链接">链接</a></li> </ul></nav>

附注

<aside>元素并不仅仅是侧栏,它表示与它周围文本没有密切关系的内容。文章中同样可以使用<aside>元素,来说明文章的附加内容、解释说明某个观点、相关内容链接等等。

<aside>用于侧栏时,其表示整个网页的附加内容。通常的广告区域、搜索、分享链接则位于侧栏。侧栏中的<section>元素规定了一个区域,通常是带有标题的内容。

<section>标签适合标记的内容区块:

与页面主体并列显示的小内容块。

独立性内容,清单、表单等。

分组内容,如 CMS 系统中的文章分类区块。

比较长文档的一部分,可能仅仅是为了正确规定页面大纲。

<div>标签依然是可用的,当你觉得使用其它标签都不太合适的时候。新的语义元素出现之前,我们总是这么干的!

页脚

同可“包罗万象”的<header>元素不同,标准规定<footer>标签仅仅可以包含版权、来源信息、法律限制等等之类的文本或链接信息。如果想要在页脚中包含其它内容,可以使用熟悉的<div>来帮忙。

<div> <aside> <!-- 其它内容 --> </aside> <footer> <!-- 法律、版权、来源、联系信息等 --> </footer></div>

主要内容

在早先的 HTML5 版本中并没有规定页面主体的标签,相关的书中经常会说:除去头部、尾部、侧栏等其它部分,剩下的自然是主体部分。

然而,HTML5.1 中规定了一个<main>标签来标识主体内容。<main>标签不能包含在页面其它区块元素中,通常是<body>的子标签,或者是全局<div>的子标签。<main>标签可以帮助屏幕阅读工具识别页面的主体部分,从而让访问者迅速得到有用的信息。

文章

<article>表示一个完整的、自成一体的内容块。如文章或新闻报道。<article>应包含完整的标题、文章署名、发布时间、正文。当语义与表现发生冲突,例如有时需要将文章分多个页面显示,那么需要把每个页面的文章区域都用<article>标记。

文章中包含插图时,使用新的语义元素<figure>标签。

<article> <h1>标题</h1> <p> <!-- 内容 --> </p> <figure> <img src="#" alt="插图"> <figcaption>这是一个插图</figcaption> </figure></article>

上述情况下,<figcaption>包含了关于插图的详细解释,则<img>alt属性可以略去。

总结

以上所述是小编给大家介绍的HTML5常用的语义化标签,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对真格学网网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

html 和html5的区别如下:1.文件类型声明5:!DOCTYPEHTML>4:!DOCTYPEhtml PUBLIC "-//W3C//DTDHTML 4.01//EN">2.编码设置html;charset=UTF-8">3.可以直接嵌入MathML和SVG4.新的解析规范5.移除一些无用的标签big,center,font,acronym,applet,basefont,dir,frame,frameset,isindex,noframes,strike,tthtml5与html在新元素方面的区别:一、更好的结构化、语义化,引入下面这些元素section 代表一个通用的文件或应用部分。它可以和 h1,h2,h3,h4,h5,及 h6 元素同时使用来表明文档的结构。article 代表了一个文档内容的独立片段,比如博客条目或报纸文章。Aside 代表了一段与页面的其余部分稍稍相关的内容。hgroup 代表一个部分(section)的头(header)。header 代表一组介绍或导航辅助。footer 代表一个部分(section)的尾(footer)并可以容纳关于作者、版权等信息。nav 代表了用于导航目的的文档的一部分。figure 代表一个独立的流内容片段,通常作为一个文档主流的独立单元。video>Examplefigcaption 被用作标题(它是可选的)内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html5语义化元素你真的用对了吗
  • html5新特性之语义化标签
  • html5中语义化 b 和 i 标签
  • html5 语义化结构化规范化
  • html标签语义化(含h5)
  • 详解html5常用的语义化标签
  • 浅谈html的语义化和一些简单优化
  • 浅谈语义化的html结构到底有什么好处
  • 使用语义化标签去写你的html 兼容ie6,7,8
  • html标签语义化的介绍
  • html 和 html5的区别
  • html5学习较好的书籍有哪些
  • 如何处理html5新标签的浏览器兼容问题
  • 做HTML5前端工程师需要考什么证吗?
  • html5是什么,干什么用的?
  • 学习HTML5前端,要会哪些知识点和技能?
  • article标签和aside标签
  • web前端怎样入门?
  • HTML5从入门到精通的作品目录
  • 什么HTML5??最近好像挺火的??
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5html5语义化标签html5语义化元素你真的用对了吗html5新特性之语义化标签html5中语义化 b 和 i 标签html5 语义化结构化规范化详解html5常用的语义化标签浅谈html的语义化和一些简单优化浅谈语义化的html结构到底有什么好处使用语义化标签去写你的html 兼容ie6,7,8html标签语义化的介绍html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解基于html5+tracking.js实现刷脸支付功能html中meta标签及keywords详解移动端h5页面根据屏幕适配的四种方案html5移动端自适应布局的实现html里显示pdf、word、xls、ppt的方法示例html5 直播疯狂点赞动画实现代码 附源码html5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷canvas 基础之图像处理的使用用canvas显示验证码的实现html5给汉字加拼音收起展开组件的实现代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved