Home > Developer > Web Develop
1. HTML is the carrier of Web content. The content is the information that the Web creator puts on the page to let the user browse, can contain text, picture, video and so on.
2. CSS style is performance. Just like a web coat. For example, the title font, color changes, or for the title to add background pictures, borders and so on. All these things that change the appearance of the content are called performance.
3. JavaScript is used to achieve special effects on Web pages. such as: Mouse over Popup drop-down menu. or the mouse slide over the background color of the table changes. There is also the rotation of the Focus news (news pictures). It can be understood that there are animations and interactions that are generally done with JavaScript.
Second, common, commonly used tags to understand the basic structure of HTML files1. called the root tag, all the page tags are in
2. the label is used to define the head of the document, which is the container for all head elements. Header elements have,,,, and <title> <script> <style> <link> <meta> so on, the head tag in the next section will be described in detail.
3. The <body> content </body> between and tags is the main content of the Web page, such as,,, and <p> <a> Other Web content tags, the contents of the label in this place will be displayed in the browser.
(1)<p></p> p标签、段落标签
(2)<div></div> 把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器 <div id="版块名称">…</div>给div命名
(3)<span></span> span标签是没有语义的，它的作用就是为了设置单独的样式用的。
(4) h tags , title tags, a total of 6 title tags, respectively, a first-level h1、h2、h3、h4、h5、h6 title, two-level title, three-level title, four-level title, five-level title, six-level title.
(5)<strong> and <em> tags , in the browser <em> by default in italics,,<strong> is indicated in bold.
(6) <q> reference text </q> q tag , short quote
(7) <blockquote> reference text </blockquote> blockquote tag , long text reference
(8) <br /> label <br> label Branch display text
(9) Space
Add horizontal Line
(one) <address> contact address information </address> <address> tags to add address information to a webpage
(+) <code> code languages </code> codes Tags display some computer-professional programming code in a Web page, and when the code is a line of code, you can use the <code> tag
<pre> Language Code snippet </pre> pre tag add a large segment of code to a webpage
(+)ul tag , add a list of news information
<ul> <li> Information </li> <li> information </li> ......</ul>
()ol label , add book sales ranking
<ol> <li> Information </li> <li> information </li> ......</ol>
TableLabel , Understanding the form on the page
Run results
caption Label , add title and Summary to table
<table> <caption> title text </caption> <tr> <td>...</td> <td> ...</td> ... </tr>...</table>
<a href= "Destination url" title= "mouse over displayed text" > Link display text </a> <a> label Link to another page
For example:
<a href= "http://www.imooc.com" title= "click into Mu class net" >click here!</a>
Open the link in the new browser window:
<a href= "Destination url" target= "_blank" >click here!</a>
To link an email address to a webpage using mailto:
<a href= "Mailto:[email protected]?subject= view of The Great Gatsby &body= Hello, some ideas on this review" > How to Feel about this film, send me an email </a>
tag inserts a picture for a Web page
Example:
(a) <form></form> label form label Forms tab, interacting with users; form controls (text box input, text field textarea, button buttons, radio boxes, check boxes, and so on)
Grammar:
<form method= "transfer mode" action= "Server file" >
Text input box, password entry box举例：
<form> Name: type= "text" name= "MyName" > <br/> Password: type= " Password "name=" Pass "></form>
Text fields, multi-line text input support举例：
<form method= "POST" action= "save.php" > <label> 联系我们</label> <textarea cols="50" rows="10" > 在这里输入内容... </textarea> </form>
Use the Radio box, check box, to let the user select语法：
<input type= "Radio/checkbox" value= "value" name= "name" checked= "checked"/>
1. Type:
When Type= "Radio", the control is a radio box
When type= "checkbox", the control is a check box
2, Value: Submit data to the server values (background program PHP use)
3, Name: For the control name, in case the background program ASP, PHP use
4, checked: When set checked= "checked", this option is selected by default
Save space with a drop-down list boxExample:
<form action= "save.php" method= "POST" >
<label> Hobby:</label>
<select>
<option value= "reading" > Reading </option>
<option value= "Travel" selected= "selected"> Tours </option>
<option value= "Sports" > Sports </option>
<option value= "shopping" > Shopping </option>
</select>
</form>
Use the drop-down list box to make multiple selectionsmultiple="multiple"Multi-Select function can be achieved by setting properties in the <select> tab
Example:
<form action= "save.php" method= "POST" >
<label> Hobby:</label>
<select multiple= "multiple">
<option value= "reading" > Reading </option>
<option value= "Travel" > Travel </option>
<option value= "Sports" > Sports </option>
<option value= "shopping" > Shopping </option>
</select>
</form>
Submit data using the Submit buttonGrammar:
<input type= " Submit" value= "Submission" >
Use the reset button to reset the form informationGrammar:
<input type="reset" value="重置">
form in the formLabel labelThe 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).
Grammar:
<label for= "Control ID Name" >
CSS style and grammar understanding CSS style<style type= "Text/css" > Embedded
p{
font-size:20px;/* Set Text Size */
color:red;/* Set Text color */
font-weight:bold;/* Set Font Bold */
}
</style>
Inline CSS style, written directly in existing HTML tags内联式CSS style sheet is to write CSS code directly in the existing HTML tags, such as the following code:
<p style= "color:red" > here the text is red. </p>
External CSS style, written in a separate fileAn external CSS style (also known as an inline) is to write the CSS code in a separate external file, with the CSS style file " .css " as the extension, within
<link href="base.css" rel="stylesheet" type="text/css" />
Attention:
1. CSS style file names are named with meaningful English letters, such as MAIN.CSS.
2, rel= "stylesheet" type= "text/css" is fixed notation cannot be modified.
3, <link> label location is generally written in the
Three ways to prioritizePriority level:内联式 > 嵌入式 > 外部式 （但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。） 总结来说，就是--就近原则（离被设置元素越近优先级别越高）
CSS SelectorEach CSS style declaration (definition) consists of two parts, in the following form:
selector { style;}
Tag SelectorThe tag selector is actually a tag in the HTML code. such as
P{font-size:12px;line-height:1.6em;}
The effect of the above CSS style code: Set the 12px font size for the P tag, and the line spacing to set the 1.6em style.
Class SelectorClass selectors are most commonly used in CSS style encodings, such as the code in the right-hand code Editor: can be implemented as "timid", "courage" font is set to red.
Grammar:
. class Selector name {CSS style code;}
Attention:
1, English dot start
2, where the class selector name can be arbitrarily named (but not Chinese OH)
How to use:
The first step: Use the appropriate tags to mark the content to be modified, as follows:
<span> Timid </span>
Step Two: Use class= class selector name to set a class for the label as follows:
<span class= "Stress" > Timid </span>
Step three: Set the class selector CSS style as follows:
. stress{color:red;} /* Add an English dot in front of the class */
ID SelectorThe ID selector is similar to a class selector, but there are some important differences:
1. Set id= "ID name" for the label, instead of class= "class name".
2. The ID selector is preceded by the pound sign (#), not the English dot (.).
The right-hand code editor is a complete example of an ID selector:
<style type= "Text/css" >
#stress {
color:red;
}
#setGreen {
Color:green;
}
</style>
<body>
<p> third grade, I was a <span id= "stress" > Timid </span> little girl, class never dare to answer the teacher asked questions, afraid to answer the wrong teacher will criticize me. Have never had the courage to answer the questions asked by the teacher. I didn't have the courage to take part in the school events. </p>
<p> to the third grade next semester, our class in a section <span id= "Setgreen" > Open class </span> the teacher put forward a very simple question, the class many students have raised their hands, even the result is much worse than me, also raised his hand, Also said: "I come, I come." "I looked around for four weeks, so I didn't raise my hand. </p>
</body>
Differences between class and ID selectorsSame point: can be applied to any element
Different points:
1. The ID selector can only be used once in the document. Unlike class selectors, an ID selector can only be used once, and only once, in an HTML document. The class selector can be used more than once.
The following code is correct:
<p> third grade, I was a <span class= "stress" > Timid </span> little girl, class never dare to answer the teacher asked questions, afraid to answer the wrong teacher will criticize me. There has been no such <span class= "stress" > Courage </span> to answer questions raised by the teacher. </p>
And the following code is wrong:
<p> third grade, I was a <span id= "stress" > Timid </span> little girl, class never dare to answer the teacher asked questions, afraid to answer the wrong teacher will criticize me. There has been no such <span id= "stress" > Courage </span> to answer questions raised by the teacher. </p>
2. You can use the class selector word list method to set multiple styles for an element at the same time. We can set multiple styles for one element at the same time, but only with the method of the class selector, the ID selector is not possible (the list of ID words cannot be used).
The following code is correct (see the Code Editor on the right for the full code)
. stress{color:red;}. bigsize{font-size:25px;} <p> <span class= "Stress bigsize" > third grade </span> next semester, our class has a public class ...</p>
The function of the above code is to set the text color to red for the "third grade" three text and the font size to 25px.
The following code is incorrect (see the Code Editor on the right for the full code)
#stressid {color:red;} #bigsizeid {font-size:25px;} <p> <span id= "Stressid Bigsizeid" > Third grade </span> next semester, our class has a public class ...</p>
The above code can not be implemented for the "third grade" three text set the text color is red and the font size for the effect of 25px.
Child SelectorThe child selector, the greater than symbol (>), is used to select the first generation of child elements of the specified label element. Code in the right-hand code Editor:
. food>li{border:1px solid Red;}
This line of code causes the child element Li (fruit, vegetable) under the class name to add a red solid line border.
Include (descendant) selectorsContains a selector, which is a space to select the Descendants element under the specified label element. Code in the right-hand code Editor:
. First span{color:red;}
This line of code makes the "timid" font color red in the first paragraph of text content.
Notice the difference between this selector and the sub-selector, where the child selector (children selector) refers only to its immediate descendants, or you can understand the first generation of descendants acting on child elements. The descendant selector is an element that acts on all child descendants. The descendant selector is selected by a space, and the child selector is selected by >.
Summary:> acts on the first generation of descendants of the element, and the space acts on all descendants of the element.
Universal SelectorThe universal selector is the most powerful selector, which uses a (*) number designation, which is used to match all tag elements in the HTML, using the following code to use any LABEL element in the HTML font color is all set to red:
* {color:red;}
Pseudo-Class selectorsThe pseudo-class selector, why it is called a pseudo-class selector, allows you to set a style for a tag that does not exist in the HTML (a state of the label), such as when we set the font color for the mouse-over state of a tag element in HTML:
a:hover{color:red;}
The previous line of code is to set the font color to red for the A-label mouse-over state. This will make the first paragraph of the text content of the "timid" text added to the mouse over the font color into a red effect.
About pseudo-selectors:
About pseudo-class selectors, so far, the "pseudo-class selector" that can be compatible with all of the hover is used on the A-label: (There are many pseudo-class selectors, especially in CSS3, but because they are not compatible with all browsers, this tutorial is just about one of the most common). In fact: hover can be placed on any label, such as P:hover, but their compatibility is also very bad, so now more commonly used or a:hover combination.
Group SelectorWhen you want to set the same style for multiple label elements in the HTML, you can use the grouping selector (,), which is the following code for the H1 in the right-hand code editor, and the span label to set the font color to red:
h1,span{color:red;}
It is equivalent to the following two lines of code:
h1{color:red;} span{color:red;}
InheritedSome styles of CSS are inherited, so what is inheritance? Inheritance is a rule that allows a style to be applied not only to a particular HTML tag element, but also to its descendants. For example, the following code: If a color is applied to the P tag, the color setting applies not only to the P tag, but also to all child element text in the P tag, where the child element is the span label.
<title> Inheritance </title>
<style type= "Text/css" >
p{color:red;}
p{border:1px solid Red;}
</style>
Visible to the right of the results window, the text in P and the text in span are set to red. Note, however, that there are some CSS styles that are not inherited. such as border:1px solid red;
ParticularityThe weight of the label is 1, and the weight of the class selector is 10,id the maximum value of the selector is 100. For example, the following code:
P{color:red,}/* Weighted value is 1*/p span{color:green;}/* the weight is 1+1=2*/.warning{color:white;}/* The weight is 10*/p span.warning{color:purple;} /* The weighted value is 1+1+10=12*/#footer. Note P{color:yellow;}/* Weighted value is 100+10+1=111*/
Note: There is also a special weighted value-inheritance also has the right value but very low, some literature proposed it only 0.1, so it can be understood as the lowest weight of inheritance.
ImportanceIn the case of Web page code, there are some special situations that need to have the highest weights for some style settings. At this time we can use !important to solve.
The following code:
P{color:red!important;} P{color:green;} <p class= "First" > Third grade, I was a little girl with a <span> timid </span>. </p>
The text in the p paragraph is then displayed in red.
Note:!important to be written in front of the semicolon
Note that when a page creator does not set a CSS style, the browser displays the page in its own set of styles. And users can also set their own custom style in the browser, such as some users are accustomed to the font size to larger, so that they see the text of the page more clearly. Notice that the style priority is: Browser default style < page maker Style < user-set style, but remember that the!important priority style is an exception and the weight is higher than the user's own style.
Text layout--fontsSets the font for text in a Web page to Arial.
Body{font-family: "The song Body";}
Code:
body{font-family: "Microsoft Yahei";}
Or
Body{font-family: "Microsoft Jas Black";}
Note: The first method is better compatible than the second method.
Text layout--font size, colorUse the following code to set the font size of the text in the Web page to 12 pixels, and set the color to #666 (gray):
Body{font-size:12px;color: #666}
Text layout--BoldUse CSS styles to change the style of the text: bold, italic, underline, strikethrough, you can use the following code to implement the formatting text in bold style display.
P Span{font-weight:bold;}
Text Layout-ItalicThe following code enables the text to be displayed in the browser in italic style:
P A{font-style:italic;} In my third year of <p>, I was a little girl with a <a> timid </a>. </p>
Text layout-UnderlineSet the text to an underline style so that you can visually emphasize the text, which can be implemented using the following code:
P A{text-decoration:underline;} In my third year of <p>, I was a little girl with a <a> timid </a>. </p>
Text layout--StrikethroughThe deletion line on the original price can be implemented using the following code:
. Oldprice{text-decoration:line-through;}
Paragraph Layout--indentationIn the Chinese text before the paragraph is used to empty two blank text, this special style can be implemented with the following code:
P{text-indent:2em;} In the spring of <p>1922, a writer who wanted to be named Nikkalavi (Toby McGuire Tobey Maguire), left the Midwestern United States and came to New York. It was a time of rising morality, popular jazz, smuggling as king, and soaring stocks. In pursuit of his American dream, he moved into a bay near New York to live. </p>
Note: 2em means twice times the size of the text.
Paragraph layout-line spacing (row height)The line spacing (row height) attribute (line-height), which plays an important role in the paragraph layout, sets the paragraph line spacing to 1.5 times times as follows.
P{line-height:1.5em;} <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>
Paragraph layout--text spacing, letter spacingMedium text interval, alphabetic interval setting:
If you want to set the text interval or the letter spacing in the page layout can be implemented using letter-spacing, such as the following code:
h1{ letter-spacing:50px;} ...Note: This style is used in English words to set the spacing between letters.
Word Spacing settings:
What if I want to set the spacing between English words? Can be implemented using word-spacing. The following code:
h1{ word-spacing:50px;} ... Paragraph layout--alignmentSet the center style for text and pictures in a block element? You can use the Text-align style code, which allows text to be centered in the following code. (So what is a block element?) It will be mentioned in sections 11-1 and 11-2 later. )
h1{ Text-align:center;} You can also set the left:
h1{ Text-align:left;} You can also set the right:
h1{ Text-align:right;}
HTML+CSS Basic Knowledge Notes
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
