语义错误

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

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

/*规范的写法*/

<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
语义错误块级元素可以包含内联元素和某些块级元素,内联元素不能包含块级元素,只能包含内联元素页面可能正常解析,但不符合语义.浏览器自带容错机制,对于不规范的写法也能够正确解析,各浏览器的容错机制不同 ...
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] 关于系统工具栏和全屏沉浸模式
随着应用程序的一些深入设计,大家总想要更好的界面和体验,所以有些东西并不能只是知道方法就结束了,是得要去深入研究研究的.通过这个过程我觉得,从应用层面来讲,想实现一个功能很简单,但若想实现的好,就要去 ...

随机推荐

noip模拟题《戏》game
[问题背景] zhx 和他的妹子(们) 做游戏.[问题描述] 考虑 N 个人玩一个游戏,任意两个人之间进行一场游戏(共 N*(N-1)/2 场),且每场一定能分出胜负. ...
vue使用过程中的一些小技巧
这些也是自己平时项目中遇到过的一些问题,看到有人整理了出来,也就转载保存一下文章内容总结: 组件style的scoped Vue 数组/对象更新视图不更新 vue filters 过滤器的使用列 ...
【刷题】洛谷 P4142 洞穴遇险
题目背景 ZRQ在洞穴中准备采集矿物的时候遇险了!洞穴要塌了! 题目来源:zhoutb2333 题目描述整个洞穴是一个 \(N*N\) 的方格图,每个格子形如 \((X,Y),1 \le X,Y \ ...
洛谷 P1854 花店橱窗布置【dp】
题目描述某花店现有F束花,每一束花的品种都不一样,同时至少有同样数量的花瓶,被按顺序摆成一行,花瓶的位置是固定的,从左到右按1到V顺序编号,V是花瓶的数目.花束可以移动,并且每束花用1到F的整数标识 ...
洛谷 P3373 【模板】线段树 2 解题报告
P3373 [模板]线段树 2 题目描述如题,已知一个数列,你需要进行下面三种操作: 1.将某区间每一个数乘上\(x\) 2.将某区间每一个数加上\(x\) 3.求出某区间每一个数的和输入输出格式 ...
HDU.1495 非常可乐（BFS）
题意分析大家一定觉的运动以后喝可乐是一件很惬意的事情,但是seeyou却不这么认为.因为每次当seeyou买了可乐以后,阿牛就要求和seeyou一起分享这一瓶可乐,而且一定要喝的和seeyou一样多 ...
Mysql(一) 基本操作
一.介绍 1.数据库数据库,通俗的讲,即为存储数据的“仓库”.不过,数据库不仅只是存储,还对所存储的数据做相应的管理,例如,访问权限,安全性,并发操作,数据的备份与恢复,日志等.实际上,我们所提及的 ...
go日期时间函数+常用内建函数+错误处理
日期时间函数 // 时间日期函数包 import "time" // 1. 当前时间 time.Now()-->time.Time类型 // 2. now:=time.Now ...
Codeforces Round #306 (Div. 2)A B C D 暴力位/暴力暴力构造
A. Two Substrings time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
discuz更换域名，登录不了解决
准备工作 :因为域名更换了,因此原域名就不能再进后台了,请申请好新域名,并正确备案,让机房添加白名单,重新解析,重新绑定空间..... 完成一系列工作后,进入DZ程序修改. ------------- ...

html---规范、细节积累-01