网页设计html基础（Web design HTML foundation）.doc

网页设计html基础（Web design HTML foundation）The navigation barThe purpose of design navigation is to enable readers to browse the web smoothly and avoid getting lost.formTable is an effective way to control the layout of web pages. Does not display table borders.The formA form is a special network element that is usually used to gather information or implement some interactive effects. The login name and password of the email address. Search engines are all forms.1.2Common terminology of the WebA Uniform Resource Locations. The essence of hyperlinks is that the URL absolute URL will give the full range of protocol categories (HTTP FTP), server host domain names, paths, and page filenames.Web pageText files written in HTML, including text, tables, images, connections, sounds, video, etc.The home pageHome page is a separate page and a special web page that is the starting point and intersection of all web pages in its site. Its also the starting point for visitors to visit a website.Creating a website(1) establish a local site. Create a site and folders to store other documents used in the home page, related pages, and web sites.(2) create subfolders under the root folder of the site. To make the file arrangement clear, separate the page files and image files from storage.(3) add the required empty pages to the site(4) design web page size.(5) properties of design web pages (page title, background image, link color, text color, etc.)(6) to insert text, drawing, animation, etc(7) build the required hyperlinks.(8) preview and save the page.< head > and < / head > are not displayed in the browser window.The < meta > tag is used to provide the character encoding, keywords, description, author, and automatic refresh of HTML web pages, including the following. Name: defines the name of a data, usually a string.Content: a property that defines a data.HTTP - equiv: can be used instead of name, usually a string.chartset: the encoding of characters and Chinese characters.Such as"Title > red house song < / title >The < meta HTTP - equiv = "content-type" Content = "text/HTML charest = gb2312" >< meta name = "description" content = "this is a home page for search engines" >< meta name = "keyworlds" content = "comment, current affairs, life, technology theory" >< meta name = "author" content = "su qingyuan" >The < meta HTTP - equiv = "refresh" content = "5;url=http:/www.baidu.com" >The < / head >- - - - - - - - - - - - - - - - - - - - -The body tag of HTML- - - - - - - - - - - - - - - - - - - - - -The < body >< body > and < / body > usually contain other tags< body bgcolor = # ff0000 > background color is red < body background = "2.jpg" > is set to background in image 1.jpg.The whole text color (text) and the color of the link: < body text = # ff0000 > red, use link, vlink alink property to control common hyperlinks, visited hyperlinks, the current activity hyperlink text color.< body link = # ccddee vlink = # ff3366 alink cc77 = # 66 >The margin of the page is < body leftmargin = 0 topmargin = 0 >HTML text markup and link tagsThe face attribute is used to design the font of the text. Color sets the color of the text, and size sets the font size of the text.< font face = > song < / font > >< font color = # 0000ff > singing < / font > >< font size = 1 > wipe the sweat of that song < / font > < p >The title< h1 > Great Wall < / h1 > maximum heading< h6 > < Great Wall/h6 > minimum headingNormal word < b > plus coarse < / b > < p >Normal word < I > italic < / I > < p >Regular word < u > underline < / u > < p >Regular words < sup > and < / sup > < p >Normal word < sub > subscript < / sub > < p >Normal word < s > delete line < / s > < p >Normal word < strike > strike: delete line < / strike > < p >Normal word < em > em symbol - italic < / em > < p >Normal word - < strong > strong - bold < / strong > < p >Normal word - < code > code mark - wait for width < / code > < p >Regular word - < var > var marker variable or procedure parameter - italic < / var > < p >Normal word - < small > small mark - small font display < / small > < p >Regular word - < big > big mark - large font display < / big > < p >Paragraph tag< p > mark to achieve paragraph segmentation; < br > marks for line wrapSuch as:< p > we all have a home called China < br >Brothers and sisters have a lot of sceneryTwo dragons are on the Yangtze river and the Yellow River is < / p >Alignment of textHTML USES the align attribute to align the text. < div > text distinguishing mark < center > centerEx. :< h3 align = left > left aligned < / h3 >Div align = center > middle < / div >< p align = "right" > align = right align < / p > in p tagCenter > middle alignment < / center >Text space: using & NBSP; controlA horizontal lineDivide text with horizontal lines. The design method is as follows(1) < hr size = # > is used to set line width(2) < hr width = # > line length(3) < hr align = # > alignment mode (# is left or right)(4) < hr color = # > is used to set colorEx. :< HTML >-The < body >< p align = "center" > - - - - - - < / p >The < / body >< hr size = 10 width = 1270 align = left color = # 00ff00 >The < / HTML >A list of tagsLists are divided into unordered lists and ordered lists(1)Unordered listBy < ul >, < li > element definition, the default symbol is the dot. < ul > element contains the type attribute, and the type attribute contains: disc (dot), circle (circle), square (square)Ex. :"Div align = center > red building lyrics"/div >The < ul >< div align = center > < / li > < / div >< div align = center > < li > < / li> < / div >< div align = center > < li > < / div >< div align = center > < li > : a pile of grass is missing < / li > < / div >< div align = center > < / li > < / div >< div align = center > < li type = disc > only gold and silver will not be remembered < / li > < / div >< div align = center > < li type = circle > will only hate poly < / li > < / div >< div align = center > < li type = square > and long hole closed < / li > < / div >< / ul >(2)An ordered listIt is defined by < ol >, < li >. The < ol > element also contains the type attribute, and the type attribute value has l, A, A, I, I, etc. The < ol > element can also define the start number of the list, and if the first number of the desired list is 5, instead of 1, you need to define the start attribute of the < ol > elementEx. :"Div align = center > red mansion dream name fan < / div >The < ol >"Li > when you are here < / li >"Li > when you are here < / li >"Li > when you are here < / li >< / ol >The < ol >< li type = A BBB 0< li type = A BBB 0 qin shi huang unified six countries< / ol >The < ol >< li type = a BBB 0 yanshan is famous< li type = a >< / ol >The < ol >< li type = I > 0< li type = I > science rich< / ol >The < ol >< li type = I > when youre here"Li type = I >.< / ol >The < ol >< li > type = l pearls< li type = l > lantern riddles< / ol >< ol start = 5 >"Li type = A >" June 1 "childrens day< li > huan, hind, fishy, yao, good< ol start = > 10< li > beads, chardonnay< li type = I > years old< / ol >< / ol >Link tagHyperlink is the core and foundation of WWW application.(1) basic linkHyperlinks are defined by anchor elements < a >. The < a > element contains the href attribute and the target attribute. The value of the href attribute is a URL or E-mail address; The target property table control links page opens in a new browser window.< a href = "http:/www.sain.com.cn" > links to sina.com homepage < / a >< a href = "operation instance 2-5. HTML" > link to make the webpage file < / a >< a href = "matilto: sunzhenye916126.com" > link specified email address < / a >< a href = "operation instance 2-6. HTML" target = _blank > will connect the web file to open < / a > in the new window(2) anchor point connecting point refers to a certain location in the web page, which can be linked to the same page.< a name = "al" > setting anchor point < / a >< a href = "# al" > link to this page anchor point < / a >Image tags of HTML1 image tag USES < img >, img contains image reference address < img SRC = "2.jpg" >Set the properties of the image tag(1) replace text of the image, that is, when the mouse is moved to the image display text < img SRC = "2.jpg" Alt = "banana" >(2) setting the display size of the image < img SCR = "2.jpg" width = 300 "height =" 300 ">(3) image border: you can add a border to an image to highlight the < ing SRC = "2.jpg" border = "2" > in which the unit of the border attribute value is pixels(4) setting image alignment: relative to the page or cellDefine horizontal alignment< img SRC = "2.jpg" align = "left" > < img SRC = "2.jpg" align = "right" >Define vertical alignment(2).jpg "align =" 2. JPG "align =" middle ">The < img SCR = "2. JPG" align = "bottom" >(5) define the spacing of pixelsWhen displaying the image, it should be a certain distance from the left and right text. Methods such as: < img SRC = "2.jpg", "hspace =" 5 "vspace =" 5 ">, hspace attribute defines horizontal spacing, and vspace attribute defines vertical spacing, the unit is pixel.3 image mappingA different hyperlink is set up at different locations of an image. Defined by < map >. This tag contains the name attribute to name the image map, which will be referenced by the usemap attribute of the < img > tag. You can define a mapping of three shapes: circle, rect (square), poly (polygon)< img name = "hotspot" SRC = "3. JPG" width = "500" height = "0" border = "0" usemap = "# m_hotspot" >< the map name = "m_hotspot" >< area shape = "rect" coords = "5 5720 190 151" href = "operation instance 2-14. HTML" >< / map >HTML table tags1. Preparation of table 1. Three tags (1) < table > element: to define a table. Each table has a pair of < table > and < / table >The < tr > element is used to define the rows of the tableThe < td > element is used to define a table cell. The specific contents of each cell in the table will appear between < td > and < / td >.< table border = 1 >< tr >< td > < / td >< td > band border table < / td >< td > < / td >< / tr >< tr >< td > < / td > A class< td > B < / td >< td > C < / td >< / tr >< tr >< td > < / td > 34< td > 68 < / td >< td > 12 < / td >< / tr >< / table >2 table properties(1) header < th > tag is used to set the font of the header to be different from the normal font, such as< tr >The < th > A < / th >< th > B < / th >The < th > C < / th >< / tr >(2) appearance of the tableWidth attribute: specifies the width of a table or cell,Height: specifies the height of a table or a cellBorder: the thickness of the table edges.Bordercolor: specifies the border color of a table or a cell.Bordercolorlight (bright) bordercolordark (dark) bgcolor background background image whose value is a URL address.(3) spacing of formsSellspacing property: used to set the spacing of cellsCellpadding is used to set the cell margins (the distance between the text inside the cell and the border).Such as< table border cellspacing = 8 >> < table border cellpadding = 12(4) the merge of cells in a tableSome cells require multiple rows or columns, called cross-rows and columns of tables.Colspan is used to set the current cell to span a few columns.Rowspan is used to set the current cell across several linesSuch as< tr >< th colspan = "3" > all kinds of commodity statistics < / th >< / tr >< tr >< th rowspan = "3" > all kinds of commodity statistics < / th >The < th > A < / th >< td > 68 < / td >< / tr >HTML form tagsAn important means of interaction between the client browser and the server when the HTML form is formed. The form can collect data submitted by the clientForm tagThe grammar format defined by the < form > tag is as follows: < form action = "url" method = * > < / form >Where the action attribute is used to define the location of the processing program for the form; The wethod property is used to define the method to send a form from the browser to the server. There are two ways to GET POST. The transmission of GET mode is limited by the data volume; POST mode transmission is not limited by the amount of data and is transmitted in file form.< form action = "mailto:husongelong.com" method = POST >< / form >The form elements(1) text box and password boxName:< input type = text name = name = > < bar >Web site:< input type = text name = HTTP / / > < br >Password:< input type = the password maxlength = 8 > < / br >Message:The < textarea name = comment rows = 4 cols = 30 >< / textarea >Where, < input > is the most commonly used symbol in the form, and type = text defines a single line text box, and name represents the name of the form element; Value defines the initial value of the text box; Maxlength limits the maximum number of characters entered in the password box, and type = password defines a single password box; < textarea > defines multiline text boxes, rows of rows and rows of rows.(2) buttonSubmit a submit reset reset< input type = submit name = "submit" value = "submit" >< input type = teset name = "reset" value = "rewrite" >(3) radio buttons and check boxesRadio represents the radio button, and the name attribute of each option must be the same to achieve the desired effect. The checbox represents the check box and checked indicates the default(4) menu and list< select > < / select > represents the beginning of the menu; The < option > property represents an option in the menu, and the selected attribute indicates the default. Define the height of the list with the size attribute, and the multiple attribute Settings allow the user to select multiple options.Ex. :Menu instance < p >The < select name = music >< option value = My_Favorite > Dr< option selected > master< option > students< / select > < p >List instance < p >< select name = music multiple size = 3 >< option value = My_Favorite > Dr< option selected > master< option > students< / select >HTML framework tags