Open CodingMeUp opened 5 years ago
HTML 学的是用法和规范, 可以使用emmet 快速写
https://juejin.im/post/599ececb5188252423583c27 https://github.com/dyygtfx/html-best-practices
下面这些写法浏览器是不能够正常解析的 有的虽然解析正常,但却达不到预想的目的
<a href=""> <a href="">click</a> </a> <a href=""> <button>click</button> </a> <a href=""> <input type="text"> </a> <a href=""> <textarea name="" id="" cols="10" rows="5"></textarea> </a> <a href=""> <a href="">click</a> </a> <a href=""> <button>click</button> </a> <a href=""> <input type="text"> </a> <a href=""> <textarea name="" id="" cols="30" rows="10"></textarea> </a>
页面可能正常解析,但不符合语义。这是因为浏览器自带容错机制,对于不规范的写法也能够正确的解析,各浏览器的容错机制不同,所以尽量按规范来写。
/*规范的写法*/ <div> <h2>jikexueyuan</h2> <p>IT education</p> </div> /*不规范的写法*/ <span> <div>wrong</div> </span>
/*不规范的写法*/ <p> <h1></h1> </p> <p> <div></div> </p>
h1、h2、h3、h4、h5、h6、p
/*规范的写法*/ <li> <ul> <li></li> <li></li> <li></li> </ul> <div></div> </li> /*不规范的写法*/ <ul> <a href="">迷路的a标签</a> <li></li> <li></li> <li></li> </ul>
/*规范的写法*/ <div> <h2></h2> <p></p> </div> <div> <img src="" alt=""> <a href=""></a> <span></span> </div> /*不规范的写法*/ <div> <span>我是内联元素</span> <p>我是块级元素</p> </div>
有些字符是 html 预留的,不能够直接书写,但是可以通过字符实体来显示。 如:
空格 - 大于符号 - > & - & ...... 但如果稍不注意,在如下的情况下就会引发错误:
<a href="?art©">Art and Copy</a>
这里的 © 会被转换为 ©️符号,从而得不到预期的效果
正确的做法是所有的保留字符全部用实体字符替代。
<a href="?art&copy">Art and Copy</a>
role 属性使用来增强标签的语义的,但如果使用不当,反而得到负面的效果,所以使用的时候一定要注意。
<input type=radio role=progressbar>
这里的是一个 input标签,但是却通过 role 指定了进度条的语义,但是 input是不能够作为进度条的,所以这里反而模糊了语义。
如下做法是不推荐的:
给 div 标签设置 inline-block 属性 给 span 标签设置 block 属性
disabled 属性是用来禁用标签的,一般用于 input 、button等,表示不可点击。
正常的用法是 <input type="text" name="lname" /> <input type="text" name="lname" disabled="disabled" /> 错误的写法: <input type="text" name="name" />
这里虽然 disabled="false" 语义也代表不禁用,但实际上是被禁用的。
ID重复会引起元素选择错误,从而引发 Javascript 隐藏问题,因此需要注意。
注:每一个ID会在浏览器中生成一个同名的全局变量
当script 标签包含 src 属性时,其包含的 Javascript 脚本是不会执行的。 要引用JS文件单独使用SRC属性 隔离清楚
需要注意的HTML写法
HTML 学的是用法和规范, 可以使用emmet 快速写
常见的规范的链接:
https://juejin.im/post/599ececb5188252423583c27 https://github.com/dyygtfx/html-best-practices
问题点
标签错误嵌套
语法错误
下面这些写法浏览器是不能够正常解析的 有的虽然解析正常,但却达不到预想的目的
语义错误
页面可能正常解析,但不符合语义。这是因为浏览器自带容错机制,对于不规范的写法也能够正确的解析,各浏览器的容错机制不同,所以尽量按规范来写。
h1、h2、h3、h4、h5、h6、p
字符实体引发的错误
有些字符是 html 预留的,不能够直接书写,但是可以通过字符实体来显示。 如:
空格 - 大于符号 - > & - & ...... 但如果稍不注意,在如下的情况下就会引发错误:
这里的 © 会被转换为 ©️符号,从而得不到预期的效果
正确的做法是所有的保留字符全部用实体字符替代。
错误的使用 role 属性
role 属性使用来增强标签的语义的,但如果使用不当,反而得到负面的效果,所以使用的时候一定要注意。
这里的是一个 input标签,但是却通过 role 指定了进度条的语义,但是 input是不能够作为进度条的,所以这里反而模糊了语义。
行内元素强制转成块级元素,块级元素强制转成行内元素
如下做法是不推荐的:
给 div 标签设置 inline-block 属性 给 span 标签设置 block 属性
使用 disabled=false
disabled 属性是用来禁用标签的,一般用于 input 、button等,表示不可点击。
这里虽然 disabled="false" 语义也代表不禁用,但实际上是被禁用的。
页面中同一个 ID 出现两次及更多
ID重复会引起元素选择错误,从而引发 Javascript 隐藏问题,因此需要注意。
注:每一个ID会在浏览器中生成一个同名的全局变量
内嵌的 script 标签含有 src 属性
当script 标签包含 src 属性时,其包含的 Javascript 脚本是不会执行的。 要引用JS文件单独使用SRC属性 隔离清楚