语义错误

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

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

/*规范的写法*/

<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" />
错误的写法：

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

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

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

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

错误的使用 role 属性

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

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

html---规范、细节积累-01
语义错误块级元素可以包含内联元素和某些块级元素,内联元素不能包含块级元素,只能包含内联元素页面可能正常解析,但不符合语义.浏览器自带容错机制,对于不规范的写法也能够正确解析,各浏览器的容错机制不同 ...
聊聊自学大数据flume中容易被人忽略的细节
前言:老刘不敢保证说的有多好,但绝对是非常良心地讲述自学大数据开发路上的一些经历和感悟,保证会讲述一些不同于别人技术博客的细节. 01 自学flume的细节老刘现在想写点有自己特色的东西,讲讲自学 ...
去BAT，你应该要看一看的面试经验总结
我去年12月份从上一家公司离职,一直到今年3月份,基本上都在面试中度过来的. 先交代下背景:坐标上海,做技术开发,我本人面试的职位是linux服务器开发,最倾向的职位是服务器开发主程或技术经理.我本人 ...
[Android] 关于系统工具栏和全屏沉浸模式
随着应用程序的一些深入设计,大家总想要更好的界面和体验,所以有些东西并不能只是知道方法就结束了,是得要去深入研究研究的.通过这个过程我觉得,从应用层面来讲,想实现一个功能很简单,但若想实现的好,就要去 ...
17.centos7基础学习与积累-003-命令练习01
1.从头开始积累centos7系统运用大牛博客:https://blog.51cto.com/yangrong/p5 linux命令的学习: 创建目录:mkdir mkdir /data mkdir ...
19.centos7基础学习与积累-005-命令总结01
从头开始积累centos7系统运用大牛博客:https://blog.51cto.com/yangrong/p5 1.查看命令帮助的方法: --help 适用于一般命令,非内置命令 man 适用于 ...
鸿蒙内核源码分析(文件句柄篇) | 深挖应用操作文件的细节 | 百篇博客分析OpenHarmony源码 | v69.01
百篇博客系列篇.本篇为: v69.xx 鸿蒙内核源码分析(文件句柄篇) | 深挖应用操作文件的细节 | 51.c.h.o 文件系统相关篇为: v62.xx 鸿蒙内核源码分析(文件概念篇) | 为什么说 ...
SolidWorks知识积累系列-01
Solidworks学习 1. 基本知识点总结基准视图主视图:从前往后看,前视基准俯视图:从上往下看,上视基准侧视图:从右向左看,右视基准草图要求单封闭性,草图要依附于某个位置绘制大概形 ...
java积累的细节问题
一.将几个数字进行拼接,拼接成字符串一定要将""放到几个数字之前,否则就会把数字相加之后的数转化成字符串如你需要拼接年份,月份,和日如果:2018+12+13+"& ...

随机推荐

iOS oc和swift中协议的使用
创建一个空的工程在工程中我们新建一个类继承与NSObject 定义一个协议‘ @protocol UpdateAlertDelegate <NSObject> //这里的红色字体就是我 ...
Java 的String类
String类 1.String对象的初始化由于String对象特别常用,所以在对String对象进行初始化时,Java提供了一种简化的特殊语法,格式如下: String s = “abc”; s ...
Valgrind使用记录
0.安装valgrind wget http://valgrind.org/downloads/valgrind-3.11.0.tar.bz2 tar xvf valgrind-3.11.0.tar. ...
JSTL标签之c:foreach,c:if标签小结
<c:forEach>标签用于通用数据循环,它有以下属性属性描述是否必须缺省值 items 进行循环的项目否无 begin 开始条件否 0 end 结束条件否集合中的 ...
图片上传之FileAPI与NodeJs
HTML5之fileAPI HTML5之fileAPI使得我们处理图片上传更加简单. 实例 html代码 <div class="form-group"> <la ...
Hadoop权威指南: 专有数据类型
Writable 和 WritableComparable接口 Writable接口 ** Writable接口的主要目的是,当数据在网络上传输或从硬盘读写时,提供数据的序列化和反序列化机智 ** * ...
关于Task的一点思考和建议
前言本打算继续写SQL Server系列,接下来应该是死锁了,但是在.NET Core项目中到处都是异步,最近在写一个爬虫用到异步,之前不是很频繁用到异步,当用到时就有点缩手缩尾,怕留下坑,还是小心 ...
C# 6 与 .NET Core 1.0 高级编程 - C# 6 改进
个人原创译文,转载请注明出处.有不对的地方欢迎指出与交流. 英文原文:Professional C# 6 and .NET Core 1.0 - What's New in C# 6 C# 6 改进 ...
每日一水之strcmp用法
strcmp函数 C/C++函数,比较两个字符串设这两个字符串为str1,str2, 若str1==str2,则返回零: 若str1<str2,则返回负数: 若str1>str2,则返回 ...
类似qq空间的无限回复怎么实现？？
在开发网站的时候遇到这样一个问题,下面是自己的一些思路: 1.把数据库简单的设计出来了 2.这是自己写的简单的例子 3.图表形式 1: 1.发表一篇文章 2: 2给1评论 3: 3给2评论 2 ...

html细节积累-01