html细节积累-01
语义错误
块级元素可以包含内联元素和某些块级元素，内联元素不能包含块级元素，只能包含内联元素
页面可能正常解析，但不符合语义。浏览器自带容错机制，对于不规范的写法也能够正确解析，各浏览器的容错机制不同，所以尽量按规范来写；
/*规范的写法*/ <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的更多相关文章
- 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+"& ...
随机推荐
- db2 数据类型
数据类型: 字符串类型 描述 CHARACTER(n) n bytes定长字符串. n 大于0 不大于255. 默认 1. VARCHAR(n) 变长字符串,最大 n bytes. n大于 0 小于表 ...
- Update关联查询不走索引，效率低下
优化一个sql,就是有A,B两个表,要利用b表的字段更新a表对应的字段.形如 Sql代码 update A set A.a=(select B.b from B where A.id=B.id); 原 ...
- Eclipse设置Tab键为空格！
http://z-hua.iteye.com/blog/1056713 今天设置Eclipse中按Tab键为4个空格,这里标记下! Window-->Preferences-->Java- ...
- spring mvc handler的三种方式
springmvc.xml 三种方式不能针对一个controller同时使用 <?xml version="1.0" encoding="UTF-8"?& ...
- Chrome中java因过期而遭到阻止
http://www.cnblogs.com/jifeng/p/3453322.html 在Chrome快捷方式图标上右击,选[属性],然后在[目标]一栏的末尾添加这么一段命令(flag): --al ...
- Asp.net mvc 知多少（三）
本系列主要翻译自<ASP.NET MVC Interview Questions and Answers >- By Shailendra Chauhan,想看英文原版的可访问http:/ ...
- 第七届蓝桥杯javaB组真题解析-生日蜡烛（第二题）
题目 /* 生日蜡烛 某君从某年开始每年都举办一次生日party,并且每次都要吹熄与年龄相同根数的蜡烛. 现在算起来,他一共吹熄了236根蜡烛. 请问,他从多少岁开始过生日party的? 请填写他开始 ...
- 学习计划——巩固基础+进阶练习
时间:2016/3/23---24 内容:如何用CSS进行网页布局 课程复习 目标:完成一个demo+完成一篇学习心得博客 时间:2016/3/25---26 内容:网页布局基础 课程复习 目标: ...
- Java中正则表达式去除html标签
Java中正则表达式去除html的标签,主要目的更精确的显示内容,比如前一段时间在做类似于博客中发布文章功能,当编辑器中输入内容后会将样式标签也传入后台并且保存数据库,但是在显示摘要的时候,比如显示正 ...
- matlab 利用while循环计算平均值和方差(第二版）
第一版中因为公式中含有:分母项:n(n-1),而程序并没有对输入数进行判定,如果仅仅输入一个或者一个都不输入,将会出现除0的情况 基于此,进行第二版改进. 代码: % 脚本文件:states.m % ...