精华内容
下载资源
问答
  • 这次给大家带来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中文网其它相关文章!

    推荐阅读:

    展开全文
  • 可能有一些前端工作者对HTML标签语义化的概念也不是很清楚,那么究竟什么是HTML语义化标签?我们为什么要用h5语义化标签?常用的HTML5语义化标签有哪些呢?下面,我们就带着问题找答案。 什么是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语义化标签的使用和注意事项。

    展开全文
  • 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

    可以多选文件提交

    展开全文
  • Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排一、使用案例1. 头部——header和nav标签header头部,body下的直接子元素header一般用于放页面的介绍性的信息如网站名称、logo或者导航栏nav。html5...

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排

    一、使用案例

    1. 头部——header和nav标签

    header头部,body下的直接子元素header一般用于放页面的介绍性的信息如网站名称、logo或者导航栏nav。

    html5语义化标签

    导航

    • 章节标签
    • 标题标签

    使用html5的header和nav标签

    html5语义化标签

    传统的头部

    注意到上面用了两个h1标签,在传统的html4里面,h1标题一般只能用一个,用于表示页面的大标题。但是在html5标签里面,所有的标题标签h1~h6都可用于不同的章节里。如上,第二个h1标签隶属于nav标签,与第一个h1是不同级别的。在Chrome里面第二个h1的样式字体小于第一个:

    d42ec14804c680f49bc4a3d256033724.png 

    a8c52a2ca9a0f99af683b5d459543caf.png

    2. 主体部分——main和section

    章节标签

    为页面区分不同的章节

    包括section article nav aside

    标题标签

    为不同的章节定义标题

    h1 h2 h3 h4 h5 h6六个标题标签

    331059ac298a9321b73b4e24331e1343.png

    main标签表示页面的主体部份,section标签给页面区分不同的章节。section是一个章节标签,构建页面的大纲(outline)。除此外还有nav、artical和aside三个标签能够勾勒页面的轮廓。章节标签通常会带上h1~h6的标题标签。不同的章节标题是独立的,嵌套的章节标题也跟着嵌套。另外多个标题可以用hgroup包括起来,在页面提纲里成为独立的一条内容。

    注意上面的main标签是后来出的标签,所有IE浏览器都不支持该标签,会把其子元素标签变成相邻的标签,从而页面错乱。解决办法是,IE8及以下用document.createElement("main")的办法让其识别,而IE9及以上设置css: main{display: block}即可。

    3. 尾部——footer

    copyright &copy hello, world

    footer和header一样,用在不同的章节里,可以显示该章节(如body整个页面)相关的外链、版权等信息。

    二、页面的轮廓(outline)

    上面已提多次提到outline和section章节,有一个在线工具HTML 5 Outliner可以抽象出页面的提纲,上面的demo用这个工具提炼的大纲如下:

    39d1c78c8f1d1b577fbc19b2fd61f09a.png

    页面的outline w3c有规定一个算法提取。

    之所以要考虑大纲的问题主要有两个好处:第一个是搜索引擎优化(SEO),第二个是屏幕阅读器可以快速地提取内容概要。这也是html5语义化标签的生命力所在,也是本文讨论的意义所在,同时也是和html4一个很大区别的地方。

    页面的大纲是通过上面提到的四个章节元素section、article、aside、nav和章节的根元素body区分不同的章节,而章节的大纲内容或者说标题通过h1等标题标签定义。相反地,header/footer/div等元素并不会有outline的作用,在里面定义的h1等标题标签属于该header/footer所在标签的章节。同时注意有几个标签定义的标题不会给该标签所在的章节贡献轮廓作用:blockquote body details dialog fieldset figure td。如下示例:

    一级大纲

    blockquote内的标题

    div内的标题

    acb55e4c315ecf71b32a4b4f041d0c60.png

    blockquote里面的h2标签并不会给页面的大纲增加内容

    三、如何使用

    1. div和section、section和article的区别

    div是一个普通的容器,而section不能当作一个普通的容器使用,使用section要让其起outline的作用,而article比section的章节概念更强。article适用于独立性强的内容,如本身就是一篇文章、博客,或者用户的评论等,article比section更加强调需要包含一个标题标签h1~h6。如果使用article的语义性更好的时候,就不用section。或者,内容可再继续细分章节的也应使用article。

    2. 章节的内容是独立的,并且可以嵌套

    独立是指每个章节都可以有自己的标题标签、header、footer和nav,并且章节可以相互嵌套,例如:

    html标签

    html5标签

    标题标签

    章节标签

    html4标签

    b98c8b4d6051907bf249f764cb19cf27.png

    3. 其它一些常用标签

    (1)figure和figcaption

    figure用作照片及其注释的容器

    火星

    (2)aside

    aside的内容与页面的主体内容相切,可用作侧边栏

    (3)更多标签

    参考:

    HTML5语义化标签重构页面

    在HTML5未出现之前我们都用div+css来构建页面,比如

    ,div的滥用,使得代码的可读性和可维护性很差,现在用本文来介绍一下用HTML5′干净的’语义 ...

    Html5语义化标签详解及其兼容性处理

    页眉 主要用于页面的头部的信息介绍,也可用于板块头部 页面上的一个标题组合 一个 ...

    html5语义化标签——回顾

    html5 头部结构      页眉 ...

    第二季第十一天 html5语义化标签 css透明度

    span不能设置宽高背景 HTML5语义化标签 标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能.

    转html5语义化标签总结一

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

    HTML5语义化标签总结

    1.语义化标签总结 基础布局标签 &lt ...

    HTML5语义化标签

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

    让HTML5语义化标签兼容IE浏览器

    解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位)

    html5语义化标签总结二

    HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...

    随机推荐

    深入super,看Python如何解决钻石继承难题 【转】

    原文地址 http://www.cnblogs.com/testview/p/4651198.html 1.   Python的继承以及调用父类成员 python子类调用父类成员有2种方法,分别是普通 ...

    使用SQL脚本删除冗余的视图和表

    使用SQL脚本删除冗余的视图和表 SQL脚本删除视图信息 USE DatabaseGOIF OBJECT_ID('ViewName')IS NOT NULLBEGINDROP VIEW ViewNam ...

    YPreLoad

    Javascript库   发布我的控件系列:图片预加载控件YPreLoad v1.0 摘要: 介绍大家好!很高兴向大家介绍我的图片预加载控件YPreLoad.它可以帮助您预加载图片,并且能显示加载的 ...

    OpenGL ES着色器语言之变量和数据类型(一)(官方文档第四章)和varying,uniform,attribute修饰范围

    OpenGL ES着色器语言之变量和数据类型(一)(官方文档第四章)   所有变量和函数在使用前必须声明.变量和函数名是标识符. 没有默认类型,所有变量和函数声明必须包含一个声明类型以及可选的修饰符. ...

    Maven项目构建管理

    一.Maven的作用 在开发中,为了保证编译通过,我们会到处去寻找jar包,当编译通过了,运行的时候,却发现"ClassNotFoundException",我们想到的是,难道还差 ...

    如何在Centos 7上用Logrotate管理日志文件

    何为Logrotate? Logrotate是一个实用的日志管理工具,旨在简化对系统上生成大量的日志文件进行管理. Logrotate允许自动旋转压缩,删除和邮寄日志文件,从而节省宝贵的磁盘空间. L ...

    uiautomator2 使用Python测试 Android应用

    GitHub地址:https://github.com/openatx/uiautomator2 介绍 uiautomator2 是一个可以使用Python对Android设备进行UI自动化的库.其底 ...

    RocketMQ实现事务消息

    在RocketMQ4.3.0版本后,开放了事务消息这一特性,对于分布式事务而言,最常说的还是二阶段提交协议,那么RocketMQ的事务消息又是怎么一回事呢,这里主要带着以下几个问题来探究一下Rocke ...

    Java第11章笔记

    什么是类,什么是对象 举例说明什么是类,什么是对象? 一句话:万物皆对象 类的概念:类是具有相同属性和服务的一组对象的集合. 1.为属于该类的所有对象提供了统一的抽象描述,其内部包括属性和服务两个部分 ...

    asp.net 重写URL方法和封装好的DLL

    .net 重写URL方法和封装好的DLL URL重写方法DLL(2.0)

    展开全文
  • 语义化标签通俗的讲,就是用特定的词汇去描述网页的一块区域、某处作用等等而应运而生的一些标签。这些标签不仅可以让人们方便通过索引查询的到,也便于计算机在处理这些信息的时候解析速度更快。语义化标签的优点...
  •  《html5 新添标签》1、html5:万维网的核心语言、HTML规范的第五次...1.1: 新增的主体结构元素(article,section,nav,aside,time)1.2:新增的非主体结构元素(header,hgroup,footer,address)2、布局的语义化标签...
  • 极客人 2年前 (2016-12-07) 算法语言 |1 条评论 285文章评分 0 次,平均分 0.0 : [收起] 文章目录语义化标签,顾名思义也就是可以直接读...Html5语义化标签,header,footer,nav等,这些本质上就是Div,在html4...
  • html5语义化标签 一、首先我们提出疑问,什么是语义化标签以及我们为什么要去使用它? 在语义化标签出来之前,我们可以用div+css实现完全可以实现布局,为什么要多此一举呢? 1)为了在没有CSS的情况下,页面也能...
  • html5语义化标签

    2016-09-15 11:20:57
    html5新增的属性之一语义化标签使我们不再像以前那样全局的div,下面是对语义化标签的详细讲解。
  • 说说你了解的HTML5语义化标签HTML5新增了那些新特性?Hello,欢迎来到我的博客,每天一道面试题,我们共同进步。题外话:新网站( https://www.lzpan.com )懒盘,百度云、蓝奏云资源搜索,欢迎访问。题外话其实,...
  • HTML5语义化标签

    2017-03-20 20:57:07
    html5语义化标签
  • Html语义化理解1、什么是HTML语义化?基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等>根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的...
  • 补:html5语义化标签

    2017-03-26 13:22:13
    html5 语义化标签
  • HTML5定义了一系列的新元素,如新语义化标签,智能表单,多媒体标签等,还提供了一些javascript API,如地理定位,重力感应,硬件访问等。可以在浏览器内实现类原生应用,甚至结合canvas我们可以开发网页版游戏。...
  • 通过这样做,你会开始了解如何使用新的元素也在某种程度上使用普通语义 HTML 标签。前言HTML5 将是第一个自 XHTML 1.0 发布以来发布的网页标准语言,而 HTML 4.01,是在 1999 年发布的,你可以看到 HTML5 的工作草案...
  • 问:html5语义化标签对SEO有什么影响?答:html5语义化标签不会对SEO造成重大的影响,它并不会影响你的网站排名以及抓取;语义化标签主要是为了让搜索引擎更加的懂你,更加的明白你的网站;不用html5语义化标签以前...
  • html5语义化标签及优点

    千次阅读 2020-03-03 19:53:10
    html5语义化标签及优点 html5中的语义化标签 < h1~h6 >:标题,< h1 > 与 < title > 协调有利于搜索引擎优化。 < header >:网页头部,通常包括网站标志、主导航、全站链接以及搜索框。 &...
  • html5语义化标签布局兼容性调整header, section, footer, aside, nav, main, article, figure {display: block;}body{margin: 0px;padding : 0px;text-align:center;}header{height: 200px;background-color: white;...
  • 本文主要参考MDN中文文档前言标签语义化是一个老生常谈的问题了,可能很多开发者一直习惯于div+span的开发模式,...但是,标签语义化还有一个好处,那就是便于项目维护,如果是多人开发,或者后人修改前人的html...
  • 本文将为您描述HTML5常用的语义化标签,具体实现方法:快速查询article | aside | nav | section | header | footer架构预览nav定义导航链接的部分在页脚显示一个站点的导航链接,如首页、服务信息页面、版权信息页面等...
  • HTML5 语义化标签

    2020-09-10 17:33:57
    HTML语义化标签 html5 提供了很多语义化标签,如<header> <footer> <aside> <article> <nav> <section> <time> 语义化标签是: 用最恰当的标签来标记内容。 使用语义化的...
  • Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? 那么什么叫做语义化呢...
  • html HTML5语义化标签

    2019-10-17 12:50:29
    有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。 1、header header定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。 在一个文档中,您可以定义多个header...
  • 今天小编带读者们来了解一下HTML5新特性之语义化标签,感兴趣的朋友随小编一起来看看吧。简洁的DOCTYPE:HTML5 只有一个简单的文档类型:,表示浏览器会按照标准模式解析。简单易记的编码类型:你现在可以在meta 标签...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,740
精华内容 23,496
关键字:

html5语义化标签好处