Front End Knowledge Learning--html

<!--
The relationship between the three html,css,js ==> people, clothes, movements.
The following shows the HTML common Basic code
-
<!--Html
The basic tags given by default for new HTML files in Pycharm are as follows:
----------------------
<! DOCTYPE html> represents the standard HTML parsing format
<meta charset= "UTF-8" > Self-closing and labeling
<title>Title</title> Page Title

<body> page Body <body></body>

</body>

----------------------
-
<! DOCTYPE html>
<meta charset= "UTF-8" >
<!--<meta http-equiv= "Refresh" content= "1" > <!--page title The icon to the left is refreshed every 1 seconds--
<!--<meta http-equiv= "Refresh" content= "2;http://www.baidu.com" > <!--page 2 seconds to refresh and jump to the specified link--
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" > <!--compatible to the highest version of Internet Explorer--
<meta name= "keywords" content= "big bro" > <!--search keywords, usually a word, to view the Web page source code to see
<meta name= "description" content= "Big bro is a low-key siege Lion" > <!--search summary, usually a sentence, to view the Web page source code to see
<title> Page title name </title>
<link rel= "shortcut icon" href= "Title_icon.jpg" > <!--Link Import shortcut icon title icon--
<!--<link rel= "stylesheet" href= "XXX" > <!--link import CSS style sheet--
<!--<script src= "xxxxx" ></script> <!--import JS files--
<style> <!--where to write CSS styles >

</style>

<body>
<p> Young, is to take to toss. </p> <!--P is a paragraph label with a distinct distance between the segments; BR is a newline label with no distance between the rows
<p> to have skills capital,<br> is the accumulation of countless lonely moments that require countless nights of meditation,</br>. </p>

<div> <!--block-level labels for the entire width of the page--><!--Div is a block-level label whiteboard with only one property--
Block-level labels
</div>
<span> <!--the width of the label varies with the contents of the label, is the size of the contents of the package label--><!--Span is a whiteboard with inline labels, no properties--
In-line labels
</span>
<!--
<form> tags are used to create HTML forms for user input.
A form can contain input elements such as text fields, checkboxes, radio boxes, submit buttons, and so on.
Forms can also contain menus, textarea, fieldset, legend, and label elements.
Forms are used to transfer data to the server.
Action submitted to that interface
Method Post or get
Enctype= "Multipart/form-data" specifies the type of upload file
-
<form action= "/login" method= "post" enctype= "Multipart/form-data" >
<span> whether to let the page remember the password </span>
<input type= "checkbox" checked= "Checked" > <!--check box, which is checked by default
<input type= "Radio" checked= "checked" > <!--radio button, default check-
<input type= "Radio" name= "R1" checked= "checked" >
<input type= "Radio" name= "R1" > <!--mutually exclusive pair of radio buttons, first selected by default, mutually exclusive with the same name--
</form>
<div>
<input type= "Text" > <!--Plain text input box, enter visible characters--
<input type= "Password" > <!--ciphertext text input box, input Word utilises mask display--
<input type= "Submit" > <!--submit button to submit the form data directly to the background--
<input type= "File" > <!--for uploading files--
<input type= "Reset" > <!--reset button to reset the form data

<input type= "text" id= "I1" >
<label for= "I1" > Username </label> <!--label is a label that uses the for-bound control ID to click on the control's label as if it were a click-to-control effect.
</div>
<textarea> <!--a multi-line display area that can be scrolled, or by dragging the lower-right corner to resize the area-
An application HTML standard for Standard Universal Markup Language since the release of HTML4.01 in December 1999,
Subsequent HTML5 and other standards were shelved, in order to promote the development of the web Standardization Movement,
Some companies joined together to set up a call
The organization of Web Hypertext Application Technology Working Group (Web Hypertext Application Team-WHATWG).
WHATWG is dedicated to Web forms and applications, while World Wide Web Consortium, www Alliance
Focus on XHTML2.0. In 2006, the two sides decided to work together to create a new version of HTML.
</textarea>
<div>
<select > <!--drop-down box, which displays the selected items--
<option> Urumqi </option>
<option> Beijing </option>
<option> Shanghai </option>
<option> Guangzhou </option>
<option> Shenzhen </option>
<option> Tianjin </option>
<option> Chongqing </option>
<option> Zhengzhou </option>
</select>
<select size= "2" multiple= "multiple" > <!--scroll marquee to display multiple options of a specified number--
<option> Urumqi </option>
<option> Beijing </option>
<option> Shanghai </option>
<option> Guangzhou </option>
<option> Shenzhen </option>
<option> Tianjin </option>
<option> Chongqing </option>
<option> Zhengzhou </option>
</select>
<select size= "4" multiple= "multiple" > <!--scrolling marquee, grouping displays multiple options for the specified number of items--
<optgroup label= "municipality" >
<option> Beijing </option>
<option> Shanghai </option>
<option> Guangzhou </option>
<option> Shenzhen </option>
<option> Tianjin </option>
<option> Chongqing </option>
</optgroup>
<optgroup label= "capital city" >
<option> Chengdu </option>
<option> Zhengzhou </option>
<option> Urumqi </option>
</optgroup>
</select>
</div>
<div>
<a href= "http://www.baidu.com" target= "_blank" > Skip to Baidu Home </a> <!--target= "_blank" is a link to open a jump on a new page--

<!--img Picture tags
SRC Image Address
ALT displays the copy when the picture fails to load
Title The text displayed when the mouse hovers over the image
-
</div>
<div>
<!--ul defined unordered list
Do not specify a type default dot
Specifies the type to display by type
-
<ul>
<li> first day Learning UI Automation </li>
<li> Next day Learning UI Automation </li>
</ul>
<ul type= "Square" >
<li>HTML</li>
<li>XHTML</li>
<li>CSS</li>
</ul>
<!--ol define an ordered list
Do not specify type default Arabic numerals ascending
The specified type is displayed by type a 1 I I
-
<ol type= "1" reversed= "reversed" >
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</div>
<div>
<!--table Tab
Thead table Header
TR Line
Th column
The properties of th colspan= "2" represent a column of several columns
Tbody Table Body
TR Line
TD Column
-
<table border= "1" >r
<thead>
<tr>
<th>id</th>
<th> name </th>
<th> class </th>
<th> Courses </th>
<th> score </th>
<th colspan= "2" > Operation </th>
</tr>
</thead>
<tbody>
<tr>
&LT;TD rowspan= "3" >1</td>
&LT;TD rowspan= "3" > Zhang San </td>
<td> Aries </td>
<td> language </td>
<td>100</td>
<td> Edit </td>
<td> Save </td>
</tr>
<tr>
<td> Aries </td>
<td> Math </td>
<td>100</td>
<td> Edit </td>
<td> Save </td>
</tr>
<tr>
<td> Aries </td>
<td> English </td>
<td>100</td>
<td> Edit </td>
<td> Save </td>
</tr>
</tbody>
</table>
</div>
</body>

Front End Knowledge Learning--html