学习W3C标准和规范

最新推荐文章于 2023-05-28 18:49:07 发布

不认输的西瓜

最新推荐文章于 2023-05-28 18:49:07 发布

阅读量1.8k

点赞数 2

文章标签： W3C 前端标准与规范基础新手

本文链接：https://blog.csdn.net/qq_40678503/article/details/81701904

版权

身为一个程序员，W3C标准还是必须要知道的.那我们为什么遵循W3C标准呢？

干每一行都会有它自己的标准，程序员作为生产者，上有浏览器制造商，下有浏览器的终端使用者，程序员相当于中间的转换器，我们要尽可能的想办法在技术范围之内让我们的页面能支持所有的浏览器，满足更多用户的需求。而W3C标准让我们能有一个良好的编码规范。

首先我们来了解一下什么是<!DOCTYPE html>。

在我们打代码的时候往往会有这么一句话<!DOCTYPE html>，那它的意义是什么呢？其实它是html5标准网页的声明，全称为Document Type HyperText Mark-up Language，意思是文档种类是超文本标记性语言或超文本链接标示语言，它处于<html>标签之前，此标签可告知浏览器文档使用哪种HTML或XHTML规范。

这个标签可声明三种DTD类型，分别表示过渡版，严格版和框架版。
过渡版：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

允许你使用HTML4.0的标识，但是要符合xhtml的写法，要求非常宽松

严格版：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

不能使用任何表现层的标识和属性，例如<br>，对页面的标签使用非常严格，页面里几乎不准使用 inline-style 的 CSS 样式

框架版：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

专门针对框架页面设计使用的DTD，如果你的页面中包含框架，需要采用这种DTD的写法。

下面让我们看一个标准的XHTML头信息格式:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 
<head> 
    <meta charset="utf-8" /> 
    <title> </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="keywords" content=" " />
    <meta name="description" content=" " />
</head>

接下来是一些关于编写XHTML时的规范

1 . 抛弃了声明，<font>标签将被抛弃，新的页面中不应该出现<font color=”red”></font>,已经存在的老页面也应该在修改是尽量替代。替代方法：<sapn class=”red_tex”></span>。

2 . 语言编码
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />
为了能让浏览器正常解析并且良好的遵循W3C标准，我们编写页面的时候必须在XHTML文档中声明它们所使用的编码语言。一般使用的是GB2312，也可使用其他的语言，根据你的需求去定义。
若没有定义编码语言，可能在做完页面再打开后变成乱码。

3 . 定义Javascript
不能用原来的<script language=javascript>或干脆直接<script>，必须要用<script language="javascript" type="text/javascript">来定义开头。并且需要加个注释符，这样是为了保证在不支持js的浏览器上不会直接显示出代码来。
例如：

<script language="javascript" type="text/javascript"> 
<!-- 
    alert（1） 
--> 
</script>

4 . 定义CSS

CSS必须要用<style type=“text/css”>开头来定义，而不是原来的直接<style>，不建议直接写在内容代码里如：<div style=”padding-left:20px;”></div>，并且也需要需要加个注释符。
例如：

<style type="text/css" media="screen"> 
<!-- 
    body {margin:0px;padding:0px; } 
--> 
</style>

为保证各浏览器的兼容性，在写CSS时请都写上数量单位，例如:body{margin:10px;}

5 . 不要在注释内使用“-”
–只能出现在注释的开头或者结尾，在内容中不再有效。
也就是说是无效的！

6 . 所有标签的元素和属性的名字都必须使用小写
XHTML与HTML不一样，XHTML对大小写是敏感的。<title></title>和<TITLE></TITLE>是不同的标签。而XHTML要求所有的标签和属性的名字都必须使用小写，大小写夹杂也是不被认可的。通常dreamweaver自动生成的属性名字”onMouseOver”也必须修改成”onmouseover”。

7 . 所有的属性必须用引号”“括起来
在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须要加引号。
例如：<height=80>必须修改为：<height="80">。
特殊情况，你需要在属性值里使用双引号，你可以用”，单引号可以使用&apos;，例如：<alt="say'hello'">。

8 . 把所有<和&特殊符号用编码表示
任何小于号（<），不是标签的一部分，都必须被编码为 &lt;
任何大于号（>），不是标签的一部分，都必须被编码为 &gt;
任何与号（&），不是实体的一部分的，都必须被编码为 &amp;

9 . 给所有属性赋一个值
XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：
<td><input type="checkbox" name="shirt" value="medium" checked>必须修改为：
<td><input type="checkbox" name="shirt" value="medium" checked="checked" />

10 . 所有的标记都必须要有一个相应的结束标记,也就是说标签必须闭合！
在HTML中你可以写多个标签而不关闭它，如写<p>但是不写</p>，但是在XHTML中是不合法的，XHTML要求有严谨的结构，所有标签必须是闭合的。如果的单独不成对的标签，要加/来关闭。
例如<br/>。

11 . 所有的标记都必须正确的嵌套
一层一层的嵌套必须是严格对称的
<P><b></b></p>才是正确的写法，而<p><b></p></b>是错误的！

12 . 图片要添加alt属性和title属性
例如:<img src=”4.jpg” alt=”images” title=”welcome”/>
尽可能的让作为内容的图片都带有属于自己的alt属性。

13 . 在form表单中增加label在提高用户感受,增加友好度。

<form action="">
  <label for="name"> name: </label>
  <input type="text" id="name" />
  <label for="password">password: </label>
  <input type="password" id="password" />
</form>

不认输的西瓜

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
学习W3C标准和规范

身为一个程序员，W3C标准还是必须要知道的.那我们为什么遵循W3C标准呢？干每一行都会有它自己的标准，程序员作为生产者，上有浏览器制造商，下有浏览器的终端使用者，程序员相当于中间的转换器，我们要尽可能的想办法在技术范围之内让我们的页面能支持所有的浏览器，满足更多用户的需求。而W3C标准让我们能有一个良好的编码规范。首先我们来了解一下什么是&amp;lt;!DOCTYPE html&amp;gt;。在我...
复制链接

扫一扫