HTML "Basics"

Source: Internet
Author: User
Tags unique id

What is HTML?
HTML is a language used to describe a Web page.
HTML refers to Hypertext Markup Language (Hyper Text Markup Language)
HTML is not a programming language, but a markup language (markup language)
Markup language is a set of tag tags (markup tag)
HTML uses tag tags to describe web pages

HTML tags
HTML tag tags are often referred to as HTML tags (html tag).
HTML tags are keywords surrounded by angle brackets, such as HTML tags are usually paired up, such as <b> and </b>
The first label in the pair is the start tag, the second is the end tag
Start and end tags are also known as open tags and closed labels

HTML document = Web page
HTML Document Description Web page
HTML documents contain HTML tags and plain text
HTML documents are also called Web pages


HTML Basics
The HTML title (Heading) is defined by tags such as For example:
<!--the HTML title (Heading) is defined by tags such as 

HTML Paragraph
The HTML paragraph is defined by the <p> tag.
<p> This is a paragraph </p>
<p> This is another paragraph </p>
    <p> This is a paragraph </p>    <p> This is another paragraph </p>

HTML connection
HTML links are defined by the <a> tag.
<a href= "http://www.google.com" > This is a Google connect </a>
    <a href= "http://www.google.com" > This is a Google connect </a>

HTML images
HTML images are defined by tags.
    

HTML properties
HTML tags can have properties. The properties provide more information about the HTML element.
A property is always in the form of a name/value pair, such as: Name= "value".
Attributes are always specified in the start tag of an HTML element.
<a href= "http://www.google.com" ></a>
href is the attribute of the <a> tag
    <a href= "http://www.google.com" ></a>

HTML title
The title (Heading) is defined by tags such as Property Value description
class classname The name of the specified element (classname)
ID ID specifies the unique ID of the element
Style style_definition the inline style of the specified element (inline style)
Title Text additional information for the specified element (can be displayed in tooltips)
    <!--HTML title--    

HTML Paragraph
HTML Horizontal Line
<HR/> Tags Create horizontal lines in the HTML page.
The HR element can be used to delimit content.
<p> This is a paragraph </p>
<p> This is a paragraph </p>
<p> This is a paragraph </p>
Label Description
<body> defines the body of the document.
<!----> define annotations.
    <p> This is a paragraph </p>    

 HTML formatting 
Text formatting labels
Label Descriptions
<b> defining bold text.
<big> define large characters.
<em> define text-focused.
<i> define italic characters.
<small> define small words.
<strong> define the aggravating tone.
<sub> defines the subscript word.
<sup> defines the superscript word.
<ins> defines the insertion word.
<del> define the delete word.
<s> is not in favor of use. Use <del> instead.
<strike> is not in favor of use. Use <del> instead.
<u> is not in favor of use. Use style instead.
The 
 computer output label 
Label describes
<code> defines computer code.
<kbd> defines the keyboard code.
<samp> defines a sample of computer code.
<tt> define the typewriter code.
<var> define variables.
<pre> to define the pre-formatted text.
<listing> is not in favor of use. Use <pre> instead.
<plaintext> is not in favor of use. Use <pre> instead.
<xmp> is not in favor of use. Use <pre> instead.

References and terms define
Label Descriptions
<abbr> define abbreviations.
<acronym> defines an acronym.
<address> defines the address.
<bdo> defines the text direction.
<blockquote> defines a long reference.
<q> defines a short reference language.
<cite> define references, citations.
<dfn> defines a definition project.
    <!--text formatting-    <b> text bold </b>    <br/>    <strong> text bold </strong>    < br/>    <big> text get bigger </big>    <br/>    <em> text ramp </em> <br/>    <    i> text skew </i>    <br/>    <small> Small font </small>    <br/> a subscript    < sub> define subscript text </sub>    <br/>    to superscript <sup> define superscript text    </sup>    <!--pre-formatted text-- >    <pre>    This is a    pre-formatted text.    it retains the      space    and line breaks.    </pre>    <p>pre tags are good for displaying computer code:</p>    <pre> for    i = 1 to         print I    Next i    </pre>

HTML style
Label Description
<style> defines a style definition.
<link> defines a resource reference.
<div> defines a section or area (block level) in a document.
<span> defines a small block or area within a line in a document.
<font> Specifies the font, font size, and font color of the text. Do not approve of use. Please use a style.
<basefont> define a base font. Do not approve of use. Please use a style.
<center> Horizontally Centers the text. Do not approve of use. Please use a style.

HTML table
The table is defined by the <table> tag.
Each table has several rows (defined by the <tr> tag),
Each row is divided into several cells (defined by the <td> tag).
The letter TD refers to the table data, which is the contents of the data cell.
Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and so on.
Table Labels
Table Description
<table> Definition Table
<caption> define a table title.
<th> defines the table header.
<tr> defines the rows for the table.
<td> define table cells.
<thead> defines the header of the table.
<tbody> defines the body of the table.
<tfoot> defines the footer of the table.
<col> defines the properties used for table columns.
<colgroup> defines a group of table columns.
    <!--HTML table    --<table border= "1" >        <tr>            <td>row 1, cell 1</td>            <TD >row 1, cell 2</td>        </tr>        <tr>            <td>row 2, cell 1</td>            <td>row 2, cell 2</td>        </tr>        <tr>            <td> </td>            <td> </td>        </tr>
