html5用户自定义错误信息,HTML_HTML5设计网页时应该避免的一些小错误,在这篇文章中,我将给大家分 - phpStudy...
在这篇文章中,我将给大家分享html5构建页面的小错误和不好的实践方法,让我们在以后的工作中避免这些错误。
不要把 当成容器来定义样式
我们经常看到的一个错误,就是武断的将
现在我看到了下面的代码样子:
直观的看,上面的例子是错误的: 并不是一个容器.元素是有语意的区段,帮助构建文档大纲。它应该包含标题。如果你要寻找一个可以包含页面的元素(不论是 HTML 或者 XHTML ),通常的做法是直接对标签定义样式就像Kroc Camen描述的那样子,如果你还需要额外的元素来定义样式,使用
记住这点,这里我们重新修正了上面的例子,通过使用两个新角色。(你是否需要额外的
只在需要的时候使用 和标签
使用标记的时候写入了一些并不需要的现象这是不合理的。不幸的是,经常发现大家在并不需要的地方使用和标签。你可以跟进我们关于和的最新进展,下面是我的简单归纳:
元素通常是通常作为一组解释或者导航辅助工具,通常包含section的标题.
元素会将当有副标题\子标题,各类标识文字时,对
到
标题进行群组,将其作为section的标题.
过度使用的
你肯定知道,在一个文档中,可以使用多次标签,下面就是一种很受大家欢迎的模式:
如果你的标签只包含一个标题元素时,就不要使用标签了.标签肯定会让你的标题在文档大纲中显现出来,而且因为并不包含多重内容(就像定义中描述的那样子),我们为何要增加而外的代码呢?应该像下面这样简单才可以:
不合理使用
在标题的这个主题上,经常看到使用的错误案例.在下面这种情况下你不能将标签和标签一起使用:
这里只有一个标题,
或者本身就够了(比如:不需要)
第一种情形看上去是下面的样子:
这种情况下,将移除,只保留标题就好.
第二种情况也是包含了他们并不需要的标签.
当标签的子元素只有的时候,为什么我们还需要一个额外的?如果没有额外的元素放到中(比如的兄弟元素),我们直接将元素去掉就好.
不要将所有的链接列表都放到标签
在HTML5新增的30个元素中(在我们写这篇文章的时候),我们在构建更具语义\结构化的标签的时候,我们的选择变得太丰富.也就是说我们对现在给我们提供的这些超级有语义的标签,我们可能会滥用.就是一个很悲剧的例子.在规范中的描述是这样的:
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
Note: Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.
WHATWG HTML spec
这里面的关键词是”重要”导航.我们可能会对”重要”有不同的定义,但是我的理解是:
主要导航
网站搜索
二级导航(这个能是有争议的)
页面内链接(比如一篇很长的文章)
虽然并没有对错之分,但根据我的理解和一个民意投票让我觉得在下面这些情形下,我不会使用标签:
翻页
社交类的链接(虽然有些社交类的链接也是主要的链接,比如关于我About me和品味Flavours )
博客文章的标签
博客文章的分类列表
第三级导航
大页脚
如果你不能确定是否使用,那就先对你问一下下面的几个问题:“者是否是一个主要链接?”,你可以根据下面的几个因素来回答你刚才的问题:
如果用和标题标签能够解决你的问题,那就不要去使用–Hixie on IRC
你是不是为了增加可访问性而增加的一个快捷跳转链接呢?
如果上面的回答都是“不”,那可能就不适合使用.
并不是所有的图片都是figure(注:比较难理解阿,image=图片,figure=图形)
之前,我曾经说过不要写那些不需要的标签。这个错误也是相同的。我经常看到一个网站上的每张图片都有
在规范中关于
如果仅仅是一张表现类的图片而且和文档中其他的内容没有关系的话,那就不需要使用
你的标志不是一个
将上面的延伸开来,对你的logo也是这样。下面是两组我找到的有规律的代码片断:
这里就不需要说啥了,这是很明显的错误,可能你认为我们说的是不是将logo放在H1标签里面,但是我们在这里并不讨论这个问题。让我们迷惑的是
figure只能用在标签上的误解
另一个对
这里有一篇更深入讲解
不要去使用那些不必要的type属性
这可能是我们最常见的一些问题,它们并不是真正的错误,但我觉得我们的最好实践还是尽量避免这种模式。
在HTML5中,我们并不需要给
现在我们可以写成下面的样子:
你也能够对编码的设置作出省略。Mark Pilgrim在Dive into HTML5的语义化一章中作出了解释。
不要包含错误的标单属性
你可能发现引入了很多新的表单属性。现在我就给大家讲讲一些不合适的使用。
布尔值属性
新引入的标签属性有几个是布尔类型的,它们的标签行为基本接近。这些属性包括:
autofocus
autocomplete
required
坦白的说,下面的这种情况对我来说并不常见,但我们从 required 作为例子,如下:
基本上看,这段代码并不会带来危害。客户端对 HTML的解析遇到 required 标签属性时,他的功能就会生效。但是当我们将代码修改,录入 required=”false” 的情况呢?
解析的时候依然会遇到 required 属性,虽然你希望加入的行为是 假,它依然会被解析成 真。
这里有三种合理的方法让布尔值生效。(第二种和第三种方案只有你在写 XHTML 解析的时候需要)
我们上面的例子可以写成下面的样子:
总结
对我来说,我无法将所以得蹩脚的代码模式都展示在这里,但是上面说的这些都是我们经常遇到的。
html5用户自定义错误信息,HTML_HTML5设计网页时应该避免的一些小错误,在这篇文章中,我将给大家分 - phpStudy...相关推荐
- Python-Flask入门,静态文件、页面跳转、错误信息、动态网页模板
Python-Flask入门及路由基础请参看Python-Flask入门,路由route.项目启动.修改网址端口.获取URL地址和参数.Form数据_无敌路路帅气的博客-CSDN博客 本节重点讲述静态 ...
- python的三大错误类型_学习Python时要避免的三个错误
当你做错事时,承认错误并不是一件容易的事,但是犯错是任何学习过程中的一部分,无论是学习走路,还是学习一种新的编程语言都是这样,比如学习 Python. 为了让初学 Python 的程序员避免犯同样的错 ...
- c 连接mysql错误信息_使用C语言访问MySQL数据 —— 连接和错误处理
2011-05-09 wcdj 可以通过许多不同的编程语言来访问MySQL,例如,C,C++,Java,Perl,Python,Tcl,PHP等.本文主要总结使用C语言接口如何访问MySQL数据. ( ...
- 服务器收集错误信息0不动,win10系统提示“我们只收集某些错误信息”的解决方案...
为了获得更好的体验,一位用户将电脑系统更新升级到了windows10正式版.不过,电脑后来却出现了错误提示"你的电脑遇到问题,需要重新启动.我们只收集某些错误信息,然后你可以重新启动.&qu ...
- php如果登录失败弹出失败,登录失败或出现错误信息(无跳转、提示失败、出现错误信息)的解决方法...
关于在QQ开放平台申请QQ帐号登陆,审核结果提示"登录失败或出现错误信息(无跳转.提示失败.出现错误信息)"的解决方法, 需要解决QQ登录平台接口 OAuth2.0 协议需要你的服 ...
- 设计html网页时需要遵循的语言规范,CSS设计网页时的一些常用规范
1CSS命名规范 CSS命名规范 一.文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print ...
- dw支持css3 html,通过DW设计网页时组织CSS的建议
应该连接到External CSS还是导入? 创建外部样式表以后,你需要把它附加在每个页面上(或是模板).要这样做,可以在CSS面板上淡季"附加样式表(Attach Style Sheet) ...
- Axure设计网页时,需要注意的尺寸设置。
[页面尺寸]网页的尺寸受限于两个因素:一个是显示器屏幕(显示器现在种类很多,17寸为主流,正在朝19寸及宽屏的方向发展,但目前也有为数不少的15寸显示器)另一个是浏览器软件(我们常用的IE.遨游.Fr ...
- js post中服务器500错误信息,node.js - Node Express Post 500(内部服务器错误)jquery-3.4.1.min.js - 堆栈内存溢出...
我一直在研究 node js/express js 应用程序有一段时间了. 我有从 jquery $ajax 调用中获取和发布的工作. 出于某种原因,我有一个帖子"loginUser&quo ...
最新文章
- ASP.NET的WebFrom组件LinkButton编程
- XDP/eBPF — 基于 eBPF 的 Linux Kernel 可观测性
- 【计算机网络】应用层 : 网络应用模型 ( 应用层概述 | 客户端 / 服务器 模型 | P2P 模型 )
- office365加速解决方案
- Android中的ListView
- feign调用soap_Spring Cloud 组件 —— feign
- 【招聘(上海)】东方财富证券招聘.net开发
- 把旧系统迁移到.Net Core 2.0 日记(2) - 依赖注入/日志NLog
- json qbytearray 串 转_JSON数据采集网关,json转Modbus RTU串IO口RS485转4~20mA边缘计算智能终端...
- C# 反射 (Reflect)
- 计算机一级表格样式在哪儿,word表格样式在哪 word表格样式在哪里
- 030 Substring with Concatenation of All Words 与所有单词相关联的字串
- PostgreSQL 10.1 手册_部分 III. 服务器管理_第 26 章 高可用、负载均衡和复制_26.4. 日志传送的替代方法...
- Linux下ioctl函数理解
- linux创建新用户及权限
- centos 7的systemctl
- DFA算法实现 敏感词过滤
- java碰碰球历险记下载_【Java写的碰碰球游戏(2) 】
- “鬼影”浅析 - 反病毒,信息安全,网络安全,反木马,病毒资讯平台,安全解决方案,电脑使用技巧,杀毒软件交流,anti-virus,民间反病毒联盟
- 风尚云网学习-h5的input:type属性的image属性