HTML Basic Tags

Last Update:2017-08-07 Source: Internet

Author: User

Tags border color code tag

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Recently began to learn HTML5 language, the following is my knowledge of learning HTML to organize some of the points.

<! DOCTYPE html>
↑ Document Type declaration: Let the browser, according to HTML5 standard to interpret and execute the code.
↑ Document Type declarations are essential, and must be placed at the top of the document.
↑ If you do not write a document type declaration, the browser will default to compatibility mode, and there may be unknown bugs.

Head, there are some related statements about page settings.

"Difference between block-level labels and row-level labels"
① block-level label wrap, front and back row, row-level labels will not be automatically wrapped, from left to right display;
The width of the ② block-level label is 100% by default, and the width of the row-level label is open by text content;
③ block-level labels can set the width, height, margin and other properties; row-level labels cannot set the above properties

From the notation, the HTML tag is divided into "paired label" and "Self-closing label (empty label)"
① Label: Paired, with start tag, must have end tag, content wrapped between two tags. For example: ② Self-closing tags/empty tags: only one label, with/for automatic closing of tags (/can be omitted). Example:
"Common block-level labels"
H Tag: Title tag, default bold, H1 Max, h6 minimum.

HR Tab: Horizontal line label.

P Tag: a paragraph tag that represents a piece of text in a Web page.
BR Tags: line-break symbols, in the code to hit enter, in the Web page does not work. Must use <br> break

BLOCKQUOTE: Reference tag. Indicates that the text in the label is referenced from another site's content.
Browser default display effect: whole paragraph backward indent

Cite property: Represents the source of the reference content, the URL of the frequently-written reference
<blockquote cite= "www.jredu100.com" > Jiang Hao is a handsome guy! </blockquote>

Pre tag: preformatted label. Unlike the P tag, the pre tag retains the space in the Code and the carriage return, which is displayed directly on the page.
The most common function is to display code snippets in a Web page, preserving the code snippet format.
<pre>
Jsloader ({
Name: ' Iplookup ',
URL: ' Http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js '
});
</pre>

< "layout-based block-level labels"

Sequential table OL Order list
An ordered list is made up of multiple Li
<ol>
<li> the first </li>
<li> the second </li>
<li> the third </li>
</ol>

Unordered listing UL Unorder list
<ul>
<li> the first
<ul>
<li> the first </li>
<li> the second </li>
<li> the third </li>
</ul>

Definition list DL
The definition list contains two parts:
<dt></dt&gt: Defines the title of the list, title shelf display, a definition list is usually only one title
<dd></dd>: Defines a list of descriptive items that can have more than one description for a list, relative to the title backward indent display.
<dl>
<dt> define the title of the list </dt>
<dd> define a description of the list 1</dd>
<dd> define a description of the list 2</dd>
<dd> define a description of the list 3</dd>
</dl>

Learn: Combo Label figure
Contains two parts:
IMG a picture
Figcaption: The title of the picture, shown directly below the picture.
<figure>

<figcaption> title of the picture </figcaption>
</figure>

div partition label for use with CSS. Divide a page into chunks, and you can wrap a variety of labels.
<div style= "width:100%; height:40px; background-color:red; " >
This is the text inside the Div.
</div>

Commonly used row-level labelsspan Tags: text that is used in a wrapped line. Often use CSS to modify text styles.

Kang Haojin <span style= "font-size:48px; color:red;" > Handsome </span>!!!

[em/strong/i/b difference]
1, em and I all tilt, strong and B can be bold. However, EM and strong more than a layer of emphasis on the meaning. (Emphasize the role: can let the search engine quickly crawl the key part of the webpage.) Implement the semantics of the code.
2, EM, and strong all have an emphasis, but EM is tilted and strong is bold. Moreover, Strong's emphasis is higher than EM.
<em>em label, tilt + emphasis </em>
<strong><strong>strong label, bold + emphasis </strong></strong
<i>i label, Tilt </i>
<b>b label, Bold </b>
<u>u label, underline </u>

Common Reference label
Common reference tags are: blockquote, q, cite
difference:
① display Effect: BLOCKQUOTE Whole paragraph indentation, q quotes, cite tilt
② function: Blockquote is used to refer to an entire paragraph of content, is a block-level label. Q is used to quote a sentence, which is a row-level label. Cite is often used to quote work names and calligraphy and painting names.
<blockquote cite= "www.jredu100.com" > Block reference </blockquote>
<q cite= "www.jredu100.com" >q tags, short references </q>
<cite cite= "www.jredu100.com" >cite reference </cite>

Font size one and small, but has been eliminated, modified font uniform use of CSS
<small> small one font </small>
<big> large one font </big>

