Learn WEB HTML5 together Lecture 1

foreword

Starting today, we will start the second stage of learning. Today's learning content has the following parts:

1. HTML5 basic The structure and data of all web pages are built with HTML5
2. Ajax asynchronous data interaction ajax helps us connect to the server asynchronously, send requests, and receive responses
3. Ajax project user management - login, query, registration, modification, deletion, repeated verification of user name
4. CSS3 beautifies the page to make the page look better
5. Bootstrap framework
   ①encapsulates a lot of css, let us develop quickly
   ②encapsulates responsive layout

The knowledge points at this stage are very detailed, and the vocabulary is relatively large, but I believe you must be able to do it, come on!

Today's goal:

1. History of WEB development - understand
2. HTML basic syntax - master
3. Commonly used tags 1: text - master well
4. Commonly used tags 2: images and links - master well
5. Commonly used tags 3: tables - master well

In fact, today's content is very easy to grasp, let's start today's study together~

1 History of WEB Development (Understanding)

1.1 Development process

We surf the Internet every day, do you know what this "net" is in our mouth?
In fact, it is called the Internet, which is a global computer network. It has many names, you may have heard of it, such as:
Internet, Internet The Internet protects the network and so on.
The Internet actually provides us with many services, such as:
WWW World Wide Web, users can search and browse all the content they are interested in on the Internet through the browser
Email Email service, users on the Internet can send and receive E-mail
FTP file transfer service, users on the Internet can transfer files from one computer to another
TeInet remote login service, you can understand it as QQ remote control, sunflower remote control and other
BBS bulletin board services, such as schools often use campus network, etc.
So there are not only www on the Internet, but also many, many services that we are using or have already used.

History of the Internet

196X: The U.S. military created the ARPNET network, the predecessor of the Internet
197X: The FTP protocol (file transfer protocol) was born, which can realize "one-to-one information transmission"
198X: The SMTP protocol (Simple Mail Transfer Protocol) was born, which can realize " One-to-many information transmission"
1991: The HTTP protocol (Hypertext Transfer Protocol) was born, marking the official birth of the Web, which can realize "one-to-one information transmission across the entire network"

Hypertext

The traditional text is accessed linearly one by one from top to bottom
. Hypertext is the abbreviation of "hypertext". Jumping is a non-linear way to access

A simple understanding of the above content is enough, let's learn more about WEB

1.2 Web Introduction

The Web is also called the World Wide Web or the World Wide Web, that is, WWW (World Wide Web),
which can combine various types of information and services to provide users with vivid interfaces, and these interfaces can also be called documents,
so the World Wide Web is A collection of countless documents, which are stored somewhere on the Internet.
In a word, you can understand the Web as a website.
We will learn how to write and transmit these documents/webpages later.

1.3 How the Web Works

Web is a multimedia information service system based on the Internet, which is composed of three parts: Web server browser communication protocol.
Communication protocol refers to the rules and conventions that must be followed to complete communication or services.
The HTTP protocol is used here: Hypertext Transfer Protocol (Hypertext Transfer Protocol)
between them is like this:

1. Web pages written in HTML
2. The browser connects to the WEB server and fetches the webpage
3. The browser parses the acquired HTML web document and displays it on the user's screen
   

1.4 Relationship between Web and Internet

The Web is one of the most popular applications running on the Internet. The Internet provides a network environment for the Web
. The emergence of the Web has greatly promoted the popularization and promotion of the Internet.

1.5 The operation of the WEB page requires two kinds of software:

1. A tool for programmers to write web pages – a web page editor

Small software (xMB): notepad, notepad++, editplus
Medium software (xxMB): SublimeText
Large software (xxxMB): Dreamweaver, Eclipse/MyEclipse, IDEA/WebStorm, VSCode, HBuilderX

2. A tool for users to browse the web – a web browser

Microsoft IE / Edge (Chrome kernel)
Google Chrome (Webkit kernel + V8 kernel)
Netscape Navigator/Mozilla Firefox
AppleSafari (Webkit kernel)

At present, China does not have its own browser kernel, and it is mainly recommended to use Google and Firefox.
We are currently learning and using HBuilderX and Google Chrome

2 Overview of HTML

2.1 Three basic languages ​​for front-end development

1. HTML – used to define the content of the page
2. CSS – used to control the style of the page
3. JS – used to control the behavior/interaction of the page
   Of course, you can also call them the "three front-end swordsmen"

