Know the page
The web page is composed of text, picture, audio, video, hyperlink, flash, etc.
How to display web pages
After the programmer writes the code, it is rendered by the browser to form a web page
Browser
The browser is the platform on which web pages are displayed and run
Five commonly used browsers and kernels
- IE browser: Trident kernel
- Firefox browser: Gecko kernel
- safari browser: webkit core
- Google Chrome: Bink kernel (a branch of webkit)
- Oppen browser: Bink kernel
WEB standard
The WEB standard is not a standard. It is a series of standards formulated by the W3C organization and other standardization organizations, allowing different browsers to display uniform content on the page
The composition of the WEB standard
- Structure (html): classification and organization of web page elements
- Performance (css): the style of web page appearance
- Behavior (js): The interaction and behavior of the web page model.
The benefits of WEB standards
- Make the development of WEB broader
- Content can be accessed by a wider range of devices
- Reduce website traffic costs
- Make the website easier to maintain
HTML
HTML: Hypertext Markup Language is not a programming language but a markup language
HTML skeleton format
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
HTML element tag classification
html tag: single tag double tag
Double label
<body></body> <html></html>等等
Single label
<img /> <br />等等
html tag relationship
Nested relationship
<head>
<title></title>
</head>
Constellation
<head></head>
<body></body>
In the nesting relationship, the child element should be indented one tab key position from the parent element
Code development tools
DWcs6
VScode
Webstrom
sublime
HBuilder
Ways to generate html5 skeleton
! 或者 html:5
Skeleton label meaning
- !DOCTYPE html: document type, refers to the structure of html5.
- html: root tag
- lang: Specify the language of html
- head: head tag
- charset: character set
- title: document title tag
- body: body tag
Character set encoding
- gb2312: Simple Chinese, including 6723 characters
- BIG5: Traditional Chinese, refers to Hong Kong, Macau, Taiwan, etc.
- GBK: Including simplified Chinese and traditional characters, it is an upgraded version of GB2312
- UTF-8: Including the character set required by all parts of the world.
Semantics of tags
The semantics of the label: refers to the meaning of the label. Put the right label in the right place to make the structure clearer
Typesetting label
Title tag
h1~h6: Refers to the headline fonts of level 1 to 6 will gradually become smaller, with the characteristics of line breaks
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
Paragraph tag
p: refers to the paragraph tag
<p>文本</p>
Horizontal line label
hr: horizontal line label
<hr />
Newline label
br: horizontal line label
csdn 一个专属于程序员的APP <br />
div and span
<div>胡歌</div>
<div>霍建华</div>
<span>韩红</span>
<span>古天乐</span>
div: separate partitions. Only one div tag can be placed in a row
span: span span. Many span tags can be placed in one line
Text formatting tags
<b>文字以加粗的方式显示</b> <strong>文字以加粗的方式显示</strong> <br />
<i>文字以倾斜的方式显示</i> <em>文字以倾斜的方式显示</em> <br />
<s>文字以删除线的方式显示</s> <del>文字以删除线的方式显示</del> <br />
<u>文字以下划线的方式显示</u> <ins>文字以下划线的方式显示</ins> <br />
Label attributes
Let HTML tags have more information is called tag attributes
<标签名 属性1="属性值1" 属性2="属性值2">文本</结束标签>
Image attributes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./img/color.png" alt="color" title="color" width="800px">
</body>
</html>
to sum up
- The label has multiple attributes. It must be written in the opening tag and after the tag name.
- There is no particular order between the attributes, the label name and the attribute, and the attribute and the attribute must be separated by a space
- Use the form of key-to-value, such as the format of key=value.
- alt is the text that cannot be displayed in the picture, and title is the text that is displayed when the mouse moves
Link label
<a herf="目标的url地址" target="页面的打开方式">文本</a>
<a href="http://www.baidu.com" target="_blank">外部超链接</a>
<a href="./8.图像属性.html">内部超链接</a>
Precautions
- _self: is to open the link on the original web page
- _blank is to open a link on a new page
Comment tag
<!-- 注释内容-->
The comment itself is for programmers to read, the purpose is to explain the meaning of this code.
The program does not execute the shortcut key: ctrl+/
path
目标文件夹---->根目录
relative path
Up-level path
<img src="../图像URL" />
Same level path
<img src="./图像URL" />
Next level path
<img src="./img/图像URL" />
Absolute path
Generally refers to the complete network path
Anchor point positioning
Create anchor links to enable users to quickly jump to the target location
Proceed as follows
- Create the corresponding id name
- Use the corresponding id name to mark the location of the jump to the target
<a href="#Christmas">圣诞树的由来</a><br />
<h2 id="Christmas"> 圣诞树的由来</h2>
base tag
The base tag is to set the opening method of the overall link and write it between the head and
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<base target="_blank">
</head>
<body>
<a href="https://www.baidu.com/">百度</a>
<a href="https://www.qq.com/">腾讯</a>
<a href="https://www.sina.com.cn/">新浪</a>
<a href="https://www.163.com/">网易</a>
</body>
</html>
pre tag
pre: pre-text formatting tags, which are displayed on the web page according to the original settings of the text
<pre>
锄禾日当午
汗滴禾下土
谁知盘中餐
粒粒皆辛苦
</pre>
Special characters
Special characters can be used where html tags are not convenient to use. They are symbols.
The development path of HTML5
The development road of html5: https://jingyan.baidu.com/article/59a015e352c175f7948865a5.html