html标签注意点

分手后的思念是犯贱 2021-09-12 05:48 410阅读 0赞

当初在学校没有打好基础，毕业工作了，过于追求学习速度，掌握更多知识，从而忽略了细节。![快哭了][fastcry.gif]导致现在基础不扎实。。所以啊，基础很重要，不要过于求成，一步一步来。细节决定命运啊。名人都是这么说的，那就一定不会错啦。![大笑][laugh.gif]

下面我们就来总结下：

一.html标签注意

1.html编写要合法的，带有良好结构并拥有语义

2.避免过度使用div和span，使文档更易于应用样式，且在逻辑段落上也更加清晰。

根据重要性使用h1-6标签，段落使用p，列表使用ul，内联元素中不可嵌套块级元素，为含有描述性表单元素（input，tetarea）添加label

3.尽可能少地使用标签

4.适当地使用class和id：相同的class可以重复出现，相同的id一个页面只能出现一次

5.标题标签共分为：h1~h6，它们分为表示标题在文档中从高到底的优先顺序。

H1在一个网页中最好只使用一次,用来修饰主标题，一般是网页的标题。但是实践中h1都是作为logo的标签，靠近 body，以便让搜索引擎最快的领略主题。  
      h2表示文章标题或是文档副标题;

h3网站首页以及其他页面中的栏目标题。  
     H2、H3、H4标签则可以在一个网页中多次出现，但必要随意添加或添加过度。

6.在表单form中：

</fieldset>

当存在表单标题的时候才使用，如果不存在    <legend></legend>,那么就不要出现<fieldset>

7.关于表单的id和name，这俩个都是为了标记对象名称。id是后来引入的，在这之前都是用name来实现。很多程序员都是通过用name属性来获取表单元素的值；id可以来定义css样式，所以id和name一起使用比较好。

8.选择表格布局，那么网站中的各个页面必须统一使用table，使用表格布局要注意：因为table布局页面的加载过程通常都不会那么平稳自然，所以这种笨拙守旧的布局方式将很有可能扰乱作品的视觉流向。

9.内联元素float与块元素float的区别：内联元素float后，增加边框为从边界处往内增加边框，而块元素为往外增加边框。即内联元素float后，再设置size px的边框，其所占区域并不会增加，所以也不会影响布局。

<!DOCTYPE html> <html> <head> <title>测试内联元素浮动后边框问题</title> <meta charset="utf-8"/> <style type="text/css"> *,p,button{ margin:0; padding:0; border:0; } button,p{ float: left; width: 50px; height: 100px; background-color: pink; } button+button{ background-color: gray; border:10px solid red; } p+p{ border:10px solid blue; } </style> </head> <body> <button>button1</button><button>button2</button> <p>段落1</p> <p>段落2</p> </body> </html>

![20170425100127391][]

10.a标签的rel属性：给链接设置不同的样式很方便

a\[rel="prev"\]\{\}

a\[rel="next"\]\{\}

所有浏览器都支持 rel 属性。不过这个rel的值是固定的，可以查看[w3c][]

11.关于a行内元素内是否含块级元素div,p

百度了了解下，大多数人都是可以的，网上给的解释是：

a 是 transparent，意思取决于 a 的父元素是否允许包含块级元素

如：<div><a><div></div></a></div>是允许的，

而：<p><a><div></div></a></p>是不允许的。

还有人理解：只要把a变成块级元素就好了。

看了很多网站都是这么做，所以应该是可以的

12.js的引入

在</body>标签结束之前引入；原因当浏览器遇到js时便暂停其它所有的加载活动，加载js，在js中调用DOM元素，就会对页面中的匹配的DOM元素进行查找，若果放在<head>标签里则需要对未加载的页面进行轮寻，查找匹配的。而放在</body>结束之前则对应匹配的元素已准备就绪。能达到优化目的，加快页面的加载速度，绝对是一件开发者所喜欢的。

二.页面布局有以下几种：

1.table布局

2.css布局：

①固定布局(固定宽高大小)

②流式布局(用宽高百分比)

③弹性布局(弹性盒子)

④浮动布局(float，可以设置left或者right)

⑤定位布局(position: fixed相对定位，position: absolute;绝对定位)

[fastcry.gif]: http://static.blog.csdn.net/xheditor/xheditor_emot/default/fastcry.gif
[laugh.gif]: /images/20210813/a46efed477524a40b0289e9c9a34d85b.png
[20170425100127391]: /images/20210813/f720c6a1211f477f8c74cbd382236056.png
[w3c]: http://www.w3school.com.cn/tags/att_a_rel.asp