<table/>

HTML list
HTML lists are divided into ordered and unordered lists
Unordered list
An unordered list is a list of items that are marked with a bold dot (typically a small black circle).
The unordered list starts with the <ul> tag. Each list item starts at <li>.
Ordered list
Similarly, a sequence table is a list of items that are marked with numbers.
The sequence list starts with the <ol> tag. Each list item starts with the <li> label.
Definition List
A custom list is not just a column of items, but a combination of items and their annotations.
The custom list starts with the <dl> tag. Each custom list item starts with <dt>. The definition of each custom list item starts with <dd>.
List label
Label Description
<ol> defines an ordered list.
<ul> define unordered lists.
<li> define list items.
<dl> Define a list of definitions.
<dt> define the project.
a description of the definition of the <dd> definition.
<dir> is obsolete. Use <ul> to replace it.
<menu> is obsolete. Use <ul> to replace it.
HTML <div> and <span>
HTML elements can be combined by <div> and <span>.
    <!--HTML List-    <!--unordered List--    <ul>        <li>coffee</li>        <li>milk </li>    </ul>    <!--serialized List--    <ol>        <li>coffee</li>        <li >milk</li>    </ol>    <!--definition List--    <dl>        <dt>coffee</dt>        <dd>lack Hot drink</dd>        <dt>milk</dt>        <dd>white Cold drink</dd >    </dl>

HTML block elements
Most HTML elements are defined as block-level elements or inline elements.
Editor's note: "Block-level elements" are translated as block levels element, "inline elements" translated into the inline element.
Block-level elements usually start (and end) with a new line when the browser is displayed.
Example:
HTML inline elements
Inline elements typically do not start with new lines when they are displayed.
Example: <b>, <td>, <a>,

HTML <div> Elements
HTML <div> elements are block-level elements that are containers that you can use to combine other HTML elements.
The <div> element has no specific meaning. In addition, because it belongs to a block-level element, the browser displays the folded line before and after it.
If used with CSS, the,<div> element can be used to set style properties on large chunks of content.
Another common use of the <div> element is the document layout. It replaces the old-fashioned way of using tables to define layouts. Using the <table> element for document layout is not the correct use of the table. The function of the <table> element is to display tabular data.

HTML <span> Elements
HTML <span> elements are inline elements that can be used as containers for text.
The <span> element also has no specific meaning.
When used with CSS, the,<span> element can be used to set style properties for some text.


Site layout
Most websites organize content into multiple columns (like magazines or newspapers).
You can use <div> or <table> elements to create multiple columns. CSS is used to position elements, or to create a background for the page and a rich-color look.
Tip: Even though you can use HTML tables to create beautiful layouts, the purpose of the design table is to render tabular data-tables are not layout tools!
<!    DOCTYPE html>

HTML forms and inputs
HTML forms are used to collect different types of user input.

Text fields: Users can write text in a text field.
Password field: Write is not clear text display

Form
A form is a region that contains form elements.
Form elements are elements that allow users to enter information in a table consignments (such as a text field, drop-down list, radio box, check box, and so on).
The form is defined using the form label (<form>).
<form>
...
INPUT element
...
</form>

radio button
A radio box is used when a user chooses one of several given choices.
check box (checkboxes)
The check box is used when the user needs to select one or several options from several given selections.

Action Property (action) and confirmation button for the form
When the user clicks the Confirm button, the contents of the form are transferred to another file. The action properties of the form define the file name of the destination file. This file, which is defined by the action attribute, is usually processed in connection with the input data received.

Form Labels
Label Description
<form> define a form for user input
<input> Defining input fields
<textarea> Define a text field (a multiline input control)
<label> Define a control's label
<fieldset> defining fields
<legend> Define the title of the field
<select> Define a selection list
<optgroup> defining an option group
<option> define options in the drop-down list
<button> Define a button
<isindex> is obsolete. Replaced by <input>.
    <!--HTML forms and inputs--<!--text fields--<form> name: <input type= "Text"/><br/>         Tel: <input type= "text"/> </form> <br/> <!--password domains--<form> users:    <input type= "text" name= "user"/><br/> Password: <input type= "password" name= "pwd"/> </form> <br/> <!--Radio Box--<form> <input type= "Radio" name= "Sex" value= "male"/& Gt;male <input type= "Radio" name= "Sex" value= "female"/>female </form> <br/> <!--check box- <form> <input type= "checkbox" name= "Bike"/> Bikes <br/> <input type= "Chec Kbox "name=" car "/> Car </form> <!--The action properties of the form--<form name=" input "action=" HTML layout. html "method=" G ET "> Username: <input type=" text "name=" user "/> <input type=" Submit "value=" Submit "> & Lt;/form>



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.