Introduction:
1. What is HTML?
htyper text markup language is hypertext markup language.
Hypertext: It means that the page can contain pictures, links, and even non-text elements such as music and programs.
Markup Language: The language of markup (tags).
2. What is a label:
- It consists of a pair of words enclosed in angle brackets. For example: <html> *Words in all tags cannot start with a number.
- Tags are not case sensitive. <html> and <HTML>. Lowercase is recommended.
- The tag is divided into two parts: the opening tag <a> and the closing tag </a>. The part between the two tags is called the tag body.
- Some tags are relatively simple. Just use one tag. These tags are called self-closing and tags. For example: <br/><hr/><input/><img/>
- Tags can be nested. But they cannot be nested. <a><b></a></b>
3. Attributes of tags:
- Usually in the form of key-value pairs. For example name="nick"
- Attributes can only appear in opening tags or self-closing and tags.
- Attribute names are all lowercase. *Attribute values must be enclosed in double or single quotes e.g. name="nick"
- If the attribute value is exactly the same as the attribute name. Just write the attribute name directly. For example, readonly
4. The composition of the web page:
The web pages we usually see are generally composed of 3 parts:
- HTML（Hypertext Markup Language）
- CSS（Cascade Style Sheets）
- JavaScript
The above three can be understood as: view, performance, behavior (HTML can be understood as an animated villain, CSS puts on beautiful clothes for it, and JavaScript makes it dance)
html syntax example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
HTML infrastructure
<head> tag
The DOCTYPE in HTML4 can be defined as the following structure, the others remain unchanged
<!DOCTYPE html>
HTML5 supports two ways of specifying the character set used by a page:
- Use charset directly to specify the character set
<meta charset="UTF-8">
- Use Content-Type to specify character set
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
- refresh and jump
<meta http-equiv="refresh" content="3">
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
- keywords
By setting keywords, the crawler will enter the keywords first. When others search by keywords, they can find the website with the keywords set by keywords.
<meta name="keywords" content="赵,谢谢">
- describe
<meta name="description" content="Believe in yourself, everything is possible">
- bookmark title
<title>Little Fish</title>
- link bookmark icon
<link rel="icon" href="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/299c55e31d7f50ae4dc85faa90d6f445_121_121.jpg">
<body> tag
1. Block-level tags and inline tags
块级标签：<p><h1><table><ol><ul><form><div>
内联标签：<a><input><img><sub><sup><textarea><span>
The characteristics of the block (block) element
① always start on a new line;
② height, line height, and outer and inner margins can be controlled;
③ the width defaults to 100% of its container, unless a width is set.
④ It can hold inline elements and other block elements
Features of inline (inline) element
① and other elements are on one line;
② height, line height and margin and padding cannot be changed;
③ width is the width of its text or picture, can not be changed
④ inline element only Can accommodate text or other inline elements.
For inline elements, it should be noted that
setting the width width as follows is invalid.
Setting the height height is invalid and can be set by line-height.
Only the left and right margins are valid for setting the margin, and the upper and lower margins are invalid.
Setting padding is only valid for left and right padding, not up and down. Note that the scope of the element is increased, but it has no effect on the content around the element.
2. Basic label
<h1>~<h6> Heading tags.
<p>: Paragraph tag. Wrapped content is wrapped. There is also a blank line between the top and bottom content.
style="text-indent: 2em" can set the style to indent the first line by two characters.
<blockquote></blockquote> can be used to indent the entire paragraph.
<b> <strong>: Bold tags.
<strike>: Add a centerline to the text.
<u>: Underline below text.
<em> <i>: Text becomes italic.
<sup> and <sub>: Superscript and subscript.
<br>: newline.
<hr>: Horizontal line.
<div>
Block-level tags. Block-level tags are often used for layout, and line-level tags are often used to display content.
The display of div is usually identified by id or class. id is the unique tag identifier, and class is the class identifier of the tag.
The size of the div is determined by the content. By default, the height is determined by the height of the content, and the width is adapted to the screen.
It can hold other elements and is a container.
<span>
3. Special symbols
> >
< <
spaces
" quotation marks
© copyright symbol
special symbol code
" " ;
& & ;
< < ;
> > ;
© © ;
® ® ;
± ± ;
× × ;
§ § ;
¢ ¢ ;
¥ ¥ ;
· · ;
&euro ;
£ £ ;
™ &trade ;
Common tags
1. <p></p> tags and <br/> tags
Each P tag is a separate line, it is a block-level tag, and the role of <br/> is to wrap
<p>The content contained in each P tag is a separate line</p> <p>The content contained in each P tag is a separate line</p> <p>The content contained in each P tag<br>is a separate line</p>
2. <a> hyperlink tag (anchor tag)
There are three important attributes: href, target, name
href hyperlink address: can be any resource on the web, including pictures, web pages, styles, script files, etc. When href="#", it means that the linked page is the current page.
The target location to be displayed when the target document is opened. The attribute values are generally: _blank (open in a new window), _self (default, open in the container where the hyperlink is located), _parent (open in the parent container of the hyperlink), _top (open in the entire container), name (frame name).
name Anchor name. Effect: Jump to a place in the document. Return to the home page.
<!-- a tag jump, open the Url in a tag on a new page --> <a href="http://cnblogs.com/zhaojingyu" target="_blank">Nick Blogs</a> # Jump anchor bookmark name <a href="#top">top</a> <div style="height: 800px"> In order to achieve the jump effect, an 800px block-level tag is added between the jump point and the anchor point</div> <!-- Define the anchor tag / this anchor can also be id="top"--> <a name="top"><h3>Top！</h3></a>
3.H tag is the title tag, the code is as follows
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
<b> <strong>: Bold tags.
<strike>: Add a centerline to the text.
<em>: Text becomes italic.
<sup> and <sub>: Superscript and subscript tables.
<hr>: horizontal line
<div><span>
4. <img> graphic tag
Row-level labels used to display images.
Important attributes are: src, title, alt, width, height, align.
src image address.
title The text the mouse hovers over the image.
altThe text to replace when the image is not found. If the image resource uses external network resources, the text to be replaced will not be displayed. If the resource of this website is used (the relative path is given), the replaced text will be displayed when the image cannot be found, and the width and height structure set by the image will be preserved.
align Vertical alignment of the text around the image. Commonly used attribute values are: top (aligned with the top of the image), middle (aligned with the middle of the image), bottom (default, aligned with the bottom of the image).
widthThe width of the image
height The height of the image (only one of the two properties of width and height will automatically scale proportionally.)
<img src=https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/299c55e31d7f50ae4dc85faa90d6f445_121_121.jpg" alt="Failed to load image. . . " title="The knife girl, kiss"/>
5. List labels
<ul> : unordered list tag
<li>: Each item in the list.
<ol> : ordered list tag
<li>: Each item in the list.
<li>The main attributes are: type and value:
- type specifies the type of item, and the attribute values are: A, a, I, i, 1, disc (filled circle), square (filled square), circle (open circle).
- value indicates the number from which the ordinal value starts.
<dl> Definition list
<dt> List title
<dd> list item
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ol>
<dl>
<dt>Hebei Province</dt>
<dd>Xingtai City</dd>
<dd>Shijiazhuang</dd>
<dd>Cangzhou</dd>
<dt>Henan Province</dt>
<dd>Zhengzhou</dd>
<dd>Kaifeng</dd>
<dd>Zhumadian</dd>
</dl>