2.2 Basic concepts

1. What is HTML?

HTML: Hyper Text Markup Language, hypertext markup language, which is used to define the content of the page, such as text, tables, pictures, audio and video, hyperlinks... Files written in HTML, suffixed with .html or .htm

Exercise 1: Getting to Know HTML

1. Create a new text document in the folder, name it "p1.txt" to represent the first page we wrote Page 1
   Note 1: Chinese characters are not allowed in folder and file names!
   Note 2: Make sure the file extension is displayed out, and the suffix is ​​.txt
   
2. Modify the suffix name of p1.txt and change it to p1.html, so that the text document will be turned into a web page file
   
3. Write the code in p1.html:

写一些普通的文字

4. Double-click the file just written, and use the browser to view the content we just wrote

2. What is a tag?

Tag: In fact, it is often called a tag or an element, which means a page rendering instruction. It has two types:
double tag tag/closed type tag: there are start tags and end tags, which must appear in pairs, for example: <b>内容</b>
single tag tags: only the beginning and no End, cannot contain content, for example:<br>

2.3 Common tags in HTML

1. Multiple text effects: b/i/u/s/sub/sup tags

1. Continue to write content in the p1.html just now, for example, if you want to bold the text, you need to use tags

默认格式的文字
<b> 加粗的文字 </b>
后续文字

Effect: Only the content wrapped by the b tag will have a bold effect. The default content of the browser is displayed on the same line. Note

: the file needs to be saved after writing, and the modified effect can only be seen after the opened web page is refreshed with F5~
2. Let's write another effect Bold italic underline strikethrough:

默认格式的文字
<b>bold加粗的文字</b>
<i>italic斜体文字</i>
<u>underline下划线文字</u>
<s>strike删除线文字</s>
后续文字

3. The effect of superscript and subscript:

默认格式的文字
X<sup>2</sup>上标字
Z<sub>1</sub>下标字
后续文字

2.br tag

Realization of newline effect

1. Writing ancient poems in p1.html, it turns out that all four poems are displayed on the same line

静夜思     李白
床前明月光
疑似地上霜
举头望明月
低头思故乡

Some small features of the browser:

1. The browser renders multiple consecutive line breaks in the source code as an "English space"
2. The browser renders multiple consecutive line breaks in the source code as an "English space"
3. The browser renders the source code in Consecutive multiple tab characters Tab are rendered as an "English space"
Conclusion: The browser renders consecutive multiple blank keys in the source code as an "English space", you can try it yourself

Then we want the effect of line break or multiple spaces, how to achieve it?

换行符可以使用单标记标签<br>标签来实现
空格符可以使用&nbsp;转义字符来实现

2. Modify the code just now:

<br>
静夜思&nbsp;&nbsp;&nbsp;李白<br>
床前明月光<br>
疑似地上霜<br>
举头望明月<br>
低头思故乡<br>

3. Escape symbols

For example, if we want to write 3 names wrapped in angle brackets on the page, the code is as follows:

<李白>
<tom>
<张三>

It turns out that the two Chinese names are displayed correctly, but the English data is not displayed. Why?
Because the browser thinks it is a label, but it does not recognize this label, so no error is reported, but it is ignored...

Then if we just If you want to display square brackets on a web page, you need to use two escape symbols:&lt;表示< &gt;表示>

<李白>
&lt;tom&gt;
<张三>

Modify the above code, you can see <tom>that it can be displayed normally

<br>注册商标register: &reg;
<br>版权声明copyright: &copy;
<br>商标trademark: &trade;
<br>关闭符号90°角: &times;
<br>带圈的关闭符号: &otimes;

©2017 <达内科技有限公司> 版权所有

3 Use of HBuilder tools

1. Download of HBuilder

Download link: https://www.dcloud.io/hbuilderx.html

1. Open the page and select the "DOWNLOAD" download button
   
2. Choose according to your own system, but you must choose the App development version, which has relatively complete functions, do not choose the standard version
   
3. Selected and click to download

2. Decompression of HBuilder

1. After downloading, we got a compressed package file
   
2. The compressed file needs to be decompressed, and you cannot directly double-click the compressed file to use it.

Note:
We need to put this compressed package in a folder without Chinese before decompressing it. Don’t directly put all the downloaded things on the desktop. It will be very messy later. It will take a few minutes to decompress. Be patient and wait for the complete
decompression use later

