1. Document type declaration tag 2. Lang language type 3. Character set 4. HTML common tags HTML5 document declaration HTML5HTML 4.01XHTML 1.0
</DOCTYPE> Its function is to tell the browser which HTML version to use to display the web page.
Code: </DOCTYPE html> means using the HTML5 version to display the web page
Things to note are:
1. The <!DOCTYPE> declaration is located at the forefront of the document, before the <html> tag.
2. <!DOCTYPE> is not an HTML tag
This is generally used
<!DOCTYPE html> <html lang="zh-CN">
Used to define the power of document display
en ---English
zh-CN---Chinese
A character set is a collection of characters so that computers can recognize and store text.
Within the <head> tag, you can specify which character encoding the HTML document should use through the charset attribute of the <meta> tag.
<meta charset="UTF-8"/>
"UTF-8" is also called Unicode
4.1 Title Tag
<h1>I am a first-level title</h1>
Features:
The text with the title will become bolder and the font size will also become larger.
One title on its own line
Examples are as follows:
Adding title tags needs to be placed in <body></body>
The "Title Tag" font becomes bolder and larger
Enter all six level title tags
Each title occupies one line, and the font size decreases in sequence. As long as the title is added, the font size will become bolder.
4.2 Paragraph tags and line break tags
<p>I am a paragraph tag</p>
Display effect (there is a large space between different paragraphs)
If you want to wrap the line, you need to use the line break tag</br> (the effect is not displayed)
Here is a web page that follows the process:
Document
get!
4.3 Text format tags
In web pages, sometimes you need to set bold, italic or underline effects for text. In this case, you need to use the text format tag in HTML (to highlight the importance, which is more important than ordinary text)
Semantics | Label | illustrate |
Bold | <strong></strong> or <b></b> | More recommend the first one |
slash | <em></em> or <i></i> | More recommend the first one |
strikethrough | <del></del> or <s></s> | More recommend the first one |
Underline | <ins></ins> or <u></u> | More recommend the first one |
4.4 <div> and <span> tags
These two tags have no semantics. They are just a box used to hold content.
<div>This is the head</div> (only one div can be placed in a row)
For example: <div>Fairy Tale Book</div>1997
The output should be
<span>Today’s price</span> (the content can be displayed on one line)
For example: <span>Grimm's Fairy Tales</span>
<span>Andersen's Fairy Tales</span>
<span>Aesop's Fables</span>
The output should be:
4.5 Image tags and paths
How to insert pictures into web pages?
In HTML, the <img> tag is used to define images in HTML pages
<img src="Image URL"/>
src is a required attribute of the <img> tag, which is used to specify the path and file name of the image file.
It is best to put the image in the same folder as the web page
You can see it directly on the web page, the image is abbreviated ,
Here are the basic properties of image tags
property | attribute value | illustrate |
| src | Image path | Required attributes |
alt | text | Replace text and images that cannot be displayed |
title | text | Prompt text, the text will be displayed when the mouse is placed on the image |
width | Pixel | Set image width |
height | Pixel | Set image height |
border | Pixel | Set the border thickness of the image |
First try the alt attribute. When the image cannot be displayed, enter <img src="image1.jpg" alt="Fairy Tale"/> (the image1 image here does not exist, so it cannot be displayed)
Then try the title attribute again, enter <img src="image.jpg" title="Fairy Tale"/>, and try this effect yourself.
To test the width, height, and border attributes, enter <img src="image.jpg" title="Fairy Tale" width="300" height="100" border="15"/>
Things to note about image tags:
(1) The image tag must be written after the tag name
(2) The attributes are in no particular order. Tag names and attributes, attributes and attributes must be separated by spaces.
(3) Format key="value"
4.6 Image tags and paths
Paths can be divided into: absolute paths and relative paths
1. Relative path
It is the position of the image relative to the HTML page
Relative path classification | symbol | illustrate |
Same level path | <img src="image.jpg"/> | |
Next level path | / | <img src="images/baidu.gif"/> |
Previous level path | ../ | <img src="../baidu.gif"/> |
2. Absolute path
It is the path in the popular sense: "D:webimglogo.gif"
(I will update it later when I have time)
HTML5 Documentation Statement
<!DOCTYPE html>
The above code block is an HTML5 document declaration, stating that the current web page is written in accordance with HTML5 standards.
When writing a web page, be sure to write the HTML5 document declaration at the top of the web page. If you do not write a document declaration, some browsers will enter a weird mode. After entering the weird mode, the browser will parse the page and the page will not be displayed normally. Therefore, in order to avoid entering this mode, you must write a document statement.
Commonly used document declarations
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Note: <!DOCTYPE> is not an HTML tag. It provides the browser with information (a statement) about what version of the HTML was written.
In order to be compatible with some old pages, the browser has set two parsing modes:
Standards Mode Standards Mode
Quirks Mode weird mode
Weird modes will produce some unpredictable behavior when parsing web pages, and we should avoid the occurrence of weird modes.
File type <HTML></HTML> (placed at the beginning and end of the file)
This concludes this article about HTML document type declaration tags (entry-level tutorial). For more related HTML document declaration content, please search previous articles on downcodes.com or continue to browse the following related articles. I hope you will read more in the future. Support downcodes.com!