html标签语义化 | 易学教程

H5新特性之语义化标签

阅读更多关于 H5新特性之语义化标签

H5 新特性之语义化标签一、什么是语义化标签有了自己的含义，通过标签就能判断内容语义。二、语义化的好处 1、html结构清晰，代码可读性较好，便于团队维护和开发 2、更有利于搜索引擎或辅助设备理解 html页面内容，搜索引擎可以根据标签语言确定上下文和权重关系三、 H5常用的语义化标签 <section>用于对网站和页面内容分块，划分单独的模块区域 <article>独立的文章展示 <aside>页面中的附属侧边信息 <header>：定义页面或内容的头部区域 <footer>：定义页面或内容的底部区域 <nav>：定义页面导航 <figure>表示一个独立的内容 <figurecaption>表示<figure>的标题（必须写在<figure>的内部，一般放在<figure>的第一位或者最后一位，最多只有一个） <main>表示页面的主体内容（一个页面只能使用一次） <hgroup> 表示对网页或区段的标题进行组合，通常对 h1~h6进行分组 <time>：定义日期和时间 <mark> 用来突出显示文本 ,默认情况下背景为黄色 <dialog>类似于微信对化框（默认display：none 加open才显示，有默认定位和默认边框） <embed>标记定义外部的可交互的内容和插件 <progress></progress>代表一个任务完成的进度

H5新增特性之语义化标签

阅读更多关于 H5新增特性之语义化标签

H5新增特性之语义化标签　　语义化标签顾名思义标签有自己的含义，浏览器或者程序员一看就知道是什么。在 HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。一、根据页面的结构。　　 section元素表示页面中的一个区块　　article元素表示一块与上下文无关的独立的内容　　aside元素在article之外的，与article内容相关的辅助信息　　header元素表示页面中一个内容区块或整个页面的标题　　footer元素表示页面中一个内容区块或整个页面的脚注　　nav元素表示页面中导航链接部分　　hgroup标题的一个分组二、媒体元素组合　　 figure元素表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置) 　　　　<figure>和 <figcaption>：<figure>为父元素，用于图片的外层，其子元素<figcaption>用来对内容进行说明。　　embed 标记定义外部的可交互的内容或插件比如flash 三、time时间　　 <time

究竟什么是HTML5`和语义化标签

阅读更多关于究竟什么是HTML5`和语义化标签

一、什么是 HTML5 1. HTML5 的概念与定义定义： HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML 两个概念：是一个新版本的 HTML 语言，定义了新的标签、特性和属性拥有一个强大的技术集，这些技术集是指： HTML5 、 CSS3 、 javascript , 这也是广义上的 HTML5 2. HTML5 拓展了哪些内容语义化标签本地存储兼容特性 2D 、 3D 动画、过渡 CSS3 特性性能与集成 3. HTML5 的现状绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，总的来说： HTML5 已经是大势所趋二、 HTML5 新增标签 1. 新增了那些语义化标签 header — 头部标签 nav — 导航标签 article — 内容标签 section — 块级标签 aside — 侧边栏标签 footer — 尾部标签 ······ 2. 使用语义化标签的注意语义化标签主要针对搜索引擎新标签可以使用一次或者多次在 IE9 浏览器中，需要把语义化标签都转换为块级元素语义化标签，在移动端支持比较友好另外， HTML5 新增的了很多的语义化标签，这里只是部分三、语义化标签 1. 语义化标签是什么？语义类标签也是大家工作中经常会用到的一类标签

HTML语义化

阅读更多关于 HTML语义化

之前我一直没有重视过HTML语义化，觉得<div>+<span>，再用上一些基本的语义化标签，比如<p>,<h1>等等，写一些比较普通的页面足够了。但是，我们应当追求把语义化标签用对，而不是仅仅完成一个页面就行。那么，为什么要使用HTML语义化呢？ 1.为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构（为了裸奔时好看）。 2.增强用户体验，例如title、alt属性用于解释名词或解释图片信息（如图，左边为title的效果，右边为alt的效果)。 3.有利于SEO(Search Engine Optimization,搜索引擎优化)，和搜索引擎（如百度、谷歌等）建立良好沟通，有助于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重。 4.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以其意义来渲染网页。 5.便于团队开发和维护，语义化更具可读性，可以减少差异化。写HTML代码时应注意什么？ 1.尽可能少的使用无语义的标签div和span； 2.在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利； 3.不要使用纯样式标签，如：<b>、<font>等，改用css设置。 4.需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们）

HTML5语义化标签的应用

阅读更多关于 HTML5语义化标签的应用

