精华内容
下载资源
问答
  •   对于大部分初学者来说,可能无法理解,明明在学习的时候,用div标签就能构成页面,为什么要用h5语义化标签?可能有一些前端工作者对HTML标签语义化的概念也不是很清楚,那么究竟什么是HTML语义化标签?我们为...

      对于大部分初学者来说,可能无法理解,明明在学习的时候,用div标签就能构成页面,为什么要用h5语义化标签?可能有一些前端工作者对HTML标签语义化的概念也不是很清楚,那么究竟什么是HTML语义化标签?我们为什么要用h5语义化标签?常用的HTML5语义化标签有哪些呢?下面,我们就带着问题找答案。

    什么是HTML语义化标签?

      语义化标签,就是让标签有自己的含义,利用本身传达它所包含内容的一些信息,使浏览器和搜索引擎直观的认识标签和属性的用途和作用。

      过去我们常常采用DIV+CSS 的方式布局页面,但DIV 标签本身没有独特的含义,这样做的结果就是文档结构不够清晰,不利于浏览器对页面的读取,在分离CSS样式后,用户体验不友好。

      所以HTML5 新增了很多语义化标签,使文档更具可读性,页面结构更清晰。

    为什么要用H5语义化标签?

    1. 代码结构清晰,可读性高,减少差异化,便于团队开发和维护。
    2. 在页面没有加载CSS的情况下,也能呈现良好的内容结构,提升用户体验。
    3. 对搜索引擎友好,良好的结构和语义,有助于爬虫抓取更多的有效信息。

    HTML5语义化标签有哪些?

      header 标签: 页眉,通常包括网站标志、主导航、全站链接以及搜索框

      nav 标签:标记导航,仅对文档中重要的链接群使用

      main标签:页面主要内容,一个页面只能使用一次

      article标签:用来定义独立于文档且有意义的来自外部的内容

      section标签:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

      aside标签:定义article标签外的内容,可用作文章的侧边栏

      footer标签:页脚,只有当父级是body时,才是整个页面的页脚。

      title标签:定义文档的标题

      h1~h6标签:创建文档结构的层级关系

      ul标签:无序列表

      ol标签:有序列表

      strong标签:强调文本,表现为粗体

      em标签:强调文本,表现为斜体

      p标签:段落

      那么有了HTML5新增的这些语义化标签,我们就可以抛弃DIV了吗?也不尽然,在今后的文章中我会详细讲到这些H5语义化标签的使用和注意事项。

    展开全文
  • 这次给大家带来H5的语义化标签,使用H5语义化标签的注意事项有哪些,下面就是实战案例,一起来看一下。HTML5新特性简洁的DOCTYPE:HTML5 只有一个简单的文档类型:,表示浏览器会按照标准模式解析。简单易记的编码...

    这次给大家带来H5的语义化标签,使用H5语义化标签的注意事项有哪些,下面就是实战案例,一起来看一下。

    HTML5新特性

    简洁的DOCTYPE:

    HTML5 只有一个简单的文档类型:,表示浏览器会按照标准模式解析。

    简单易记的编码类型

    你现在可以在meta 标签中使用”charset”:

    脚本和链接无需type

    更加语义化的新增标签

    比如说:、、、、 ,、、、、

    视频和音频

    Your browser does not support the video tag.

    表单增强

    新的input类型:color, email, date, month, week, time, datetime, datetime-local, number,range,search, tel, 和url

    新属性:required, autofocus, pattern, list, autocomplete 和placeholder

    新元素:, , , 和

    canvas标签绘制2D图形。var canvas = document.getElementById('canvas');

    var context = canvas.getContext('2d');

    context.beginPath();

    context.moveTo(100,100);

    context.lineTo(300,300);

    context.lineTo(100,500);

    context.lineWidth = 5;

    context.strokeStyle = "red";

    context.stroke();

    地理位置获取

    HTML语义化

    1.什么是HTML语义化?

    通过标签判断内容语义,例如根据h1标签判断出内容是标题,根据

    判断内容是段落、标签是输入框等。

    2.为什么要语义化?

    1).去掉或样式丢失的时候能让页面呈现清晰的结构

    2).方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页

    3).有利于SEO

    4).便于团队开发和维护,遵循W3C标准,可以减少差异化

    3.如何确定你的标签是否语义良好?

    去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。

    4.常见的语义化标签模块

    表单

    登录表单

    账号:

    密码:

    表单域要用fieldset标签包起来,并用legend标签说明表单的用途;每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

    5.语义化标签应注意的一些问题

    尽可能少的使用无语义的标签p和span;

    在语义不明显时,既可以使用p或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;

    不要使用纯样式标签,如:b、font、u等,改用css设置。

    需要强调的文本,可以包含在strong或者em标签中,strong默认样式是加粗(不要用b),em是斜体(不用i)

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    展开全文
  • HTML5中新增了一些语义化标签,提高可用性和改进用户的友好体验。接下来,就让我们来学习HTML5中新增的标签吧~(╹▽╹)狭义的HTML5指的是HTML语言的第五个版本。广义的HTML5是指,HTML5 + CSS3 + Javascript技术的...

    在HTML第五次重大修改后,用于取代HTML4和XHTML的第一代标准版本,称为HTML5。HTML5中新增了一些语义化标签,提高可用性和改进用户的友好体验。接下来,就让我们来学习HTML5中新增的标签吧~(╹▽╹)

    狭义的HTML5指的是HTML语言的第五个版本。

    广义的HTML5是指,HTML5 + CSS3 + Javascript技术的综合。

    HTML5新增语义化标签

    HTML5的优势:

    提高可用性和改进用户的友好体验

    更好的语义化标签

    带来更多的多媒体元素,很好的替代FLASH和Silverlight

    涉及到网站抓取和索引时,对SEO很友好

    大量应用于移动应用程序和游戏

    可移植性好

    HTML5的劣势:

    该标准未能很好的被PC端浏览器支持

    IE9以下浏览器几乎不兼容

    H5新增语义化标签-常用布局标签

    头部标签

    导航标签

    主体标签

    独立内容标签

    区段标签

    侧边栏标签

    尾部标签

    035fb72c2b9f

    语义化标签.PNG

    注:这种语义化标准主要针对搜索搜索引擎,可在页面中多次使用。在IE9中,需要把这些元素转换为块级元素。

    H5新增语义化标签-多媒体标签

    音频标签

    HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放,但支持的格式有限。

    035fb72c2b9f

    音频格式.PNG

    音频标签的兼容写法

    您的浏览器暂不支持audio标签

    音频标签常见属性

    属性

    描述

    autoplay

    autoplay

    音频在就绪后马上播放

    controls

    controls

    向用户显示音频控件

    loop

    loop

    音频结束时,会重新开始播放

    preload

    preload

    音频在页面加载时进行加载,并预备播放,会忽略"autoplay"属性

    src

    url

    要播放的音频URL

    视频标签

    HTML5在不使用插件的情况下也可以原生的支持视频格式文件的播放,但支持的格式有限。

    035fb72c2b9f

    视频格式.PNG

    音频标签的兼容写法

    您的浏览器暂不支持video标签

    视频标签常见属性

    属性

    描述

    autoplay

    autoplay

    视频就绪自动播放

    controls

    controls

    向用户显示播放控件

    loop

    loop

    视频结束,会继续播放该视频,循环播放

    preload

    auto(预先加载),none(不预先加载)

    是否预加载视频,"autoplay"属性会被忽略

    src

    url

    视频url地址

    width

    pixels(像素)

    播放器宽度

    height

    pixels(像素)

    播放器高度

    poster

    img url

    加载时等待画面的图片

    muted

    muted

    静音播放

    H5新增语义化标签-表单标签

    输入标签

    HTML5新增表单类型

    属性值

    描述

    type="email"

    限制用户输入必须为email类型

    type="url"

    限制用户输入必须为url类型

    type="date"

    限制用户输入必须为日期类型

    type="time"

    限制用户输入必须为时间类型

    type="month"

    限制用户输入必须为月类型

    type="week"

    限制用户输入必须为周类型

    type="number"

    限制用户输入必须为数字类型

    type="range"

    滑动条

    type="tel"

    手机号码

    type="search"

    搜索框

    type="color"

    生成一个颜色选择表单

    标签

    标签规定了元素可能的选项列表;

    元素包含了一组元素,这些元素表示预定义可选值,在元素输入过程,会自动相应元素的值,

    绑定的标签必须设置list属性,属性值等于标签的id属性值。

    gz

    ct

    sh

    新增表单属性

    属性

    描述

    required

    required

    拥有该属性表单内容不得为空,必填

    placeholder

    提示文本

    表单提示信息

    autofocus

    autofocus

    自动聚焦属性

    autocomplete

    off/on

    默认打开,需要放在表单内同时加上name属性,同时需要成功提交

    multiple

    multiple

    可以多选文件提交

    展开全文
  • 语义化标签

    2016-11-07 13:18:28
    语义化标签 在html5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化 也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约...

    语义化标签

    html5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化 也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~~ 谁不想简单轻松一些呢。。。

    语义化标签有2种,一种是单纯语义化的,无功能,二种是语义化,且有功能的。

    一:无功能,语义化标签

    1.1 - <header></header>

    SM:也就是我们的头部标签, 一般用于网站头部内容

    1.2 <footer></footer>

    SM:有头部肯定就有底部,一般用于网站底部(赶脚好废话呀~~)。

    1.3 <nav></nav>

    SM:导航标签,这个也比较好理解,平时我们用UL标签写导航的时候,UL里面一定是要包含li标签标签的,这样会有一定的局限性,<nav></nav>标签就不局限里面所房标签,可以是一群的a标签,也可以是一个a,一个p,你喜欢就好!

    <nav>
    <a href="">导航1</a>
    <a href="">导航2</a>
    <a href="">导航3</a>
    <a href="">导航4</a>
    </nav> 1.4 <hgroup></hgroup>

    SM:标题组合,一般为页面的主要标题加描述

    <hgroup>
    <h2>我是标题</h2>
    <h3>我是标题描述</h3>
    </hgroup> 1.5 <section></section>

    SM:一个板块或者一个区域内容,用于划分页面不同区域

    1.6 <article></article>

    SM:用来在页面中表示一套结构完整且独立的内容部分

    1.6.1 <aslde></aside>

    SM:主题的附属信息(用途很广,主要就是一个附属内容),如果article里面为一篇文章的话,那么文章的作者以及信息内容就是这篇文章的附属内容了

    1.7 <figure></figure>

    SM:媒体元素,比如一些视频,图片啊等等

    <figure>
    <img /> //图片
    <figcaption>我是图片的说明描述</figcaption> //图片说明
    </figure> 1.8 <time></time>

    SM:专门为时间而出的标签,以往我们时间标签很多,比如span,i,b等等 time标签有个属性datetime="" //没实际功能,便于查找

    二:有功能,语义化标签

    2.1 <datalist></datalist>

    SM:选项列表,与input元素配合使用,来定义input可能的值

    <input type="text" list="valList"> //要在input标签中添加一个新的list属性,属性值为datalist的ID~
    <datalist id="valList">
    <option value="javascript">javascript</option>
    <option value="html">html</option>
    <option value="css">css</option>
    </datalist> 
    HTML5语义化标签

    当我在输入框中输入一个j的时候,里面相关的javascript就会显示出来~~

    2.2 <details></details>

    SM:用于描述文档或者文档某个部分的细节~ 默认属性为open~

    ps:配合summary一起使用

    <details>
    <summary>芝麻开门</summary>
    <p>BOOM!!!!!!!!!!!!</p>
    </details> 
    HTML5语义化标签
    //没有点击时候的页面显示 
    HTML5语义化标签
    //点击之后的内容显示 2.3 <progress></progress>

    SM:用于制作进度条,里面有2个属性,1:max 总的进度 2:value 现在的进度

    <progress max="200" value="100"> // max:总共为200,当前为100,就是说进度条只到的50%
    <span>20</span>% //用于兼容不支持此属性的浏览器
    </progress> 
    HTML5语义化标签
    三:关于兼容

    毫无疑问,H5标签肯定是有兼容问题的, 低版本的IE是不认识这些语义化标签的,一般有2种办法可以解决这个问题

    NO.1

    自己写javascript代码, 因为IE不认识这些标签,所以我们只需要在js中创建这些标签就好

    <script type="text/javascript">
    document.createElement('header'); //创建一个header元素
    </script>

    这样我们就创建出来了一个header头部元素,现在我们就可以HTML和样式中写入这个标签

    ps:因为创建出来的标签是没有任何默认属性的,所以我们要给创建出来的标签创建一个CSS属性display:block ;

    NO.2

    直接在外部引入一个js文件,引入方法跟我们平时引入插件的方式一样(这里就不再阐述)。。。。


    展开全文
  • HTML语义化标签理解

    2019-04-08 16:05:13
    1:语义化标签是什么? 语义化标签,目的是让标签...2:语义化标签好处 方便用户阅读,页面更加清晰。 更好的SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。 有利于开发维护。 3:页面结构语义化标签 ...
  • 一、什么是语义化标签 语义化即让标签元素拥有其含义,当你使用其标签时知道这个标签代表着什么含义,适用于怎样的场景 二、语义化标签的优势 1.书写代码时有助于理清思路,使页面结构清晰,团队合作 2.维护者在...
  • 基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析...
  • 什么是语义化标签 语义化的标签,意义让标签有自己的含义。 语义化标签的优势 代码结构清晰,方便阅读,有利于团队合作开发。 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。 ...
  • Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? 那么什么叫做语义化呢...
  • 极客人 2年前 (2016-12-07) 算法语言 |1 条评论 285文章评分 0 次,平均分 0.0 : [收起] 文章目录语义化标签,顾名思义也就是可以直接读懂的标签。最早接触HTML5的时候,对HTML5的语义化并没有太深的理解,只是对...
  • 语义化标签通俗的讲,就是用特定的词汇去描述网页的一块区域、某处作用等等而应运而生的一些标签。这些标签不仅可以让人们方便通过索引查询的到,也便于计算机在处理这些信息的时候解析速度更快。语义化标签的优点...
  • 说说你了解的HTML5语义化标签,HTML5新增了那些新特性?Hello,欢迎来到我的博客,每天一道面试题,我们共同进步。题外话:新网站( https://www.lzpan.com )懒盘,百度云、蓝奏云资源搜索,欢迎访问。题外话其实,...
  • 什么是HTML语义化标签?常见HTML语义化标签大全

    万次阅读 多人点赞 2018-06-06 17:29:53
    一、什么是HTML语义化标签 语义化的标签,旨在让标签有自己的含义。 &amp;amp;amp;lt;p&amp;amp;amp;gt;一行文字&amp;amp;amp;lt;/p&amp;amp;amp;gt; &amp;amp;amp;lt;span&amp;amp;amp...
  • 本文主要参考MDN中文文档前言标签语义化...另一方面,标签语义化好处大家都会说,什么利于SEO,利于机器阅读这些。但是,标签语义化还有一个好处,那就是便于项目维护,如果是多人开发,或者后人修改前人的html...
  • 今天小编带读者们来了解一下HTML5新特性之语义化标签,感兴趣的朋友随小编一起来看看吧。简洁的DOCTYPE:HTML5 只有一个简单的文档类型:,表示浏览器会按照标准模式解析。简单易记的编码类型:你现在可以在meta 标签...
  • 二、语义化标签的优势 代码结构清晰,方便阅读,有利于团队合作开发。 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。 有利于搜索引擎优化(SEO)。 三、常见的语义化标签 因此...
  • 一、首先我们提出疑问,什么是语义化标签以及我们为什么要去使用它? 在语义化标签出来之前,我们可以用div+css实现完全可以实现布局,为什么要多此一举呢? 1)为了在没有CSS的情况下,页面也能呈现出很好地内容...
  • 语义化标签——HTML

    2021-01-08 04:44:46
    语义化标签 在网页中HTML专门负责网页的结构 在使用html标签时,应关注的是标签的语义,而不是它的样式 标题标签 h1~h6(一共有六级标签) h1在网页中的重要性仅次于title,一般情况下一个页面只会有一个h1 一般情况下...
  • 语义化标签.html

    2021-08-03 07:31:10
    语义化标签.html
  •  《html5 新添标签》1、html5:万维网的核心语言、HTML规范的第五次...1.1: 新增的主体结构元素(article,section,nav,aside,time)1.2:新增的非主体结构元素(header,hgroup,footer,address)2、布局的语义化标签...
  • 为什么要语义化有利于SEO:搜索引擎的爬虫是读不懂无语义的span和div的,因此语义化标签能使爬虫抓取更多的有效信息。CSS文件读取失败的准备:万一CSS文件挂了,语义化的HTML也能呈现较好的内容结构与代码结构。方便...
  • HTML语义化标签总结

    2021-04-02 22:55:55
    HTML语义化标签总结HTML语义化标签总结语义化的好处hgroup标签header标签nav标签section标签article标签aside标签footer标签details标签datalist标签progress标签time标签mark标签meter标签ruby标签 HTML语义化标签...
  • 语义化标签大全

    2020-09-19 11:52:10
    语义化标签 什么是HTML语义化标签?常见HTML语义化标签大全 语义化的标签,旨在让标签有自己的含义。 一、什么是HTML语义化标签 语义化的标签,旨在让标签有自己的含义。 1 <p>一行文字</p> 2 <span&...
  • 总结HTML语义化标签

    2019-02-23 14:03:21
    1. 语义化标签是什么,使用的好处是什么? 语义类标签也是大家工作中经常会用到的一类标签,它们的特点是视觉表达上都互相差不多,主要的区别在于它们表示了不同的语义,比如大家会经常见到的 section、nav、p,这些...
  • 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化?为了在没有CSS的情况下,页面也能呈现出很好地内容结构、...
  • html 语义化标签

    2018-07-24 14:47:51
    一、语义化标签的实战意义 我先收集到一些观点,大家姑且先听上一听,  有人说:  “没必要考虑语义化,只要我写的代码浏览器运行后没问题就行,反正领导根本不关心这些”  “语义化是w3c推广的,我是很想语义化...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 88,962
精华内容 35,584
关键字:

语义化标签的好处