Concise HTML CSS Development Specification
//
This specification is both a development specification and a scripting language reference. This specification is not a provision that must be strictly complied with, and it is necessary to use it in special circumstances. However, please don't change the specification at will. If you have any questions, please contact me in time, I will change the sample samples and documents of this specification in time.
/basic requirements
1. Open the three subdirectories in the website root directory, and then open the Media subdirectory as needed, the image of different columns in the images directory, such as the company's logo, banner, menu, buttons Wait; CSS, JS, PHP, including public files such as CSS, JS, PHP, and include, etc.; TEMP subdirectory release customers all kinds of text pictures, etc. . 2. In the root directory, you should follow the column structure of the homepage, give each column, set a directory to the list of images and Media sub-directorys to place this column as needed to place this column proprietary pictures and Multimedia files, if this column is particularly versatile, all of which are divided into many subordinate columns, and you can open other directories accordingly. 3. The files in the TEMP directory will often be more, it is recommended to set the directory for the name to finish the information provided by the customer. 4. Unless there are special circumstances, directory, the name of the document is all combined with lowercase English letters, numbers, the next line, which must be included in Chinese characters, spaces, and special characters; directory name, please try to guide English, don't don't have pinyin As a directory name, experience proven, directory named in pinyin is often unknown for one month later.
/ Script
We should have a conceptual concept of script's overall style, which is a month after a month and a month ago, and the script style written in the same work group is consistent, because we cannot Forever, you can work with yourself in your own time (your customer requests to revise), and often develop a project with different colleagues in the studio, and may be required to be revised. The developed script, of course, you may also throw a colleague to the next project.
1. General Templates for HTML files:
document Title </ title> <meta http-equiv = "content-type" content = "text / html; charset = gb2312"> <meta name = "author" content = "easy"> Other Meta tag <link rel = "stylesheet "Type =" text / css "href =" style / style.css "> style table defines the client JavaScript function definition and initialization operation </ head> <body bgcolor =" # ffffff "> ... </ body> Supplement: In order to ensure that the website can be compatible with the next generation of web language XML standards, all the attributes of all HTML tags must be enclosed in single quotes or double quotes, that is, we should write <a href="url"> rather than <a href = url > .2. Allow full-text search, in order to enable the search engine on the Internet to effectively retrieve, Keywords and Description metadata should be added between the HTML <head> </ head> of the channel's home page, for example: <meta name = "Keywords" content = "Oriental new trunk line, car, buy car"> <meta name = "description" content = "Oriental new dry line, global Chinese car information first stop"> 3. CSS file format code : <Style type = "text / css"> <! - p {text-indent: 2em;} body {font-family: "Song"; font-size: 9pt; color: # 000000; margin-top: 0px; Margin-Right: 0px; margin-odat: 0px} Table {font-family: "Song"; font-size: 9pt; line-height: 20px; color: # 000000} A: link {font -size: 9pt; co Lor: #fffff; text-decoration: none} a: visited {font-size: 9pt; color: # 99fff; text-decoration: none} a: hover {font-size: 9pt; color: # ff9900; text-decoration : none} A: Active {font-size: 9pt; color: # ff9900; text-decoration: none} a.1: link {font-size: 9pt; color: # 3366cc; text-decoration: none} a.1 : visited {font-size: 9pt; color: # 3366cc; text-decoration: none} a.1: hover {font-size: 9pt;</p>
<p>Color: # ff9900; text-decoration: none} a.1: active {font-size: 9pt; color: # ff9922; text-decoration: none} .boe {font-family: "Song"; font-size: 10.5 Pt; Line-Height: 20px; Color: # 0099ff; Letter-spacing: 5em} -> </ style> This is especially noted here that A: Link A: Visited A: Hover A: Active is a must Sample code on the top, otherwise or less problems. In addition, we specify the first, pseudo-class, and the final, easy to read it with others! In order to ensure that the font size on different browsers is consistent, the font size is recommended to define points of PT and pixel PX. PT usually uses Chinese Song's 9PT and 11PT, PX generally uses Chinese Song 12PX and 14.7PX this is an optimized font size, black body or When the Song body is bold, it is generally preferred to use 11PT and 14.7px fonts. When writing <table>, in strict accordance with the specification, for a separate <table>, <table> <tr> alignment, <TD> indent two half-horned spaces, <TD> if there is Nested form, <table> also harvested two half-way spaces, if there is no nested table in <TD>, </ td> end tag should be in the same line with <TD>, do not change, if we pay attention to There should be such code in the source code: <TD> <img src = "../ images / sample.gif"> </ td> should be like this: <TD> <img src = "../ images /sample.gif "> </ td> This is because the browser believes that the wrap is equivalent to a half-horned space, the above irregular write method is equivalent to increasing a half-way space inadvertently, and if it is necessary to increase a half-horned space, it should also be written : <TD> <img src = "../ images / sample.gif"> </ td> belongs to the same level <table> must be left-aligned, and there is no empty cell without any content. The cells that are higher than or equal to 12px should be written between <TD> and </ TD> If the height is less than 12px, one * 1 size transparent GIF should be inserted between <TD> and </ TD>. Pictures, this is because some browsers think that empty single-collages illegally and will not be explained. If the code sequence is more chaotic, you can re-organize it in DW3! 5. Width and Height's writing also has a unified specification. In general, there is only one column of table. Width is written in the "Table> tag, only one line of table, Height writes in the" Table> tag, multi-line multi-row Tables, WIDTH and Height are written in the first row or the first column of <TD> tag.</p>
<p>In summary: Do not appear more than one HEIGHT and WIDTH, which guarantees any Width and Height, which is valid, which is the value of any width and height in your change, should be Change in the browser. It is not easy to do this, it takes a long exercise and thinking. / A principle</p>
<p>1. Before the release form, please think about a better solution, the nesting of the table is controlled within three layers, and should try to avoid <colspan> <rowspan> two tags, experience shows that these two A tag will bring a lot of trouble. 2. A page should try to avoid using the entire list, all content is nestled within this big table, because the browser is displayed one by one in the form when the page is explained, if a web is embedded Set within a big table, then the consequences that are likely to cause, when the viewer is knocking in the URL, he must face a blank for a long time, then all the web content appears at the same time. If you have to do this, use the <TBODY> tag to enable this large table block. 3. In the typography, we often encounter the processing of the first line indentation, do not use or full-width space to achieve the effect, the practice of the specification is to define p {text-indent: 2em;} and add each paragraph <P> mark, note, in general, please do not omit </ p> end tags. 4. In principle, we prohibit the size of the image displayed by <img width =? Height =?>, And it is recommended that both width and height attribute in the <IMG> tag, because the image is It is often necessary to repeated modification, which avoids artificial intervenes to display the size, as much as possible to play the function of the browser itself; but such a side effect is that when the web does not load the picture, it will not leave the picture size, May cause the web page to jitter during loading (if the picture is inserted in a fixed size table, there will be no such phenomenon), especially when the picture is large, this phenomenon will be obvious, so when it is expected When this will be clearly caused by web jitter, please make sure you will attach Width and Height properties to <IMG>. 5. In order to maximize the function of the browser automatic version of the function, please do not use the <br> to manually intervene in a complete text. 6. There should be a half-horned space between the words of different languages, but the brackets between the other characters before the symbols of the Head, except for the symbols of the tails, the brackets around the Chinese characters, the brackets around the English letters and numbers should use half-corned parentheses. 7. All font numbers should be implemented in style tables, and the <font size =?> Tag is prohibited in the page. 8. Please do not use more than one in a row in the web page to use less all-round spaces (under the English character set, the full-corner space will become garbled), blank should try to use Text-Indent, Padding, Margin, HSpace, vSpace, and Transparency GIF picture is implemented. 9. In the Chinese and English mix, we are asleep as much as possible as Verdana and Arial. 10. Bacout Suggestions are defined by percentage, the commonly used two line spacing values are line-height: 120% / 150 %.11. The path in the website uses relative paths, generally link to the default file under a directory. The link path does not have to write a full name, if we don't have to do this: <a href="aboutus/index.htm"> should be like this: <a href="aboutus/"> 12. Embed a large font using the graphic text, suggestion Do not include text in the graph. 13. "Web Size" is defined as the sum of all file size, including HTML files and all embedded objects. Users like fast rather than novelty sites.</p>
<p>For demodulator users, the web page is maintained at 34k or less. / Document Name The original 1. Each directory should contain a default HTML file, file name unified with index.htm2. Part name unified use of lowercase English letters, numbers, and underscles. 3. The guiding ideology of naming principles is that every member of your own and working group can easily understand the meaning of each file. Second, when we use the "Decoction Orders" in the folder, the same Classical files can be arranged together so that we can find, modify, replace, compute loads, and the like. 4. Here, "News" (including "Domestic News" and "International News") this column to illustrate the naming principle of the HTML file: ☆ Open the news directory in the root directory ☆ First default news name index.htm ☆ All news belonging to "Domestic News" is named: China_1.htm, China_2.htm, ... ☆ All news belonging to "International News" is named: International_1.htm, INTERNATION _2.htm, ... ☆ If the file The number is two digits. Please name the first nine files: China_01.htm, China_02.htm to ensure that all files can be properly sorted in the folder. 5. The naming principle of the picture follows the following specification: ☆ The name is divided into two or two parts of the head, separated by underline. ☆ The header represents the large-class properties of this picture, such as advertisements, signs, menus, buttons, and more. ☆ Generally, put the advertisement on the top of the page, the decorative pattern, etc. We are named: Banner Signature of the picture We are named: logo is not fixed on the page, and the small picture with links We named Button continuously appearing in a page, the same link section of the product, our name: Menu Decorated Photo We name: PIC without links Show the title of the title Title We name: Title is in accordance with this principle. ☆ The tail portion is used to represent the specific meaning of the picture. ☆ The following is a few samples, everyone should be able to understand the meaning of the picture: banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-100249.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="100249" 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.039</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 = 'RVttpVwd3a5oqEOPkQ6j1kJ1sgdOD98FWLWpUwU2BVC5IU2gkeQM5VGTkYcBlbj6MRZdpElB6C9JZPhcCV5_2BNQ_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>
