前台开发入门到实战:HTML5语义化元素你真的用的正确吗?

  • 时间:2019-08-22 04:16 作者:IT智云编程 来源:IT智云编程 阅读:48
  • 扫一扫,手机访问
摘要:HTML5语义元素语义学是研究语言中单词和短语的含义。语义元素=具备意义的元素。 语义元素清楚地形容了它对浏览器和开发人员的意义。 非语义元素的示例: div 和 span 对其内容一无所知。 语义元素的示例: form , table 和 article 清楚地定义其内容。 所有现代浏览器

HTML5语义元素

语义学是研究语言中单词和短语的含义。语义元素=具备意义的元素。 语义元素清楚地形容了它对浏览器和开发人员的意义。 非语义元素的示例:<div>和<span>- 对其内容一无所知。 语义元素的示例:<form>,<table>和<article>- 清楚地定义其内容。 所有现代浏览器都支持HTML5语义元素。

HTML5新语义元素

许多网站都包含HTML代码,例如:<div id ="nav"> <div class ="header"> <div id ="footer"> 以指示导航,页眉和页脚。 HTML5提供了新的语义元从来定义网页的不同部分:


<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>

HTML5 <section>元素

<section>元素定义了一个文档中的一个部分。 根据W3C的HTML5文档:“一个部分是内容的主题分组,通常带有标题。” 主页通常可以分为几个部分,用于详情,内容和联络信息。

<!DOCTYPE html>     <html>     <body>     <section>       <h1>Java</h1>       <p>Java是一种广泛使用的计算机编程语言,拥有跨平台、面向对象、泛型编程的特性,广泛应用于企业级Web应用开发和移动应用开发。</p>     </section>     <section>       <h1>PHP</h1>       <p>PHP(全称:PHP:Hypertext Preprocessor,即“PHP:超文本预解决器”)是一种开源的通用计算机脚本语言,尤其适用于网络开发并可嵌入HTML中使用。</p>     </section>     </body>     </html>

HTML5 <article>元素

<article>元素指定独立的包含内容。 一篇文章本身应该有意义,应该可以从网站的其余部分独立阅读。 <article>可以使用元素的示例:

<!DOCTYPE html>       <html>       <body>       <article>         <h1>Java</h1>         <p>Java是一种广泛使用的计算机编程语言,拥有跨平台、面向对象、泛型编程的特性,广泛应用于企业级Web应用开发和移动应用开发。</p>       </article>       </body>       </html>

HTML5 <header>元素

<header>元素指定为一个文件或者部分标题。 <header>元素应该用作详情性内容的容器。 您可以在一个<header>中包含多个元素。 以下示例定义文章的标题:

<!DOCTYPE html>       <html>       <body>       <article>         <header>           <h1>Java</h1>           <p>Java是什么:</p>         </header>         <p>Java是一种广泛使用的计算机编程语言,拥有跨平台、面向对象、泛型编程的特性,广泛应用于企业级Web应用开发和移动应用开发。</p>       </article>       </body>       </html>

HTML5 <footer>元素

<footer>元素指定为一个文件或者部分页脚。 <footer>元件应包含有关它的包含单元信息。 页脚通常包含文档的作者,版权信息,使用条款的链接,联络信息等。 您可在一个<footer>中有多个元素。

<!DOCTYPE html>       <html>       <body>       <footer>         <p>版权所有</p>         <p>联络信息: <a href="mailto:someone@example.com">         someone@example.com</a>.</p>       </footer>       </body>       </html>

HTML5 <nav>元素

<nav>元素定义了一组导航链接。

<!DOCTYPE html>       <html>       <body>       <nav>         <a href="#">Java</a> |         <a href="#">CSS</a> |         <a href="#">HTML</a> |         <a href="#">jQuery</a>       </nav>       </body>       </html>

HTML5 <aside>元素

<aside>元件从它被放置在(如侧栏)的内容定义了少量内容。 <aside>内容应是附近的内容。

<!DOCTYPE html>       <html>       <body>       <p>Java是一种广泛使用的计算机编程语言,拥有跨平台、面向对象、泛型编程的特性,广泛应用于企业级Web应用开发和移动应用开发。</p>       <aside>         <h4>PHP</h4>         <p>PHP是世界上最好的语言。</p>       </aside>       </body>       </html>

自己是一个6年的前台工程师,希望本文对你有帮助!

这里推荐一下我的前台学习交流扣qun:731771211 ,里面都是学习前台的,假如你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前台学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到手机端HTML5的项目实战的学习资料都有整理,送给每一位前台小伙伴,每天分享技术

点击:加入

  • 全部评论(0)
上一篇:已是第一篇内容
下一篇:Vue仿微信app页面跳转动画
最新发布的资讯信息
【系统环境|】web前端开发需要学习哪些技术(2019-09-17 18:00)
【系统环境|】学习web前端开发是正确的选择(2019-09-15 16:55)
【系统环境|】干货整理!零基础html5网站开发学习步骤方法(保存不后悔)(2019-09-10 16:27)
【系统环境|】「前端入门」前端基本概念(2019-09-07 21:36)
【系统环境|】小白入门学习web前端,这些干货不能少(2019-09-05 20:59)
【系统环境|】不是计算机专业,哪个专业更适合学习web前端(2019-09-03 20:31)
【系统环境|】入行web前端开发可以做什么工作(2019-09-02 20:51)
【系统环境|】什么是Web前端呢?为什么说web前端开发人员的薪资高、前景好呢?(2019-08-31 20:55)
【系统环境|】2019年Web前端开发的8个趋势,你知道几个?(2019-08-29 16:23)
【系统环境|】学习web前端,掌握这些,才有底气跟面试官提薪资(2019-08-28 15:23)
手机二维码手机访问领取大礼包
返回顶部