|
HTML&CSSsummary 1. htmlbasic format <html> <head> <title> </title> </head> <body> </body> </html> 2. htmlGrammar rules for tags <Tag Name Attribute1=property value1" attribute2=property value2”>tag</Tag name> 3. Hyperlink tags <a href="where to jump" ></a> Function: Page jump. Question: If you want to make an image (picture1.jpg) hyperconnected, how should you write it? <a href=””><img src=”picture1.jpg” /></a> 4. Syntax of tables <table> <tr> <td> Small forms </td> <td>Content</td> </tr> </table> Note: The content of the form must be written intdinside 5. Common attributes of tables a) Table:border=numbers(Bezel) bordercolor=Border colorbgcolor=Background colorcellspacing=Number (distance between cells) cellpadding=number (distance between content and table border)height="Fixed numbers|percentage%"Heightwidth="Fixed numbers|percentage%"Width b) Tr: bgcolor=Background colorheight="Fixed numbers|percentage%"Heightwidth="Fixed numbers|percentage%"Widthbordercolor c) Td: bgcolor=Background colorheight="Fixed numbers|percentage%"Heightwidth="Fixed numbers|percentage%"Widthcolspan=Numbers (Merge Columns)rowspan=Numbers (Merge Rows)bordercolor Question: How to set the thickness and color of the border when the picture is centered? Border-width Border-color 6. forms a) Function: Submit data to the server b) Syntax:<form ></form> c) Form elements 1.inputtags i. Text<input type=text /> ii. Passwords<input type=password /> iii. Single choice<input type=radio name="Name same" /> iv. Multiple choices<input type=checkbox /> v. buttons<input type=button /> Submit<input type=submit /> Reset<input type=reset> Attributes: Text:size=Text lengthmaxlength=Maximum characters can be entered Select:checkedSelected by default Buttons:value=The text displayed above the button 2Drop-down Labels: Syntax, Properties <select multiple(Multiple selections are possible)size=You can see the number of options> <option selected(Selected by default)>Content</option> </select> 7. CSSCascading style sheets Function: Enrich content and reduce code volume Writing: Place (3species) 1. In-row:Add attributes directly to tagsstyle="property:Attribute value;…” 2. Embedding:atheadLabel Writing:<style type=”text/css”> Selector{Properties:Attribute value;…} </style> Points3Basic selectors:htmlSelector,classClass selector (.class name),idSelector (#idName) is the only one 3. External:Create a separate one.cssfile, and then add the reference code to the page you want to use, yes2Kind of writing Remember a: atheadAdd tags inside<link rel="stylesheet" type="text/css" href="stylesheet filename.css”> Note: If there is a conflict in the stylesheet, prioritize inline before using inline and finally use outside Question: UseDIV+CSSlayout andTablePros and cons of layout? 8. Pseudoclass (selector) a:link {color: #FF0000} /* unvisited links */ a:visited {color: #00FF00} /*Links that have been visited*/ a:hover {color: #FF00FF} /* Mouse move to link */ a:active {color: #0000FF} /*Selected link*/ 9. DIV(Box Model) Function: SubstitutetableTable Writing:<div>Content (can be nested.)div）</div> Usage: Set width and height, can be combinedpositionattributes Common Properties: 1． border: The thickness of the box 2． margin: the distance between the boxes 3． padding: the distance between the contents of the box and the box. 4． height、width: Height, width 5． background: Box color, pattern 6． float: The seat of the boxleft、right 10. PassDreamweaverCreate a template Function: Achieve the same website style, reduce the amount of code, and improve the efficiency of website development How to create and use templates 1. Create: file à new à regular à HTMLtemplateà Create 2. Save: Save to your own website, note: The correct path is that a Templates folder will appear at the bottom of the website, which stores the template files (.dwt） 3. Writing: Just like writing ordinary pages, typesetting and writing the same style of content on the website. For different content, you need to create an editable area (hover over the editing area you want to create à right-click and select Template à New editable area) 4. Create a page based on a template: File à New à Template à Select the template to use 11. DreamweaverRelated knowledge points A. PassedDreamweaverCreate a website: Siteà New site à advanced à local information Name the site and set the path to the site Note: The site path should not be in Chinese BFamiliarityDreamweaverWe need to know how to output the basic tags we learned earlier The focus is on typography of the page through tables CInDreamweaverusing a hyperlink (relative and absolute addresses) 12. CSScommon attributes border:1px solid #000000; /*of the border3common attributes*/ width; height; /*Set the width and height*/ text-align /*Set the content to center left and right*/ line-height /*The adjustment content is centered up and down*/ float /*Float(Floating must be used to make horizontal hyperlinks)*/ margin /*Set the box outer distance*/ padding /*Set the distance inside the box*/ position /*Positioning, to be with laterleft topUse together*/ color:#000000; /*Set the text color*/ background-color:#000000; /*Set the background color*/ font-size:14px; /*Set the font size*/ text-decoration /*Set whether the hyperlink is underscored, generally usedunderlineornone*/ list-style-type:none; /*Style the hyperlink (no dots)*/
2013HTML复习.doc
(44 KB, Number of downloads: 0, Selling price: 1 Grain MB)
| 
Posted on 11/9/2014 10:42:19 AM
|
|
|
Posted on 11/10/2014 1:27:37 PM
