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
语义错误 块级元素可以包含内联元素和某些块级元素,内联元素不能包含块级元素,只能包含内联元素 页面可能正常解析,但不符合语义.浏览器自带容错机制,对于不规范的写法也能够正确解析,各浏览器的容错机制不同 ...
- python编程规范系列--建议01～07
本系列来自<编写高质量代码 改善python程序的91个建议>的读书笔记整理. 本书主要内容 1)容易被忽视的重要概念和常识,如代码的布局和编写函数的原则等: 2)编写py ...
- 聊聊自学大数据flume中容易被人忽略的细节
前言:老刘不敢保证说的有多好,但绝对是非常良心地讲述自学大数据开发路上的一些经历和感悟,保证会讲述一些不同于别人技术博客的细节. 01 自学flume的细节 老刘现在想写点有自己特色的东西,讲讲自学 ...
- html5基础知识点
1.WEB基础知识 1.WEB 与 Internet 1.Internet 互联网 若干台计算机 通过 网线 所连接而成的物理设备 主要服务: 1.Telnet 2.Email 3.WWW(Word ...
- 去BAT，你应该要看一看的面试经验总结
我去年12月份从上一家公司离职,一直到今年3月份,基本上都在面试中度过来的. 先交代下背景:坐标上海,做技术开发,我本人面试的职位是linux服务器开发,最倾向的职位是服务器开发主程或技术经理.我本人 ...
- 微冷的雨Java基础学习手记（一）
使用Java理解程序逻辑 之凌波微步 船舶停靠在港湾是很安全的,但这不是造船的目的 北大青鸟五道口原玉明老师出品 1.学习方法: 01.找一本好书 初始阶段不适合,可以放到第二个阶段,看到知识点时,要 ...
- S1java基础学习笔记
第一章 Java基础 程序目标:减轻现实生活中一类人的工作量,提高工作效率. 学员最终可以书写系统: 超市管理系统,POS机系统等 入库单 销售单 01.课程重点 五大重点: 01.分支(选择)结构 ...
- HTML标签----图文详解
国庆节快乐,还在加班的童鞋,良辰必有重谢! 本文主要内容 头标签 排版标签:<p> <br> <hr> <center> ...
- [Android] 关于系统工具栏和全屏沉浸模式
随着应用程序的一些深入设计,大家总想要更好的界面和体验,所以有些东西并不能只是知道方法就结束了,是得要去深入研究研究的.通过这个过程我觉得,从应用层面来讲,想实现一个功能很简单,但若想实现的好,就要去 ...
随机推荐
- 运维朋友们，别再问需不需要学 Python 了！
运维人员需不需要学开发?需不需要学 Python?PythonN 和 Shell 有什么区别?天天问这种好水的问题,我实在受不了,决定帮大家扫扫盲. 现阶段,掌握一门开发语言已经成为高级运维工程师的必 ...
- 解析php addslashes()与addclashes()函数的区别和比较
一. addslashes() 函数 addslashes(string) 函数在指定的预定义字符前添加反斜杠.这些预定义字符是:•单引号 (')•双引号 (")•反斜杠 (\)•NULL ...
- 【开发工具IDE】解决IntelliJ IDEA 创建Maven项目速度慢的问题
方法一(推荐) 在创建Maven项目时加上 archetypeCatalog=internal 参数,如下: 方法二 在maven的VM Options加上-DarchetypeCatalog=int ...
- Period UVALive - 3026（next数组）
题意: 给出一个长度不超过1000000的字符串S, 对于该字符串的所有前缀求其周期, 如果周期K >= 2输出起始位置是第几个字符和其周期K 解析: 先求next数组 对于每一个位置如果i % ...
- The Toll! Revisited UVA - 10537（变形。。）
给定图G=(V,E)G=(V,E),VV中有两类点,一类点(AA类)在进入时要缴纳1的费用,另一类点(BB类)在进入时要缴纳当前携带金额的1/20(不足20的部分按20算) 已知起点为SS,终点为TT ...
- Django安装及简介
一. Django简介 Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是一个开放源代码的Web应用框架 ...
- [TJOI2013]单词 AC自动机
题面: 洛谷 题解: 很久之前做的题了,只不过之前一直90....最近才发现是哪里写错了. 我们对字符集建AC自动机. 首先考虑一个暴力的做法,把文章当做一个长串,直接在自动机上跳,但是我们会发现,这 ...
- 【JavaScript】基本类型和引用类型的值、引用类型
一.前言 接着上一篇继续记笔记 二.内容 动态的属性 var person = new Object(); person.name = "Nicholas&qu ...
- 【BZOJ1176】Mokia（CDQ分治）
[BZOJ1176]Mokia(CDQ分治) 题面 BZOJ权限题啊,,,, dbzoj真好 Description 维护一个W*W的矩阵,初始值均为S.每次操作可以增加某格子的权值,或询问某子矩阵的 ...
- 解题：APIO 2015 雅加达的摩天大楼
题面 分块思想+最短路 发现对于步长小的doge会连出很多边,很容易导致大量的重边,于是对doge们根据步长分块讨论:根据步长建出分层图,然后把步长不超过某个值的doge们连到对应层上的点上,其余的d ...