Home > Developer > Web Develop
I. Overview of HTML)
A. What is HTML: Hypertext Markup Language Hypertext Markup Language
Hypertext: Audio, video, picture is called hypertext.
Mark:< English words or letters > called tags. An HTML page is made up of a variety of tags.
B. Role: Writing HTML pages.
C. The HTML language is not a programming language (there is a compilation process), but rather a markup language (there is no compilation process).
HTML pages are parsed directly by the browser.
Second, the history of HTML (slightly)
Third, the Web terminology of HTML
* Web page: A page made up of various tags is called a Web page.
* Home page: A homepage or navigation page of a website.
* Tag:<p> is called the start tag </p> is called the end tag. Also called a label. Each label has a special meaning.
* Element:<p> content </p> called element.
* Properties: The auxiliary information for each label.
* XHTML: HTML that conforms to the XML syntax standard.
* dhtml:dynamic, dynamic. JavaScript + CSS + HTML pages together is a DHTML
* http: Protocol standard. A format used to specify data for client browsers and server-side interactions. SMTP Mail Transfer Protocol, FTP: File Transfer Protocol.
Iv. editing tools for HTML
*.notepad Notepad
*.editplus: Syntax highlighting
Tip: Determine whether a word is wrong based on color. (Not 100%)
*.ultraedit: Depending on the color to determine whether the word is wrong, you can display 2 binary data.
*.DW (Dreamweaver, professional tools) code hints.
V. Specification of HTML
*. HTML is a weak language
*.html Case insensitive
The suffix of the *.html page is HTML or HTM (some systems do not support suffix names longer than 3 characters, such as DOS systems)
Structure of the *.html
1) Declaration section. The main function is to tell the browser that this page is using that standard. <!doctype html> is the HTML5 standard.
2) Head section: not displayed on the page. The function is to tell the browser some extra information about the page.
3) Body part: The code we write must be placed inside this tag.
VI. various tags for html
Clear: Each label has a private property. There are also public properties.
The units in the HTML that represent the length are pixels. Only one unit of HTML is pixels.
Body
bgcolor: Background color
Background: Background image
Text: Color
1. Layout labels
All browsers ignore spaces and blank lines by default
P:p represents a paragraph
Properties: Align: Alignment. Value: Left,right,center
<br> represents a line break.
hr
Color: Colors of lines
Size: The thickness of the line
Width: Length of line
Two ways of writing: 1) Absolute eg:500
2) Relative value: 50%
NoShade: Don't Shadow
Align: Alignment value: Left,right,center
Center: Content Centered
Pre: Predefined format labels. Tell the browser not to ignore spaces and empty lines
DIV: block-level labels must occupy a single row
Span: block-level labels do not wrap font tags
2. Font labels
H1...h6: Defining Font Size
Property: Align: Center
Color: Font Color
There are 3 types of colors: 1) English words: Red
2) 16 binary: #00ffcc
3) RGB (three primary colors): New RGB (124,156,23)
Size: Font sizes
Face: Font type
Special characters: < less than > greater than & & Symbols " Double quotes ' Single quotes
© Copyrights ™ Trademarks spaces
Extended:& #32464;
B: Bold
Strong: Bold
I: Italic
EM: Italic
U: Underline
S: Underline (Strikethrough)
SUP: Superscript
Sub: subscript.
3. Image marking
IMG: Representative is a picture
Properties: src: path to Picture
Two ways of writing: a): Relative path path is relative to the path of the page two tags. and. , the sub-table represents the current directory and the parent path
b): Absolute path
1): Path starting with the drive letter
Eg:c:\documents and settings\administrator\ Desktop \day01_html\1.jpg
2): Network path
Eg:http://www.baidu.com/images
Width: Wide
Height: High
ALT: Replace the image display when the picture does not appear
Title: Suggestive text
Border: Border
Hotspot: Adds a hyperlink to a specific location.
<map name= "map" id= "map" >
<area shape= "Circle" coords= "122,81,38" href= "demo_ font label. html"/>
</map>
4. Manifest markup
List Label: 3 kinds
A. Unordered list ul
Property: Type: Value: Disc (default, solid origin), square (solid square point), Circle (Hollow Circle)
B. Sequential list (OL)
Property: Type: Value: 1 (Arabic numerals, default), A,a,i,i
Start: From several beginnings
C. Definition list (DL)
DT: Title of the list item
DD: List item
5. Hyperlinks
3 Types of Hyperlinks:
1. Connect to another page
2. Anchor: Refers to the hyperlink to a name, the role is to connect to this page or other pages in a specific location. Use the Name property to name the hyperlink
3. Connect to message: <a href = "mailto:[email protected" > enter my mailbox </a>
Properties: Target: Tell the browser how to display the target page
4 values are defined in HTML: _self: Display in the same browser
_blank: Opens a new browser display
_parent: Display in parent window
_top: Display in the top-level window
6. Table Markers
Table: Tables
Properties: Border: Border
Width: Wide
Height: High
Align: how to align Tables
CellPadding: The distance from the cell contents to the Edge
CellSpacing: The distance between cells and cells
bgcolor: Background color
Background: Background image
Bordercolorlight: The top of the table, the left border, and the color of the right and bottom borders of the cell
Bordercolordark: The right, bottom border of the table, and the color of the left border on the cell
Dir: How cell contents are arranged: Ltr from left to right, RTL: right to Left
TR: Line
Properties: dir:
BgColor
TD: Cell
Properties: Align: horizontal alignment of content
valign: Vertical alignment of content Top,middle,bottom
Width: Absolute value or relative (%)
Height: How high the cell is
Merging of cells:
Properties of the Cell:
colspan: Horizontal Merge
RowSpan: Vertically merged
Th: Equivalent to <td> + <b>
Properties with <td>
Caption: Title of table
Property: Align: value: Left,center,right,top,bottom
Thead
Tbody
Tfoot
The difference between writing and not writing:
1. When the form is very large, if you do not write it, you must wait for the contents of the table to be fully downloaded to display. But with the tbody tag, then the side download side display. 2. If you do not write thead,tbody,tfoot then the browser parses the contents of the table from top to bottom. If it is written, then the order is arbitrary, when the browser parses the content in the order of Thead,tbody,tfoot
7. Frame Marking and <iframe>
Body tag is not allowed on frames page
Frameset: A collection of frames
Rows: Vertical partial frame.
COLS: Horizontal partial frame.
There are two types of notation: 1) absolute value "200,*", * represents the remaining
2) Relative value "30%,*"
FRAME: frames. A frame displays a page
Scrolling: Whether scroll bars are required. The default is True
Noresize: Fixed frame size
BorderColor: A color for frame borders
Name: Give the frame a name
Inline frame: A frame embedded in a page. (ie support only)
Iframe:
Properties: Width: Widths
Height: High
Scrolling: Whether scroll bars are required
8. Form tagging and semantics (important and content, not written here)
9. Multimedia tagging
Bgsound: Background music
Embed: Play multimedia files.
Marquee: Mobile
Properties: Direction moving target direction left,right, Up,down, Up,down moving distance is fixed 200px
Behavior: Behavior Mode value: Slide,alternate,scroll
ScrollAmount: Moving Speed
Loop: How many laps are looped. Negative values indicate infinite loops
Scrolldelay: How long does it take to move one rest? Unit is milliseconds
HTML and common tags
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
