HTML basic learning notes and html basic learning notes

Last Update:2017-07-23 Source: Internet

Author: User

Tags html comment

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

HTML basic learning notes and html basic learning notes

HTML refers to Hyper Text Markup Language, a Markup Language used to describe web pages.

I. Basic HTML Structure

1. HTML tagAngle bracketsThe surrounding keywords (such as Appear in pairsFor example, <B> (Start tag) And </B> (End tag).

2. HTML Heading is defined by the

3. HTML paragraphs are defined using tags <p>.

4. HTML links are defined by tags <a>. For example:

<A href = "http://www.runoob.com"> This is a link </a>

Tip:Specify the link address in the href attribute.

5. HTML images are defined by tags . For example:

Note:The image name and size are provided in the form of attributes.

6. Tip: Use a lower-case tag.

Ii. Basic Content

1. Empty HTML elements: HTML elements without content are called empty elements. Empty elements are disabled in the start tag. <Br/> is an empty element that does not close the tag (<br/> label definition line feed ).

2. HTML attributes:

HTML elements can be setAttribute
Attribute can be added to an element.Additional information
Attribute is generally described inStart tag
Attributes always appear in the form of name/value pairs,For example: name = "value".
Attribute values should always be enclosed in quotation marks. Double quotation marks are the most commonly used. single quotation marks are generally used for attribute values containing double quotation marks. For example, name = 'John "ShotGun" Nelson '.
Use lower-case attributes

① Common tag attributes:

<H1>: align alignment
<Body>: bgcolor background color
<A>: target specifies where to open the Link (new window, original window, etc)

② General attributes:

Class: Specifies the class Name of the element.
Id: Unique ID of the specified Element
Style: Specifies the element style.
Title: Additional information of the specified Element

3. HTML title:

① The title (Heading) is defined using the

② HTML horizontal line:

③ Example of HTML comment format: <! -- This is a comment -->; the browser ignores and does not display the comments.

4. HTML Section

① The section is defined by the <p> label. For example:

<P> This is a paragraph </p>

Note:The browser automatically adds blank lines before and after the paragraph. (</P> is a block-level element)

② HTML line

Use the <br/> label to wrap a line without generating a new paragraph.

<P> This <br> section <br> demonstrates the effect of a branch </p>

③ HTML output-usage reminder: When the page is displayed, the browser removes unnecessary spaces and blank lines from the source code. All consecutive spaces or empty rows are counted as one space. Note that all consecutive blank lines (line breaks) in HTML code are displayed as a space.

5. the HTML

<Title> tags define the titles of different documents.

<Title> required in HTML/XHTML documents.

<Title> element:

Defines the title of the browser toolbar
The title displayed in favorites when a webpage is added to favorites
Title displayed on the search engine result page

③ The HTML <base> element <base> label describes the basic link address/Link Target, which serves as the default link of all link tags in the HTML document. ④ The HTML <link> element <link> tag defines the relationship between the document and external resources. <Link> labels are usually used to link to a style sheet:

<Style> the tag defines the reference address of the HTML Document style File.

You can also add styles to the <style> element to render HTML documents:

<Head> <style type = "text/css"> body {/style> ⑥ HTML <meta> Elements

The meta tag describes some basic metadata.
<Meta> the TAG provides metadata. Metadata is not displayed on the page, but is parsed by the browser.
META elements are usually used to specify the web page description, keywords, the last modification time of the file, author, and other metadata.
Metadata can be used in browsers (how to display content or reload pages), search engines (keywords), or other Web Services.
<Meta> generally placed in the
Define keywords for search engines:
<Meta name = "keywords" content = "HTML, CSS, XML, XHTML, JavaScript">
Define the description for the webpage:
<Meta name = "description" content = "free Web & Programming Tutorial">
Author of the web page definition:
<Meta name = "author" content = "Runoob">
Refresh the current page every 30 seconds:
<Meta http-equiv = "refresh" content = "30">

The HTML <script> element <script> tag is used to load script files, such as JavaScript.

6. HTML Text Formatting

Tag	Description
<B>	Define bold text
<Em>	Definition focuses on Text
<I>	Define italics
<Small>	Define a trumpet
<Strong>	Definition weighting tone
<Sub>	Define subscript
<Sup>	Define the upper mark
<Ins>	Define insert words
<Del>	Define Delete word

7. HTML Style

① Tag:

<Style>: style Definition
<Link>: resource reference

② Attributes:

Rel = "stylesheet": external style sheet
Type = "text/css": introduces the document type.
Margin-left: margin

③ Three style sheet insertion methods:

External style sheet: <link rel = "stylesheet" type = "text/css" href = "mystyle.css">
Internal style sheet:

Body {"> </style>

Inline style sheet: <p style = "color: red">

8. HTML link

① Linked data:

Text Link
Image Link

② Attributes:

Href attribute: Link to another document
Name attribute: creates a link in the document.

③ Img tag attributes:

Alt: Replace text attributes
Width: width
Hight: high
Example:

1 <! DOCTYPE html> 2 
9. HTML table

  
 
    
     
     Tag 
     Description 
     
     
     <Table> 
     Definition table 
     
     
     <Th> 
     Define the table Header 
     
     
     <Tr> 
     Define table rows 
     
     
     <Td> 
     Define table units 
     
     
     <Caption> 
     Define table title 
     
     
     <Colgroup> 
     Define a table column group 
     
     
     <Col> 
     Define attributes for table columns 
     
     
     <Thead> 
     Define the table Header 
     
     
     <Tbody> 
     Define the table subject 
     
     
     <Tfoot> 
     Define the table footer 
     
   

  


 
10. HTML list

  
 
    
     
     Tag 
     Description 
     
     
     <Ol> 
     Define an ordered list 
     
     
     <Ul> 
     Define unordered list 
     
     
     <Li> 
     Define list items 
     
     
     <Dl> 
     Definition list 
     
     
     <Dt> 
     Custom list items 
     
     
     <Dd> 
     Define the description of a custom list item 
     
   

  
 
① Unordered list

Attributes: disc, circle, and square
② Ordered list
Tags: <ol>, <li>
Attributes: A, a, I, I, start
③ Nested list
Tags: <ul>, <ol>, and <li>
④ Custom list
Tags: <dl>, <dt>, and <dd>
11. HTML Blocks
① HTML block elements
When a block element is displayed, it usually starts with a new line.
For example: 
② HTML inline Elements
Inline elements generally do not start with a new line
For example: <B>, <a>, 
③ HTML <div> Elements
<Div> an element is also called a block element. It is mainly a container that combines HTML elements.
④ HTML <span>
<Span> an inline element can be used as a text container.
⑤ Example:
1 <! DOCTYPE html> 2 
12. HTML layout
① Div Layout
1 <! DOCTYPE html> 2 
Display Effect:

② Table layout
1 <! DOCTYPE html> 2 
13. HTML forms
① Form is used to obtain different types of user input.
② Common form labels:
 
     
  
       
        
        Tag 
        Description 
        
        
        <Form> 
        Define a form for user input 
        
        
        <Input> 
        Define input fields 
        
        
        <Textarea> 
        Define text fields (a multi-line input control) 
        
        
        <Label> 
        Defines the label of the <input> element, which is generally the input title. 
        
        
        <Fieldset> 
        Defines a set of related form elements and uses the external box to include them. 
        
        
        <Legend> 
        Defines the title of the <fieldset> element. 
        
        
        <Select> 
        The drop-down list is defined. 
        
        
        <Optgroup> 
        Define a quota Group 
        
        
        <Option> 
        Define options in the drop-down list 
        
        
        <Button> 
        Define a click button 
        
        
        <Datalist>
 
        Specifies a pre-defined list of input control options 
        
        
        <Keygen>
 
        Defines the form key pair Generator Field 
        
        
        <Output>
 
        Define a computing result 
        
      
 
     
 
③ Sample code:
1 <! DOCTYPE html> 2 14. HTML framework
① Frame: frame plays a major role in page design.
② Framework tag (<frameset>) (Replaced ):
Framework and label define how to split a window into a framework
Each frameset defines a series of rows or columns
The rows/colsde value specifies the area occupied by each line or column on the screen.
③ Common labels:
 
      
  
        
         
         Noresize: Fixed Frame Size 
         Cols: Column 
         Rows: Row 
        
 
      
④ Inline framework (more useful)
Iframe
15. HTML background
① Background Tag: Background
② Background color: Bgcolor
③ Color:
Color is defined by a hexadecimal symbol, which consists of red, green, and Blue values (RGB)
Minimum color value: 0 (#00)
Maximum color value: 255 (# FF)
RED: # FF0000
Green: #00FF00
Blue: # 0000FF
16. HTML Entity
In HTML, some characters are reserved and must be replaced with character entities. You cannot use signs (<) or greater than signs (>) in HTML. This is because the browser mistakenly believes that they are tags.
To correctly display reserved characters, we must use character entities in the HTML source code ). Character entities are similar to the following:
&Entity_name; Or &#Entity_number;
To display a smaller sign, we must write it like this:& Lt;Or& #60;Or& #060;

Tag	Description
<Table>	Definition table
<Th>	Define the table Header
<Tr>	Define table rows
<Td>	Define table units
<Caption>	Define table title
<Colgroup>	Define a table column group
<Col>	Define attributes for table columns
<Thead>	Define the table Header
<Tbody>	Define the table subject
<Tfoot>	Define the table footer

Tag	Description
<Ol>	Define an ordered list
<Ul>	Define unordered list
<Li>	Define list items
<Dl>	Definition list
<Dt>	Custom list items
<Dd>	Define the description of a custom list item

Tag	Description
<Form>	Define a form for user input
<Input>	Define input fields
<Textarea>	Define text fields (a multi-line input control)
<Label>	Defines the label of the <input> element, which is generally the input title.
<Fieldset>	Defines a set of related form elements and uses the external box to include them.
<Legend>	Defines the title of the <fieldset> element.
<Select>	The drop-down list is defined.
<Optgroup>	Define a quota Group
<Option>	Define options in the drop-down list
<Button>	Define a click button
<Datalist>	Specifies a pre-defined list of input control options
<Keygen>	Defines the form key pair Generator Field
<Output>	Define a computing result

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