Home > Developer > Web Develop
Must be done in line with customer requirements, not what they think is right.
I. Basic tags1.1 size Color position<! DOCTYPE html> h1{ Font -size:12px; color:#930; Text-align:center; } </style> such as in the online shop, a product discount after the price is to be emphasized. Such as.
Code implementation:
1.3 span <span>Tags are non-semantic, and are intended to be used to set up individual styles.
Let me try it: set the American dream to Blue
1. Add <span> tags to the "American Dream" text in line 13th on the right editor.
2. In line 8th color:blue; , set the text color to blue for the <span> element.
1<! DOCTYPE html>234<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">5<title> Great Gatsby </title>6<style>7 span{8 Color:blue;9 }Ten</style> One A<body> -In the spring of <p>1922, a writer who wanted to fame named Nick Karawi (Tobey Maguire Tobey Maguire) left the Midwestern United States and came to New York. It was a Tao <span> American Dream </span>, and he moved into a bay near New York to live. </p> -<p> Fitzgerald, one of the American literary giants of the 20th century, has both writer and screenwriter status. He sings the ornate elegy of the "Jazz Age" with the poet's sensibility and the imagination of the dramatist, and the temperament of his poet and Dreamer is also the perfect note for that extravagant age. </p> the</body> -1.4 References
For example, quoting a verse, using double quotation marks, Web pages using <Q></Q>, automatically recognized as double quotation marks;
Previous section <q> tag is also a reference to text? Don't forget that <q> tags are references to short text , such as quoting a sentence <q> .
If you want to quote Li Bai in my article in the "Guanshan month" in the verse, because the reference text is relatively long, so use <blockquote> .
Note blockquote, not blackquote, the browser's parsing of <blockquote> tags is indented style.
Now that you're indented, you don't need double quotes.
1.5 line breakFor example, one hand quatrains, the first three lines behind each line <br/>, the last line is not required.
1.6 secant 1.7 AddressThe address tag, in fact, is italic, the function and the same as EM.
1.8 Code TagsSingle-use <CODE></CODE>, multi-line with <pre></pre> in fact, the pre can be used when a preset text format needs to be displayed.
1.9 Listtwo. Application of Div2.1 Table<ul> <li></li></ul>//ordered <ol> <li></li></ol>
<TBODY>...</TBODY>: When the table content is very long, the table will download a little bit, but if the <tbody> tag is added, the form will be displayed after all the contents have been downloaded. Code in the right-hand code editor.
<th>...</th>: A cell in the head of a table, table header.
The content of the summary is not displayed in the browser. Its role is to increase the readability of the table (semantic), so that the search engine to better understand the table content, but also to enable screen readers to better help special users to read the table content.
Syntax:<table summary="表格简介文本">
1. In the right editor, add a summary to the table, "This table records 2012 to 2013 inventory records, including USB flash drive and headset inventory."
2. In the right editor, add a title to the table titled "2012 to 2013 inventory record."
1<! DOCTYPE html>234<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>5<title> Understanding Table Label </title>6<style type= "Text/css" >7 Table TR td,th{8BORDER:1PX Solid #000;9 }Ten</style> One A<body> -<table summary= "This table records 2012 to 2013 inventory records, including USB flash drive and headset inventory" > -<CAPTION>2012 year to 2013 stock Records </caption> the<tr> -<th> Product Name </th> -<th> Brand </th> -<th> Inventory (a) </th> +<th> Warehousing Time </th> -</tr> +<tr> A<td> Headphones </td> at<td> Lenovo </td> -<td>500</td> -<td>2013-1-2</td> -</tr> -<tr> -<td>u Plate </td> in<td> Kingston </td> -<td>120</td> to<td>2013-8-10</td> +</tr> -<tr> the<td>u Plate </td> *<td> Patriots </td> $<td>133</td>Panax Notoginseng<td>2013-3-25</td> -</tr> the</table> +</body> A2.2 Hyperlinks
The Title property, which displays the text content of this property when the mouse slides over the linked text. This property is very useful in the actual web page development, it is convenient for the search engine to understand the content of the link address (semantically more friendly).
After the hyperlink is blue, it is purple when clicked.
Send e-mail
2.3 Images1 , SRC: identifies the location of the image;
2 , alt: specifies descriptive text for the image, and when the image is not visible (when the download is unsuccessful), you can see the text specified by the attribute;
3 , Title: provides a description of the image when the image is visible (the text displayed when the mouse slides over the picture);
4 . Image can be an image file in gif,png,jpeg format
2.4 TextArea 1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。
4、在<textarea></textarea>标签之间可以输入默认值。
举例：
<form method= "POST" action= "save.php" > <label> Contact us </label> <textarea cols= " "Rows=" > enter the content here ...</textarea></form>
2.4 Label
The label label does not present any special effects to the user, and it is useful for improving usability for the mouse user. If you click on the text within the label tag, the control is triggered. That is, when the user clicks the label label, the browser automatically shifts focus to the label-related form control (automatically selected on the form control associated with the label label).
Note: The value in the for property of the label should be the same as the value of the associated control's ID property.
I'll try it: complete the following tasks
Requirements: Jogging, mountaineering and basketball check boxes are associated with the for property with their respective complex options. As follows
1<! DOCTYPE html>234<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">5lable tags in <title>form </title>67 8<body>9<form>Ten<label for= "Sport" > What are you interested in </label></br> OneJogging <input type= "checkbox" name= "Gender" id= "sport"/> A<br/> -Mountaineering <input type= "checkbox" name= "Gender" id= "sport"/> -<br/> theBasketball <input type= "checkbox" Id= "Sport" > - -</form> - +</body> -Third, supplementary
All the content displayed in the page is placed in the label.
Labels are case-insensitive.
The content displayed in the Web page is in the body.
The EM tag is emphasized, is italic.
Strong and bold.
The span tag has an important and useful feature, that is, it doesn't do anything, its sole purpose is to surround other elements in your HTML code so that you can assign styles to them.
Examples are as follows:
<p><span>some Text.</span>some Other text.</p>
Examples are explained below:
If you do not apply a style to a span, the text in the span element does not differ visually from the other text. However, the span element in the previous example still adds additional structure to the P element.
You can apply an ID or class attribute to a span, which increases the appropriate semantics and allows you to apply styles to spans.
HTML Basic knowledge
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
