html is a hypertext markup language, which is used to write the structure of web pages. A simple web page can be realized by combining CSS (modification of web page structure) and JS (adding some functions to web pages).
structure
<html> <head> <title>Page title</title> </head> <body> <!--Generally in vscode Press out!, Press again Enter，stay body Just code it first --> Body parts <br/> </body> </html>
Label classification
-
Single label: there is only one label: br,
-
Double Tags: there are start and end tags, such as HTML, head and body
Common labels
Tags contain attributes. For example, Meta tags contain charset, HTTP equiv, content and other attributes
Common tags in head
Meta
-
charset: sets the encoding method of the web page character set
-
http-equiv
X-UA-Compatible: used to tell the browser what version to render the page
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
-
Cache control specifies the caching mechanism that requests and responses follow
-
No cache: first send a request to confirm with the server whether the resource has been changed. If it has not been changed, the cache will be used
-
No store: caching is not allowed. Go to the server every time to download the complete response
<meta http-equiv="cache-control" content="no-cache">
-
-
Refresh: automatically refresh and point to a page
<meta http-equiv="refresh" content="2;URL=http://www.www.baidu.com/"> <!-- 2 Represents the time interval for automatically refreshing web pages, URL Is the address pointing to a page -->
-
content-type
<meta http-equiv="content-type" content="text/html; charset=utf-8">
-
-
name
-
Author: used to label the author of a web page
-
description: used to tell the search engine the main content of the website
-
Keywords: used to tell search engines the keywords of web pages
-
viewport: this property is often used to design mobile web pages
-
renderer: kernel control
-
<meta name="parameter" content="Specific description"> <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'> <!-- Including the size of the web page on the mobile terminal, and whether the user can change the content of the web page size --> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 1. webkit: Speed kernel 2. ie-comp:IE Compatible kernel 3. ie-stand IE Standard kernel -->
Common labels in body
-
bgcolor = 'color'
<body bgcolor='#d3d6d4'> </body>
Label of the document body
-
h Title labels include h1 h2 h3 h4 h5 h6
<body bgcolor='#d3d6d4'> </body>
p paragraph label
<p> I come from a remote village in Shaanxi Province</p>
hr: horizontal line br: newline mark: Highlight
Font: font em: italic del: strikethrough
attribute
-
Color: the color of the text
-
Size: indicates the size
Note: the value is an integer from 1 to 7. There is no unit. It is used to set the text size
img: picture
img tag: you can insert a picture into a web page. Where the src attribute sets the path of the picture
1. Path classification
1 relative path (relative to the directory where the current file is located)
Current directory:/ You can usually omit the parent directory:/ Cannot be omitted
2 absolute path (looking for files from disk and directory) is hardly used in development
Properties: src: set picture path width: set picture width height: set picture height
alt: if the picture path is wrong, the alt content will be displayed. If the path is correct, the picture will be displayed normally and the alt content will not be displayed
title: a prompt message when the mouse is placed on the picture
<p> I come from a remote village in Shaanxi Province</p>
sup: superscript sub: subscript
4<sup>3</sup> H<sub>2</sub>O
a: Hyperlinks
<a href="http://www.baidu. Com "> Baidu < / a > <! -- href is the link path -- > <img src="./images/3.jpeg" alt="beauty" width="200" height="200" title="I am a beautiful woman" /> </a>
marquee: Scroll
<marquee direction='right'> <img src="./images/5.jpg" alt="" width="100" height="100"> </marquee> <!-- Generally used for web advertising display -->