您的位置：首页 > Web前端 > HTML

HTML编码建议And如何更好的编码

2014-11-18 11:05 155 查看

整理了HTML编码的一些东西，鉴于这东西已经被很多人都说过了，我这里算是个总结吧，后面部分会添加一些自己想说的东西。

1、<!DOCTYPE HTML>
让浏览器自己选择渲染页面的标准，同时为了拥抱未来

2、<meta charset="utf-8" />
定义页面字符编码，精简的代码，同样的效果

3、样式文件放头部，且尽量减少引入的文件数量

<head>



<link rel="stylesheet" href="xxx.min.css" />

</head>

复制代码

4、脚本文件放底部，当发布项目的时候尽量压缩合并

<body>



<script src="xxx.min.js"></script>

</body>

复制代码

5、为页面添加注释



<header></header>



<div class="content"></content>



<footer></footer>

复制代码

6、缩进和换行
使用4个空格作为一个缩进层级，大多数时候，开发工具帮助我们完成了此项内容。

// 不建议

<ul><li><a href="#"></a></li><li><a href="#"></a></li></ul>

// 建议

<ul>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

</ul>

复制代码

7、标签闭合

// 不建议

<br >

<p> xxxx

<p>xxxx

// 建议

<br />

<p>xxx</p>

<p>xxx</p>

复制代码

8、标签名小写，标签属性值添加双引号

// 不建议

<P data-id=p1></P>

// 建议

<p data-id="p1"></p>

复制代码

9、使用CSS为页面添加图片
当然页面上的动态内容还是必须使用<img src="#" />标签的

10、为图片标签添加alt和title属性，图片的src属性不能为空

<img alt="" title="" src="#" />

复制代码

11、为页面当中的块结构底部添加空白行

<header>

<h1>w3cfuns</h1>

</header>

<div class="content">

// something

</div>

<footer>

<p class="copyRight"></p>

</footer>

复制代码

12、去除样式引用和脚本引用当中的type属性

13、标签语义化

结构性元素：
p：表示段落，只能包含内联元素，不能包含块级元素
div：本身舞特殊含义，可用于布局，几乎可以包含任何元素
br：表示换行符
hr：表示水平分隔符
h1-h6：表示标题。其中h1用于表示当前页面最重要内容的标题，建议每个页面只有一个H1标签
blockquote：表示引用，可以包含多个段落。请勿纯粹为了缩进而使用blockquote，大部分浏览器默认将blockquote渲染为带有左右缩进
pre：表示一段格式化好的文本

头部元素：
title：每个页面必须有且仅有一个title元素
base：可用场景——首页，频道等大部分链接为新窗口打开的页面
link：用于引入CSS资源时，可省去media和type属性
style：type默认为text/css，可以省去
script：type属性可以省去；不赞成使用lang属性；不要使用古老的<!-//-->这种hack脚本，它用于阻止第一代浏览器将脚本显示成文字；

列表元素：
ul：表示无须列表
ol：表示有序列表，可用于排行榜等；
li：表示列表项，必须是ol/ul的子元素
dl：表示关联列表，dd是对dt的解释；dt和dd的对应关系比较随意：一个dt对应多个dd、多个dt对应一个dd、多个dt对应多个dd,都合法；可用于名称单词解释、日程列表、站点目录；

文本元素：
a：存在href属性时表示链接，无href属性但有name属性表示锚点
em,strong,i,b：表示句意强调，加与不加会引起语义变化，可用于表示不同的心情或语调；strong表示重要性强调，可用于局部或全局，strong强调的是重要性，不会改变句意；
abbr：表示缩写
sub,sup：主要用于数学和化学公式，sup还可用于脚注
span：本身舞特殊含义
ins,del：分别表示从文档中增加（插入）和删除

表单元素：
推荐使用button代替input，但必须声明type属性
推荐使用fieldset,legend组织表单
表单的name不能设定为action，enctype,method,novalidate,target,submit会导致表单提交混乱

上面说的都是一些基本的东西，在开发过程当中多注意养成习惯就好了，一方面是为了网页的性能优化，另一方面是为了团队之间的可维护性。下面是在HTML开发过程当中我自己的想法，分享出来给大家参考参考。
首先就是先背熟HTML标签以及相对应每个标签的含义和附加的属性，只有在掌握了每一种HTML标签的的含义，我们才能够更合理的把他们应用到我们的页面当中，万丈高楼平地而起，这些看是很基础的东西，有时候会搞的我们崩溃，踏踏实实把这些了解清楚，真的很重要，尽管不全部了解他们仍然能够胜任日常的工作，但要是想在这条路上走的长久，还是建议熟被他们，这应该花费不了多长时间。
然后就是阅读别人网站的源代码，模仿开始，多看看那些优秀网站的源代码，了解下他们是如果针对页面上的组件编写结构代码的。比如：下拉框、选项卡、横向图片轮播，瀑布流，留言板，商品筛选，商品列表和商品详情等等，然后比较下它们之间的不一样，区别在哪里，相同点在哪里，自己消化之后就可以为我所用了，当然这部分工作平常不用去做，等到我们拿到设计师做好的效果图的时候，再去了解应该会比较有动力一些。
接下来就是搭建页面的框架，我强力抗议，在一张页面的HTML结构代码没有写完之前，就动手开始写CSS样式，一定要先把页面的整个HTML代码结构定义好了之后，再去写你的CSS样式表。在开始写CSS样式表之前，你可以打开它在浏览器当中查看下，看看在没有样式表的时候，能不能像读文章一样知道，哪里是标题，哪里是列表，哪里是段落，哪里是重复的内容。
下面就可以开始编写CSS样式表了，找出页面当中那些是可以复用的部分，定义好class类名，一步一步编写，最后项目差不多结束的时候，优化CSS样式文件，提取可复用的部分，进行精简。
关于前端项目文件结构目录的一些见解，下次有机会在说吧，如果你有好的工作方法方式，优美的项目文档结构方案，也可以分享下！
笔记作者：拾荒者笔记链接：http://www.w3cfuns.com/blog-5435321-5402088.html原创声明：此笔记被拾荒者标注为原创笔记，未经作者同意转载必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Html标签

相关文章推荐

新的分享

章节导航