First, what is the web standard? The Web standard is not a standard, but a collection of standards. The web page is mainly composed of three parts: structure, performance, and behavior. Corresponding standards are also divided into three aspects: structured standard language mainly include XHTML and XML, and the standard language mainly includes CSS, and behavioral standards mainly include object models (such as W3C DOM), ECMAScript, etc.. Most of these standards drafted and published by W3C, and some are standards for other standards organizations, such as ECMAScript standards of ECMA (European Computer Manufacturers Association). Let's briefly understand these standards:
1. Structural standard language
(1) XML
XML is the story of the Extensible Markup Language. It is recommended to follow the XML1.0 released by W3C on October 6, 2000 (
http://www.w3.org/tr/2000/rec-xml-20001006). Like HTML, XML is also from SGML, but XML is a language that can define other languages. The purpose of XML initially designed is to compensate for the shortcomings of HTML, with powerful scalability to meet the needs of network information, and later gradually use the conversion and description of network data. The benefits of XML and technical specifications are not more to say, there are many information on the Internet, and there are many books to be referenced.
(2) XHTML
XHTML is the abbreviation of the Extensible Hypertext Markup Language extension identity. It is recommended to recommend XML1.0 on January 26, 2000 (reference
http://www.w3.org/tr/xhtml1). Although the data conversion capacity is powerful, it can be replaced by HTML, but in the face of thousands of existing sites, it is also time to use XML. Therefore, based on HTML4.0, we use XML rules to expand it to get XHTML. Simply put, the purpose of establishing XHTML is to achieve HTML to XML transition.
2. Performance Standard Language
CSS is an abbreviation for the Cascading Style Sheets laminated style sheet. It is currently recommended to recommend CSS2 on May 12, 1998 (reference
http://www.w3.org/tr/CSS2/). The purpose of the W3C creates a CSS standard is to replace the HTML table format layout, frame, and other languages. Pure CSS layout combined with structural XHTML can help designers separate the appearance and structure, making it easier for sites accessing and maintenance.
3. Behavior standard
(1) DOM
The DOM is an abbreviation for the Document Object Model Document Object Model. According to W3C DOM specification
http://www.w3.org/dom/), DOM is a browser, platform, language interface, so that you can access other standard components in page. Briefly, DOM solves the conflict between Netscaped JavaScript and Microsoft JScript, gives Web designers and developers a standard approach to access the data, scripts, and performance layer objects in their site.
(2) ECMAScript
ECMAScript is a standard scripting language (JavaScript) developed by ECMA (European Computer Manufacturers Association). It is currently recommended to follow ECMAScript 262 (http://www.ecma.ch/ecma1/stand/ecma-262.htm).
Second, why do you want to build a website standard?
Most of us have a deep experience. Whenever we have upgraded the mainstream browser version, our new website may become too time, we need to upgrade or re-build a website. For example, 1996-1999, typical "Browser Wars", in order to be compatible with Netscape and IE, the website has to write different code for these two browsers. Similarly, whenever new network technology and interactive equipment, we also need to make a new version to support this new technology or new device, such as WAP technology that supports mobile Internet access. Similar questions: Website code is bloated, complicated to we waste our large bandwidth; for some browser's DHTML effect, some potential customers; unprystable code, disabled people can't browse the website, etc. This is a vicious circle and is a huge waste.
How to solve these problems? People who have knowledge have already begun to think and need to establish a standard for universally identified standards to end this disorder and confusion. Commercial companies (Netscape, Microsoft, etc.) have finally recognized the benefits of unified standards, so under the organization of W3C (W3c.org), the website standard began to be established (the XML1.0 is released on February 10, 1998), and Promote the implementation of the website standard organization (WebStandards.org).
Simply put, the purpose of the website standard is:
Provide maximum benefit to the most website users
Ensure that any website is easy to be effective for a long time
Simplify code, reduce construction costs
Make the website easier to use, adapt to more different users and more network equipment
When the browser version is updated, or when a new network interactive device appears, make sure all applications can continue correctly.
For website design and developers, follow the website standard is the standard; for your website users, the website standard is the best experience.
Third, what is the benefit of using the website standard?
The benefits of website viewers:
File download and page display speed faster;
Content can be accessed by more users (including disabilities such as blindness, weakness, color blind);
Content can be accessed by a wider device (including screen readers, handheld devices, search robots, printers, refrigerators, etc.)
Users can choose to customize their performance interfaces through styles
All pages can provide versions suitable for printing
Benefits for website owners:
Less code and components, easy to maintain
The bandwidth requirements are reduced (the code is more concise), and the cost is lowered. For example: After Espn.com uses the CSS revision, save more than two megabytes.
More easily searched by the search engine
Easy to change, no change page content
Provide print version without copying content
Improve website ease of use. In the United States, there are strict legal provisions (Section 508) to constrain government websites to reach certain ease of use, and other countries have similar requirements.
Fourth, how to improve existing websites?
Most of our designers are still using traditional table layouts to express websites with mixed structures. Learning to use XHTML CSS requires a process that makes existing websites in accordance with the website standards. The best way is to gradually enter, staged to gradually meet the target of the website standard. If you are a newbie, or is not very familiar with the code, you can also use the standard editing tool, such as Dreamweaver MX 2004, which is currently supporting the most complete tool for CSS standards. 1. Primary improvement
Add the right DOCTYPE to the page
Many designers and developers don't know what is doctype, what is used by doctype. DOCTYPE is the discument type's shorthand. Mainly used to explain what version you use XHTML or HTML. The browser explains the page code based on your DTD defined by your DOCTYPE. So, if you don't pay attention to setting the wrong Doctype, the result will make you very shocked. XHTML1.0 provides three DOCTYPE options:
(1) Transitional
http://www.w3.org/tr/xhtml1 /dtd/xhtml1-transition.dtd ">>
(2) Strict profile (strict)
http://www.w3.org/tr/xhtml1 /dtd/xhtml1-strict.dtd ">>
(3) Frameset
http://www.w3.org/tr/xhtml1 /dtd/xhtml1-frameset.dtd ">>
For our primary improvement, as long as you choose a transitional statement. It can still be compatible with your form layout, express identity, etc., not allowing you to think too much, it is difficult to master.
Tip: You are too lazy to enter the above transition code, you can access
Http://www.macromedia.com/ Site Home, then view the source code, and paste the same code code as the Head area.
Set a namespace (Namespace)
Add the following code directly behind the DOCTYPE statement:
The coding language that is declared here is Simplified Chinese GB2312, and if you need to make traditional content, you can define as BIG5.
Write all labels with lowercase letters
XML is sensitive to case sensitive, so XHTML is also different from cases. All XHTML elements and properties must be written. Otherwise your document will be considered invalid by the W3C check. For example, the following code is incorrect:
Company Profile </ Title></p>
<p>The correct way of writing is:</p>
<p><Title> Company Profile </ Title> The same, <p> is changed to <p>, <b> to change to <b> and so on. This conversion is simple.</p>
<p>Add a Alt property for the image</p>
<p>Add a Alt property to all images. The Alt property specifies that the replacement text is displayed when the picture cannot be displayed, so that the normal user can have no, but it is critical to the plain text browser and the user using the screen reader. Only the ALT property is added, the code will be passed by the W3C correctness. Note that we have to add meaningful ALT properties, which is meaningless:</p>
<p><img src = "logo_unc_120x30.gif" alt = "logo_unc_120x30.gif"></p>
<p>Correct way:</p>
<p><img src = "logo_unc_120x30.gif" alt = "UNC company logo, click back home"></p>
<p>Give all attribute values plus quotes</p>
<p>In HTML, you don't need to add quotes to attribute values, but in XHTML, they must be an extension.</p>
<p>Example: Height = "100" instead of Height = 100.</p>
<p>Close all labels</p>
<p>In XHTML, each open tag must be turned off. Just like this:</p>
<p><p> Every open tag must be turned off. </ p> <b> HTML can accept the non-closed standard, XHTML is not. </ b></p>
<p>This rule can avoid HTML chaos and trouble. For example: if you don't close the image tag, a CSS display problem may occur in some browsers. Use this method to ensure that the page is displayed as you design. It should be noted that the empty tag is also turned off, and a positive slash "/" is used in the tail of the tab. E.g:</p>
<p><br /> <img src = "WebStandards.gif" /></p>
<p>After the above seven rules are processed, the page is basically in line with XHTML1.0 requirements. But we also need to verify that it is really in line with the standard. We can use W3C to provide free verification services (</p>
<p>http://validator.w3.org/). Improve the error after the error is found. In the list of resource lists, we also provide additional verification services and the URL for the verification, which can be supplemented as a W3C check. When I finally passed the XHTML verification, I congratulated you have taken a big step to the website standard. It's not that difficulty imagined!</p>
<p>2. Intermediate improvement</p>
<p>Next, our improvements are mainly separated by structures and performance, which is not easy to implement in the first step, and we need to transform on the concept, and the learning and application of CSS2 technology. But learning any new knowledge requires some time, isn't it? The trick is to do while doing. If you have been using the form layout, I haven't used CSS at all, nor I have to hurry to say goodbye to the form layout, you can use the style sheet to replace the Font label. As you have learned, the more you can do. Ok, let's take a look at what we need to do:</p>
<p>Define elementality with CSS</p>
<p>We have developed habits when writing logo, when you want the font to use <H1>, you want to add a point symbol in front to <li>. We always want <h1> meaningful, <li> means a dot, <B> means "bold text". In fact, <h1> can become anything you want, through CSS, <H1> can become small fonts, <p> text can become huge, bold, <li> can become A picture, etc. We can't force the performance of the structural elements, and we should use CSS to determine the appearance of those elements. For example, we can make the default 6-level title can look like:</p>
<p>H1, H2, H3, H4, H5, H6 {Font-Family: Song, Serif; Font-size: 12px;</p>
<p>Use structured elements to replace meaningless garbage</p>
<p>Many people may never know that HTML and XHTML element design is intended to express structures. Many of us have become accustomed to control performance with elements, not structures. For example, a list of content may use the following identity:</p>
<p>Sentence 1 <br /> sentences 2 <br /> sentences three <br /></p>
<p>If we use a unordered list, it will be better:</p>
<p><UL> <li> sentence one </ li> <li> sentence 2 </ li> <l> sentence three </ li> </ ul></p>
<p>You may say "But <li> shows a dot, I don't want to use a dot." In fact, CSS does not set an element looks like, you can completely turn off the dot with CSS.</p>
<p>Add Id to each table and form</p>
<p>Give a form or form a unique, structured tag, for example</p>
<p><Table ID = "Menu"></p>
<p>Next, when you write a style sheet, you can create a "MENU" selector and associate a CSS rule to tell the table unit, how to display all other elements. In this way, there is no need to bring some extra, wide, align, and background color, etc. of the performance layer of each% LT; TD> tag. Only one adhered tag (tag "Menu" ID tag can be required to perform a special performance layer in a separate style table for a clean, compact code tag.</p>
<p>Intermediate improvement of us three main three points, but there is a lot of content and knowledge points, we need to learn and master them gradually until the final implementation of CSS without using any form to implement layout.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-118138.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="118138" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.045</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'KEnnkD_2FwLYxsu9fFr8VNbuMDgdYjjPXGNKdt3BAdx5KwmUhYQxFT6K5g9AYEM0_2B2WiKWePxcFrf9szP8';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
