HTML document structure
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css样式优先级</title> </head> <body> </body> </html>
1. <! DOCTYPE html> declaration for the HTML5 document.
2. <html>, </ html> tag of the document is the beginning and end tags. Is the root element HTML pages, among them the head of the document (head) and body (body).
3. <head>, </ head> defines the beginning of the HTML document. Content between them does not appear in the document window browser. It contains documents yuan (meta) data.
4. <title>, </ title> defines the page title is displayed in the browser title bar.
The text between the <body>, </ body> is visible page body content.
HTML formatting tags
1.HTML tags are keywords surrounded by angle brackets, such as the <html>, <div> etc.
2.HTML tags are usually in pairs, such as: <div> and </ div>, a tag is first started, the second label end. Closing tag will slash.
3. The portion of the label is also presented separately, such as: <br/>, <hr />, <img src = "1.jpg" /> and the like.
4. There may be several labels which attributes may be attributes without
Tag syntax:
1. <tag attribute name = 1 "attribute value 1" Attribute 2 = "attribute value 2" ......> content portion </ tag name>
2. <tag attribute name = 1 "attribute value 1" Attribute 2 = "attribute value 2" ...... />
A few very important properties:
1.id: Unique ID defined tags, HTML document tree unique
2.class: Define one or more class name for the html element (classname) (CSS style class name)
3.style: specified element inline styles (CSS style)
[A] used within the head tag
Meta tags Description:
- <Meta> element provides meta-information about the page for search engines and the frequency of updating the description and keywords.
- <Meta> tag at the head of the document does not contain any content.
- <Meta> The information provided is invisible to the user.
Consisting of meta tags: meta tag has two attributes, they are http-equiv and name attributes, different attributes have different parameter values, these different parameter values to achieve a different page functions.
1.http-equiv attribute: http equivalent to the role of head of the file, it can be returned to the browser some useful information to help correctly display Web content, the corresponding attribute value content, the content is actually the content of variable value for each parameter
<-! Encoding type specified document (need to know) -> < Meta HTTP-equiv = "Content-Type" charset = UTF8 " > <! - 2 seconds after the jump to the corresponding website, pay attention to the quotation marks (Learn ) -> < Meta HTTP-equiv = "Refresh" Content = "2; the URL of = HTTPS: //www.oldboyedu.com" > <-! tell IE to render the document in the most advanced mode (understand) -> < Meta HTTP-equiv = "X-UA-compatible" Content = "IEs = Edge" >
2.name property
Mainly used to describe the page content attribute values corresponding thereto, the content of the main content is to facilitate the search engine robots to find information and the classification information.
[Di] used within the tag body
<b> bold </ B> <I> italics </ I> <U> underline </ U> <S> Delete </ S> <P> paragraph tag </ P> <h1 of> Title 1 </ h1 > <H2> title 2 </ H2> <H3> title. 3 </ H3> <H4> title. 4 </ H4> <H5> title. 5 </ H5> <H6> title. 6 </ H6> <! - wrap -> <br> <-! horizontal line -> <hr>
Special characters:
div tags and labels span
div tag is used to define a block-level element, there is no practical significance. Mainly through CSS style giving it a different performance.
span is used to define the inline (inner line) elements, of no practical significance. Mainly through CSS style giving it a different performance.
The difference between block-level elements and inline elements: the
so-called block elements, based on a separate line start-rendered elements, inline elements are not subject to a new line. If a separate insert these two elements in a web page, will not have any impact on the page.
These two elements are defined specifically for the CSS style born.
note:
About nested tags: block elements may typically contain some inline elements or block elements, but the elements can not contain inline block elements, it can contain other inline elements.
p can not contain block-level tag label, the label can not contain p p tag.
img tag
<Img src = "Image Path" alt = "prompt when the image is not loaded successfully" title = "message when the mouse was suspended" width = "width" height = "high (width and height only two properties automatically like a zoom ratio) ">
a label
Hyperlink label
The so-called hyperlinks from a web page refers to the relationship between a connection point to the goal, this goal can be another Web page, it can be a different location on the same page, it can also be a picture, an email address, a file, or even an application.
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
href attribute specifies the landing page address. The address can be of several types:
- Absolute URL - points to another site (such as href = "http://www.jd.com)
- Relative URL - refers to the current site in the exact path (href = "index.htm")
- Anchor URL - points to a page anchor (href = "# top")
target：
- _blank means open landing page in a new tab
- _self means to open the landing page in the current tab
List
1. unordered list
<UL type = "Disc"> <Li> first </ Li> <Li> second </ Li> </ UL>
property type:
- disc (solid circles, the default value)
- circle (open circles)
- square (solid squares)
- none (no style)
2. ordered list
<OL type = ". 1" Start = "2"> <Li> first </ Li> <Li> second </ Li> </ OL>
property type:
- A list of numbers, the default value
- A capital letter
- a lowercase letters
- Ⅰ capital Rome
- Ⅰ lowercase Roman
3. The list of titles
<DL> <dt> Title. 1 </ dt> <dd> contents. 1 </ dd> <dt> Title 2 </ dt> <dd> contents. 1 </ dd> <dd> SUMMARY 2 </ dd> </ dl>
[Three] table
Data table is a two-dimensional space, a table is composed of rows, a plurality of cells form another row, Gerry unit may contain text content, lists, patterns, forms, numbers, symbols, text, and other pre-forms and the like.
The most important purpose of the table is a table showing category data. Class data table refers to a table format most suitable tissue (i.e., organized in rows and columns) data
The basic structure of the table:
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>杠娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>
Attributes:
- border: table border.
- cellpadding: padding
- cellspacing: margins.
- width: percentage of pixels (length and width is preferably set by css).
- rowspan: How much vertical cross-cell line
- colspan: how many columns the cell spans (that is, merged cells)
[Four] form
Features:
Form data for transfer to the server, enabling a user to interact with the Web server
Forms can contain a series of input labels, such as text fields, check boxes, radio buttons, submit buttons and so on.
Forms may also contain textarea, select, fieldset labels and label
Attributes:
Form elements:
The basic concept:
HTML is HTML form elements more complex parts, often forms and scripts, dynamic pages, data processing and other functions combined, so it is very important to create dynamic website content.
Enter the general information form is used to collect user
form works:
visitors have while browsing the web form, you can fill in the necessary information, and then press a button to submit. This information is transmitted to the server via the Internet.
A special program on the server to process the data, if there is an error returns an error message and ask to correct the error. When the data are complete and correct, the input server complete a feedback information.
[Five] input
<Input> element will be different according to the type attribute is changed to various forms.
Property Description:
- Difference when the form is submitted, "key", and note the id: name
- value: the value of the corresponding item of the form is submitted
- When type = "button", "reset", "submit", the text of the content is displayed on the button
- type = "text", "password", when the "hidden", as initial value input box
- type = "checkbox", "radio", "file", the value associated with the input
- checked: radio and checkbox is selected by default entry
- readonly: text and set read-only password
- disabled: All input apply
[Six] select tag
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>
属性说明：
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
label标签
定义：<label> 标签为 input 元素定义标注（标记）。
说明：
- label 元素不会向用户呈现任何特殊效果。
- <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。