html为什么尽量使用含语义的标签

前端经典面试题：如何理解 HTML 语义化？

本文最初于 2018-09-21 发布于知乎 ,后在 <重学前端> 专栏的学习中,重新复习整理,发布于 Github 上,并计划写一系列前端学习相关的文章.欢迎 star . HTML 语义化简单来说,我们可以理解为:用正确的标签做正确的事情. 例如: 段落用 p 标签,标题用 h 系列标签,边栏用 aside 标签,主要内容用 main 标签.正确使用语义标签可以带来很多好处. 为什么要关注 HTML 语义化?(为什么要使用语义类标签?) 对人: 增强可读性,对开发者更友好,在没有 CS

Html块标签、含样式的标签、语义化的标签：

Html块标签: (1)<div>标签块元素,表示一块内容,没有具体的语义 (2)<span>标签行内元素,表示一行中的一小段内容,没有具体的语义 <p>标签默认是带空行的样式的 <div>标签默认是不带空行的样式的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit

HTML语义化标签（二）

为了保证网页去样式后的可读性,并且又符合web标准,应该注意一下几点: 1 尽可能少的使用无语义的标签div和span: 2 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利: 3 不要使用纯样式标签,如:b.font.u等,改用css设置. 4 需要强调的文本,可以包含在strong或者em标签中,strong默认样式是加粗,而em是斜体: 5 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用

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

<header></header> 页眉主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合一个标题和一个子标题,或者标语的组合 <hgroup> <h1>妙味课堂</h1> <h2>带您进入富有人情味的IT培训</h2> </hgroup> <nav></nav> 导航 (包含链接的的一个列表) <n

html语义化标签

1. HTML语义化的理解根据内容的结构化,选择合适的标签,便于开发出读者阅读.写出更优雅的代码,让浏览器的爬虫和机器很好地解析. 好处: (1). 为了在没有css时,也可以很好地呈现出内容结构,代码结构. (2). 提升用户体验:title.alt用于解释名词或解释图片信息.label标签的活用. <label> 标签为 input 元素定义标注(标记). label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发此控件.就

html块、含样式的标签

html块 1.div标签块元素,表示一块内容,没有具体的语义. 2.span标签行内元素,表示一行中的一小段内容,没有具体的语义. 含样式和语义的标签 1.em标签行内元素,表示语气中的强调词 2.i标签行内元素,原本没有语义,w3c强加了语义,表示专业词汇 3.b标签行内元素,原本没有语义,w3c强加了语义,表示文档中的关键字或者产品名 4.strong标签行内元素,表示非常重要的内容语义化的标签语义化的标签,就是在布局的时候多使用语义化的标签,搜索引擎在爬网的时候能认识这些

笔记二:常用的h5语义化标签

0.前言: 所谓语义化标签就是一种我们仅通过标签名就能判断出该标签内容的语义的标签,见名知意. 总结这部分内容,主要是为了能从繁琐的div嵌套div中,改成带有h5标签码.这样更有利于读写代码. 人很容易直接或间接的呆在舒适区,当我写惯了h4的代码之后,不愿意用h5标签,为了杜绝后患,遂决定总结以下内容. 1.header: 被放置在页面或者页面中某个区块元素的顶部,包含整个页面或者区块的标题.简介等信息,起到引导与导航的作用. 如:小米商城的导航栏整体,width:100% header

html5语义化标签——回顾

html5 头部结构 <!doctype html> <meta charset=“utf-8”/> <header></header> 页眉主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合一个标题和一个子标题,或者标语的组合 <hgroup> <h1></h1> <h2></h2> </hgroup

HTML块,含样式的标签

HTML块,含样式的标签 html块 div标签块元素,表示一块内容,没有具体的语义. span标签行内元素,表示一行中的一小段内容,没有具体的语义. 含样式和语义的标签 em标签行内元素,表示语气中的强调词 i标签行内元素,原本没有语义,w3c强加了语义,表示专业词汇 b标签行内元素,原本没有语义,w3c强加了语义,表示文档中的关键字或者产品名 strong标签行内元素,表示非常重要的内容 del 删除线语义化的标签语义化的标签,就是在布局的时候多使用语义化的标签,搜索引擎在爬

前端面试题-HTML语义化标签

一.HTML5语义化标签标签描述 <article> 页面独立的内容区域. <aside> 页面的侧边栏内容. <bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置. <command> 命令按钮,比如单选按钮.复选框或按钮 <details> 用于描述文档或文档某个部分的细节 <dialog> 对话框,比如提示框 <summary> 标签包含 details 元素的标题 <figure> 规定独

html5语义化标签使用规范

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

HTML5 结构性标签行内语义性标签

结构性标签: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>旭宝爱吃鱼</title> </head> <body>  <article>  <header> <h1>旭宝爱吃鱼<

HTML5语义化标签

在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~~ 谁不想简单轻松一些呢... 语义化标签有2种,一种是单纯语义化的,无功能,二种是语义化,且有功能的. 一:无功能,语义化标签 1.1 - <header></header> SM:也就是我们的头部标签, 一般用于网站头部内容 1.2 <footer></foo

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

解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5Tags=['header' ,'footer','article','nav' ,'section','aside'] for(var i=0;i<html5Tags.length;i++){ document.createElement(html5Tags[i]); } </script>

HTML5之语义化标签

HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分.但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”. 看下图没有用div标签来布局 html5的布局嗯,如上图那个页面结构没有一个div,都是采用html5语义标签(用哪些标签,关键取决于你的设计目标

浅谈html语义化标签,Html5新增语义化标签

Html语义化标签,Html5新增语义化标签自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如, 网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签. 文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等. 2.为啥使用语义

Html5新增的语义化标签（部分）

2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习及使用: 1.<header></header> 页眉:主要用于页面的头部的信息介绍,也可用于板块头部: 2.<hgroup></hgroup> 页面上的一个标题组合:一个标题和一个子标题,或者标语的组合: 3.<nav></nav> 导

html5语义化标签总结二

HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充,譬如图片.文本.代码.表单.交互等等.所以接下来我们就来详细了解HTML5的新增加的和重新定义的文本元素标签.分组元素标签等其他元素标签. 文本字体元素文字对SEO影响很大,而HTML5对一些文本字体元素的语义又重新定义了一遍,也增加了一些新的.那我们就来重新认识他们. a(anchor 的缩写

转html5语义化标签总结一

HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分.但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”. 看下图没有用div标签来布局 html5的布局嗯,如上图那个页面结构没有一个div,都是采用html5语义标签(用哪些标签,关键取决于你的设计目标

HTML5语义化标签重构页面

在HTML5未出现之前我们都用div+css来构建页面,比如<div id=”header”>,div的滥用,使得代码的可读性和可维护性很差,现在用本文来介绍一下用HTML5′干净的’语义化标签,更简单的语法来重构一下页面. 最基本的标签 Header:文档的头部,主要包含页面的标题或者导航部分. Section: 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分.用于定义页面中的主题栏目等,比如选项卡的各个部分 Nav:导航,可

HTML5学习之语义化标签（一）

一.为什么HTML5要引入新语义标签在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上述缺点,HTML5新增了很多新的语义化标签. 二.引入语义化标签的优点引入语义化标签的好处主要有下列三点: 比<div>标签有更加丰富的含义,方便开发与维护搜索引擎能更方便的识别页面的每个部分方便其他设备解析(如移动设备.盲人阅读器等) 三.标签详解所谓语义化标签就是一种我们仅通过标签名就

html为什么尽量使用含语义的标签

热门专题