In the first lecture, the web file is actually written in HTML (hypertext tag language). HTML language looks very troublesome, we also don't understand all of its statements. Generally, we can use the normal page of FrontPage to make a web page in the way you come here. But from the previous learning, we have seen many places, we still can't avoid it completely. Insert a free space service provider code, insert counter, and dynamic program code, etc., both of the HTML language page. Learn some of the preliminary knowledge of HTML language, it is very necessary to do a good job, it is very necessary to do a good job, it is also helpful to optimize the webpage. In the future, you must learn the "Network Thousand Swordac" and you have to know it.
First, HTML language brief introduction
1. A simple HTML code actually html file is not as difficult to understand as we think, just more cumbersome. As long as you seriously observe, it is easy to find the law between statements. Below let's observe the HTML code of the simple web page as shown below:
Get the following code from the HTML view:
My job area </ title> </ head> <body bgcolor = "# c0c0c0"> <p align = "center" style = "margin-top: 0; margin-bottom: 0 "> <b> <font size =" 7 "face =" 书 "color =" # 0000f "> My job area </ font> </ b> </ p> <hr size =" 4 "color = "# Fff00" width = "80%"> <table border = "1" cellpadding = "0" cellspacing = "0" width = "100%"> <tr> <td width = "25%> <p align = "center"> <a href="bzdh.htm"> moderator </a> </ td> <td width = "25%> <p align =" center "> health care </ td> < TD width = "25%"> <p align = "center"> Tourist leisure </ td> <td width = "25%> <p align =" center "> Contact me </ td> </ tr> </ Table> </ body> </ html></p>
<p>We carefully control web pages and HTML code, you can find the following: 1) HTML language is composed of a marker in a pair of angle brackets in addition to the characters displayed in a web page. 2) Most markers are paired: the first sum of the HTML code is a pair of <html> and </ html>; other <head> </ head>, <title> </ title>, <body> And </ body>, <Table> and </ Table>, <Tr>, </ TD>, <TD>, </ / TD>, <P> and <B>, <B> </ B>, <font> </ font> 3) Carefully observe that: "My Job District" The corresponding HTML statement is: <b> <font size = "7" face = "书" color = "# 0000FF "> My job area </ font> </ b>, <b> and </ b> of the sentence, represent bold, <font size =" 7 "Face =" Color = "# 0000FF "> Represents the line of the blue belonging, and the </ font> represents the font and the font size setting of the font and font size setting. [Note] The seven word 7 words and Word here is not the same concept; while the color uses 6-digit hexadecimal number: "000000" means black, "ffffff" means white. "A" in the hexadecimal number represents a number 10, "B" represents the number 11, ..., "f" represents the number 15. 4) Further discovery: </ table> and </ table> represent a table; <hr size = "4" color = "# fff00" width = "80%"> Represents a "horizontal line"; 2, HTML document The basic structure HTML web page is usually: version information, web header (HEAD), and document main body (BODY). Among them, the document body is the main part of the HTML web page, which includes all the actual content of the document. The web header includes a title, a description, and other information. Most web pages omit the version information. The overall structure of the HTML web code is as follows: <html> <head> ... </ head> <body> ... </ body> </ html> 3, common HTML tag tags are packaged in a pair of angle brackets " <...>. The tag only changes the display of the web page, it does not appear in the window. Mark is divided into two categories of double markers and single markings. Most HTML tags are double-tagged, and it is composed of two parts: start marks and tail markings, must be used. The previously lifted is a dual mark, and the content to be modified or explained is placed between the start mark and the tail mark. The start mark tells the web browser to start the function represented by this tag from this, and the tail mark tells the web browser to end this feature here. Before the start mark, add a slash (/) to become a tail mark. Single tags can be fully expressive only by alone, the most commonly used single mark is <br>, which means that the display forced wrap is displayed when a paragraph is not ended. The <hr> (horizontal line) in the precedent is also a single mark.</p>
<p>There are some display content to specify the display attribute (such as a font, font size, etc.) that can be specified within the start mark of the double mark or a single mark. As the <font size = "7" Face = "Lishu" color = "# 0000ff"> My job area </ font>. The following table lists some common HTML web pages, more detailed, you can find a book that specializes in HTML.</p>
<p>Mark Name Tag Function Example Description <HTML>, </ HTML> Web Document <head>, </ head> page header <title>, </ title> Web Title <title> Old urchin website </ title> <body> , </ Body> web main body <body bgcolor = "# c0c0c0"> ... </ body> set web page background color <p>, </ p> paragraph mark <p align = "center"> Health care </ P > (中) Tail marks can be <b>, </ b> Borid <B> My job area </ b> <font>, </ font> font format <font size = "7" face = " "> My job area </ font> <a>, </A> Hyperlink <a href="hompage15.htm"> Back" / </ script>, </ script> program call <script Language = JavaScript> ...... </ script> <div>, </ div> partition tag <table>, </ table> definition form <table border = "1" cellspacing = "1" width = "100%"> < Tr> <TD width = "50%> </ td> <TD width =" 50% "> </ td> </ tr> <tr> <td width =" 50%> </ td> <TD Width = "50%"> </ td> </ tr> </ table> Define a 2 × 2, a width of 100%, a table <tr>, </ tr> defined line <TD>, </ tr>, line width 1 </ td> Definition cell <br> Force PRT <IMG> Insert Image <img src = "images / logo.jpg"> <hr> horizontal line <hr size = "4" color = "# fff00" width = "80 %> <Table>, </ Table> Definition Table <Table Border = "1" cellspacing = "1" width = "100%"> <Tr> <TD width = "50%"> </ td> <TD Width = "50%"> </ td> </ tr> <tr> <td width = "50%> </ td> <td width =" 50%> </ td> </ tr> </ Table> Define a 2 × 2, a width of 100%, a table <tr>, </ tr> defined line <TD>, </ TR>, <TD> 1</p>
<p>/ TD> Definition cell <br> Forced to change the line <img> Insert picture <img src = "images / logo.jpg"> <HR> horizontal line <hr size = "4" color = "# fff00" width = "80% "> <TD>, </ TD> Definition cell <br> Forced to change the line <img> Insert picture <img src =" images / logo.jpg "> <HR> horizontal line <HR size =" 4 "color =" # FFF00 "Width =" 80%> <HR> horizontal line <HR size = "4" color = "# fff00" width = "80%> </ script>, </ script></p>
<p>Program call <script language = javascript> ...... </ script></p>
<p><div>, </ div></p>
<p>Partition tag <table>, </ table></p>
<p>Definition Table <Table Border = "1" cellspacing = "1" width = "100%"></p>
<p><TR> <TD Width = "50%> </ TD></p>
<p><td width = "50%"> </ td></p>
<p></ TR></p>
<p><TR> <TD Width = "50%> </ TD></p>
<p><td width = "50%"> </ td></p>
<p></ TR></p>
<p></ table> Define a table of 2 × 2, a width of 100%, the line width is 1 table <Tr>, </ TR></p>
<p>Definition</p>
<p><TD>, </ TD></p>
<p>Define cells</p>
<p><br></p>
<p>Force and resolve <IMG></p>
<p>Insert a picture</p>
<p><img src = "images / logo.jpg"></p>
<p><hr></p>
<p>Level line <hr size = "4" color = "# fff00" width = "80%"></p>
<p><Table>, </ TABLE></p>
<p>Definition Table <Table Border = "1" cellspacing = "1" width = "100%"></p>
<p><TR> <TD Width = "50%> </ TD></p>
<p><td width = "50%"> </ td></p>
<p></ TR></p>
<p><TR> <TD Width = "50%> </ TD></p>
<p><td width = "50%"> </ td></p>
<p></ TR></p>
<p></ table> Define a table of 2 × 2, a width of 100%, the line width is 1 table <Tr>, </ TR></p>
<p>Definition</p>
<p><TD>, </ TD></p>
<p>Define cells</p>
<p><br></p>
<p>Force and resolve <IMG></p>
<p>Insert a picture</p>
<p><img src = "images / logo.jpg"></p>
<p><hr></p>
<p>Level line <hr size = "4" color = "# fff00" width = "80%"></p>
<p><TD>, </ TD></p>
<p>Define cells</p>
<p><br></p>
<p>Force and resolve <IMG></p>
<p>Insert a picture</p>
<p><img src = "images / logo.jpg"></p>
<p><hr></p>
<p>Level line <hr size = "4" color = "# fff00" width = "80%"></p>
<p><hr></p>
<p>Level line <hr size = "4" color = "# fff00" width = "80%"></p>
<p>4. Special characters indicate that most of the characters in the HTML web page are the same as normal text, but some exceptions are (paragraph tags), space, "<", ">", "&". Enter (paragraph tag): <p></p>
<p>Space: & nbsp</p>
<p>English quotation marks "" ": & quot smaller than symbol" <": & lt is larger than symbol"> ": & gt" & ": & amp 5, FRONTPAGE Positioning HTML text looks very troublesome. It is also difficult to determine it in the web page. Location, for example, we want to insert a piece of code in a cell in the table. Only by reading the HTML language is very difficult. But in FrontPage, this location is simple: we As long as the cursor (not mouse) is set in this cell in the "Ordinary" view, then go to the HTML view, the cursor is also described in the statement of this cell. We will not be difficult to determine the insertion of HTML knowledge. Point position. [Example] Insert a piece of code that displays the current date and the week in the upper left corner cell of the page below.</p>
<p>1) Select the following code: <script language = javaScript> Today = new date (); functionin = INITARRAY.ARGUMENTS.LENGTH; For (var i = 0; i <this.length; i ) this [i 1] = INITARRAY.ARGUMENTS [I]} var D = New ITARRAY ("Sunday", "Tuesday", Tuesday, Wednesday, "Friday", "Saturday"; Tyear = Today.GactYear () <100? 1900 today.getyear (): today.getyear (); tmonth = Today.getMonth () 1; TDAY = Today.getdate (); TWEEK = Tyear " TMONTH " Month TDAY "Japan" D [Today.Getday () 1]; Document.write (Tweek); </ script> Execute the "Copy" command (if this code is in Word, FrontPage "Ordinary" view and other characters In the format editing tool, it is best to copy it to the notepad, let it become a plain text). 2) Turn the cursor (not mouse) in this cell in the "Ordinary" view, then go to the HTML view, the cursor is inserted: 3) Click the "Paste" button in the common toolbar, this code Inserted in it:</p>
<p>4) Click the "Preview" button, transfer to the "preview" state, show the current date and week on the upper right corner of the web page:</p>
<p>[Note] Be sure to pay attention to the complete and double-marked symmetry of the HTML code when inserting the code. Otherwise, the code is displayed in the "Ordinary" view, and under normal conditions, you can't see the code on the "Ordinary" view, only the effect is only in the browsing. Second, web page optimization make a web page, just like writing an article, need to modify the optimization after writing. Web page optimization includes a lot of content, only introducing garbage in the cleanup web file, narrowing web file size. Web file narrowing not only makes more content in limited free space, but also improves web access speed. 1. Website Optimization Effects Let's take a look at the web file from the Word document:</p>
<p>I can't see any problems from the appearance, but we will find problems with the HTML view:</p>
<p>In the HTML text, you can't see the text you want to display, mainly a lot of format descriptions. Little an article has 12KB:</p>
<p>After we optimize it, then look at HTML text:</p>
<p>The text to be displayed has mainly located, only a small amount of HTML tag description text format, the file size is also reduced to 4KB, only one-third of the original:</p>
<p>2, how to make the web pages 1) Do not copy the Word document directly to FrontPage, although you can make you save the formatted time, but you will cause a lot of garbage to generate a web file. The text should be copied into the notepad to change to the raft to FrontPage. 2) If there is a long identical format, you should set the format one time. It is best to use the "Forced Branch" (SHIFT Enter) instead of the return of the carriage return. Because each paragraph in the HTML language is set, there are many setup formats that can be omitted with the "Forced Branch" (<br>) instead of segment (<p>). 3) Try to use Chinese "full corner" space instead of English space. As mentioned earlier, use "& nbsp" in the HTML language to represent English space, accounting for 5 bytes, and "full corner" space only accounts for 2 bytes. And "full corner" space can be empty out of 2 accurate vacancy, and English space can only be empty out, not accurate. 4) Do not use too many forms, you can plan the text and picture layouts, it can be made, too much table cell will add a lot of HTML statements. 3, the optimization method of existing webpage (or Word document): 1) Click the "Edit" menu, select the "All" command in the drop-down menu, select all the contents of the web page. 2) Click the Copy button on the common toolbar to copy the selected webpage content to the clipboard. 3) Open Notepad, click the Edit menu (or right-click the blank place), select the "Paste" command in the drop down menu, the text in the web page is displayed in the form of a notebook in plain text. 4) Right click on the mouse, select the "President" command in the drop-down menu, select all text. Right click on the mouse, select the Copy command to copy all text to the clipboard. 5) Click the "Paste" button on the common toolbar in the blank page of FrontPage to paste all text onto the empty web page. 6) Set a good text format as needed. The program saves the web file. 4. Table data in the table data in the table (or Word document) is converted into plain text, and the text content of the two cells in one line is spaced apart. Copy the "Convert" command in the "Table" menu to the "Table" menu after copying to FrontPage: 1) All text in all original tables (Note: You can not choose the content of the table), then click Table, " Conversion, "Text to Table". 2) Select the "Other" separator: "" (space) on the "Other" separator: "(space), and then click OK. Text is converted into a FrontPage form. If it is the form in FrontPage, the table data is converted into plain text, the text in each cell is marked as a separator in paragraph, and the text "marked as a separator is only converted to only one column. form. To convert to multiple columns, you should properly process text text, so that the text content of a cell in a row is separated by space, and then converts into a table. [Example] Copy the Word document "Web Page Production Class Teaching Schedule" shown below to the FrontPage web page.</p>
<p>1) In the Word window, "copy", "copy", "Paste" in the Notepad window. Re-"all choice" in the Notepad window, "copy", open a blank web page "Paste" on a FrontPage, and paste all the text onto the empty web page. 2) After setting the title text format, select all the text in all original tables (Note: You cannot choose the content of the table), then click Table, "Convert", "Text to Form": 3) "Convert text into the table" dialog Select Use "Other" separators: Enter a "space" in the empty frame (note that the cursor position in the figure has been moved):</p>
<p>4) Then click OK. Text is converted to a FrontPage form:</p>
<p>5, directly modify the HTML code text, if you know more about the HTML language, you can modify it directly in the HTML view. For example, delete excess formats; copy the special effect code in someone else's web pages. Be careful, every time you modify it back to the "normal view" to see the effect, and find that you don't change the "revoke" button immediately with the common toolbar. Our lecture is about to end, everyone will definitely do the website is getting better and better. Interested friends can also try Dreamweaver in the Network Three Swordsman to make a modification of the web, although its "what you get" is not as good as FrontPage, but the function is much stronger than FrontPage, which is convenient than FrontPage. More, the web page made is more refined. With the foundation of FrontPage, Dreamweaver is not difficult to try.</p>
<p>[Practice] 1. Make a simple web page and carefully observe the relationship between HTML code and web content in the HTML view. 2. Insert the previous date and the current date and the week program code into your web page.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-50398.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="50398" 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.033</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 = 'toXVsOl_2FNC6034d36vq91H6B_2BPHNkQrXLz5OCV6qa_2Bv_2Bve99m_2F4WVbaykYwZawKXYl9uJ00MNkW1DFX8gY_2FhFQ_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>
