HTML base point of knowledge

HTML base point of knowledge

1. Add slashes, such as <br/>, to the start tag, which is the correct way to close empty elements, which is accepted by HTML, XHTML, and XML.

Even though <br> is valid in all browsers, using <br/> is a long-term guarantee

2.HTML tip: Use lowercase tags
HTML tags are not case sensitive:<p> is equivalent to <p>. Many websites use uppercase HTML tags.

W3school uses lowercase tags because the World Wide Web Consortium recommends lowercase in HTML 4, and lowercase in future (X) HTML versions

3.HTML links are defined by <a> tags. The address of the link is specified in the href attribute:

<a href= "http://www.w3school.com.cn" >this is a link</a>

Picture as a link
<a href= ". /example/html/lastpage.html ">

</a>

4.DOCTYPE parsing
Three modes of parsing:
ie6,7 quasi-standard mode (compatibility issues, HTML5 and CSS3 not supported)
Standard mode
Promiscuous mode (non-standard)

Double-click Open HTML is promiscuous mode, only after webstorm this type of open is the standard mode

5. Divided into head and body parts
Head can write: introduce file, author keyword

Body: All tags must be written inside body

6.HTML Basic Syntax
<p> </p>
There are start tags and end tags, paired, there are only one/,/: Terminator
As long as the software is not an error can be, some no/, empty tags
Style is written in the Start tab
Shorthand method, div plus tab-Key Association

Note: Ctrl +/
<!---->
All the code that does not, the direct comment code, may put the matching label to delete

There's an underscore in the error.

All tags and elements must be lowercase, and all attributes should be "" expanded, nested Inside "
All tags are divided into block-level elements and row-level elements.

Block-level elements and inline elements:
☆ Block-level elements: can be exclusive line, with a certain width of high, and content-independent Div,p,h1-6,dieldset
☆ Line-level elements: Can not be set high-wide, wide and content-related input,span,strong,a,img

Space:
<em> Italic </em>
<b> Bold </b>
<strong> Bold </strong>
Set inside the style:
Font-weight:bold;
Line break:<br/><br>
Split Line: Special characters must be written with symbols, otherwise the style may be incorrect

Title
Mata: Description

7. Box Model:
All pages are boxes:

Margin: outer margin, outside the border, function: the spacing between several boxes. With positive and negative values
Border: border:
padding: Inner margin, no negative value
Content: Contents

Google Chrome internal debugging, or look at the source code: Right-click review elements, check: F12
JS section and CSS files may not be seen, packaged or encrypted to see
Other basic can be seen. Web pages can be saved as a review element or as a Web page

Page size: 16px minimum, except Firefox

Troubleshooting: In Google Chrome, debug see results

General Test Browser: Google, Firefox, ie can not be tested

8.<div> can define partitions or sections (division/section) in a document.
No matter what, you can use div tags.

div style directly to a row, does not show the desired
<div>
5
+6
-----
11
</div>

<pre> styles are displayed according to the written style
<pre>
5
+6
-----
11
</pre>

① font size, border, aspect settings
<span style= "width:100px;height:100px;border:1px solid red;font-size:100px" > I'm a span</span> of lattice
② setting font underline and strikethrough
<p> a dozen <del> 20 </del> <ins> 12 </ins> pieces. </p>
<p style= "color:red font-size:30px" ><ins> member registration </ins></p>

<div style= "width:500px;height:500px;border:1px solid red" > I am a box </div>
<strong> I am a srtong</strong>

③ the styles of certain fonts, using span
<p><span style= "color:orangered" >*</span> <b> basic Personal Information </b>
(<span style= "color:orangered" >*</span> is required) </p>

9. Anchor Point: (Back to top)
① Create anchor point <a Herf = "" "Name = >
② point to anchor <a herf = "#+ name" >
Defect: The page will be refreshed

10. Unordered List
<ul>
<li>

11. Ordered list
<
Ol>
<li>

Custom list
<dl>
<dt> Computers </dt>
<dd> instruments used for calculation ... ...</dd>
<dt> Display </dt>
<dd> devices for visually displaying information ... ...</dd>
</dl>

The navigation is all made with UL Li

12. Form:
Table
TR Line
TD Column
Th column Header
Caption Table title

rowspan = "2" line merge, merge two rows and three rows:
colspan = "2" column merges successive rows of a merged row
cellspacing= "2" outer box cell spacing (cell spacing)
Cellpadding= "2" Inside 13:54 2016/4/18 cell margins (cell padding)
Align on its way, right, center,lift

Style= "Border-collapse:collapse" single-sided box

Thead
Tbody
Tfoot

Internal margin: cellpadding cellspacing

13.form form
INPUT type = ""
The value of type:
Text
Password
Reset
Button: This cannot be set to a high width
<input type= "button" value= "Hello world!" >
CheckBox
Placholder: Describes the values expected by the input fields
Date: Calendar Plugin
Number: Digital plug-in
File: Select files
Image
Color
Hidden
Submit
Reset
Email
Url
Search

readonly= "ReadOnly"
placeholder= "Please enter password" in the input box inside the gray hint

<input type= "Submit" > Bring your own Submit button

User name: <input class= "username" id= "username1" name= "username2" type= "text" >

Class: Commonly used in HTML,CSS
ID: commonly used in JS
Name: Commonly used for common background operations

ID unique, class can not be unique

<form form action= "Process address" method = "Get/post" Name= "" >
Name will be used in the background
Method= "POST" = "Get"
Get: Display, fast, low security
Post: Not displayed on address, slow, high security (encapsulation, encryption)

14.button button
You can set the size
<button style= "width:50px;height:30px;" > Buttons </button>

15.textarea text fields
Row: Line
Col: Column

16.radio Single Selection
<div>
<input type= "Radio" name = "Sex" > Male
<input type= "Radio" name = "Sex" > Female
</div>

17.checkbox Multi-choice,
<input type= "checkbox" > Multiple selection

18. Drop-down list select,option,
<select multiple= "multiple" >
<option value= "Sichuan" selected= "selected" > Sichuan </option>
<option value= "Guangdong" > Cantonese </option>
<option value= "Beifang" > Northern Cuisine </option>
<option value= "Shanghai" > Shanghai Cuisine </option>
<option value= "West" > Western food </option>
<option value= "Thailand" > Thai Cuisine </option>
</select>

Multiple= "multiple" setting displays only one page
Selected= "selected" Setting selected rows

19.filedset, Box with caption
<div>
<fieldset>
<legend> title </legend>
<p> male <input name= "Sex" type= "Radio" ></p>
<p> female <input name= "sex" type= "Radio" ></p>
</fieldset>
</div>

20.label and input used together
For inside write the ID of the related form
Expanded scope
<div>
<input type= "Radio" id= "Man" name= "Sex" >
<label for= "man" > Men </label>
<input type= "Radio" id= "NV" name= "Sex" >
<label for= "NV" > Women </label>
</div>

21. Video
<video src= "Ice Age. mp4" controls = "Controls" autoplay></video>
Controls control
AutoPlay Auto Play
Loop: Play back after playing

22. Audio
Audio src= "Ice Age. mp4" controls = "Controls" autoplay></video>
Controls control
AutoPlay Auto Play
Loop: Play back after playing

23. Semantic words
such as the title, paragraph, Head,foot, and so on are semantically, see the name of the idea

In the absence of CSS can be presented a good content structure and code structure,
Optimize search engines to make it easier for web crawlers to get priority resources
Readable, easy to develop and maintain
Reduce variance by following the standards

HTML base point of knowledge