html代码规范，html模板下载
大家好，今天来为大家分享html代码规范的一些知识点，和html模板下载的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！
HTML编码有哪些规范要求
1.HTML编码规范
HTML并不是一种编程语言，而是一种标记语言，它没有任何真正的编程语言中的循环或是流程控制语句。然而，HTML代码的格式和风格是非常重要的，因为要经常对HTML代码进行维护和修改，因此HTML代码必须有很清晰的逻辑结构和布局，而使其易懂和易于维护。
1.1标记的书写
HTML语言是不区分大小写的，但一般来说，标记使用大写书写，如<P>,<HTML>,<TABLE>等；标记中的属性一般使用小写，如<A href=”a.html”>,<font size=”5”>等。
1.2标记的换行规范
一般一个HTML代码都会很长很复杂，因此不要把代码写得很密，这样的可读性非常差，HTML对回车和空格都不敏感，因此可以使用回车和空格，使代码的格式和结构更清晰，这样才能易于维护。很多标记一般来说要占用一行，除了同一标记的关闭标记外，最好不出现两个标记在同一行的情况。如：
<TABLE><TR><TD>text</TD></TR></TABLE>
应写成：
<TABLE>
<TR>
<TD>text</TD>
</TR>
</TABLE>
1、通常情况下，应该换行的标记有：
Ø<HTML>和</HTML>
Ø<BODY></BODY>
Ø<HEAD></HEAD>
Ø<FORM></FORM>
Ø当段落内容比较长时，<P></P>也应各占一行
Ø各种列表标记
Ø表格的相关标记
Ø<BLOCKQUOTE>和</BLOCKQUOTE>
Ø<PRE>和</PRE>
Ø<CODE>和</CODE>
2、通常情况下，需要将开始和关闭标记放在一行的标记有：
Ø<B>和</B>
Ø<U>和</U>
Ø<I>和</I>
Ø各种标题标记，如<H1>…</H1>等
Ø<A>和</A>
1.3标记的关闭规范：
1、 HTML文档的正文都应在<BODY></BODY>标记中间，而<BODY>标记则应包含在<HTML>和</HTML>标记之间，如
<HTML>
<BODY>
…………
</BODY>
</HTML>
2、对于需要关闭标记的标记，如<HTML>,<TITLE>,<BODY>,<TABLE>,<TR>,<TD>,<P>,<TEXTAREA>,<SELECT>,<FONT>,<OPTION>,<DIV>,<SPAN>等标记，都必须有相应的关闭标记出现，否则一方面使程序的可读性差，更重要的是会引起页面格式显示混乱。正确地写法应为，
<BODY>
<P>
<FONT>……</FONT>
</P>
</BODY>
3、不能出现标记交叉的情况，如，
<P><FONT>……</P></FONT>
1.4标记的属性值规范
对于标记中的属性值，最好使用双引号或单引号包围，这样的话不易出错。如：
<INPUT type=text value=Hello world! length=20>
本来是希望在文本框中显示“Hello world!”，但是由于没有加上引号，则只会在文本框中显示“Hello”，因此，正确地写法为，
<INPUT type=”text” value=”Hello world!” length=”20”>
1.5标记的缩进规范
1、最高一级的父标记采用左对齐顶格方式书写
2、下一级标记采用左对齐后，缩进2个空格的方式书写。再下一级则以此类推。
3、同一级标记的首字符上下应对齐。
例如，
<P>
<TABLE>
<TR>
<TD>………</TD>
<TD>………</TD>
</TR>
<TR>
<TD>
<TABLE>
………
</TABLE>
</TD>
<TD>……</TD>
</TR>
</TABLE>
1.6注释
在任何代码中都应该有做注释的好习惯，在一个复杂的HTML代码中，友好的注释是非常有用的，特别是在有很多嵌套的表格中。HTML中使用<!--……-->来做注释。如，
<TABLE>
<TR><!-- ROW 1-->
<TD><!-- COL 1-->
…………
</TD>
<TD><!-- COL 2-->
…………
</TD>
</TR>
<TR><!-- ROW 2-->
<TD><!-- COL 1-->
…………
</TD>
<TD><!-- COL 2-->
…………
</TD>
</TR>
</TABLE>
如何在编写html代码时,正确的书写规范网页结构文档
1）HTML标记是由尖括号包围的关键词。所有标记均以“<”开始，以“>”结束。结束的标记在开始名称前加上斜杠“/”。例如头部标记格式如下所示：<head>……</head>
（2）根据标记类型，正确书写标记，单个标记最好在右尖括号前加1个斜杠“/”，如换行标记是单个标记“<br>”，成对标记最好同时输入开始标记和结束标记，以免忘记。
（3）标记可以相互嵌套（也称为包含），但不能交叉。如：
<head><title>……</title></head><!--这是正确的书写格式-->
<head><style>……</head></style><!--这是错误的书写格式-->
（4）在HTML代码书写时不区分大小写，如头部标记写成<HEAD>，<head>，<Head>，<HEAd>都可以，但建议在同一个Web开发项目保持一种风格，如统一小写标记名称。
（5）代码中包含任意多的回车符和空格在HTML页面显示时均不起作用。需要时可使用<br/>和来实现换行和插入空格。为了代码清晰，建议不同的标记都独占一行。
（6）给标记设置属性时，属性值建议用双引号标注起来。如段落内容居中格式如下所示：<p align="center">这是段落信息居中显示</p>
（7）书写开始与结束标记时，在左尖括号与标记名或与斜杠“/”之间不能留有多余空格，否则浏览器不能识别该标记，导致错误标记直接显示在页面上，影响页面美观效果。例如：
< comment>显示一个段落</comment>
（8）编写HTML代码时，应该使用锯齿结构，即向右缩进2~4个字符，使代码结构清晰，提高代码的可读性，为后期阅读和维护提供帮助。
网页代码有什么规范
(一)xhtml的规范：
1、所有的xhtml代码英文小写
2、属性的值一定要用双引号("")括起来，且一定要有值
3、每个标签都要有开始和结束，且要有正确的层次
4、表现与结构完全分离，代码中尽量不涉及任何的表现元素，如style、font、bgColor、border等
5、<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询
6、给重要的区块加上注释
7、图片要加alt注释
(二)CSS的规范：
1、id和class命名采用该版块的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如:newRelease（最新产品/new+Release),或者用下划线链接new_Release.
2、CSS样式表各区块用注释说明
注释的写法:
/* Footer*/
内容区
/* End Footer*/
3、尽量使用英文命名原则，尽量不缩写，除非一看就明白的单词
class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red{ color: red;}
.f60{ color:#f60;}
.ff8600{ color:#ff8600;}
(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px{ font-size: 12px;}
.font9pt{font-size: 9pt;}
(3)对齐样式,使用对齐目标的英文名称,如
.left{ float:left;}
.bottom{ float:bottom;}
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews{}
.barproduct{}
(5)页面结构
容器：#container
布局：#layout
头部：#head、#header
尾部：#foot、#footer
侧栏：#sidebar
左边栏：#sidebarLeft
右边栏：#sidebarRight
页面主体：#main
栏目：#column
包装/外套：#wrapper、wrap
内容：#content
(6)导航
导航：#nav
主导航：#mainNav
顶导航：#topNav
左导航：leftNav
右导航：rightNav
下导航：bottomNav
二级导航：#subNav
菜单：#menu
二级菜单：#subMenu
下拉：.drop
下拉菜单：.dropMenu
(7)功能
标签：.tab、.tag
提示信息：.msg、.message
小技巧：.tips
注释：.note
热点：.hot
摘要：.summary
帮助：.help
投票：.vote
指南：.guild
商标：.branding
标签：.label
工具条：.tool、.toolBar
.title
LOGO：.logo
搜索：.search
搜索条：.searchBar
搜索框：.searchBox
搜索输入框：.search_input
搜索输出框：.search_output
搜索结果：.search_results
注册：.register
登录：.login
登录条：.loginBar
登录框：.loginBox
友情链接：.friendLink、.link
广告/标语：.banner
版权信息：.copyright
加入我们：.joinUs
合作伙伴：.partner
服务：.service
网站地图：.siteMap、.map
缩略图：.screenShot
产品：products
产品价格：products_prices
产品products_description
产品评论：products_review
最新产品：new_products
生产商：suppliers、publisher
编辑：editor
编辑评论：editor_review
博客：blog
论坛：forum
新闻：news
下载：download
网站信息：.siteinfo
法律声明：.legal
信誉：.credits
列表：.list
(8)其他
左中右：left、center、right
上中下：top、middle、bottom
按钮：btn
面包屑：breadcrumb(即页面所处位置导航提示)
滚动：scroll
当前：current
图标：icon
箭头：arrow
首页：homePage、home
二级页面：subPage
状态：status
常见问题：faqs、questions
关键词：keyword
(三)CSS文件名称
顶部：top.css
底部：bottom.css
共享 share.css
基本共用 base.css
布局，版面 layout.css
主要的 master.css
模块 module.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
行或排：row1th,row2th,row3th,row4th...
列或纵：col1th,col2th,col3th,col4th...
(四)页面图片等的遵循以下几条规范
页面图片用gif和jpg，在不失真前提下，越小越好。
名称分为头尾两部分，用下划线隔开。头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。
一般来说:
放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner/icon
标志性的图片我们取名为：logo
在页面上位置不固定并且带有链接的小图片我们取名为button
在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu
装饰用的照片我们取名：pic
不带链接表示标题的图片我们取名：title
依照此原则类推，尾部分用来表示图片的具体含义。
下面是几个样例，大家应该能够一眼看明白图片的意义：
banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg
(五)SEO相关
1允许全文检索的页面，为了使Internet上的搜索引擎能够有效检索，在频道的首页的html的<head></head>之间应该加入Keywords和Description元标记，例如：
<meta name=”keywords” content=”东方新干线，汽车，买车”>
<meta name=”description” content=”东方新干劲线，全球中文汽车信息第一站”>.
2.添加搜索引擎引导代码：
<meta name="robots" content="index, follow"/>
<meta name="googlebot" content="index, follow"/>
附：雅虎优化：13条技巧提高网页速度
网页打开速度,是网站做SEO的一个重要方面,包括搜索引擎本身也会对自己的网页考虑这个问题:最近，雅虎的Exceptional Performance团队在其开发者网络上提出了提高网页打开速度的13条规则，其中包括“减少http请求“，避免网页转向"等
具体内容如下：
1.减少http请求
2.减少多媒体，图片，声音的使用，传输以文字内容为先
3.用截止时间报头，由于时间是将来，对于缓存来说，可以减少部分http请求
4.支持Gzip
5.把CSS放在网页的顶部
6.活动的脚本文件放在底部
7.避免用CSS Expressions
8.把JavaScript和CSS单独化，与网页分离
9.减小DNS查表时间
10.最小化JavaScript
11.避免网页的转向
12.删除重复的脚本
END，本文到此结束，如果可以帮助到大家，还望关注本站哦！