May 27, 2021 W3C Standard
1. w3cinteraction domain interactive technology standard area
2. w3cubiquitous web domain universal Web standards domain
3. w3cTechnology and Society Domain Technology and Social Standards
4. w3c Information and Knowledge Standard Area
W3C organizes W3C standard activities by establishing domains and standard programs, and establishes relevant W3C work organizations (including working groups, community groups, business groups, etc.) around each standard plan.
W3C adjusts the settings of Domains and Actity and related team settings to meet industry standards.
As of July 2014, W3C has established five technical areas and has 24 standard programs.
View a list of all teams.
First, purpose: Why follow the standard
We, as producers, are actually just in the middle, not upstream browser manufacturers, they are the real standard-seters,
they are not downstream, they are end users of browsers. T
his role means that we are located on an interface,
and we need to find a way to meet what downstream users see when using different browsers upstream. I
n the language of a program, we are converters... a
dapter, we find ways to make our pages, our programs, support
all browsers and reach as many users as possible. W
e want to meet all our customers, even if we can't, we have to meet all the users within our technical range.
Second, the goal
A standard-made website that makes you feel like you don't have anything to do with standards at all.
Third, the audience
All ui designers, technical engineers, operations and maintenance personnel.
Fourth, the standard content
Discard Statement: In the future, we will discard the font tag, the new page should not appear again such as the "red", the existing old page should also be modified as far as possible to replace, alternative methods:
class=”red_tex”></span>。
A standard XHTML header information format is as follows:
<!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>W3Cschool - 学技术查资料，从w3cschool开始!</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="w3cschool,w3cschool在线教程,技术文档,编程入门教程,W3Cschool,W3C,HTML,HTML5,CSS,Javascript,jQuery,Bootstrap,PHP,Java,Sql" /> <meta name="description" content="w3cschool是一个专业的编程入门学习及技术文档查询网站，提供包括HTML,CSS,Javascript,jQuery,C,PHP,Java,Python,Sql,Mysql等编程语言和开源技术的在线教程及使用手册，是类国外W3Cschool的W3C学习社区及菜鸟编程平台。" /> </head>
1, what is DOCTYPE
DOCTYPE is a short version of the document type (document type) that describes what version
of XHTML or HTML you are using. W
here the DTD (e.g. xhtml1-transitional.dtd)
is called the document type definition, which contains the rules of the document, the reader interprets the
identity of your page according to the DTD you define, and displays it. D
oCTYPE
claims are an essential and critical component of establishing a standard-compliant Web page, and between your logo and CSS will not take effect unless your XHTML
determines the correct DOCTYPE.
XHTML 1.0 offers three DTD declarations to choose from:
i)
Transitional:
Requires a very loose DTD that allows you to continue using the HTML 4.01 logo (but in accordance with the xhtml writing).
The full code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ii)
Strict:
Strict: Strict DTD, you can't use any of the identity and attributes of the performance layer, such as .
The full code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
iii)
Frameset:
A DTD specifically designed for frame pages that you need to use if you have a framework in your page.
The full code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Note: DOCTYPE declarations must be placed at the top of every XHTML document, above all code and identities.
2, namespace namespace
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
Usually our HTML 4.0 code is just .lt;html;, what's the "xmlns" here?
This "xmlns" is an acronym for XHTML namespace and is called a "namespace" declaration. X
HTML is the identity language for HTML's transition to XML, and it needs to comply with XML documentation rules, so it also needs to define a namespace. A
nd because XHTML 1.0 can't
customize the identity, its name space is the
same, http://www.w3.org/1999/xhtml." A
t this stage we just have to copy the code.
3, define language coding
<meta http-equiv=“Content-Type” content=“text/html;
charset=gb2312” />
In order to be correctly interpreted by the browser and verified by the W3C code, all XHTML documents must state the encoding language they
use, we generally use gb2312 (Chinese Simplified), and it is possible to make multi-Chinese-word pages with Unicode, ISO-8859-1,
etc., as defined according to your needs.
Note: If you forget to define the language code, it may appear that you finished a page in dreamweaver and when you open it the second time all the Chinese become garbled.
4, Javascript definition
Js must be defined by the word
"javascript" type,
not by the original word, by javascript, or simply by a commenter, and by a commenter, "!--" -- to ensure that code
is not displayed directly on browsers that do not support js.
For example:
<script language="javascript" type="text/javascript"> //<![CDATA[ function show_layout(selObj){ var n = selObj.options[selObj.selectedIndex].value; document.getElementById('stylesheet').href = n; } //]]> </script>
Note: Refer specifically to the js specification.
5, CSS definition
CSS must be defined by the beginning of the "text/css", rather than the original direct, style, and is not recommended to write directly in the content code such
as: .lt;div style, "padding-left:20px;
"And
you need to add an annotation to the release of the !-- --
. .
For example:
<style type="text/css" media="screen"> <!-- body {margin:0px;padding:0px;font-size:12px;text-align:center} --> </style>
To ensure the compatibility of each browser, write the CSS in quantitative units, e.g. error: .space_10 .padding-left:10) correct: .space_10 .padding-left:10px
6. Don't use "--" in comments
"--" can only occur at the beginning and end of XHTML comments, that is, they are no longer valid in the content.
For example, the following code is not valid: !-- here is ----------- here is a comment --
Apply the equal sign or space correctly to replace the inner dashed line.
This !-- here is a note.
7. The names of all label elements and properties must be in small case
Unlike HTML, XHTML is case sensitive, and is a different
label. X
HTML requires that the names of all tags and properties be in small case. F
or example, it must be written as . C
ase mixing is also not
recognized, and the property name "onMouseOver" that is usually automatically generated by dramweaver must also be modified to "onmouseover".
8. All properties must be enclosed in quotation marks
In HTML, you don't need to quote property values, but in XHTML, they must be quoted.
For example: .lt;height=80> must be modified to: .lt;height="80"."""
In exceptional cases, you need to use double quotes in property values, which you can use" and single quotes that can be used in . ,
e.g.: slt;alt="say' h
ello'
">
9. Encode all the special symbols
Any less than the sign, which is not part of the label, must be coded as
Any larger than the number, which is not part of the label, must be coded as
Any number, which is not part of the entity, must be coded as
Error:
http://club.china.alibaba.com/forum/thread/search_forum.html?action=SearchForum&doSearchForum=true&main=1&catcount=10&keywords=mp3
That's right:
http://club.china.alibaba.com/forum/thread/search_forum.html?action=SearchForum& d
oSearchForum=true& m
ain=1& c
atcount=10&
keywords=mp3
10, assign a value to all properties
XHTML states that all properties must have a value, which repeats itself without a value. F
or example:
The value of "medium" checked by the input type is modified to:
<td nowrap="nowrap"><input type="checkbox" name="shirt" value="medium" checked="checked" />
11. All tags must have a corresponding end tag
Previously, in HTML, you could turn on a number of tags, such as
.lt;p.gt;and .lt;li.gt;and not necessarily write the corresponding .lt;/p.gt;and .lt;li> to close them. B
ut this is illegal in XHTML. X
HTML requires a rigorous structure and all labels must be closed. I
f
is a label that is not paired separately, add a "/" at the end of the label to close it.
e.g.: slt;br /;
slt;img height-"80" alt="page" title="web page" src="logo.gif"width"200" />
Special end tag
Error:
Document.write("<td width=\"300\"><a href=\"1.html\">ok</a></td>");
That's right:
Document.write("<td width=\"300\"><a href=\"1.html\">ok<\/a><\/td>");
In js, the label that was originally closed needs to be escaped and then ended.
12. All tags must be reasonably nested
Also because XHTML requires a rigorous structure, all nesting must be in order, as we wrote before:
It must be modified to:
That is, layer by layer nesting must be strictly symmetrical.
Error:
<table><tr><form><td></td></form></tr></table>
That's right:
<form><table><tr><td></td></tr></table></form>
13, the picture adds meaningful alt properties
For example: "lt;img src" "logo.gif"width"100" height"100" align "middle" boder "0" alt "w3cschool" />
Make the picture as content as possible with its own alt attribute.
Similarly: Add the title property of the text link.
the "target" "_blank"title" "News News News" .
. . news news. I
t is especially important to display content in
some limited numbers, helping to display incomplete content without considering that the page will be large as a
result.
14. Add live in the form form to increase user friendliness
For example:
<form action="http://somesite.com/prog/adduser" method="post"> <label for="firstname">first name: </label> <input type="text" id="firstname" /> <label for="lastname">last name: </label> <input type="text" id="lastname" /> </form>
Appendix I
1, XHTML verification
Check url: http://validator.w3.org/
Check method: URL check, file upload check
Generally selecting Show Source and Verbose Output can help you find the line of the error code and the cause of the error.
XHTML checks the control table for common causes of errors
1.No DOCTYPE Found!
Falling Back to HTML 4.01 Transitional -- DOCTYPE is not defined.
2.No Character Encoding Found!
Falling back to UTF-8. -- Language encoding is not defined.
3.end tag for "img" omitted, but OMITTAG NO was specified - picture label not added "/" off.
4.an value value specification must be attribute value literal unless SHORTTAG YES is specified - property values must be quoted.
5.element "DIV" undefined--- DIV label can not be capital, to be changed to small div.
6. Needed attribute "alt" not specified--- picture needs to add alt properties.
7. The label called JS or CSS --- the label of the "type" not specified by the required attribute missing the type property.
One of the most common errors is the case problem with the label. U
sually these errors are
related, such as forgetting that one or the other labels will report errors, so don't see a bunch of errors to be afraid of, usually solve a mistake, and his
mistakes are gone.
Appendix II
2, CSS2 verification
Check url: http://jigsaw.w3.org/css-validator/
Check method: URL check, file upload check, directly paste code check
If the check is successful, "Congratulations, this document has passed the style sheet check!" "
。 I
f the check fails, two types of errors are displayed: errors and warnings. A
n error means that it must be fixed or
it cannot pass the check, and a warning indicates that the code is not recommended by W3C and is
recommended for modification.
Similarly, after passing the test, you can place a CSS check pass icon.
CSS2 checks the control table for common causes of errors
1. (Error) invalid number: color909090 is not a color value, 909090--- Heteenic color value must be added with the "
2. (Error) invalid number: margin-topUnknown dimension: 6pixels ---pixels is not a unit value, write 6px correctly
3. (Error) property: scrollbar-face-color does not exist: #eeeeee --- the scroll bar color is a non-standard property
4. (Error) value: cursorhand does not exist: hand is a non-standard property value, modified to cursor:pointer
5. (Warning) Line:0 f
ont-family: It is recommended that you specify a family section as your last choice -- when W3C recommends font definitions, it ends with a category font, such as "sans-serif",
to ensure that web fonts are
displayed under different operating systems.
6. (Warning) Line:0
can't find the warning message for otherprofile -- indicates that there are non-standard properties or values in the code, and the checker cannot judge and provide the appropriate warning information.