Home > Developer > Web Develop
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 htmlL 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 editorL any plain text editor can edit HTML, such as Notepad, EditPlus, notepad++.
L more well-known encoders are:
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
|
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 classificationWhat 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 RulesThe 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 tagDescription: 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 |
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 labelLabel 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 |
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 tagsLabel 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 entitiesWhy 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 |
|
> |
> |
< |
< |
& |
& |
￥ |
¥ |
Copyright |
© |
Registered |
® |
X |
× |
÷ |
÷ |
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 AttributeAlt 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 propertiesProperty 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 PathA 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 pathsThe 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 hyperlinkA 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
|
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 tagsTitle 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 LinksYou 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
