Home > Developer > Web Develop
tags in HTML are stored in a text file and are organized according to the following fixed document structure:
<! DOCTYPE html>
Head related information
<body>
Page Body Related content
</body>
Label Explanation:
#1, <! DOCTYPE Html> is a document declaration that must be written in the first line of the HTML document, before the
#2,
#3,
The content between the #4, <body> and </body> tags is the main content of the page and will eventually be displayed in the browser.
Label relationships:
Juxtaposition and nesting
Juxtaposition: Head and body
Nested: Inside HTML with body
Two HTML tags detailed syntax and attention points
Syntax for Tags:
< Tag Name property 1 = "Value 1" Property 2 = "Value 2" ......> content section </tag name >
< Tag Name property 1 = "Value 1" Property 2 = "Value 2" ....../>
Attention:
#1. HTML tags are not case-sensitive, '
#2. Tags can be nested between them. For example:<div><p> paragraph </p></div>, but not cross <div><p></div></p>
#3, not all tags support nesting with each other.
Three tags in HTML category:
Single from the angle of whether you can embed a sub-label, the label is divided into two categories
1: Container class label (can nest other tags)
H Series
Ul>li
Ol>li
D1>dt+dd
Div
2 text Labels (text labels can only be nested text, picture hyperlink tags.)
P
Span
Strong
Em
Ins
Del
Common tags in the four head
1 meta-related
#1, specifying a character set
<meta charset= "GBK" >
#2, page description
<meta name= "Description" content= "specific description ... ">
#3, Keywords: to help search engine sec optimization, and how to optimize also can not be offset by the auction rankings
<meta name= "Keywords" content= "netease, email, games, news" >
#4, jump after 3 seconds
<meta http-equiv= "Refresh" content= "3,http://www.baidu.com" >
#5, three-second refresh
<meta http-equiv= "Refresh" content= "3" >
2: Non-META tags
#1, Title
<title> Baidu a bit, you know </title>
Icons for #2, websites
<link rel= "icon" href= "Https://www.baidu.com/favicon.ico" >
#3, defining internal styles
<style></style>
#4, introducing external style files
<link rel= "stylesheet" href= "Mystyle.css" >
#5, define JavaScript code, or introduce JavaScript files
<script src= "Hello.js" ></script>
Five Body tags
H tag
h1~ h6 tag content is 1~6 level header
P tag labeled as content of a brother paragraph
IMG tag tag one brother picture
Usage:
2.1 src Specifies the image address can be a network address, or a local address, the local address can be used absolute or relative path, but usually with a relative path, relative path is the HTML file is currently located on the path of the
2.2 Pictures can be in PNG, JPG, and GIF formats
2.3 alt= "What to display when picture loading fails"
2.4 title = "What is displayed when the mouse hovers over the picture"
2.5 If you do not specify the width and height of the picture as the default width of the picture, if you specify the width and height of the picture may distort the picture
If you want to specify the width and height and don't want the picture to deform, we can just specify a value of width and height
As long as a value is specified, the system calculates another value based on the value and is equal to the stretch, and the picture will not deform
A label
Tag a brother content for hyperlinks
#1, hyperlink tags are the essence of hypertext files, you can control the page and page jumps, the syntax is as follows
<a href= "Jump to the destination page address" target= "whether to open the" title= "mouse hover display in a new page > What needs to be displayed to the user/can also be a picture </a>
#2, note:
2.1 A tag can not only mark text, but also mark pictures
<a href= "https://www.baidu.com" > Baidu a bit, you know </a>
2.2 A tag must have an HREF attribute, the value of the HREF must be HTTP//or https://start
2.3 A tag can also jump to your own page
<a href= "template/aaa.html" > Hammer your chest </a>
2.4 target= "_blank" is opened in a new page, the rest of the values do not need to be remembered,
If a large number of a tags in the page need to be set target= "_blank", then we can add a new base tag within the head tag for unified setup
<base target= "_blank" >
If the a tag has its own target set, then it will be in its own right, otherwise the base setting is referenced.
2.5 title= "Mouse hover display content
List label
Semantic tagging a bunch of data is a whole list
Three types of HTML
1 unordered list Ul>li One of the most important uses in a list label
2 ordered list rarely used Ol>li
3 custom lists are often used
<dl>
<dt> Custom Title 1<dt>
<dd> Description 1<dd>
<dd> Description 2<dd>
<dd> Description 3<dd>
</d1>
<table> tags
Semantics: Marking a piece of data as a table
#1, function
A table label is a form of data that, when the amount of data is very large, uses a form to show what is considered to be the clearest
#2, format
<table>
<tr>
<td></td>
</tr>
</table>
TR represents a row of data for a table
A cell in a row of a TD table
#3, note:
The table label has a border property that determines the width of the border. By default, this property has a value of 0, so the border is not visible
Form label
Semantic tagging form
#1, what is a form?
Forms are designed to receive user input or capture user information.
Formatting #2, forms
<form>
< table cell element >
</form>
Front-end HTML and CSS finishing (not finished)
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
