Introduction to HTML

Source: Internet
Author: User
Tags closing tag tag name sublime editor

I. Introduction to HTML 1.1 what is HTML

L HTML (Hypertext mark-up Language) is a Hypertext Markup language or Hyper-text label language.

L What's hypertext: Hypertext allows you to include images, links, and even music, programs, and more in your pages.

The Web page file itself is a text file that marks individual parts of the page to be displayed by means of a marker symbol.

L What is the mark: when the browser encounters the corresponding tag symbol, it realizes the corresponding function!

L Web page File extension:. html or. htm

The Hypertext Markup language includes the "Head" section (English: Head), and the "Subject" section (English: Body), where the "Head" section provides information about the Web page, and the "main" part provides the specific content of the page.

The evolution of 1.2 html

L 1993 HTML1

L 1995 HTML2

L 1995 HTML3

L 1997 HTML4

L 1999 HTML4.01

L-XHTML1.0

L-HTML5

L-HTML5 finalized

Second, enhanced text editor

L any plain text editor can edit HTML, such as Notepad, EditPlus, notepad++.

L more well-known encoders are:

    • DreamWeaver (Adobe's product, this thing is out of date)
    • Sublime (High-efficiency program writing editor)
    • Webstorm (more advanced project level editor)

No matter what the editor, you have to know, do the Web page and editor independent, any plain text editor can encode code. We are learning the code, not the so-called editor. However, there is no denying that a good editor can actually improve the productivity and speed of code writing, but in essence, Notepad can write Web pages.

L SUBLIME The Chinese meaning is "gorgeous", is the 2011 popular Code Editor, you can edit Java, C, PHP and many other languages.

L HTML, CSS, JS support in sublime very good. The interface is also very beautiful, simple installation, small, plug-ins.

using Sublime steps to import a project:

Select the Items tab--- à Add folder to project------- à Select our project folder

Sublime shortcut keys for editors

Shortcut keys

Function

CTRL + Mouse Scroll wheel

Adjust the size of text

Ctrl+shift+d

Copy when moving forward

Ctrl+shift+k

Delete When moving forward

ctrl+shift+ Up ARROW

Moves the current row up

Ctrl+shift+ DOWN ARROW

Moves the current line down

Attention:

We only need to write the tag name when we use the Sublime Editor's HTML tag and then press the TAB key on the keyboard to complete the automatic completion!

Learning Goals:

1. Understand HTML language and its development history

2, be able to use Sublime editor!

Third, HTML file structure

<body></body> the body part of the HTML file

L

L

The text between <body></body> is visible in the body of the page, and the tags in the body contain all the content in the page (such as text, hyperlinks, images, tables, lists, and so on). )

Iv. label Classification and writing Rules 4.1 label classification
    • Labels are mainly divided into bilateral labels and unilateral labels
    • HTML tags are usually paired (bilateral labels), such as <div> and </div>
    • The first label in the Bilateral tab is the start tag, and the second tag is the end tag;
    • There are also individually presented labels (single-sided labels), such as: <br/>,
    • A bilateral label with content in the middle of two labels. such as
    • A single-sided label whose contents are assigned in the label attribute. <input type= "text" value= "button"/>.

What is a property?

What attributes does a person have? Have a name, have sex, have height, have weight!

< person name = "Zhang San" gender = "male" height = "183" weight = "$" >

Bilateral label:

There's a beginning and an end

such as:

Single-sided Labeling:

There's a beginning, but it's not over. It's generally used to play a special role.

such as:<br>

4.2 Writing Rules
    • HTML tags are keywords surrounded by a pair of angle brackets, such as
    • Label names are case-insensitive but are recommended for lowercase <font> <FONT> <Font>
    • If there is a space between the attribute attribute and the label name in the tag, if there is more than one attribute in a tag, there is a space between the property and the attribute to be written in the start tag that cannot be written in the closing tag.
    • If the value of the attribute attribute in the label is a single quotation mark and double quotation marks that need to be quoted, you can
    • Each label needs to be closed, and one-sided labels need to be closed with backslashes!

The nesting between labels and tags can only be nested using sequential nesting

The L tag can have several attributes, or it can have no attributes. If the

V. Properties of the BODY tag

Description: Tags, tags, elements, nodes four nouns they mean the same thing!

Property name

Function

Background

Use to set a background picture for a Web page

BgColor

Use to set the background color for a Web page

Six, text decoration label

Label Signature

Function

<b></b>

Give text a bold effect

<i></i>

To set the text italic effect

<u></u>

Set Text underline

<s></s>

Set Strikethrough for text

<sup></sup>

Superscript

<sub></sub>

Subscript

<font></font>

Property:

Size: Set the text to the value: 1~7 1 small 7 big

Color: Set colors for text such as: Red

Face: Set font for text such as: Song Body

Set the size color font for text

Instance of text decoration:

Seven, the layout label

Label Signature

Function

<p></p>