"IMG Picture Tag"
1. SRC attribute: Indicates the path where the picture is located.
[How the path is represented]
① Network image address. It is not recommended.
Http://n.sinaimg.cn/fashion/20170725/fVaL-fyiiahz0057431.jpg
② can use the absolute path of the picture. However, absolute paths are strictly forbidden. Because the absolute path uses the FILE://protocol, the Web page uses the http://protocol to open a file that cannot access the FILE://protocol.
File:///C:/sunyang.jpg--Absolute path notation: file:///drive:/file path
③ uses relative paths. The only way to recommend it.
A. The picture is on the next level of the current file, "folder name/Picture name"
B. The picture is on the same level as the current file, write "picture name" directly
C. The picture is on the current file, ".. /Picture name ".
Note: Images must be included in the project and cannot exit the project root directory
2. Width, height widths, height properties
3. Title: Text displayed when the mouse is pointing
4. alt: The text displayed when the picture cannot be loaded. Omit Alt, the title content is displayed by default
5. Align: The text around the picture, relative to the arrangement of the picture;
Top Text Center Center text centered bottom text bottom

"A tag HYPERLINK"
1. HREF attribute: The address of the hyperlink jump. Can be a network connection, or a relative path to a local HTML file.
2. Target property: The location where the new page of the hyperlink opens.
_slef Open on current page (default) _blank open on new page
3. Title Property: The mouse refers to the text displayed on the hyperlink.

"Functional Hyperlinks"
1. mailto: Send mail to the specified mailbox.
<a href= "Mailto://[email protected" > Click to send the email to handsome guy! </a>
2. Tencent: Chat with the designated QQ.
<a href= "tencent://message/?uin=2831705549" > Chat with Dudes </a>
3. Anchor Link: Click the hyperlink to jump to the specified location of the page (anchor point)
① define an anchor point at the specified location of the page:
<a name= "center" ></a>
② to change the href attribute of the hyperlink to "#锚点名称"
<a href= "#center" > Jump to div </a>
③ to jump to another page to specify the anchor point:
<a href= "Other page address. Html#center" > Hahaha </a>
<a name= "center" ></a>
<div style= "width:100%; height:800px; background-color:red; " >11111111111111</div>
<a href= "#center" > Jump to div </a>
<a href= "tencent://message/?uin=2831705549" > This is a hyperlink </a>

"Web structure advocated by the website"
1, content and performance separation. HTML is separated from CSS.
2. Separation of content and behavior. HTML is separated from JavaScript.
3, HTML code, must be implemented semantically.
"The norms of the"
1. Sign and attribute names must be lowercase
2.HTML label must be closed
3. Attribute values must be enclosed in quotation marks
4. Labels must be nested correctly
① nested tags, can not occur cross;
② block-level labels can be wrapped row-level, row-level labels cannot wrap block level, p tags can not be wrapped p tags, etc...

Other line-level labels (learn about them)
<u>u Labels underlined </u>
<span style= "Text-decoration:underline;" &GT;CSS Implementation Underline </span>
<s>s label with Strikethrough </s>
<span style= "Text-decoration:line-through;" >css Implementing Strikethrough </span>
Defining Professional terminology
DFN definition of professional terms abbr terminology abbreviations
We are learning <dfn>html5</dfn&gt, short for <abbr>H5</abbr>.

Code tag: Prompt search engine, currently a section of computer code.
However, code does not preserve the formatting of the codes and needs to be used in conjunction with the pre tag.
<pre>
<code>
Jsloader ({
Name: ' Iplookup ',
URL: ' Http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js '
});
</code>
</pre>

Represents a variable
<var>x</var>+<var>y</var>=1

BDO: Defines the direction in which text is displayed
There is an important property dir:ltr display from left to right, RTL from right to left
<bdo dir= "RTL" > Jiang Hao really handsome </bdo>

Represents text that needs to be entered by the user
Please enter "<kbd>Esc</kbd>" to exit the system.

Sub subscript sup Superscript
H<sub>2</sub>o x<sup>2</sup>

Represents time
Now is <time>16:10</time>

[table table]
a row in a table, denoted by TR;
Each cell in a row, expressed in TD;
The first row of the table header in each cell, with th, the th default text will be bold, centered. Various properties in

Table
1. Border: Adds a border to each TD and entire table of the table. If the value of border is >1, only the outermost border is bold, and the border on the TD is not changed.
2. CellSpacing: Sets the spacing between cells and cells.
cellspacing= "0" can set the spacing between the borders to 0, but the adjacent borders are not merged, but are displayed as two lines in width.
[Set table border Merge]
to use CSS settings: style= "Border-collapse:collapse;"
After you set the border merge, the CellSpacing property will be invalidated. Because the two lines have been merged together.
3. cellpadding: Cell padding, the distance between the text and the border in a cell.
4. Width/height: Table width, height
5. Align: Set table in Browser, left, center, right
6. BgColor: Table background color
bordercolor: Border color of table
Background: Table background map. Background color and background map are present at the same time. The row and column properties of the

Table
Act on Properties on TR or TD:
1. Width, Height: widths, Heights
2. BgColor: Background color.
when the properties of a table conflict with the properties of a row and column, the priority is the principle of "near-priority": TABLE<TR<TD
3. Align: Sets the text in the cell, horizontal alignment; left center right
valign: Sets the text in the cell, vertical alignment, top center bottom

