Overview of html and basic structure of html document
-
html overview:
Html is the acronym of hyper text mark up language, which means hypertext markup language. Hypertext refers to hyperlink and tag refers to tag. It is a language used to make web pages. This language is composed of tags one by one. The file made in this language saves a text file with the extension of HTML or htm
-
Basic structure of html document
The basic structure of an html is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
Web page display content 2
</body>
</html>
-
Inline elements:
- Inline elements are displayed on one line and can only contain text or other inline elements; Width (other styles can be set) and height cannot be set,
- Common inline elements:**
**a span input I b textarea strong select label br img time
-
Block elements:
- Block elements generally occupy one row and can accommodate elements in the row and other block elements,
- Common block level elements are:**
****h1-h6 p div dt dd dl dd ul li ol table form hr **
Page setup
-
Background color of label:
<body bgcolor=blue>
-
Text color of label:
<body text=blue>
-
Background picture:
<body background=route>
-
background music:
<html>
<head>
<title>Background music</title>
<bgsound src=route>
</head>
<body>
</body>
</html>
Only IE browser supports
Text settings
When multiple functions are set in a label at the same time, the middle is separated by a space!!!
-
Title word:
- Format:
<h#>text</h#> #Indicates 1-6
It's getting smaller and smaller from h1 to h6
-
Specify font color:
- Unlike the previous text attribute, the text attribute turns all text red**
****Format:**
<font color=blue>text</font>
- For example:**
**Set the first line title to red:
<font color=red><h1>welcome</h1></font>
- Unlike the previous text attribute, the text attribute turns all text red**
-
Specify font size
- Format:
<font size=x>text</font> x Represents font size, represents 1-7
- Note: size8 has the same font size as size7
-
Specify font
- Format:
<font face=font name>text</font>
- For example:
<font color=red face=Regular script><h1>welcome</h1></font>
-
Font settings (tilt, bold, etc.)
- Bold:
<b>text</b> #Bold bold
- Tilt:
<i>text</i> #Inline tilt
- Underline:
<u>text</u> #Underline underline
- For example: bold and underline
<b><u>welcome</u></b>
- Bold:
-
Scroll word label:
-
Format:
<marquee>text</marquee> Text scrolling
-
Format:
<marquee><img src=route></marquee> Picture scrolling
-
<p> Indicates segment change
-
Rolling consultation mode
- Format 1:
<marquee behavior=scroll></marquee> scroll Is the default Cyclic scrolling
- Format 2:
<marquee behavior=slide></marquee> Scroll only once
- Format 3:
<marquee behavior=alternate></marquee> Scroll back and forth
- Format 1:
-
Scroll word direction
- Format 1:
<marquee direction=left>Text or picture</marquee> Default direction
- Format 2:
<marquee direction=right>Text or picture</marquee>
- Format 3:
<marquee direction=up>Text or picture</marquee>
- Format 4:
<marquee direction=down>Text or picture</marquee>
- Format 1:
-
Width and height of the active range of scroll words
- Format:
<marquee width=# height=#>Text or picture < / marquee >
- Format:
-
Scroll word speed setting:
Format:
<marquee scrollamount=# scrolldelay=#>Text < / marquee >
- Scrollmount motion speed, the default is 6
- Scolldelay delay time, used to set the interval between two scrolling operations, in milliseconds
Page layout
-
Space:
- Format: & nbsp;
- Note: * * there is at most one space before and after * * * *. If there are multiple spaces, the browser recognizes only one by default**
-
Line feed:
- Format: < br > * * Note: there is no end tag**
-
Section change:
- Format: < p > text < / P > * * #paragraph**
- After changing the paragraph, there will be a blank line between the previous line and the previous line
- Paragraph labels have one of the most common attributes: alignment**
**Format:
<p align=left> <p align=center> <p align=right>
-
Block indent
- Format:
<blockquote>text</blockquote> The default is 5 spaces
-
Note: Note:
Block indent labels can be applied:
<blockquote><blockquote>text</blockquote></blockquote>
text
-
Positioning tag (similar to p tag, both have align attribute)
- Format:
<div>text</div>
-
Difference: < p > and < div >
<p>There is a blank line with the previous line <div>There is no blank line between and the previous line
Insert horizontal line, sequence, picture
-
level
- Format: < HR > * * appears separately**
<hr size=1 color=red width=50% align=left> Explanation: 1,size Is height 2,width Displays the length of the line in scale
-
Ordered list
- Format:
<ol> <li>Text1</li> <li>Text2</li> <li>Text3</li> </ol> - Attribute: type**
The default is 1. 2. 3. If you want to change it, you can- ****Add the type attribute to the tag, such as:** <ol type=A>
- Format:
-
Unordered list
- Format:
<ul> <li>Text1</li> <li>Text2</li> <li>Text3</li> </ul> - Symbol:**
disc solid circle (default)
Circle hollow circle
**Square solid square - title
<dl> <dt>title</dt> <dd>Interpretation 1</dd> <dd>Interpretation 2</dd> </dt> </dl>
- Format:
-
Insert picture
-
Format: < img SCR = Path >
-
Picture objects: size properties**
****Format:**<img src=route width=# height=#>
- Note 1:**
**The unit is pixels, expressed in px - Note 2:**
**Changing width or height will scale equally, which will affect another value. If you change the width, the height will also change. Unless both attributes are modified at the same time, they are no longer scaled equally.
- Note 1:**
-
Picture border:
- Format:
<img src=route border=5> #Border is OK, but the color can't be changed
-
Picture objects: aligning**
**The picture has no alignment. Generally, the picture is set as a paragraph first, because the paragraph has alignment<p align=center><img src=route></p>
In this way, there will be a blank line with the previous line. If you don't want to have a blank line with the previous line, you can use the div tag
-
Alignment of picture and text**
**Explanation: when the height of the picture is greater than the text, the text needs to be aligned with the top of the picture, with the middle of the picture and with the bottom of the picture- Format 1:
<img src=route align=top>
- Format 2:
<img src=route align=middle>
- Format 3:
<img src=route align=bottom>
- Format 1:
-
Picture description text properties:
- Format:
<img src=route title/alt=text>
-
Insert hyperlink, multimedia
-
Basic format of hyperlink:
- Format:
<a href=website target=_self/_blank title=Put the mouse here to prompt the text>Expressive text</a> #_ self opens the link in this window #_ blank open link in new window
- Format:
-
Email link:
-
Format:
<a href=mailto:E-mail>text</a>
-
For example:
<a href=mailto:2522908520@qq.com>contact us</a>
Click 'contact us' and an interface will appear
-
-
Bookmark link settings
- Define Bookmarks:
<a name=Book signature>content</a> ###Then define bookmarks on the title of the content
- Link bookmark: * ***
<a href=#Book signature>ss</a> ###Reference bookmarks on titles without content
- Define Bookmarks:
-
Insert multimedia object
- explain:
<embed>Label is HTML5 New label in
- Function:
<embed>Tags define embedded content, such as plug-ins.
- Format:
<embed src=route autostart=true/false loop=# hidden=true/false width=# height=#>
- Give an example to illustrate the difference from background music:**
If you add music in mp3 format, the player will appear
**Explain attributes:- autostart whether to play automatically when opening a web page. The default is true
- loop sets the number of cycles
- hidden whether to hide the player
- Note that the < embedded > tag must have src attribute
- explain: