Home > Developer > Web Develop
HTML: Hypertext Markup Language
The HTML language is made up of tags, and the data in the HTML is encapsulated in the label, because you can manipulate the data within the package by selecting the attributes in the tag that are worth changing.
Determines the HTML code range.
<body>//the data displayed on the Web page.
</body>
Tag features: For data encapsulation, there is a start tag and an end tag.
But there are also some tags that do not have attribute values and do not need to end tags such as:<br/>
Label format:< Tag Name Property name = "attribute value" > data </Tag name >;
< Tag Name Property name = attribute value >;
Six most common labels
One, font:<font>
<font size= "7" color= "#FFFFFF ①" > Data </font>① Note: Color can be expressed in English as well as 6 hexadecimal digits.
Special section: If you want to display some special symbols on the page, you need to escape:
< = = < > ==> & = = & Space == "= = &&guot; Circle R ==® Circle C ==©
Title Tags:
<p> paragraph </p>,<b> bold </b>,<i> italic </i.,<u> underline </u>,<strong> Bold </ Strong>, ....
Second, List label
<dl></dl>
Top Item:<dt>
Lower Project:<dd>
Bullets tab:<ul> Circle <ol> alphanumeric, the list items in both labels are encapsulated by the <li> tag
Example <ol type= "1" >//Specify the order of the bulleted type as letters and start with a.
<li> Game Name </li>//upper level directory.
<ul>//Lower directory, UL represents bullets as circle.
<li> Star </li>
<li> Red Alert </li>
</ul>
<li> Game Content </li>//second upper level table of Contents
<ol type= "A" >//Specify the order of the bulleted type as letters and start with a.
<li> Strategy </li>
<li> Cheats </li>
<ol>
Three, image label:
Example: //"can also add border and so on properties.
Four, form label:<table>
The table consists of rows, and the rows are made up of cells. The table has a tobody label by default.
Example: <table border= "1" bordercolor= "Red①" width= "60%" cellpadding= "ten" cellspacing= "0" >//① Note: You can use the six-digit hexadecimal number to represent the color. (Red plus ① effect is green);
<tr>
<th> first cell of the first row </th>
<th> second cell in first row </th>
<tr>
<tr>
<th> first cell in the second row </th>
<th> second cell in the second row </th>
<tr>
</table>
Tables are one of the most commonly used labels for formatting data.
Five, hyperlink tag:<a>
Example: <a href= "http://www.acfun.tv/" ①target= "_blank" > Links </a>① Note: This property allows you to specify how the link will be opened, _blank as the default, and open the link in this page.
When the link is clicked, the resolver corresponding to the engine is launched to find the specified host.
1. First find the Hosts file of the local host and execute 2.
2. Look for the IP address on the public domain DNS server.
Another effect of hyperlinks: anchor, also known as anchor.
Example: <a name= "link" > Anchor point </a>
<a href= "#link" > Get the location </a> #代表定位的是本页面 for name link.
Six, Form label (*)
This tab can interact with the server and requires a key focus on <form>
Properties common in <form> Tags: action-Specifies the destination of the data submission.
method-, common values are get and post,get are the default values.
The difference between get and post:
1. The former will display the submitted data in the address bar, while the latter will not, so get is not safe for sensitive information.
2. The data volume submitted by the former is limited by the volume of the Address bar.
3. The former will enclose the submission information for re-request. This is the HTTP message header, which encapsulates the commit information in the data body, after the empty line after the HTTP message header.
For the server side, try to use posh, because it involves coding problems, tomcat default decoding iso8859-1. For post submission in Chinese, use directly on server side
Setcharactemcoding ("GBK") can be obtained, for get, can only be encoded by iso8859-1 data once, and then through the specified code table such as GBK decoding.
Elements in form Labels:
<input>: The label renders a different component because of the value of the type attribute.
The value of the Type property in input: 1.text: Text box, the text entered is visible.
2.password: Password box, the text you entered is not visible.
3.radio: Radio box, it is important to note that the elements that can be selected are grouped by the name attribute before the effect is played.
4.checkbox: check box, select when multiple data is selected at the same time.
5.file: A component that can be used for file selection, usually for attachment uploads.
6.hidden: Hides the component, which is not displayed, but its defined name and value can be submitted to the server.
7.button: Button component, the custom button does not have an event trigger effect by default, it needs to register the event and add the effect.
8.reset: Resets the button to reset the elements in the form.
9.submit: Submit button to submit the data added to the component to the specified destination.
10.image: Image component, in order to avoid the appearance of the Submit button, you can link the picture through the SRC attribute of this component to achieve the desired effect.
<select> drop-down menu: Each drop-down menu is encapsulated by option.
Example:<select>
<option> first Option </option>
<option> a second option </option>
<option> a third option </option>
</select>
<textarea> Text Area:<textarea></textarea>
form components typically need to define the name and value properties, because they are interacting with the server.
CSS Cascading Style Sheets
Separate the styles from the Web page, which is controlled entirely by CSS, enhancing the usability and extensibility of the style.
Format:
Selector {Property Name: property value; Property Name: Property value}
Three ways to combine CSS and HTML code:
1. Each HTML tag has a style property.
2. When there are multiple labels in the page with the same style, you can reuse them.
3. When there are multiple pages in the same style of the label, can be individually encapsulated into a CSS file, through the HTML in the Head tag link tag links a css file.
Selector concept: the label container to which the style is intended, when the style is detached, the HTML is used to encapsulate the data with tags and then load the CSS onto the specified label.
Basic categories of selectors:
1. Tag Selector: Every sign of HTML.
2. Class selector: The CALSS attribute in each tag of the HTML, with. Representation in the form.
3.id selector: Each id attribute of HTML, the id attribute must be guaranteed unique, marked with #. The id attribute can be used not only by CSS, but also by JavaScript.
Selector Priority:id>class> label.
Extended selector:
1. Correlation selector: Defines the input style for labels in labels.
2. Combo selector: The same style definition for multiple selectors, separated by multiple selectors.
3. Pseudo-Element selector: A state of an element, such as the status of a hyperlink before it is clicked, visited after a click, hover when the mouse hovers, and active when clicked.
CSS filters: Complete rich styles with some code. Consult the CSS API;
Zone BLOCK: div-row-level area span: block-level Area P: Row-level area, Div cannot be nested in P.
15-9-18 HTML_CSS Review
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