3. HBuilder does not need to be installed. After decompression, double-click the icon of the executable file to use it~

3. Use of HBuilder

1. The first time we open it, we can choose the theme and shortcut key scheme (this can be changed later)
   
2. After entering, there is a readme, you can choose the green area to close it
   
3. We can directly drag and drop external folders into HBuilder for use.
   For example, here we can drag in the entire DAY01 folder we created earlier.
   You can see that the structure in the folder is exactly the same as that in HBuilder.
   
   
4. Create a folder: select DAY01, right mouse button, create a new directory,
   enter the name of the new folder, and press Enter to create
   
   
5. Create a new file: Select the specified directory, right-click the mouse, and create a new custom file
   (we will create other types of files later, starting with the simplest one)
   
   
   
6. There are three ways to run the file:
   You can click the run button, or the shortcut key Ctrl+R, and you can view the running effect after selecting the browser. You
   
   can also choose "Run" -> "Run to the browser", and then select the browser You can view the running effect
   
7. Modify the comment color (it is not recommended to modify, the default is gray).
   In Tools->Settings->Source View, find "Custom Editor Theme", copy the left one to the right, and cancel the comment Note: the format
   of the code on the right
   

4. Other usage details of HBuilder

1. We can select any file, right click, there are many operation options, such as renaming, etc.
2. We can also select the file and drag it directly to the specified location
3. We can drag or click this small button to hide the left column
   
4. Ctrl + mouse wheel can adjust the font size in the edit page
5. In "Tools" -> "Settings" you can configure "Automatically save when losing focus".
   This configuration means that once you leave HBuilder and click on other windows, the unsaved edited content in HBuilder will be automatically saved
   
6. When you close it for the first time, there will be the following prompt, select "Yes", create a desktop shortcut, and it will be convenient to open it next time
7. Modify the comment color (you can use the gray default comment color, it is not recommended to modify this, just understand it)
   
   "Tools" -> "Settings" -> "Source View" -> Find the custom editor theme on the left in the figure Code part, paste to the right, uncomment
   
   

5. Commonly used shortcut keys for HBuilder:

1. Ctrl+R: Run the current page file in the browser
2. Ctrl+↑/↓: Quickly move the current line of code
3. Ctrl+D: Quickly delete the current line of code
4. Ctrl+C/V: Quickly copy and paste the current line of code
5. Ctrl+/: add/uncomment the current line

4 Common tags in HTML

Before learning tags, we need to understand HTML comments:

1. Comments are text that will not be parsed and run by the browser<!-- 这里是注释 -->
2. Note: Comments cannot nest comments
3. There cannot be comments inside <>

1. pre label

Before, we <br>realized the adjustment of the format of ancient poems through labels and spaces
, but it is still a bit troublesome to write like that. What should we do if it is a large paragraph of text?
pre tag: preserve (preserve) the original format in the source code

Exercise 1: Writing Ancient Poetry 2

<!-- 注释:渲染时保留源代码中的格式 -->
<pre>
 静夜思
  李白
窗前明月光
疑似地上霜
举头望明月
低头思故乡
</pre>

You can see that this effect is the same as what we edited, and it is very simple to use

Exercise 2: Display the following content on the web page in the following format:

<!-- 答案:注意要加pre标签哦 -->
<pre>
let i = 10;
i++;
console.log(i);
</pre>

But note: the pre tag cannot achieve the effect of bolding the font, and it still needs to be used in conjunction with other previous tags

2. h series tags

h tag: guide text, title word

Exercise 1: Using h tags

<!-- h标签:heading 引导文字 标题字 -->
<h1>静夜思</h1>
<h2>李白</h2>
窗前明月光
疑似地上霜
举头望明月
低头思故乡

Effect: the content wrapped by the h tag becomes bigger and bolder, andmonopoly party,number

Exercise 2: Use the h tag to wrap Meng Haoran's Chunxiao, write and complete the following questions:

1. Test the font style of h3~h6 to see how many characters are the same size as ordinary text?
2. Try to write a tag that does not exist (such as h8), what is the effect, and will it report an error?

