Author: Acha 2004-6-25 10:13:01
#bgone {border: 1px dotted # 666; padding: 30px; Background: URL (images / bg_border.jpg) #fff repeat left top;}
#bgtwo {border: 0; Padding: 20px; Background: URL (images / bg_poem.jpg) #fff repeat left top; color: # 00a651}
UL {List-style-type: none;}
#ptitle {font-size: 18px; color: # c00; font-weight: bold; text-align: center;
#pauthor {text-align: center;
#poem {font-size: 14px; font-family: 'black body', 'Song body', 'new Song body'; font-weight: bold; margin: 10px 100px 10px 200px;}
.jtitle {font-size: 14px; color: # c00; font-weight: bold;}
.note {color: # c61c18;
For beginners, we often see one of the benefits of the Web standard is "Can perform performance and structural phase separation", what does this mean? I will explain the detailed example in an actual example. First we must first understand some basic concepts: content, structure, performance and behavior.
Content
The content is true information to be communicated by the page, including data, documentation, or pictures. Note that "true" this is emphasized, refers to pure data information itself. For example, an information that does not include auxiliary, such as navigation menu, decorative pictures, etc. For example, there is a piece of text below is the information we want to behave.
Recall the Jiangnan (1) Tang. Bai Juyi Jiangnan is good, the scenery is old. (2) Sunrise Jianghua Hongsheng fire, spring is green, green, (3) can not remember Jiangnan. Author's introduction 772-846, word music day, Taiyuan (now Shanxi) people. Tang Dezong, Jinshi, Yuanhe three years (808), worship, after the resection History of Shaanxi Province. Late home Luoyang, self-drunk, Mr. Xiangshan. Its poetry is very political, heavy, and is easy to stay in Zhongtang. It is also a leader in the early words, and it has great influence in the future. Note (1) According to "Yuefu Miscellaneous", this term is also known as "Xie Qiu Niang", Tang Li Deyu is the Qi Jie Qi Niang. Also known as "Wang Jiangnan", "Dream Jiangnan" and so on. Divided, double-tone. Toned twenty-seven words, double witty five4 words, all are rhyme. (2) Many (sound security): Familiar. (3) Blue: Blue grass, whose leaves can be blue and green dyes. This word is written in Jiangnan, the first sentence "Jiangnan is good", with a "good" word that is both shallow and round live, takes the best in Jiangnan spring, and the author's praise and yearning among them. At the same time, the only thing that is "good" has been "good", "complies" does not end, so this sentence has been secretly "can not remember Jiangnan" and related to it. The second sentence "The Landscape of the Lands", click "Good" in the Jiangnan scenery, not to rumize, but the author's personal experience and personal experience. This is implemented in the "good" word, and the word "recall" is not lost to a wonderful pen ink. Third, four two sentences to the "good" of Jiangnan, highlight the bright color of the river and river red and green, giving people a strong impression of glory. Among them, there are both mutual rejection of the same color, and the transcitrite of the transformation, which fully shows the author's tips for coloring. At the end of the article, the author of "Can not remember Jiangnan", the author of the born in Luoyang's infinite praise and nostalgia of Jiangnan spring, causing a long and deep charm, bringing readers into the rest of the ripple Among the realm. 2. Structure (Structure)
It can be seen that the above text information itself is complete. But there is a chaos, it is difficult to read and understand, we must format it. Divide it into title, authors, chapters, knots, paragraphs and lists.
title
Recalling Jiangnan (1) Author Tang. Bai Juyi's body Jiangnan is good, the scenery is old. (2) Sunrise Jianghua Hongsheng fire, spring is green, green, (3) can not remember Jiangnan. 1 author introduces 772-846, the word music day, Taiyuan (now Shanxi) people. Tang Dezong, Jinshi, Yuanhe three years (808), worship, after the resection History of Shaanxi Province. Late home Luoyang, self-drunk, Mr. Xiangshan. Its poetry is very political, heavy, and is easy to stay in Zhongtang. It is also a leader in the early words, and it has great influence in the future. 2 Notes List (1) According to "Yuefu Miscellaneous", this term is also known as "Xie Qiu Niang", Tang Li Deyu is the Qi Jie Qi Niang. Also known as "Wang Jiangnan", "Dream Jiangnan" and so on. Divided, double-tone. Toned twenty-seven words, double witty five4 words, all are rhyme. (2) Many (sound security): Familiar. (3) Blue: Blue grass, whose leaves can be blue and green dyes. Section 3 Products Words Wen Jiangnan Spring Color, the first sentence "Jiangnan Good", with a "good" word that is both shallow and round live, takes the best in Jiangnan spring, and the author's praise is also Embossing. At the same time, the only thing that is "good" has been "good", "complies" does not end, so this sentence has been secretly "can not remember Jiangnan" and related to it. The second sentence "The Landscape of the Lands", click "Good" in the Jiangnan scenery, not to rumize, but the author's personal experience and personal experience. This is implemented in the "good" word, and the word "recall" is not lost to a wonderful pen ink. Third, four two sentences to the "good" of Jiangnan, highlight the bright color of the river and river red and green, giving people a strong impression of glory. Among them, there are both mutual rejection of the same color, and the transcitrite of the transformation, which fully shows the author's tips for coloring. At the end of the article, the author of "Can not remember Jiangnan", the author of the born in Luoyang's infinite praise and nostalgia of Jiangnan spring, causing a long and deep charm, bringing readers into the rest of the ripple Among the realm. Similar to the above title, author, chapters, sections, paragraphs and lists, we call it structure. The structure makes the content more logical, easy to use.
2. Performance
Although the structure is defined, the content is still not changed, for example, the title font is not large, the color of the body has not changed, no background, no modification. All of these things used to change the appearance of the content, we call "performance". Below is the effect of the above text with performance processing:
Recall the Jiangnan (1)
Tang. Bai Juyi
Washed from Jiangnan, the scenery is old. (2)
Sunrise river flowers, red, spring, river, green, green, (3)
Can not remember Jiangnan.
about the author
772-846, Character, Taiyuan (now Shanxi) people. Tang Dezong, Jinshi, Yuanhe three years (808), worship, after the resection History of Shaanxi Province. Late home Luoyang, self-drunk, Mr. Xiangshan. Its poetry is very political, heavy, and is easy to stay in Zhongtang. It is also a leader in the early words, and it has great influence in the future.
Comment
(1) According to "Yuefu Miscellaneous", this term is also known as "Xie Qiu Niang", Tang Li Deyu is the Qi Jie Qi Niang. Also known as "Wang Jiangnan", "Dream Jiangnan" and so on. Divided, double-tone. Toned twenty-seven words, double witty five4 words, all are rhyme. (2) Many (sound security): Familiar. (3) Blue: Blue grass, whose leaves can be blue and green dyes.
Column
This word writes Jiangnan Spring, the first sentence "Jiangnan is good", with a "good" word that is both shallow and round and live, takes the various benefits of Jiangnan Spring, and the author's praise is also in the same way. . At the same time, the only thing that is "good" has been "good", "complies" does not end, so this sentence has been secretly "can not remember Jiangnan" and related to it. The second sentence "The Landscape of the Lands", click "Good" in the Jiangnan scenery, not to rumize, but the author's personal experience and personal experience. This is implemented in the "good" word, and the word "recall" is not lost to a wonderful pen ink. Third, four two sentences to the "good" of Jiangnan, highlight the bright color of the river and river red and green, giving people a strong impression of glory. Among them, there are both mutual rejection of the same color, and the transcitrite of the transformation, which fully shows the author's tips for coloring. At the end of the article, the author of "Can not remember Jiangnan", the author of the born in Luoyang's infinite praise and nostalgia of Jiangnan spring, causing a long and deep charm, bringing readers into the rest of the ripple Among the realm. Oh, it is obvious that we add 2 contexts, turn the title font and bold the small title and become red, and so on. All of this is "performance" role. It makes your content look beautiful, more and more! The metaphor of the image: the content is the model, the structure indicates the head and the limbs, and the performance is the clothing, and the model is dressed up to drift. (Please forgive me for using the model, many times the model is more attractive than the Web standard.)
So what is behavior?
3. Behavior
The behavior is the interaction and operation of the content. For example, we are most familiar with JavaScript. Using JavaScript We can make the content, you can judge some form commit, you can do some of you. I will no longer have an example.
All HTML and XHTML pages are consisting of "structure, performance, and behavior". Abstract, the content is the base layer, then it is attached to the structural layer and the performance layer. After making some "behavior", it is shown that the sketch is as follows:
4. Traditional HTML method
Traditional HTML3.2 / 4.0 labels have both controlled structural labels, such as
, <p>, and controlled labels, such as <font>, <b>, and it is also used for the structure to be abused. Labels, such as <h1>, <table>, etc. The structural label is mixed with the performance label.</p>
<p>For example, the page exemplified above, you may be skilled in 2-5 tables to control the border, background and text; define the title and section title with <H2> <H3>; control the font with <font> and <b> Size, colors and bold. It is easy to make a good page. Smart designers also use CSS style sheets to unify the performance of some fonts. The following code is our most familiar:</p>
<p><table border = "0" width = "100%"> <tr> <td align = "center"> <h1> <font color = "# c61c18> Recall the Jiangnan </ font> </ h1> </ td > </ TR> </ table></p>
<p>There is no problem with the traditional way. (We have been very accustomed to, there have never thought about any problems.) But since W3C abandoned HTML, it would be a reason for XHTML and XML, and there must be its truth and reason, where is the problem?</p>
<p>The problem is mixed with the structural layer and the performance layer! When we only publish some simple pages, there is no impact. When we release a lot of pages, the problem is coming. The first question is: How to revise it. For some reason we need to replace the background to black, the border becomes 1PX yellow, the text becomes white, all text. You may have to modify one page. Ok, you said that you have used CSS, so congratulations, you can directly modify the style sheet and easily implement such a simple revision. (Complex revision is not mentioned.)</p>
<p>The second question is: the use of data. Essentially all page information is data. When I released 300 Tang poems, 100 Song Words were a considerable database, which should not be understood. So, it is the problem of data query, processing, and exchange of data. If all of my pages don't need to display this section; if I want to convert the page data into the Excel format; if I want to print a clean content page (don't work, navigation, copyright, etc. do? The traditional solution is: 1 page Delete "Eradication" section; one page is pasted to Excel, one page to make "Print Friendly Page". This is obviously not an efficient approach.</p>
<p>In fact, the first problem is essentially a bulk change "performance". Since the structure of the traditional HTML method is not obvious, it can even be considered only a performance, we are like designing fashion magazines. A rigorous designer can control the details per 1px. The content is closely nested, mixed together, and the structure is only manifested, not with labels. Under this design method, any content changes, the changes of structures affect the performance of the entire page, and it takes a little detail to modify. The appearance of CSS seems to be used to solve the problem of "bulk change performance". Most web designers have been able to skilled the CSS to control the size of the font, hyperlink results, the table's border, and the like, it has experienced the efficiency of CSS batches.</p>
<p>The second question is unavoidable. Due to structural and expression mixing (content is split by the table of N layers), you can't judge which TD to that TD is the data you need, and you can't peel off the label of the inclusions. In the above example, where is the text? Where is the "product evaluation" section? What is additional information does not need to print? We can't let the computer will judge themselves, the only way is manual judgment, manual processing. The structure and expression are mixed together, the page is like a picture, you can't let the computer searched the text. (Oh, I heard someone: My site has a full text search. Well, I want to say, first, this search efficiency is very low, you need to filter the entire content, match your "retrieval keyword" For example, I want to find the author Li Bai, the search engine will retrieve the page all text to tell you that "Li Bai" is contained in this page, and does not necessarily appear in the author. Second, such retrieval for data processing and exchange is useless. For example, I want to pick all the author Li Bai's poem, I want to add a portrait picture to all authors, such a search is unhappy.)</p>
<p>How to solve the second problem? The solution is: the structure is clarified, the content, the structure is separated from the performance.</p>
<p>5.Web standard recommended method</p>
<p>For the content, the structure is separated from the performance phase, it is earlier in the theory of software development architecture. QQ is used, the change in the QQ panel is the content of the content, the appearance is changed; and WinAmp's SKIN is also a typical embodiment of this principle. In fact, most of our designers have already come into contact with practices. Our dynamic information publishing system, actually based on this principle, designers only need to design template, programmers read data (title, authors, release dates, summary, related articles, related pictures, etc.) from the database Embedding your template, form a new page and show the viewer. The contents of which have been structurally saved in different fields of the database. For example, find the author, we only search in the Author field, this efficiency is much higher. The above is depends on the program. If the page document itself can achieve performance and structural separation, then the exchange and reuse of data is not more convenient. Hey, in fact, XML is going to this direction, XML allows you to customize the structure identity, and provide XSLT to format, query, and process document content. For example, the above poem page, the code written out with XML is like this:</p>
<p><Title> Recall the Jiangnan </ title> <author> Tang. Bai Ju Yue </ author> <body> Jiangnan is good ... </ body> <Author introduction> 772-846, word music day ... </ Author introduction> < Note> According to "Yuefu Miscellaneous ... </ Note> <Etenna> This word is written in Jiangnan ... </ 品 评></p>
<p>These <title> <author> are the labels defined, so that the document structure is very clear, query and handling are also very simple. Ah, say far. Or return to the Web standard method that is currently available.</p>
<p>Web standard methods are currently recommended to use XHTML CSS to make a website. The goal is to separate the structure and the performance is completely separated.</p>
<p>That is to say, XHTML's label is only used to define the structure of the document. All things involving the performance are turned out, put it in a separate file, this separate file is CSS. (The benefits of CSS have already been tested, and the performance can be used in batches). After using this method, three hypothetical difficulties in the second problem above are solved. We can use the style sheet to make all the "product" structural structures (Display: None); we can automatically import the content into Excel according to the page structure tag; we can design a special print style table, hide all additional information, only Print clean content. It's that simple.</p>
<p>Now you understand, why we oppose the form of layout. The reason is that when <table> is used for layout, it is a label that controls performance. Mixed in content and structures make our content data unusedly. The benefits of the structure and expression separation are mainly:</p>
<p>1. Data of data. Adapted to different devices through different style sheets, do nothing to do with the device 2. Keep the visual consistency of the entire site becomes very simple, modify the style sheet to easily revise; 3. Due to clear structure, data integration, update and Treatment is more convenient and flexible; 4. More meaningful searches.</p>
<p>Ok, talk about this, do you have a little understanding regarding the concept of performance and structural separation? If it is still modeled, it is not tight, and the actual production experience is gradually understanding in practice. Learning Web standards requires step by step, like Ajie, and is also working hard.</p>
<p>Do you want a practical example in line with the WBE standard? To view the example of the "Performance" concept is implemented with CSS DIV. The content of the style sheet is directly located on this page, no separate call, easy to view :)</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-119894.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="119894" 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.047</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 = 'BM7O7AtlXBW_2BBAHfc8KOVKvMrADLRTbvIj4zOsEdlLwPkNGRnWYZMybe3Pkhx7JgNOm0lXEnyRL08rO8FQ_2FyGg_3D_3D';
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>