Property:

Align: The horizontal alignment used to control the content inside the paragraph

Value: Left aligns default values

Center Center alignment

Right aligns

Paragraph labels

1 large 6 small h1 max h6 min

Align: The horizontal alignment used to control the content inside the caption

Value: Left aligns default values

Center Center alignment

Right aligns

Title label

<br/>

Line labels This tag is the first single-sided label we learned.

Color: The colors used to set the horizontal line

Width: Used to set the value of a horizontal line: the percentage of pixels per pixel of fixed and percentage fixed values it must have a reference. It will refer to the parent element of the current HR tag

Size: Used to set the thickness of a horizontal line

NoShade: A shadow that is used to remove a horizontal line This property has no value, its property value is equal to its own noshade

Align: horizontal alignment for controlling horizontal lines

Value: Left alignment

Center Center Alignment Default value

Right aligns

Horizontal line Label

<pre></pre>

Pre-format processing labels the spaces in this pair of tags are kept

Viii. notes

Why write comments?

L For example: it is convenient for other programmers in the project group to understand your code, and it is convenient for you to understand and modify your own code later on.

L can add your own comments to the HTML document. Comments are not displayed on the page, it can be used to remind the programmer to recall related program information.

Format of comments:

<!-the contents of the comment--

IX, div and span tags

Label Signature

Function

<div></div>

<div> is a block-level label and has no practical meaning. It is mainly given a different performance by CSS styles.

<span></span>

<span> is an inline label, and has no practical meaning, and is mainly given a different performance by CSS styles.

The difference between block-level labels and inline labels

1) block-level elements

Occupy a line, cannot be tied to any other element

Can accept wide, high

If you do not set the width, the width defaults to 100% of its parent element.

2) in-line elements

Parallel to other inline elements

Cannot set width, height. The default width is the width of the content.

Block-level elements: p, h1~h6 layout labels are generally belong to block-level elements

Inline elements: B, I, U, font, SUP, sub text-decoration tags are generally part of the inline element

Ten, character entities

Why do I have character entities?

In HTML, some characters are reserved.

The less than sign (<) and greater than sign (>) cannot be used in HTML because the browser mistakenly considers them to be labels.

If you want to display reserved characters correctly, we must use the character entity in the HTML source code

Space

&nbsp;

>

&gt;

<

&lt;

&

&amp;

&yen;

Copyright

&copy;

Registered

&reg;

X

&times;

÷

&divide;

Xi. Picture Label 11.1 The type of picture you can use

Types of images that can be used in HTML pages: JPG (JPEG), PNG, GIF, BMP

Types of pictures that cannot be used in HTML pages: PSD, AI

11.2 syntax

IMG: is a simplified image of "image" in English

SRC: is the "source" shorthand resource in English

11.3 Alt Attribute

Alt it is a shorthand alternative to English "alternate" if the picture does not exist, display the ALT text message in this property!

Attention:

IMG is a one-sided label that also needs to be closed!

11.4 Other properties

Property name

Function

Title

Text message displayed when the mouse is placed over the picture

Width

To set the width of a picture

Height

Set a height for a picture

Attention:

It is best not to set the width and height of the picture at the same time! Because it will deform the picture!

12, the file address 12.1 What is called the file address?

Used to describe the location of a file on disk

Location: relative path and absolute path

12.2 Absolute Path

A file in the real place above the disk!

Take the Windows operating system as an example: the absolute path is the location with the drive letter!

C:\Users\windows\Desktop\01-HTML5\ Code \baby.jpg Absolute Path

12.3 Relative paths

The location of a file relative to the current location

Peer relationship the target file is under the same directory as the current file

./File name Peer relationship

Direct write file name peer relationship

The parent relationship target file is below the top level directory of the current file

.. /parent Relationship Upper level

.. /.. /Up to Level two

13. Super Link 13.1 What is a hyperlink

A website, it is composed of a lot of HTML pages, HTML pages can be through hyperlinks to achieve mutual jump function! Thus forming a "net"!

13.2 Basic Usage

<a href= "Destination address of link" > Content </a>

Code:

A It is in English "anchor" Simplified Chinese meaning "anchor" is like a page above the other page to throw an "anchor"!

HREF: They are in English "hypertext reference" Chinese meaning "hyperlink address".

Additional Properties for 13.3a tags

Title tag when you put the mouse on the hyperlink above the text message displayed above

Target: How the linked destination file is opened

_blank open a linked target file in a new window

13.4 Empty Links

13.5 Anchor Point Links

You can jump to a different location on a Web page via the anchor link!

How do I implement anchor links?

First step: Define an anchor point

<a name= "anchor name" ></a>

Or

<a id= "anchor name" ></a>

Step two: Find the anchor point

The last face of the URL in the browser # anchor name

Or

<a href= "#锚点名" > Content </a>

Attention:

Don't forget to have a # number when you're looking for an anchor.

Introduction to HTML

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.