语义错误

块级元素可以包含内联元素和某些块级元素,内联元素不能包含块级元素,只能包含内联元素

页面可能正常解析,但不符合语义。浏览器自带容错机制,对于不规范的写法也能够正确解析,各浏览器的容错机制不同,所以尽量按规范来写;

/*规范的写法*/

<div>
<h2>jikexueyuan</h2>
<p>IT education</p>
</div> /*不规范的写法*/ <span>
<div>wrong</div>
</span>

h1、h2、h3、h4、h5、h6、P标签不能包含块级元素 如div  section等

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
<title></title>
</head>
<body>
<a href="">
<button>click</button>
</a>
<p>
<h3>dsds</h3>
</p>
</body>
</html>

  

行内元素强制转成块级元素,块级元素强制转成行内元素

如下做法是不推荐的:

给 <div> 标签设置 inline-block 属性
给 <span>标签设置 block 属性

li标签可以包含div以及ul,ul的子元素应该只有li

/*规范的写法*/

<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
</li> /*不规范的写法*/ <ul>
<a href="">迷路的a标签</a>
<li></li>
<li></li>
<li></li>
</ul>

  

使用 disabled=false

disabled 属性是用来禁用标签的,一般用于 input 、button等,表示不可点击。

正常的用法是:

<input type="text" name="lname" />
<input type="text" name="lname" disabled="disabled" />
错误的写法:

<input type="text" name="name" disabled="false" />

这里虽然 disabled="false" 语义也代表不禁用,但实际上是被禁用的。

disabled 属性规定应该禁用 input 元素,即只要出现改属性为禁用。<input type="text" name="name" disabled="" />

页面中同一个 ID 出现两次及更多

ID应该是dom元素唯一标示符;

错误的使用 role 属性

role更多的是用来增强语义性,当现有的html标签不能充分表达语义性的时候,就可以借助role来说明。通常它更多的出现在一些自定义的组件上。比如html中没有tree标签,我们就可以把他的role设置为tree,这样可以增强组件的可访问性、可用性和可交互性。

html---规范、细节积累-01的更多相关文章

  1. html细节积累-01

    语义错误 块级元素可以包含内联元素和某些块级元素,内联元素不能包含块级元素,只能包含内联元素 页面可能正常解析,但不符合语义.浏览器自带容错机制,对于不规范的写法也能够正确解析,各浏览器的容错机制不同 ...

  2. python编程规范系列--建议01~07

    本系列来自<编写高质量代码 改善python程序的91个建议>的读书笔记整理. 本书主要内容     1)容易被忽视的重要概念和常识,如代码的布局和编写函数的原则等:     2)编写py ...

  3. 聊聊自学大数据flume中容易被人忽略的细节

    ​前言:老刘不敢保证说的有多好,但绝对是非常良心地讲述自学大数据开发路上的一些经历和感悟,保证会讲述一些不同于别人技术博客的细节. 01 自学flume的细节 老刘现在想写点有自己特色的东西,讲讲自学 ...

  4. html5基础知识点

    1.WEB基础知识 1.WEB 与 Internet 1.Internet 互联网 若干台计算机 通过 网线 所连接而成的物理设备 主要服务: 1.Telnet 2.Email 3.WWW(Word ...

  5. 去BAT,你应该要看一看的面试经验总结

    我去年12月份从上一家公司离职,一直到今年3月份,基本上都在面试中度过来的. 先交代下背景:坐标上海,做技术开发,我本人面试的职位是linux服务器开发,最倾向的职位是服务器开发主程或技术经理.我本人 ...

  6. 微冷的雨Java基础学习手记(一)

    使用Java理解程序逻辑 之凌波微步 船舶停靠在港湾是很安全的,但这不是造船的目的 北大青鸟五道口原玉明老师出品 1.学习方法: 01.找一本好书 初始阶段不适合,可以放到第二个阶段,看到知识点时,要 ...

  7. S1java基础学习笔记

    第一章  Java基础 程序目标:减轻现实生活中一类人的工作量,提高工作效率. 学员最终可以书写系统: 超市管理系统,POS机系统等 入库单 销售单 01.课程重点 五大重点: 01.分支(选择)结构 ...

  8. HTML标签----图文详解

    国庆节快乐,还在加班的童鞋,良辰必有重谢! 本文主要内容 头标签 排版标签:<p>     <br>     <hr>     <center>     ...

  9. [Android] 关于系统工具栏和全屏沉浸模式

    随着应用程序的一些深入设计,大家总想要更好的界面和体验,所以有些东西并不能只是知道方法就结束了,是得要去深入研究研究的.通过这个过程我觉得,从应用层面来讲,想实现一个功能很简单,但若想实现的好,就要去 ...

随机推荐

  1. 【hdu5306】Gorgeous Sequence 线段树区间最值操作

    题目描述 给你一个序列,支持三种操作: $0\ x\ y\ t$ :将 $[x,y]$ 内大于 $t$ 的数变为 $t$ :$1\ x\ y$ :求 $[x,y]$ 内所有数的最大值:$2\ x\ y ...

  2. P2812 校园网络【[USACO]Network of Schools加强版】

    题目背景 浙江省的几所OI强校的神犇发明了一种人工智能,可以AC任何题目,所以他们决定建立一个网络来共享这个软件.但是由于他们脑力劳动过多导致全身无力身体被♂掏♂空,他们来找你帮助他们. 题目描述 共 ...

  3. Day20-初识Ajax

    想要实现的功能:点击提交以后,让数据发到后台进行验证,但是页面不刷新.悄悄提交用Ajax. 那么返回的字符串怎么样展示到前端HTML页面呢?可以在HTML中写个标签,定义一个选择器. 利用$('#id ...

  4. Django模板语言循环字典

    1. 对于字典,可以有下列用法: {% for row in user_dict.keys %} {% for row in user_dict.values %} {% for row in use ...

  5. [AT2000] [agc002_f] Leftmost Ball

    题目链接 AtCoder:https://agc002.contest.atcoder.jp/tasks/agc002_f 洛谷:https://www.luogu.org/problemnew/sh ...

  6. BZOJ1176:[Balkan2007]Mokia——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1176 Description(题面本人自行修改了一下) 维护一个W*W的矩阵,初始值均为0.每次操作 ...

  7. Redis的String、Hash类型命令

    String是最简单的类型,一个Key对应一个Value,string类型是二进制安全的.Redis的string可以包含任何数据,比如jpg图片或者序列化的对象.最大上限是1G字节.    Hash ...

  8. UESTC--1682

    原题链接: 分析:求最小周期的应用. #include<cstdio> #include<cstring> #include<cmath> #include< ...

  9. js浏览器调试方法

    chrome浏览器可在需要断点的地方写一个关键字 "debugger",这样在 js 运行到这里的时候会停止继续运行,并可以查看当前状态

  10. Android缓存

    一个利用内存缓存和磁盘缓存图片的例子 public class BitmapCache { public static final String TAG = "debug"; pr ...