1. HTML introduction and document structure
1. Introduction to html
-
HyperText Markup Language
-
Hypertext Markup Language
-
Not a programming language
-
Plain Text
-
A language that describes the semantics of the document
html就是负责描述页面的语义；css负责描述页面的样式；js负责描述页面的动态效果的。
2. HTML document structure
SEO, search engine optimization, search engine optimization.
<!DOCTYPE html>
<!--文档类型定义，简称DTD-->
<html lang="en">
<!--语言：英语-->
<head>
<!--head头部，主要用来完成网页设置-->
<meta charset="UTF-8">
<!--
meta：元，完成对应设置
meta字符集属性：
国际编码，多字节
gbk编码
meta的其他属性：
<meta name="keywords" content="">
//找到网站的搜索关键字
<meta name="description" content="">
//网站的描述内容
-->
<title>Title</title>
<!--标题，显示在浏览器的标签栏中-->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!--title前的logo-->
</head>
<body>
<!--网页内容-->
</body>
</html>
Ways to quickly generate document structure:
- html:5 + tab
- ! + tab
<style>
/*引入外部样式文件*/
<link rel="stylesheet" href="style.css">
</style>
3. HTML features
- Simplicity
- Scalability
- Platform independence
- Versatility
4. Web page classification
- Static
- dynamic
2. Mainstream browsers and kernels
1. Mainstream browsers
- Internet Explorer(IE)
- FireFox (Firefox)
- Chrome (Google)
- Opera (Openg)
- Sarafi (Apple)
2. Browser kernel
The browser kernel is composed of two parts: rendering engine and JS engine.
- Trident kernel-----IE
- Gecko kernel------FireFox
- WebKit core------Safari and Chrome
- Presto kernel-----Opera
- Blink kernel------Chrome and Opera
Most domestic browsers use dual-core drivers:
- trident and webkit
- trident and blink
Mobile:
- iphone/ipad: webkit kernel
- The webkit kernel version below android4.4, the blink kernel version above 4.4
Three, html basic tags
Semantic tags: understand the purpose of each tag.
- Container-level labels, where anything can be placed;
- Text-level tags can only contain text, pictures, and form elements.
1. Block label and inline label
-
Block-level label: Occupy a line alone, you can set the width and height, the width of the entire line by default, block-level elements can contain block-level and in-line elements.
-
Inline label: It will not occupy a line alone, can not set the width and height, and can only contain inline elements.
-
Mutual conversion
Block level ----->inline: display:inline;inline
---->block level: display:block;
For example:
<span>黑鸭</span>
<span>绝味</span>
<style type="text/css">
span{
display:block;
}
</style>
或者：
<span style="display:block;">黑鸭</span>
<span>绝味</span>
2. div and span
-
div: layout, block label
-
span: layout, inline label
3. hx title
Big----->small h1----->h6
<h1>我</h1>
<h2>我</h2>
<h3>我</h3>
<h4>我</h4>
<h5>我</h5>
<h6>我</h6>
4. Paragraph label p (text-level label)
p: block level
<p></p>
5. Newline br
br: single/empty label, inline
<br/>
6. Horizontal line hr
hr: single/empty label, block level
<hr/>
7. Picture img
<img src="" alt="">
src: image path, relative path and absolute path
alt: the text displayed when the image fails to load and error
title: the text to be replaced when the mouse hovers over the image
8. Hyperlink a (text-level label)
1, a tag attributes
<a href=""></a>
- href: the address to redirect
- title: indicates the prompt text of the mouse
- target: indicates the target form of the jump
- name: anchor
Target attribute value:
_blank (new window)
_self (default, own window)
_parent (return to the parent level)
_top (return to the top level)
2. A tag pseudo-class
- a:link not visited
- a:visited visited
- a:hover mouse hover
- a:active when clicking the mouse
3. Anchor point
Jump to the specified position.
1.html：
<a href="#wdzp">点击我就查看我的作品</a>
2.html：
<a name="wdzp">我的作品</a>
或者：
<a id="wdzp">我的作品</a>
9. Unordered list ul
the
<ul>
<li></li>
<li></li>
<li></li>
</ul>
10. Ordered list ol
ol
<ol>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
11. Short text quote q
The browser will automatically add double quotes to the q tag.
12. Address information address
Add address information to the page
13. Table title summary caption tag
Add a title and summary to the table.
The content of the summary is not displayed in the browser, and its role is to increase the readability of the table.
Four, HTML text formatting tags
1. Bold b, strong (inline)
- b: bold
- strong: bold, emphasize (emphasis is mainly used for SEO, to extract keywords)
2. Tilt i, em (inline)
- i: tilt
- em: tilt, emphasize
3. Preformatted text pre (block level)
Keep line breaks and spaces and width. The font size of the text will be one size smaller.
<pre>
预保留 换行
和空格
及宽度。
</pre>
4. Reduce text to small (inline)
The minimum font size supported by the browser is 12px.
5. Text enlargement big (inline)
big was eliminated in html5, but not deleted.
Try not to use obsolete tags in development.
6. Text subscript sub
<p>X1+X2=Y</p>
X<sub>1</sub>+X<sub>2</sub>=Y
7. Text superscript sup
<p>X2+Y2=Z</p>
X<sup>2</sup>+Y<sup>2</sup>=Z
Five, html entity escape character
- <Less than sign<
- > Greater than sign>
- Space
- "Quotation mark"
- © Copyright symbol ©
- × multiplication sign ×
- ÷ division sign ÷
Six, W3C
The w3c specification is composed of three parts: structure (html), presentation (css), and shape (JavaScript).
- World Wide Web Consortium
- World Wide Web
- Responsible for unifying web-related standards
1. The principle of tag nesting
- Block-level elements can contain block-level elements and inline elements
- Inline elements can only contain inline elements
- Block-level elements cannot be placed in p
- h1-h6, p, dt cannot contain block-level elements
- Block-level elements are juxtaposed with block-level elements, and in-line elements are juxtaposed with in-line elements
2. File naming convention
- During project development, Chinese characters or spaces cannot be used as file or directory names
- File and directory names generally start with letters or underscores, and letters, numbers, and underscores can appear later
- Homepage must be index.html
- Product page product.html
- Order page order.html
3. Specification summary