<!-- 答案1:h后数字越大,字体越小,最大到h6,h4的字体大小与普通文本一样,只是加粗了 -->
<!-- 答案2:写了不存在的h8标签并不会报错,没有特殊的显示效果,浏览器会直接忽略 -->
<h1>春晓</h1>
<h2>孟浩然</h2>
<h3>春眠不觉晓</h3>
<h4>处处闻啼鸟</h4>
<h5>夜来风雨声</h5>
<h6>花落知多少</h6> 
我是普通文字
<h8> 哈哈哈 </h8>

Browser effect:

Interview question: What are the 97 HTML tags? What are they?

1. Block-level tags (block): Must occupy a single line, no need for newlines <br>
   For example: p, h1~h6, pre...
2. Inline tags (inline): can be on the same line with other content, line breaks must be used <br>
   for example: b, i...

3.p tag

p tag: paragraph paragraph

Exercise: Use the p tag, check to see how it works

<!-- p标签也是块级元素 独占一行 p元素默认有上下行间距-->
<p>窗前明月光</p>
<p>疑似地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>

What are attributes?

Attribute: also known as feature, which describes the characteristics of a certain aspect of the label
Writing method: <tag name attribute name 1 = "attribute value 1" attribute name 2 = "attribute value 2"> paragraph content</tag name>

1. Attribute declarations must be placed within the opening tag
2. An element may have more than one attribute, and multiple attributes are separated by spaces
3. The order of multiple attributes is not distinguished before
4. Attribute names and attribute values ​​are connected with an equal sign
5. Attribute values ​​are enclosed in quotes

<!-- 注意属性值必须使用单/双引号包裹 -->
<!-- <h2 gender="男" age="18" height="180">李白</h2> -->
<!-- align对齐方式 right/left/center 靠右/靠左/居中 -->
<!-- 按住Ctrl，光标点多个位置可以一起编辑，Esc退出 -->
<h1 align="center">静夜思 李白</h1>
<p align="center">床前明月光</p>
<p align="center">疑似地上霜</p>
<p align="center">举头望明月</p>
<p align="center">低头思故乡</p>
<!-- align属性只是凑巧这两个标签能用,比如pre b标签等就没有这个属性 -->
<!--所有标签都有的4个通用属性,后面会学:id class style title-->

4. hr label

hr tag: used to create a horizontal dividing line on the page, it is an empty tag, the text after hr will appear in a new paragraph Common
attributes: color color width occupies page width size line thickness align position information

<!-- hr标签 -->
<!-- 写Lorem单词Tab补全段落 -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum dolorum iure incidunt quos quasi similique fugiat tenetur earum modi veritatis rerum labore cupiditate explicabo quo corrupti praesentium dolor maxime unde!
<hr color="red" width="50%" size="16px" align="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error maxime numquam veniam iusto rerum perspiciatis molestiae odit odio sed velit neque sapiente dignissimos officiis autem delectus facilis quasi beatae magni.

5. div tag

div tag: division area/block, is the simplest block-level element, only has the effect of exclusive line, no other effect

Exercise: Complete Jingyuesi to achieve the effect in the picture below

Note: These 4 poems do not have line spacing like when using p tags before.
Tips: Try span tags and div tags to see which one works and why

<h1>静夜思</h1>
<h2>李白</h2>
<div>窗前明月光</div>
<div>疑似地上霜</div>
<div>举头望明月</div>
<div>低头思故乡</div>
<!-- span是行内元素,不会换行哦 -->

6. Image

URL (Uniform Resource Locator): Uniform Resource Locator, used to identify any resource in the network, is actually the path corresponding to the file. We often talk about absolute paths and relative paths. Let’s write a case first to feel:
img tag: full name image image

Exercise: The directory is as shown in the figure below, create a p06.html file, and present 3 pictures under the image folder on the page

<!-- 在页面中呈现图片 -->
<!-- src:全称source,来源/源头 -->
<!-- 小知识:计算机中
一个 . 表示"当前目录" 
两个 .. 表示"上一级目录"
./ 表示当前目录的下一级
比如.表示DAY01 ./image表示DAY01目录下的image目录
-->
<img src="./image/1.png" />
<img src="./image/2.png" />
<img src="image/3.png" /><!-- 计算机中./可以省略 -->
<!-- 效果:3张图片在同一行,是行内元素 -->
<!-- alt:alternative替代物,图片无法找到时显示的替代文字 -->

If the path or name of the picture is wrong, the picture cannot be displayed normally!

Compare these three files and introduce these three pictures. What is the difference in the path? Write it yourself:

Conclusion: The picture path we write is related to the relative position of the file and the picture. If the position changes, the picture address needs to be changed

Exercise: Let's copy the link of a picture on a webpage and let the picture be displayed on 3 pages respectively

<!-- 在3个html中的图片链接是一样的,不会因为文件的不同而更改 -->
<!-- 绝对地址:其他服务器 -->
<img src="https://cdn.tmooc.cn/bsfile//courseImg///f2b39759be9842ae86cfd62294a8e665.png" />
<!-- 为什么呢?因为这个是绝对地址,指定的是图片所在服务器的完整路径 -->
<!-- 绝对地址:本地服务器 -->
<img src="http://127.0.0.1:8848/DAY01/image/1.png" />
<!-- 绝对地址:协议名可以省略不写,注意//不能省略哦 -->
<img src="//127.0.0.1:8848/DAY01/image/1.png" />

7. Hyperlinks

a tag: full name anchor anchor, hyperlink

Exercise: Create p8.html and access the following resources:

<!-- 超链接 -->
<a href="p1.html">今日的第1个页面</a>
<a href="p3.html">今日的第3个页面</a>

<!-- 使用HBuilder打开时的地址 -->
<!-- http://127.0.0.1:8848/DAY01/p3.html -->
<!-- 直接在文件夹中双击打开网页 -->
<!-- file:///D:/WEB_CODE/DAY01_PM/DAY01/p3.html -->

<!-- <a href="www.baidu.com">跳转到百度</a> -->
<a href="https://www.baidu.com/">跳转到百度</a>
<a href="https://www.tmooc.cn/">跳转到tmooc</a>
<!-- 协议名和冒号可以省略不写，但是双斜杠不可以省略 -->
<a href="//www.tmooc.cn/">跳转到tmooc2</a>

Defines a position on the page. It is called an anchor point.
Use the a tag to jump to the anchor point, and the page will be displayed directly at this position

1. Define the anchor point: use the id name of the element directly as the anchor point name
2. Jump anchor:<a href="#锚点名称"></a>

practise:

<h1>西游记全集</h1>
<!-- 我们还可以通过超链接跳转到本页的其他位置 -->
<!-- #id值：表示跳转到对应id所在的位置 -->
<a href="#c1">快速跳转到第1章</a>
<a href="#c2">快速跳转到第2章</a>
<a href="#c3">快速跳转到第3章</a>

<!-- 输入Lorem Tab补全一段文字 -->
<h3 id="c1">第一章 石猴出世</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur debitis ut nihil dignissimos veniam maxime hic sunt porro officiis excepturi nostrum quasi minima sequi explicabo perferendis cupiditate necessitatibus similique blanditiis.</p>

<h3 id="c2">第二章 东海学艺</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur debitis ut nihil dignissimos veniam maxime hic sunt porro officiis excepturi nostrum quasi minima sequi explicabo perferendis cupiditate necessitatibus similique blanditiis.</p>

<h3 id="c3">第三章 龙宫借宝</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur debitis ut nihil dignissimos veniam maxime hic sunt porro officiis excepturi nostrum quasi minima sequi explicabo perferendis cupiditate necessitatibus similique blanditiis.</p>

5 Page Structure Tab

1 Initial structure label

Create p10.html:

run it after writing, we go to the browser -> right click -> check:
these are the page structure tags, let's learn:

<html></html> : 用于标记页面的开始和结束(必需的,不能省略)
<head><head> : 页面的头部(必需的,不能省略)
<body><body> : 页面的主体(必需的,不能省略)

Then why didn't we write these structural tags before?
In fact, just like the h8 tag in the previous section, without this tag, if you write a wrong html, you will not report an error, but will ignore it.
So strictly speaking, the page structure tag It cannot be omitted, it must be written, and it will be added by default if it is not written, as shown in the picture above

2 Our first set of page structure tags

So we modify 10.html and complete the code

<!-- html标签：用于标记页面的开始和结束，必须的，不能省略的 -->
<!-- head标签：页面的头部，必须的，不能省略的 -->
<!-- body标签：页面的主体内容，必须的，不能省略的 -->
<html>
	<head></head>
	<body>学子商城哈哈哈123</body>
</html>

After running the check with HBuilder, I found that there are more scripts in the body. This is because HBuilder has added a real-time refresh function to the page.
As long as we modify the html content and save it, the webpage will update itself to the latest content without refreshing the browser.
But pay attention To access through HBuilder, double-clicking the p10.html file directly in the folder has no effect