前言最近在读 HTML5秘籍 (the missing manual)，书中对HTML5的定义和理解是： HTML5实际上是一组独立标准的集合。有些标准已经得到了支持，而另外一些标准几年内(甚至永远)不会得到支持，即HTML5在某些浏览器的某些版本中能够运行。 HTML5作为新一代web的开发标准，相信有不少开发者已经垂涎它各种具有革命性的新功能，诸如：语义化的标签和元素、新增表单控件、化繁为简的富媒体支持、神奇的本地数据存储技术、强大的绘图技术(canvas)以及离线、地理定位等。本文讨论的只是如何利用html5的各种明确的语义化标签来构建我们的页面。关于DOCTYPE 在HTML5来临之前，一个标准的XHTML头部代码应该是这样的： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> ......

HTML5语义化标签

阅读更多关于 HTML5语义化标签

语义化的作用语义化是最近几年经常被讨论的一个话题，在提倡Web标准化的今天，语义化越来越受到大家的重视，并且已经成为Web标准的一部分了。为什么要语义化？初次接触这个概念的人一定会这么问。 CSS森林和愚人码头都对此讲述了自己的观点。综合两者，我的看法是：语义化的的直接作用大多是让机器可以更好地理解我们的网页。我说的机器，可以是屏幕阅读器，可以是移动设备，可以是爬虫程序甚至是我们自己写的程序。屏幕阅读器这个没有得到很多人重视，所以也没有很大说服力。但是后者几个应该没有人会不重视吧，许多手机Web浏览器都是把网页在服务器中解析，提取，压缩再返回手机客户端的，语义化的标签相当于一个公共的协议，可以让服务器更有效准确地提取目标内容。另外，语义化的网页还可以让爬虫程序更好地理解网页，对SEO有直接帮助。其实，我认为上面的都是浮云，语义化网页真正伟大之处是促进信息的共享和传播。RSS的应用就是一个例子，RSS本身就是一个高度语义化的XML文档，同时它也是一个协议，大家都按照这个协议来提供网站的信息内容，这样，我们便可以按照同样的协议编写程序，使用这个程序来获取我们各自需要的信息，大大地促进了信息的共享和传播。当然，语义化的作用不仅仅是这些，在《语义化的HTML结构到底有什么好处？》中还提到了，它对网页丢失样式呈现清晰结构，对于团队开发和维护也有重要作用。

快速理解web语义化

阅读更多关于快速理解web语义化

什么是Web语义化 Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器（如果访客有视障）能够读懂内容。简单来说就是利于 SEO，便于阅读维护理解。总结起来就是：正确的标签做正确的事情页面内容结构化无CSS样子时也容易阅读，便于阅读维护和理解便于浏览器、搜索引擎解析。利于爬虫标记、利于SEO html 语义化标签 HTML为网页文档内容提供上下文结构和含义。对于HTML体系而言，Web语义化是指使用语义恰当的标签，使页面有良好的结构，让页面元素有含义，便于被浏览器、搜索引擎解析、利于SEO。通常我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。代码示例： <html> <body> <article> <header> <h1>h1 - WEB 语义化</h1> </header> <nav> <ul> <li>nav1 - HTML语义化</li> <li>nav2 - CSS语义化</li> </ul> </nav> <section>

如何理解HTML语义化

阅读更多关于如何理解HTML语义化

一、什么是 HTML 语义化所谓 HTML 语义化，就是用恰当的标签去展示恰当的内容，像 HTML5 中新增的 header、nav、footer 等标签，而非什么都用 div 这种不具备语义化的标签来显示二、HTML 语义化的作用 1、方便代码的维护，语义化的 HTML 代码更具可读性 2、有利于 SEO ，提高搜索引擎的有效爬取来源： https://www.cnblogs.com/Leophen/p/11355649.html

前端面试题-HTML结构语义化

阅读更多关于前端面试题-HTML结构语义化

一、HTML语义化的背景 HTML结构语义化，是近几年才提出来的，对比之前的 HTML 结构，大多是一堆没有语义的标签。用的最多的就是 DIV+CSS，为了改变这种现状，开发者们和官方提出了 HTML结构语义化的概念，并且在 HTML5 添加了很多语义化标签。二、HTML语义化的概念语义化是指根据内容的结构，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。三、HTML语义化的必要随着互联网的发展，WEB承载越来越多的信息（图片，音频，视频等），人们开始用机器来处理网络信息，就此诞生了搜索引擎。如次庞大及复杂的信息如何让搜索引擎处理和挖掘，所以让机器能够更好地读懂WEB上内容就变得越来越重要。传统的Web由文档组成，W3C希望通过一组技术支撑 “数据的Web”，即 Web of Data，将Web看作一个存储和管理数据的大型分布式数据库。语义Web是构造这样的数据Web的重要一环，帮助人们创建数据并存储在Web上，创建相关的词汇表及数据的处理规则。四、HTML语义化的作用 4.1 页面结构清晰去掉或 CSS 样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。 4.2 支持更多设备方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页。 4.3 利于SEO优化和搜索引擎建立良好沟通

快速理解web语义化

阅读更多关于快速理解web语义化

订阅 html标签语义化