Date Tags Html

文件命名规范

  • 文件名由英文小写字母和下划线共27个字符组成。由于windows平台不分大小写的原因。
  • 文件后缀固定为html。

例子:

非标准 标准
Index.html index.html
ContactUs.html contact_us.html

字符编码规范

统一使用utf-8编码。

结构规范

整个网页的总体的构成如下。

<!DOCTYPE>
<html>
  <head>
    <meta>
    <title>
    <style>
    <script>
  </head>

  <body>
  </body>
</html>

各部分内容互不干涉,javascript脚本必须在之间, 内容必须在之间。 页面的内容必须在之间。

标签规范

  • 所有标签使用英文小写。
  • 所有标签必须闭合。一个比较常见的旧html中的标签都没有闭合,如
  • 不要使用标签的布局属性。如width, height等。
  • 属性也是英文小写,属性的值必须用英文半角的单引号(')括一起来。
  • 不许精简属性。如checked, 应写成checked="checked", 精简属性的值必须跟名称一样。
  • 对图片的资源的引用最好不要用相对路径, 如../../images/example.png, 直接使用/imges/example.png。

各标签的规范

<meta> 元标签
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

暂时只需要用到Content-Type, 而且charset必须等于UTF-8

<a> 超链接标签
<a href="http://www.yoursite.com">your site's name</a>
<a href="#top">go to top</a>

使用超链接可以在当前窗口打开,可以在新窗口打开。 由于后者破坏了浏览器的前进后退的导航功能,我们不建议使用后者。

<img> 图像标签
<img src="http://image_location/image_name.png" width="100" height="100" alt="image_name" />

在这里,长度width和高度height属性是必须的。因为浏览器在下载过程中能够计算出图像 占据的空间,否则浏览器可能会产生一个页面的跳跃,因为事先并不知道图像要占用 多少空间,以致于破坏页面布局。 alt属性也应该写上,当浏览器不支持图片下载的时候就会显示alt的内容。 关于图片的使用推荐的格式是.png文件。

如果一个块中只是想显示一个图片的话,尽量不要用<img>标签,应该用<div>标签加background-image属性来代替。

<table> 表格标签
<table>
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
</table>

表格绝对不能拿来进行布局页面,要布局,请使用<div>。 表格是用来展示表格式的数据的。

<form> 表单标签
<form action="do_some_thing" method="post"></form>

推荐method属性使用"post", 使用"get"的话会把信息暴露在url中。

  • 在新的framework中,我们主要用到ajax提交的技术,所以form基本上已经不会再用到。
<input> 表单输入标签

常用的,只能使用的,其他一律禁止:

<input name="xx1" type="text" />
<input name="xx2" type="password" />
<input name="xx3" type="checkbox" />
<input name="xx4" type="radio" />
<input name="xx5" type="file" />
<input name="xx6" type="hidden" />

再次强调禁止使用

<input type='button'> 和 <input type='submit'>
<textarea> 多行文本输入框标签
<textarea name="xxx" rows="5" cols="2">hello world</textarea>

在textarea中的行属性rows和列属性cols是必须的。

<select> 下拉框标签
<select name="xxx">
  <option value="1" selected="selected">北京</option>
  <option value="2">上海</option>
  <option value="3">广州</option>
</select>
button 按钮标签
<button type='button' />

button必须加上type='button'。由于根据w3c标准<button>默认的type为submit, 也就是说如果button没有声明type的话,那此button就是相当于一个submit, 所以如果此button是在一个表单里的话,点击它就会提交表单。

<div> 块标签
<div class="header" />
<div class="footer" />
不建议使用的标签列表
<font> 字体标签
<p> 段落标签
<i> <em> 斜体标签
<strong> <b> 粗体标签
<u> 下划线标签
<br> 换行标签
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 标题标签
<big>, <small> 字体大小控制标签
<hr> 水平线标签
<center> 居中标签
<input type="submit" >
<input type="button" >
<input type="reset" >
<input type="image" >
<span>
<dl>, <dt>
不建议使用的属性列表
  • name 除了在input中,其他地方应使用id代替
  • text和bgcolor 使用css的color和background-color代替
  • background 使用css的background-image代替
  • link, alink, vlink 使用css的:link, :active :visisted代替
  • align 和<center>标签一样,使用css的text-align代替
  • target 最好不要使用target="_blank"来用新窗口打开网页