Table cross-row and cross-column
1. Cross-column: colspan= "n" If a cell spans n columns, the right side of the cell n-1 TD is not required;
2. Cross line: Rowspan= "n" If a cell spans n rows, it is not necessary to n-1 a TD below the cell;

【 Form Form】
1. The form form has two important properties:
Action: Indicates which server address the form is submitted to;
Method: The way the form submits data, the optional values are get and post two kinds.

[Get and post differences]
①get uses URLs to pass data. All content is visible in the address bar, unsafe;
Post data cannot be seen in the address bar, it is more secure.
The amount of data transmitted by ②get is limited, and only plain text content can be passed;
Post can deliver large amounts of data, and can pass files such as pictures, videos, and so on.
③get transfer speed is faster than post.
[URL format for get pass data]
http://The original address. Html?name1=value1&name2=value2
For example: http://127.0.0.1:8020/0595.html?username=123
Therefore, when input is used, the Name property is necessary. Missing name causes the data for the input box not to be passed to the background.

2. Input's Common properties:
①type: Indicates what type of input box The current input box is.
②name: Aliases the input box. When passed to the background, it is passed in the form of Name=value
③value: The default value of the current input;
④placeholder: The prompt content of the input box. When the input box has value, the contents of the prompt disappear.
⑤hidden: Hides the current input box. Can be written as hidden= "hidden", can also omit the attribute value, write only <input type= "text" hidden/>
Hidden input box content, still can pass data to the background
⑥disablod: Disables the current input box. Can be displayed and cannot be used.
The input box content that is disabled will not be able to pass data to the background.
⑦checked= "Checked" Set radio button/multi-select button, selected by default
3. Type of input:
①text: normal text box;
②password: Password box. The input content is displayed as a small black dot.
③radio: Radio button. The value of the radio button cannot be omitted, and this value needs to be uploaded to the background;
Radio button, depending on whether the name is the same, whether the button is the same group. The same set of buttons can only be selected, and name must be the same.
Checked= "Checked" Setting radio button, selected by default.
④checkbox: Multi-select button. The other is the same as the radio button.
⑤file: File Upload box.
The Accept property allows you to restrict which types of files can be uploaded. "*" means that all files can be accepted and "image/*" means that only pictures are accepted.
Multiple= "multiple" settings can upload multiple files.
⑥submit: Form Submit button.
⑦reset: The form reset button. Click to restore the form to its original state.
⑧image: Graphical Submit button. The SRC attribute imports a picture, and submit has the effect of submitting the form.
⑨button: Appears as a button shape, but has no effect.
⑩hidden: The Hidden input box. The function is the same as the normal input box +hidden= "hidden".

4. Select Dropdown block
Every item in ①select, denoted by <option></option> tag;
The ②name property needs to be written to the Select tab;
③option tags If you have the Value property, the Value property is passed to the background, and if there is no Value property, the text between the <option></option> tags is passed.
④option Add Property selected= "selected" To set the default check.
⑤select Add Property multiple= "multiple", set the current drop-down control to multi-select
⑥option adds a property title that represents the text displayed after the mouse pointer.
⑦select can use the <optgroup></optgroup> tab to group options and display the group name with the label property.
<select >
<optgroup label= "Coastal" >
<option> Qingdao </option>
<option> Yantai </option>
</optgroup>
<optgroup label= "Mainland" >
<option> Jinan </option>
<option> Linyi </option>
</optgroup>
</select>

5. TextArea Text field
① text field size control:
You can use the Text field property cols= "20" (width of how many characters) rows= "10" (Height how many lines)
You can use CSS style style= "width:100px; height:100px; "
② Setting the Text field size cannot be dragged:
Style= "Resize:none;"
③ Set the Text field to read-only mode and cannot be modified:
<textarea readonly= "ReadOnly" ></textarea>
④ text out of range processing:
Use style= "OVERFLOW:XX;" You can set how text is displayed beyond the area:
>>> Overflow:hidden; Text hiding beyond the area is not displayed;
>>> Overflow:scroll; Horizontal vertical scroll bar, no matter how much text is displayed
>>> Overflow:auto; Automatic, default effect. Text displays more scroll bars, less text, and does not display scroll bars.
>>> you can use Overflow-x and overflow-y to modify two-direction scroll bars individually
OVERFLOW-Y: scroll; Overflow-x: Hidden;

"HTML5 Smart form"
1. H5 provides us with a way to associate input with a form. Just give the form a ID, and then add the form property to input outside the form, point to the ID, and you can bind the form to input.
<form id= "FF" ></form>
<input form= "ff"/>
2. H5 gives us a new type of input.
Range color Date Email URL
3. H5 New Input attribute:
①form Property: association Specifies the ID of the form.
②placeholder: Input Box prompt content
③required= "required" must be filled
④autofocus= "Autofocus" specifies the input box, which automatically gets the focus
⑤autocomplete: Whether to turn on the automatic prompt completion function. The default is on, set to off to off, set to on to open.
You can set AutoComplete to the form label and control the automatic prompting function of all input boxes in the form.

HTML Basic Tags

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More