HTML Basics:

Source: Internet
Author: User
Tags html comment italic font

HTML is an abbreviation for the English Hypertext Markup language, the Super Text markup Language, which is a markup language used to describe a Web page document.
HTML is the most widely used language on the web, and it is also the main language that forms the Web document. HTML commands can describe text, graphics, animations, sounds, tables, links, and so on.
HTML annotation method:<!--HTML Comment--
CSS annotation methods:/* CSS Comments */
JS Annotation method://JS of a single-line comment */* JS multi-line Comment */

I. HTML overview

<! DOCTYPE html>
<title></title>
<meta charset= "Utf-8" >
<body>

</body>

Two. HTML page labels

Title is through

The effects of these elements can be superimposed.

Space: A single space without a newline; width of two ordinary spaces &ensp; width of four ordinary spaces &emsp;
Wrap tag <br/> a simple line break is inserted into the document, and the marked content is changed to the next line of edits.
Horizontal divider marks The paragraph mark tag is <p>...</p>, and the contents of the tag pair are displayed in a paragraph. This tag allows you to define the structure of paragraphs in a page, but not in paragraph format.
Bold Mark <b>...</b>, the browser will contain the text bold display.
emphasis on bold <strong>...</strong> The browser uses the text to emphasize text, but it emphasizes a bit more.
Underline marks <u>...</u> The browser will underline the text contained therein.
italic marker <i>...</i> The browser will contain the text in italics or italic font display.
Emphasis on italic marking <em>...</em> The browser shows the text as an emphasis.
Strikethrough marker <del>...</del> The browser defines the text that has been deleted in the document.
Subscript Mark <sub>...</sub> the contents of the tag pair will be displayed in half the height of the character in the current text stream, but with the same font and font size as the text in the previous text stream of 9.

Three. HTML list


1. Serial list OL

<ol type= "" start= "> #type可选择 1,,a,,a,,i,,i,
<li> List Contents </li>
<li> List Contents </li>
</ol>

2. Unordered list , UL marker also contains a common

<ul type= "Square" > #type属性有, Disc solid dot, Circle Hollow Circle, Square Square
<li> List Contents </li>
<li> List Knowledge </li>
<li> Introduction to the list </li>
</ul>

3. The custom list starts with the <dl> tag , the explanation of the list starts with <dd>, and the list item starts with <dt>. <dd> tags can only be used in <dl> tags

<dl>
<dd> List Interpretation </dd>
<dt> list Items list items </dt>
<dt> list Items list items </dt>
</dl>

Four. HTML hyperlinks

<a href= "url" target= "target-windows" > link title </a>
The target property specifies the destination window for opening the link, the default original window, and the optional blank opens in a new window ...

1. Internal links

You can set the URL value of the href attribute to a relative path.

2. External links

Link to a file outside the site, and set the href attribute to the absolute path. <a href= "https://www.baidu.com/" target= "_blank" > click to go to Baidu </a>

3, the bookmark link in two a label formed link, the target location A's href is empty a name= "" attribute, trigger position of a in href= "Name value", this is OK

Trigger point: <a href= "#a1" > Jump to First block </a>
<br/>
Target location: <a href= "" name= "A1" > First block </a>

Five. HTML image tags

#src属性为必须属性, the other properties are optional. Title: The descriptive text that appears when you move the mouse over.

The tag does not insert an image in a Web page, but instead displays an image from a Web page. You can also make the CSS set a background image for an element.

Example:

Six. HTML form forms

<form name= "FormName" method= "post/get" action= "url" > content includes all input entries below </form>

Where: Name form names, method form Send method, action form handler submit address.

<input type= "control type" name= "Control name"/>

Where: The Type property sets the control, which can be the text text box, the Password Password box, the button Standard button, the checkbox check box, the Radio radio button, the file basket, the Reset reset button, the image Image field, Submit button and so on.

<form method= "POST" action= "index.php" >

Text box: <input type= "text" name= "username" placeholder= "Please enter ..." minlennght= "6" maxlength= "readonly/><br/>" The last can be disabled
Password box: <input type= "password" name= "pass" placeholder= "Please enter the password! "/><br/>
Normal button: <input type= "button" value= "normal button" ><br/>
check box: Basketball <input type= "checkbox" > Soccer <input type= "checkbox" > Table tennis <input type= "checkbox" ><br/>
Radio Box: Male <input type= "Radio" name= "RA" > Female <input type= "Radio" name= "RA" > <br/> <!-- Name is the same as you can have a single radio effect--
File frame: <input type= "file" name= "file"/><br/>
Reset button: <input type= "reset" value= "reset" ><br/>
Image frame: <input type= "image" src= "./image/forget.gif" width= "" height= "" ><br/>
Submit button: <input type= "Submit" value= "Registration" >

Drop-down list box:<select>

<option> Beijing </option> #列表项标记
<option> Shanghai </option>
<option> Guangzhou </option>
<option> Shenzhen </option>
</select><br/>

Text field:<br/> <textarea rows= "5" cols= "Ten" ></textarea>

</form>

PS: input box prompt information In addition to the password can be used value, password box to use placeholder

HTML Basics:

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.