HTML Basic Tag Element

HTML: Hypertext Markup Language (hypertext mark-up Language)

1. Function: Write Web page structure
2.HTML case insensitive, lowercase recommended
3. file suffix. html or. htm
4.html is performed by the browser parsing. From the top down, from left to right

1) HTML tag tag : the symbol used to describe the function is called "label"

<, .... > Composing HTML
Double mark enclosing type tag such as:Single mark non-enclosing type tag empty tag ,<br/>

2) HTML elements: everything from the beginning of the tag to the end of the tag
<p> This is a paragraph </p>
The end of the content element of the element's start element

Some HTML has empty content, and most HTML can have properties.

3) HTML Properties
Syntax: written in the start tag
Property = "Property value"
A label can have multiple attributes, separated by a space, without distinguishing the order of the front and back

Link between the property and the value of the property with an equal sign
The value of the property is enclosed in quotation marks
Property always appears as a name/value pair

4) HTML Comment

Grammar:
<!--text contents of annotations-shortcut keys: ctrl+/

Annotations cannot be nested in other annotations.

5) Title Tag
H1-h6 (double mark)
Property: align= "Left|right|center"

6) Paragraph label
P (double mark)
Property: align= "Left|right|center"

7) Picture Label
IMG (Single Mark)
Property:
SRC: path
Alt: When the picture does not display properly, give a hint
Title: Mouse hover, give hints to give hints

Width;height: Picture Width height Set a value on the line, and the other value will be scaled proportionally.
Width= "heigh=" 160 "(without adding px)

1. Relative path (web address)
(similar, write directly;
Next level, first find the complex level "/";
Upper level, ". /"  ;
On level two, ". /.. /";
Multilevel as above)
2. Absolute path

8) Force line Wrapping <br/> Tags :

Single mark, without any attributes eg:<br/>*50: line break 50

9) Horizontal line : (Single mark)

Default the entire page as wide as the properties;
<HR color= The color of the "red"/> Line

10) Hyperlinks <a> Tags:

Property:

• Herf: Link URL path relative path eg:<a href= "xxx.html" > Relative path </a> (local path)
• Target: Opens the window target (default value _self; New window opens _blank,_parent, etc.)
• Title: Define the mouse pass is a hint message
• Name: Anchor point same page to do jump

1. Click a to jump to a

<a herf= "#me" > Point me <a/>
<a herf= "" Name= "Me" > To me <a/>

2. Click a to jump to block level elements
<a href= "#me" > Click </a>
<p id= "Me" > To me </p>
Include English numerals underline
Cannot start with a number

Add: <a herf= "#";: Empty link back to top of page

I. DOCTYPE document type declaration (DTD document model)

Role: Tell the browser to parse the code according to current criteria
Note: Not HTML tags

3) En: English, just a statement that declares it, is more friendly to search engines and browsers, and does not change the display content
ZH-CN: Chinese

4) Title: Define the title of the document

A page can only have a title, head inside must add title, write the keywords related to the page to facilitate SEO optimization.

5) <meta charset= "UTF-8" >  
    meta tags are used to describe the properties of an HTML Web document, where charset= "Utf-8" Is that the current use of the Utf-8 encoding format, in development we often see utf-8, or GBK, these are encoded format. Abroad generally will use GBK, gb2312, domestic usually uses utf-8.

6) <meta>: The
  element provides meta-information about the page (meta-information), which is used to describe the page to the browser or search engine. such as the description of the document and keywords. It can only be placed in the head. belongs to the meta-information label.
     Common Meta has
     1.Keywords (keyword) Keywords is used to tell search engines what keywords are on your page.
    <meta name= "keywords" content= "web Front end, Sulierz blog";
    2.description (Description of website content)   Description used to tell the search engine the main content of your website.
     <meta name= "description" content= "Sulierz blog, Web Front end learning";
    3. Author Author    label page author
    <meta name= "author" content= "root,[email protected]"

Two. Text Formatting tags (general browser default font is 16PX)
<b></b>
<i></i>
<u></u>
<em><em/>: Emphasizing tilt display
<strong></strong>: Emphasize bold display
: Define Subscript
: Defining superscript
<del></del>: Define delete word with <s></s>
<ins></ins>: Defining what to insert
<pre></pre>: Text that is enclosed in the pre element usually preserves spaces and line breaks


three. Semantic label a address H1-h6
That is to say we see a tag, and it is not intuitive to know that it is a hyperlink, but address, through translation, also understand that this is the definition of contact information, which is the benefits of semantics. It is displayed in italics.

Four: List label page layout function
The list is divided into three categories: one is the unordered list <ul>, the first is the sequence table <ol>, and the custom list <dl>. (list item marker <li>)

• unordered list <ul>: ul>li*5 contains nested

<ul><li> attribute type definition Bullet unorderlist List block level element
Disc solid Circle (default)
Circle Hollow Circle
Square Small Square
None does not show

• There are sequence tables <ol>:

The properties of the <ol><li> type have options orderlist
1 indicates that the list item is numbered with a number (...)
A indicates that the list item is labeled with a lowercase letter (a,b,c ... ）
A indicates that the list item is capitalized (A,b,c ... ）
I represents a list item with a lowercase roman numeral designator (I,II,III ... ）
I represents the list item with uppercase Roman numeral designator (I,II,III ... ）
Start: From the beginning of the first number of values number reverse: reversed

• Custom list <dl> : The definition list defaults to two levels,

The first layer is the list item label <DT> (subject), the second layer is the annotation item label <DD> (content description)


Five: Form table(store data, show data)
<tr>: Line
&LT;TD&GT;: Column
<th&gt: Define table header cells (default horizontally centered and bold)
&LT;CAPTION&GT;: Defining table headings
Tables Table Properties:
Border: Border default no Border eg:border= "1"
Width: Wide
Align: Table horizontal alignment default left align= "center"
cellspacing: Spacing between cells cellspacing= "0"
cellpadding: Content from cell distance cellpadding= "20"
Table Row TR Property:
Height
Width: Wide
Align: Table horizontal alignment default left align= "center"
valign: Vertical Alignment Default Middle,top,bottom
Table column TD properties: Same TR
Colspan: setting cells across columns
Horizontal merge, value number colspan= "2" horizontally merges 3 cells,
RowSpan: Setting cells across rows
Vertical merge rowspan= "2"

VI: HTML entity characters use an entity character when some characters in a webpage are not displayed properly
Space:&nbsp;
<:&lt;
>:&gt;
&:&amp;
?  :&copy; (Pinyin typing "copyright" can be)

Seven: Inline frame iframe(Inner frame: Nesting a Web page inside the body)
Property:
①width can set the width of the inline frame
②height can be set to the height of the inline frame
③name Setting the frame name
④SRC setting the path of the page
⑤scrolling Specifies whether scroll bars are displayed in the IFRAME
(yes,no, default auto[auto])
⑥frameborder Specifies whether to show the border around the frame (1 default border, 0)

HTML Basic Tag Element