3 standard writing

The form of writing head and body tags in html tags like this is a nested structure.
This structure has a standardized way of writing: html tags contain head tags and body tags

1. We call the outer label the parent label, and the inner label the child label.
2. The sub-level label should be indented relative to the parent-level label, the specific indentation number of characters depends on the company's situation

We can also customize the length of tabs in HBuilder: Tools->Settings->Common Configuration->As shown in the figure

3. If the content of a pair of tags is only text, the end tag and the start tag are on the same line, and no line break is required
4. If there are sub-tags in a pair of tags, the end tag needs to wrap

<!-- 我们可以通过Ctrl+K 调整代码格式 -->
<!-- 嵌套结构,子级要缩进,Tab制表符的长度我们可以自行设置 -->
<html> <!-- 父标签 -->
  <head></head> <!-- 子标签1 -->
	<body> <!-- 子标签2 -->
		<p>学子商城3</p>
		<p>
			abcd
			<a>跳转</a>
		</p>
	</body>
</html>

5. Do not write content such as p tags outside the html tag, even if it is written outside, the browser will correct it
   

6 Detailed explanation of html tags

1 Document type declaration

Only one line of code can be placed outside the html tag: document type declaration
We need to tell the client browser which version of the HTML language the current page uses, and declare the type of the document

HTML version history

For example, the grammatical requirements of XHTML are very strict. It is <br/>required to write /
but HTML5 <br>can write it, and there is no need to write / again. This is the difference brought about by different versions.

Common HTML version declarations:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>  目前h5使用的就是这个文档类型声明,但注意这里没有数字5

We can add the document statement of h5, do you find any difference?

<!-- html标签的外面可以放且只能放一行代码:文档类型声明 -->
<!-- 我们需要告诉客户端浏览器,当前页面使用的是哪个版本的HTML语言 -->
<!-- document:文档 type:类型 -->
<!-- 注意它既不是标签也不是注释,作用:声明文档的类型,一般大写 -->
<!DOCTYPE html>

<html>
	<head></head>
	<body>学子商城</body>
</html>

Effect: Before the document statement is added, the html covers the entire page.

After adding it, the area with only one line of text turns blue, indicating that there is still a difference

2 The lang attribute of the html tag

lang attribute: It is used to specify the natural language (language) used by the current page. The
possible values ​​can refer to the table below. What is the function of this attribute?
Function 1: Specify the basic language for the translation function of the browser
. For example, the official website of Oracle is English , how does Google Chrome know that it is currently in English, and prompt us whether we need to translate it?
You know, a Chinese webpage may also have English letters. We do not determine it based on this, but judge the current webpage based on the value of the lang attribute The basic natural language is English. In China, translation may be required


Function 2: Barrier-free reading support, the same word has different pronunciations in different natural languages, and determines the basic pronunciation for blind screen readers

7 head tag detailed explanation

The head tag is used to define global information for the page, following the html tag,
let's introduce some commonly used tags in the head tag:

1 title tag: add page tag name

title: the title of the page
Note: only one title can be written, and it can only be written in the head tag, and the title tag has no attributes

<!DOCTYPE html>
<html lang="zh">
	<head>
		<!-- title:页面的标题 -->
		<title>首页-学子商城</title>
	</head>
	<body>学子商城</body>
</html>

Effect: You can see that the title of this label has been changed

2 link label: add page label icon

Just like when we open the Baidu webpage, we can see a small picture before the tag name:

how is this picture added? First of all, thisThe format of the picture must be ico format
Let's first make an ico image by ourselves:

1. Win+R input mspaint command to open the paint that comes with the computer
   
2. Resize the image to 200*200
   
3. Draw something casually, select "File" -> Save As -> name it as 1.png
   
4. Baidu search "ico production" For example: https://www.ico51.cn/
   Select the 1.png file just now, the size is 32*32, click generate, you can find the generated ico image in the folder
   
5. We create a new img folder under the DAY02 directory, and put the newly generated favicon.ico image into it.
   The image name is a conventional name, which represents the commonly used file name of the icon in the upper left corner of the browser window.
   
6. Writing code: done through the link tag

