HTML First article

Html:

The HTML is divided into three parts:

1. Document declaration:

<! DOCTYPE html>

Tell the browser what HTML or XHTML specification to use to parse an HTML document

2. Head area:

Meta-information and the title meta-Information of the website is generally not displayed, but a lot of useful information about your HTML file is recorded.

• <title>
• <base/>
• <link/> (rel, href, type)
• <meta/> (http-equiv, name, content)

3. Body Area:

is the browser rendered, the user sees the page effect. This means that this is the main body of the page. Which is the body's meaning.

1. Block-level labels <p>

• Always start on a new line;
• Height, row height, margin and inner margin can be controlled;
• The width defaults to 100% of its container unless a width is set.
• It can accommodate inline elements and other block elements

2. Inline label <a><input><sub><sup><textarea><span>

① and other elements are on one line;
The ② is high, the row height and the margin and the inner margin cannot be changed;
The width of the ③ is the width of its text or picture, and cannot be changed.
④ inline elements can only hold text or other inline elements

• Basic tags (
• Special symbols (&gt;, &lt;, &nbsp;, &quot;, &copy, ....) ）
• <a> hyperlink tag (anchor tag) (href, target, name)
• graphic tags (src, title, alt, width, height, align)
• List labels (<ul>, <ol>, <li>, <dl>, <dt>, <dd>)
• <table> table Labels (<table>, <caption>, <tr>, <th>, <td>, <thead>, <tbody>, rowspan, colspan)
• <from> Form labels (action, method, Enctype, <input>, <textarea>, <select>, <label>,< fieldset>)

HTML three-part explanation:

<META>: Provides meta-information about pages, such as page encoding, refresh, jumps, descriptions and keywords for search engines and update frequency

1. Define the encoding format:

<meta charset= "UTF-8" >  #定义编码为utf-8

2. Refresh the Jump:

<meta http-equiv= "Refresh" content= "5" >     # 5 Seconds Jump <metahttpequiv= "Refresh" content= "1; url=http://www.cnblogs.com/mosson/"/>   #跳转至新的博客地址

3. Keywords

Generally is the crawler, such as the collection program, when they crawl your site, if you have keywords, then they will prioritize the keywords into their records

<meta name= "keywords"/>

4. Description

<meta name= "description" content= "blog Park is a developer-oriented knowledge sharing community. Since its inception, the blog Park has been dedicated and focused on creating a pure technology exchange community for developers, driving and helping developers to share knowledge through the Internet, which will benefit more developers. The mission of the blog Park is to help developers change the world with code. ">

5.<title>

<title> I was displaying the content in the browser header </title>

6.<link&gt: There are three properties commonly used: rel, href, type

rel Specifies the relationship between the document and the linked document.

1. Rel= "Dns-prefetch" pre-parses the domain name used in the cached document in order to improve the speed of Web page access. Usage Scenario: When a Web page frequently uses other domain name resources.
2. rel= "shortcut icon" or rel= "icon" is used to display icons on the collection and title bar. Example: <link rel= "icon" href= "Http://images.cnblogs.com/cnblogs_com/suoning/845162/o_s.png" >. Note: The IE browser only supports ICO format, in order to be compatible with IE, the image file is in ICO format
3. rel= "stylesheet" references an external style sheet
4. Rel= "nofollow" is used to indicate that the search engine does not track (crawler crawl) and reduce spam links. For <a> tags, use the scene: Web pages are not trusted or do not want to chant search engine input site.

The path to the href resource (relative path/absolute path)

type Specifies the MIME type of the attached document, which is used to clarify how the file is opened. For example:. ico file Image/x-icon.

7.<style>

Write CSS styles in the current file

Write CSS styles in other files like Python's module import to import CSS styles into the current file using

8.<script>

Write JS in the current file

In other files write JS python-like module import method to import JS into the current file using

<body> Tags:

Common tags in 1.body:

<a> hyperlink tags for jumping to other pages

<P>: paragraph label. The contents of the package are wrapped. And there is a blank line between the contents.

Style= "Text-indent:2em" can set the style to indent the first line by two characters.

<blockquote></blockquote> can be used to set the indentation for an entire paragraph.

<b> <strong>: Bold label.

<strike>: Add a median line to the text.

<u>: Underline the text below.

<em> <i>: Text becomes italic.

<sup> and <SUB>: Upper and Lower corner labels.

<br>: line break.

<div>

Block-level labels. Block-level labels are often used for layouts, and row-level labels often display content.

The display of a div is usually identified by an ID or class. The ID is a unique label identifier, and class is the identifier for the label.

The size of the div is determined by the content, and by default the height is determined by the height of the content, and the width adapts to the screen.

Can hold other elements, is a container.

<span>

2. Special symbols:

Special symbol    Code "    &quot;&    &amp;<    &lt;> &gt    ; ©   &copy; ®   & reg; ±   &plusmn; x   &times; §   &sect; ¢   &cent; ¥   &yen; ·   &middot;    &euro; £   &pound; ™   &trade;

3.<a> Tags: commonly used properties: href, target, name

HREF: The resource path format to be connected is as follows: href= "http://www.baidu.com"

Target: _blank: Opens the hyperlink in a new window. Frame name: Opens the connected content in the specified frame.

Name: Defines a bookmark for a page.

<a href= "http://www.cnblogs.com/mosson/l"  target= "_blank" > poke here </a>

4. List Label:

<ul>: Unordered list

<ol>: Ordered list

<LI>: Each item in the list.

Common Properties of Li: Type indicates the project's types, attribute values are: A,a,i,i,1,disc (solid circle), square (solid square), Circle (Hollow circle).

<dl> definition List

<dt> List Title

<dd> list Items

5. graphic Tags: important attributes are: SRC, title, alt, width, height, align.

The path to the src picture.

title mouse hover over the text on the picture.

alt The text that you want to replace when the picture is not found. If your picture resource is using an extranet resource, the text you want to replace is not displayed. If you are using resources from this site (relative paths are given), you will see alternate text when the picture is not found, and keep the width and height structure of the picture set.

Align vertical alignment of text around a picture (obsolete). Common attribute values are: top (aligned to the top of the picture), Middle (aligned to the middle of the picture), bottom (default, aligned to the bottom of the picture).

width of the picture

height Picture height (width height Two properties only one will be automatically scaled.)

6.<table> Table Label:

Border: Table border.

cellpadding: Inner margin

cellspacing: Margin.

Width: Percentage of pixels. (preferably with CSS to set the length width)

<TR>: Data row for table row table

<th>: Table Head Cell table header name, unlike <td>, text is displayed in bold and centered form

<td>: Table data cell cell for displaying table contents

RowSpan: How many rows the cell spans vertically

colspan: How many columns the cell spans (that is, merged cells)

<th>: Table header <tbody> (infrequently used): partitioning the table.

<! DOCTYPE html>
：
Table Merge Cells
<table border=""cellspacing="1"cellpadding="1"style="width:300px;height:100px;color: #FC0D51; Background-color: #9E9C9C; Text-align:center"> <tr> <td> </td> <td> two </td> <td> three &LT;/TD&G        T </tr> <tr> &LT;TD colspan="3">1 2 3</td> </tr> <tr> <td>4</td> <td>5</td&            Gt &LT;TD rowspan="2">6 9</td> </tr> <tr> <td>7</td> <td>8</td&gt        ; </tr> </table>
Merge Cells
7.<form> Form Labels:
Properties: Action, method, Enctype
The address to be submitted by the Action form, which is used to process the contents of the form (typically, an interface that submits the dictionary to the background, which is written in Java, and the backend knows how to process the data after committing to the interface).
 method is submitted by default, and is submitted by the Get method.
Get:1. Committed key-value pairs. Put it in the address bar after the URL. 2. The security is relatively poor. 3. There is a limit to the length of submissions.
Post:1. Committed key-value pairs are not in the address bar. 2. Security is relatively high. 3. The length of the submission is theoretically unlimited.
The enctype encodes the form data, which is encoded by default. The format is: application/x-www-form-urlencoded (the form's default encoding format, which encodes all characters before the form is sent.) Encoding rule: The space is converted to "+", the special symbol is converted to ASC hex value). This default encoding can be used to submit normal text content to the server. When you need to commit a file, the encoding needs to be in another format: Multipart/form-data (not character encoding, file upload). Text/plain (is a plain text encoding, spaces are converted to "+" numbers, but special characters are not encoded).
Form elements:
The Type property of <input>
text box input (the Default text text box type).
AutoComplete (automatically completes the input, requires the form element to have the name attribute to have the auto-complete effect, off means that AutoComplete is not available, on indicates that auto-complete is enabled)
Disabled (Sets or gets the state of the control, default is False is available, equals True when not available, cannot enter content)
Password Password box. (The following properties are common to text and password)
Size (Specifies the initial width of the form element.) When type is text or password, the size of the form element is in characters, and for other elements, the width is in pixels.
MaxLength (type text or password, which represents the maximum number of characters entered), helps prevent SQL injection attacks
　　
Radio radio button. Property:
Name (the value of name is set to the same value to represent a set of data in order to implement the radio function)
Value (must write, commit to the server key value, the actual development process value is usually number)
Checked (whether the selected state)
 checkbox check box.
Name (the name must be the same as the one that represents a set of data that is added to the same value list submitted to the server)
Value (must write, commit to the server key value, the actual development process value is usually number)
Checked (whether the selected state)
　　 file file fields, uploading files (different browsers behave differently)
　　 submit button. Used to submit the form.
 Reset the reset button. Clears the form's input and reverts to the form's default state.
　　 button for normal buttons. Commonly used in conjunction with JavaScript.
　　 The image Image button, which is used to submit the form, is the same effect as submit.
SRC (picture path)
　　hidden hidden fields.
Value (hidden content)
 color label. value specifies the color value (in # hexadecimal number).
 Date Day. The value specifies the default date, in the format ****-**-** (Month day).
datetime-local Displays the local time, value values specify the default time, in the format 2016-05-20t11:10:10 (month, day, and seconds).
 number numbers swipe up or down. You can fill in numbers and select different values up or down.
range Slide label. Min (Specify minimum), max (specify maximum), value (specifies the current default value).
Week The number of weeks per year. value specifies the number of weeks of the year, formatted as 2016-W25 (25th week of 2016).
<textarea> Text field labels. The default representation is a text box that can be entered in many lines.
Name (key for form submission item)
Cols (Set text field width)
Rows (Set text field height, rows)
<select> drop-down box label. Use it together with the <option> child tags.
Name: Key of the form submission item
Size: Number of options
Multiple: Multiple selection
<option> drop-down check each item

 
 

  
  
 
   
 
    
Value (values of form-submitted items)
 
    
Selected (selected dropdown selected by default)
 
   
 
  
 
 
<optgroup> for each item plus grouping
<label> combine elements with text
Friendly design: Do not just check the box to select and tick, ask to click the corresponding text can also select the check box.
In this case, use the For property of the <label> tag (set or get the object specified by the given label object, and the value = ID number of the other element)
<label for= "name" > Name </label><input id= "name" type= "Text" >
<fieldset> Group related elements in a form
<fieldset>    <legend> Warm tips </legend>    <div align= "Middle" > Don't forget to Like oh ==</div></ Fieldset>
Value: Values of form-submitted items
The use of the Value property differs for different input types:

 
 

  
  
 
   
Type= "button", "Reset", "submit"-defines the displayed text on the button
 
   
Type= "text", "Password", "hidden"-defines the initial value of the input field
 
   
Type= "checkbox", "Radio", "image"-defines the value associated with the input
 
  
 
 
<iframe> Framework
Element creates an inline frame that contains another document (inline frame)
name (sets the frame name. This is a property that must be set)
src (sets the name or path of the page to be displayed for this frame.) This is a property that must be set)
scrolling (sets whether to display scroll bars.) Set value to Auto, yes, no)
bordercolor (Sets the border color of the frame)
frameborder (sets whether frame borders are displayed.) Set value is only 0, 1;0 means no border, 1 means to show border)
noresize (sets whether the frame size can be adjusted manually)
marginwidth (sets the width between the frame boundary and its contents)
Marginhight (sets the height between the frame boundary and its contents)
width(set frame width)
 Height (Set frame height
HTML First article