内容类型决定使用的语义标签 在网页中某种类型的内容必定需要某种特定的HTML标签来承载，也就是我们常常提到的根据你的内容语义化HTML结构。...加强“不可见”内容的可访问性 背景图上的文字应该同时写在html中，并使用css使其不可见，有利于搜索引擎抓取你的内容，也可以在css失效的情况下看到内容。...适当使用实体 以实体代替与HTML语法相同的字符，避免浏览解析错误。...常用HTML字符实体（建议使用实体）：字符名称实体名实体数"双引号""&&符&&右尖括号（大于号）>> 空格
规范 文档规范 HTML5的文档类型声明： ---- 语义化 我们一直都在说语义化编程，语义化编程，但是在代码中很少有人完全使用正确的元素。...使用语义化标签也是有理由SEO的。 语义化是指：根据元素其被创造出来时的初始意义来使用它。 意思就是用正确的标签干正确的事，而不是只有div和span。...this 的语义在此有些误导。...---- 使用子选择器 很多前端开发人员写选择器链的时候不使用 直接子选择器（注：直接子选择器和后代选择器的区别）。 有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。
一、HTML5语义化标签 标签 描述 页面独立的内容区域。 页面的侧边栏内容。 允许您设置一段文本，使其脱离其父元素的文本方向设置。...2.2 页眉 （1）HTML5 规范描述为“一组解释性或导航型性的条目”，通常有网站标志、主导航、全站链接以及搜索框。...（3）HTML5 规范不推荐对辅助页脚链接使用 nav，除非页脚再次显示顶级全局导航、或者是招聘信息等重要链接。...（2）HTML5 规范声明 标签适用于自包含的窗口小部件:股票行情，计算器，钟表，天气窗口小部件等。...（2）根据 HTML 4.01 规范，q 元素应当使用分界引号来呈现，就是说，q 元素包含的文本必须以引号来开始和结束。
尽可能少的使用无语义的标签 div 和 span； 2. 在语义不明显时，既可以使用 div 或者 p 时，尽量用 p, 因为 p 在默认情况下有上下间距，对兼容特殊终端有利； 3....为了更好的实现语义话，HTML5新增了如下语义标签：
一、HTML语义化的背景 HTML结构语义化，是近几年才提出来的，对比之前的 HTML 结构，大多是一堆没有语义的标签。...用的最多的就是 DIV+CSS，为了改变这种现状，开发者们和官方提出了 HTML结构语义化的概念，并且在 HTML5 添加了很多语义化标签。...二、HTML语义化的概念 语义化是指根据内容的结构，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。...四、HTML语义化的作用 4.1 页面结构清晰 去掉或 CSS 样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。...五、HTML语义化的方法 （1）根据文档上下文结构合理的选用最适合表达当前语义的标签； （2）尽可少使用无语义的标签 和 ； （3）不要使用带有样式的标签，比如： 、 <u
任何代码编程都有各自特点的常用命名规范，div+css页面设计也不例外。遵守常用的css命名规范有利于代码的升级和扩展，也有利于让别人读懂你的css代码，让你的页面显得清晰有条理。 ?...css文件名命名规范 模块：module.css 基本共用：base.css 布局、版面：layout.css 主题：themes.css 专栏：columns.css 文字：font.css 表单：forms.css...补丁：mend.css 打印：print.css 页面结构元素div命名规范 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column....left {float:left;} .bottom {float:bottom;} 标题栏样式命名-使用“类别+功能”的方式命名 .barnews { } .barproduct { } 注释书写规范...大家在日常的页面设计中要逐步养成规范命名的好习惯。
HTML语义化 每日更新前端基础，如果觉得不错，点个star吧 ?...而不是使用+css 语义化好处 使HTML结构变的清晰，有利于维护代码和添加样式 通常语义化HTML会使代码变的更少，使页面加载更快 即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构...和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，爬虫可以依赖于标签来确定上下文和各个关键字的权重 注意语义化编写 尽可能少的使用无语义的标签和 不要使用纯样式标签，如是纯样式标签... 定义文档中的节，表示HTML文档中包含的独立部分。 表示文档的一部分，其内容仅与文档的主要内容间接相关,通常显示为侧边栏。...弃用的HTML元素 这些是旧的HTML元素，已弃用，不应继续使用。 不要在新项目中使用它们，应尽快在旧项目替换它们，即使它们现在依然可以使用。
为什么会出现语义化 其实 HTML 在刚开始设计出来的时候就是带有一定的「语义」的，包括段落、表格、图片、标题等等，但这些更多地只是方便浏览器等 UA 对它们作合适的处理。...但逐渐地，机器也要借助 HTML 提供的语义以及自然语言处理的手段来「读懂」它们从网上获取的 HTML 文档，但它们无法读懂例如「红色的文字」或者是深度嵌套的表格布局中内容的含义，因为太多已有的内容都是专门为了可视化的浏览器设计的...怎样才是语义化 具体的语义化标签探析 本文主要是为了探析部分HTML标签在语义化中的差别。同时也探索HTML5新加入的语义化标签。.... // HTML4意思为i标签仅仅只是将字体显示为斜体，无任何语义化意思 HTML5的定义: The i element now represents a span of text in an alternate...除了这些html4中的标签以外，很多html5新增标签基本上都是语义化标签 html5新增标签 参考链接 顾轶灵-知乎 WEBING-segmentfault Lxxyx-segmentfault
1 前言 HTML作为描述网页结构的超文本标记语言，在百度一直有着广泛的应用。本文档的目标是使HTML代码风格保持一致，容易被理解和被维护。...解释： 不允许 class 只用于让 JavaScript 选择某些元素，class 应该具有明确的语义和样式。否则容易导致 css class 泛滥。...详细的标签嵌套规则参见HTML DTD中的 Elements 定义部分。 [建议] HTML 标签的使用应该遵循标签的语义。...解释： 下面是常见标签语义 p - 段落 h1,h2,h3,h4,h5,h6 - 层级标题 strong,em - 强调 ins - 插入 del - 删除 abbr - 缩写 code - 代码标识...解释： 在兼容性允许的情况下应尽量保持语义正确性。对网格对齐和拉伸性有严格要求的场景允许例外，如多列复杂表单。 [建议] 标签的使用应尽量简洁，减少不必要的标签。 示例： <!
前言 本文档的目标是使HTML代码风格保持一致，容易被理解和被维护 2. 通用 2.1. DOCTYPE [强制] 使用 HTML5 的 doctype 来启用标准模式。...根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。示例： <!...例如：div 不得置于 p 中，tbody 必须置于 table 中 参考：http://jkorpela.fi/html5.dtd [建议] HTML 标签的使用应该遵循标签的语义 示例： <!...示例： 提交 取消 参考资料： 百度规范： https://github.com.../fex-team/styleguide/blob/master/html.md BootStrap规范： https://codeguide.bootcss.com/#html Best Practices
source=cloudtencent 什么是语义化？ 简单了来说就是，当网页去掉 CSS 样式时，页面能呈现出来清晰的结构。 语义化的核心作用：提升代码可读性，便于团队开发和维护。...以下是语义化的 HTML 标签结构（部分语义化标签）： 假设我要编写一个这样的布局 不使用语义化是这样的 ... 使用语义化是这样的 从上面的例子可以看出来，去除页面样式后，不使用语义化一堆...而使用语义化标签后，就能够清晰看出包含了头部模块、导航模块、主要内容展示模块、侧边栏模块、底部模块等。
对于什么时候使用img标签，什么时候 使用背景图片，并不是很清楚我们应该根据HTML的语义来判断。如果图片作为HTML的一 部分，并且想要被捜索引擎识别，则应该使用img标签，例如常见的各种图片列表。...image.png 【总结】 以上只是列举了在实际开发中比较常见的语义标签，其实HTML5新增了很多结构语义 标签，例如header、nav、aside、footer、article、section等。...如果想要实现语义更为良好 的页面，我们也应该去关注这些新增的标签。不过结构语义标签是HTML5的内容，因此这里不展开介绍。 （七）语义化验证 前面这几节，我们介绍了页面语义化需要注意的各个地方。...也就是说，不同的HTML标签可以通过不同的CSS来实现相同的效果。但 是“一个语义良好的页面”跟“一个语义不好的页面”在去除样式之后的表现却是截然不同的。...image.png 语义不好的页面和语义好的页面 从上面两张图我们可以看出：一个语义良好的页面在“CSS裸奔”之后，可读性也是非 常高的。
（二）标题语义化 h1 - h6是标题标签，h表示“header”。h1~ h6在HTML语义化中占有极其重要的地位。 h1 ~ h6按照标题的重要性依次递减，其中h1重要性最高，h6重要性最低。...我们一定要记住，HTML关注的是结构(语义)，CSS关注 的是样式，结构跟样式应该分离。 4.不要用div来代替h1~h6 从语义上来说，一个页面的标题应该使用h1〜h6标签，不要使用div来代替。...（三）图片语义化 在HTML中，我们使用img标签来表示图片。对于图片的语义化，我们从以下两个方面 来深入探讨一下。 （1） alt属性和title属性。... HTML入门教程 但是这种实现方式的语义并不好...在HTML 5中，引入了 figure和figcaption两个元素 来增强图片的语义化。
HTML代码规范 我们知道，前端工程师入门容易，通过学习基本的HTML和CSS就能在浏览器上看到实际的效果，可是要写好的HTML，就不是那么容易了。...这里将和大家分享HTML规范，希望大家读完之后都能够有所收获。...本文将主要以下面三个部分展开： HTML整体结构 HTML代码格式 HTML内容语义 第一部分：HTML整体结构 1.HTML基础设施 文件应以<!DOCTYPE........对于一个语义化的内部标签，应该尽量避免使用className。 第二部分：HTML代码格式 1.说明文案的注释方法 开始注释： 结束注释：<!...第三部分：HTML内容语义 加强资源型内容的可访问性和可用性。 比如在img标签内加入alt属性，在audio内加入文案和链接等等。
什么是html html指的是超文本标记语言(Hyper Text Markup Language)，它包含一系列的标签，我们把这些标签叫做HTML标签，它是HTML语言中最基本的单位、最重要的组成部分...声明必须是 HTML 文档的第一行，位于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 lang 强烈建议为根元素指定属性，从而为文档设置正确的语言。...在项目开发前，制定一套行之有效的编码规范，每个项目组成员都要按这个规范来编码。 块级元素和行内元素 说到代码规范，我先来说说html的块级元素和行内元素。...尽量使用语义化的标签，例如header,footer,nav,article,filedset,section等，避免全页使用div布局。 7. 尽量减少标签嵌套。 8....尽量减少classname，采用语义化标签来代替。 9. 属性值使用双引号，不要使用单引号。 10.
HTML规范 - 整体结构 HTML基础设施 文件应以“”首行顶格开始，推荐使用“”。...比如在这样一个列表中，li标签中的itm应去除： HTML规范 - 代码格式...规范 - 内容语义 内容类型决定使用的语义标签 在网页中某种类型的内容必定需要某种特定的HTML标签来承载，也就是我们常常提到的根据你的内容语义化HTML结构。...HTML规范 - 邮件内容 邮件环境 邮件内容所在上下文或者说所在外部容器（以下简称环境）都是由邮箱服务商决定的，这就要求邮件内容需要在任何一种情况下都要正确显示。...解：所以我们只能使用行内style来确保我们的效果，并且在内容根节点上设置基础style，并且尽量使用div、span等无语义标签。 <!
前言 前端规范主要是为了让代码能有更好的可读性以及优雅性。不要为了规范而去规范，使用某些花里胡哨的写法，本质上是为了代码的维护性更强一些，所以才会制定规范来约束。...~ 推荐-Vue-Router写法 推荐-Vue项目目录结构 推荐-Vue实例选项顺序 推荐-优雅引用字体 推荐-200错误统一处理 前后端分离接口规范 前端工程工具链 前端Git规范 前端JS规范...前端CSS规范 1....前端CSS规范 前端CSS规范 分号 每个属性声明后面都要加分号。...CSS规范指南](https://www.cnblogs.com/jaycethanks/p/13216957.html)
HTML基础设施 NEC：更好的CSS方案 <meta name="keywords"...结构顺序和视觉顺序基本保持一致 按照从上至下、从左到右的视觉顺序书写HTML结构。 有时候为了便于搜索引擎抓取，我们也会将重要内容在HTML结构顺序上提前。...如果可以写成那么就不要写成 如果结构已经可以满足视觉和语义的要求，那么就不要有额外的冗余的结构。...比如不要出现这种情况： 对于一个语义化的内部标签，应尽量避免使用className。
说明文案的注释方法 采用类似标签闭合的写法，与HTML统一格式；注释文案两头空格，与CSS注释统一格式。 <!...-- NAV1 NAV2 --> HTML...常用的标签 标签 语义 嵌套常见错误 常用属性（加粗的为不可缺少的或建议的） 超链接/锚 a不可嵌套a href,name,title,rel,target 换行 <button
，不符合语法规范的内容，浏览器会自动修正 但是有些情况会修正错误 F12会跳出开发者控制台 自结束标签： html5中 xhtml中(最后有反斜杠) HTML标签可以嵌套...中一共有六级标签：h1~h6 h1最大，为一级；h6为最小，为6级 一般不用，主要是css来修改 使用HTML标签时，关心的是标签的语义，我们使用的标签都是语义化标签 6级标签中，h1最重要，表示一个网页中的主要内容...article>都可以插入小的 表示一个独立的区块(其它) 上面的标签都不能表示时，使用section 例如header里面放三个section 没有语义...strong> 表示强调，重要内容 是整体的强调作用 表示引用 短引用 会有引号，但是不会缩进 块引用(长引用) 会缩进，没有引号 行内元素，没有任何的语义...，一般用于在网页中选中文字 浏览器的自动修正 浏览器在解析网页时，会对网页中不符合规范的内容进行修正 比如标签写在了根的外部 p元素中嵌套了块元素 根元素中出现了head和body以外的子元素注意
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
