html
1, html What is it? html is the set of rules, the rules of the browser know.
2, as a developer of awareness of html:
learning the rules Html
Development Background:
- Write Html files (acting as role templates) ******
- database to obtain data, and then replace the specified location html file (Web framework )
3, local test
- to find the file path directly to the browser opens
4, write Html files
- doctype html correspondence between the versions of the rules, the default is html5
- html tags, internal tags can write properties ====> Only one <html lang = 'en'> ====> follow a languages, en represents the Chinese
- Notes: <! - content comment ->
5, label classification
- self-closing tag
<meta charset = "UTF-8 " /> ===> encoding the specified page, there will be a page open is garbled, specify page coding
- Active closing tag
<div></div>
6, inside the head tag label
- <meta -> encoding, jump, refresh, keywords, description, IE compatible
- IE兼容：<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- Encoding: <meta charset = "UTF-8" /> ====> specified page coding, labels and self-closing, the last "/" can be omitted, but is not recommended omitted.
- 跳转和刷新：<meta http-equiv="Refresh" Content="5; Url=https://www.baidu.com" />、<meta http-equiv="Refresh" Content="5" />
- Keywords: <meta name = "keywords" content = "car, car home, car network, car pictures, news, review" />
- Description: <meta name = "description" content = "car home for you with the latest car quotes, car pictures" />
- title tag ====> used to describe the page title
<Title> blog Garden </ title>
- <link /> engage icon owe
- <style /> less
- <script> Less
ps: internal label general external head can not see, only the title labels are externally accessible
7, body tags
- icon, & nbsp; & gt; & lt; ===> space, greater than, less-than
- P tag, a paragraph
- br , wrap
All tags are divided into:
a block-level tag: div (white), H series (increase bold), p labels (spaced between paragraphs and paragraphs)
inline tag: span (white)
can be nested between a tag
label present meaning, css operation, js operating
ps: using chorme review elements
- positioning
- View style
- h series
- div
- span
- the INPUT series + form tags
input type = 'text' ==> name attribute, value = "Zhao Fan"
input type = 'password' ==> name attribute, value = "Zhao Fan"
the INPUT of the type = 'the submit' ==> value = 'submit' submit button, the form
input type = 'button' ==> value = ' login' button
input type = 'radio' ==> checkbox value, checked = "checked", Name attribute (name of the same mutex)
input type = 'checkbox' ==> checkbox value, checked = "checked", name attribute (get bulk data), is sent to the background data [] array
input type = 'file' ==> dependent form of Form attribute = the enctype "multipart / form-Data"
INPUT type = 'rESET' ==> reset
<textarea> default </ textarea> ==> name attribute
select tag ==> name, internal option value, submitted to the background , size, multiple
<select name="" id=""> <option value="1"> 上海 </option> <option value="2"> 北京 </option> </select>
attribute represents a plurality of display size, multiple = "multiple" represents a multi-select
- A label
- Jump
- anchor href = '# a tag ID' tag ID must be unique
<head> <meta charset="UTF-8"> <title>Document</title> <style> .content{ height:600px; width:100%; } </style> </head> <body> <a href="#i1">第一章节</a> <a href="#i2">第二章节</a> <a href="#i3">第三章节</a> <div id='i1' class='content'>1</div> <div id='i2' class='content'>2</div> <div id='i3' class='content'>3</div> </body>
- IMG
the src ==> Image Path
alt ==> Loading display image when an error
title ==> Description displayed when the mouse is placed on the image: Tulip
< Img src = "/ i / eg_tulip.jpg" alt = "Shanghai Flower Port - Tulip" title = "tulip" />
- List
<ul><li>1</li> <li>2</li> <li>3</li> </ul> <ol><li>a</li> <li>b</li> <li>c</li></ol> <dt>第一章</dt> <dd > Content. 1 </ dd > < dd > SUMMARY 2 </ dd > < dd > content. 3 </ dd > < dt > Chapter </ dt > < dd > contents. 1 </ dd > < dd > Content 2 </ dd > < dd > content. 3 </ dd >
- Table ==> standard format as follows:
colspan = '' ==> indicates how many rows representing
rowspan = '' ==> indicates how many columns accounted
<table> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table>
<table border="1"> <thead> <tr> <th>主机名</th> <th>ip</th> <th>port</th> </tr> </thead> <tbody> <tr> <td colspan="2">主机1</td> <td rowspan= "2" > 192.168.1.1 </ TD > < TD > 9000 </ TD > </ TR > < TR > < TD > Host 1 </ TD > < TD > Host 1 </ TD > < TD > Host 1 </ TD > </ TR > < TR > < TD > host. 1 </ TD > <td > Host 1</td> <td>主机1</td> </tr> </tbody> </table>
- label
to click on the file, such that the associated label acquisition cursor
<label for = "username"> Username: </ label>
<INPUT ID = "username" type = "text" name = "User" />
- the fieldset
Legend
--20 tags
The above is about 20 HTML tags, to meet the daily use development.