<!DOCTYPE html>
<html lang="zh">
	<head>
		<title>首页-学子商城</title>
		<!-- head标签中不允许出现img元素!!! -->
		<!-- 标签link:(链接一个外部的资源文件) -->
		<!-- 属性rel:relationship,关系 -->
		<!-- 按住Alt点链接,如果变色可以跳转过去说明链接正确 -->
		<link rel="icon" href="img/favicon.ico">
	</head>
	<body>学子商城</body>
</html>

3 meta tags:

The translation of meta is the meaning of metadata
(data used to describe data, such as the brand, price and color of mobile phones are used to describe mobile phones)

1. Meta common attributes: charset specifies the encoding
   We need to specify the encoding when writing the page, if the encoding used when writing and reading is inconsistent, there will be garbled characters

<!-- html标签：用于标记页面的开始和结束，必须的，不能省略的 -->
<!-- head标签：页面的头部，必须的，不能省略的 -->
<!-- body标签：页面的主体内容，必须的，不能省略的 -->
<!-- html标签外面要加只能加一句文档声明，别的内容都在html中 -->
<!DOCTYPE html> <!-- h5的文档声明 -->
<html>
	<head>
		<!-- 用来显示页面的标题，必须写在head标签中
		而且只能写1个 title标签没有属性 -->
		<title>我是页面的标题</title>
		<link rel="icon" href="image/favicon.ico">
		<meta charset="utf-8"/>
	</head>
	<body>
		学子商城
		<p>
			我是段落
			<a>我是超链接</a>
		</p>
	</body>
</html>

We can check the meta of the Jingdong website, and we will find the content attribute, which is called description and keywords, etc.
This is mainly for the purpose of increasing the weight of the website, such as Baidu competition, SEO, etc. This piece involves online marketing, so I won’t go into details up

8 Detailed explanation of body tag

After the head, the body contains all the main content of the webpage to be displayed to the user except html and head

<!DOCTYPE html>
<html>
	<head></head>
	<body bgcolor="black" text="green">
		第一个网页
	</body>
</html>

9 homework:

1. Summarize all the tags learned today (can be summarized by this dimension):

Answer:

1. Text label
   b: bold
   i: italic
   u: underline
   s: strikethrough
   sup: superscript
   sub: subscript
   pre: keep the original format
   h1~6: titles one to six
   p: paragraph text
   div: most Simple block-level elements, only one-line effect, area/block, very frequently used
   span: the simplest in-line element, without any appearance effect, span (for example, we can select several words in a sentence to set other effects)
2. Image and link
   img: full name image, image
   a: full name anchor, anchor, hyperlink

2. What is a relative address? What is an absolute address? What does the following address represent?

Relative address: When displaying pictures, you must refer to the relationship between the directory where the current page is located and the directory where the picture is located
to write the corresponding relationship:
./img/1.png
./1.png
img/1.png
1.png
…/img/1 .png

Answer:
./img/1.png 1.png in the img directory in the current directory
./1.png 1.png in the current directory
img/1.png omit ./ 1.png in the img directory in the current directory
1.png is omitted./ 1.png in the current directory
…/img/1.png 1.png in the img directory in the upper directory

Absolute address: When displaying a picture, specify the full path of the server where it is located
Write out the corresponding relationship:
https://tmooc.cn/1.png
//tmooc.cn/1.png
http://127.0.0.1/1.png
//127.0.0.1/1.png

Answer:
https://tmooc.cn/1.png 1.png on other servers
//tmooc.cn/1.png https: You can omit
http://127.0.0.1/1.png 1 on the local server. png
//127.0.0.1/1.png https: can be omitted

3. Completion: Han Meimei's resume

Answer:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>基本信息</h3>
			<p>姓名:韩梅梅</p>
			<p>性别:女</p>
			<p>爱好:敲代码</p>
			<p>住址:高老庄</p>
		<hr>
		<h3>学习经历</h3>
			<p>小学就读于...</p>
			<p>中学就读于...</p>
			<p>大学就读于...</p>
		<hr>
		<h3>从业经验</h3>
			<p>2018~2019就职于...</p>
			<p>2018~2019就职于...</p>
			<p>2018~2019就职于...</p>
			<p>2018~2019就职于...</p>
		<hr>
		<h3>过往经历</h3>
			<p>扶老奶奶过马路</p>
			<p>交给警察叔叔1分钱</p>
	</body>
</html>

Front-End Bible-Level Sites MDN:

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element