Table of contents
2.10.2 Pull-down menu label: select
2.10.3 Multi-line edit box label: textarea
2.11 No semantic tags
1.HTML structure
HTML is used to describe the skeleton of a web page and is a labeling language;
Such as the following hello world program:
<html>
<head></head>
<body>
hello world
</body>
</html>(1) HTML code is organized by tags:
Shapes like <html> </ html> are called tags, or elements;
(2) A label usually appears in pairs:
<html> is the start tag, </html> is the end tag, and the tag content is between the two tags;
(3) Tags can be nested , and the content of a tag can be one or more other tags:
At this point, these tags form a "tree structure";
(4) Attributes can be assigned to tags in the start tag :
Attributes are equivalent to key-value pairs, and there can be one or more;
2. Common tags in HTML
1. HTML tags
The html tag is the topmost tag of an html file, which is equivalent to the root node of the tree;
2. head tag
Store the properties of the page (metadata: meta data);
3. body tag:
Store the content contained in this page;
Note: emmet shortcut key function: (supported by mainstream development tools)
Enter ! + Tab key to generate a basic page , just edit the body content:
<!DOCTYPE html> <!--声明文件类型是html文件-->
<html lang="en"> <!--lang即language，en即english，表示网页语言为英文-->
<head>
<!--meta标签为单标签-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <!--表示网页标题（网页标签页显示内容）-->
</head>
<body>
hello world
</body>
</html>2.1 Annotation tags
<!-- -->Note: (1) Like other languages, the contents of comments will not be displayed on the page. But you can see the comments when you right-click to view the source code of the web page;
(2) Ctrl+/ can quickly comment or uncomment;
2.2 Title tags: h1~h6
From h1~h6, the larger the number, the larger the font, as follows:
<!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>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>Open the file according to the directory:
Note: 1. In HTML, each title tag occupies a single line , which has nothing to do with the way the code is written;
2. Newlines written in the HTML source code will be ignored. When writing spaces, sometimes they will be ignored, and sometimes multiple spaces will be regarded as one space;
2.3 Paragraph tags: p
<!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>
<p>这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe nemo ex eligendi mollitia earum quisquam, rem quasi quaerat nihil, error, incidunt inventore deserunt ad quibusdam? Voluptas sint earum quasi ipsam!</p>
<p>这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe nemo ex eligendi mollitia earum quisquam, rem quasi quaerat nihil, error, incidunt inventore deserunt ad quibusdam? Voluptas sint earum quasi ipsam!</p>
<p>这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe nemo ex eligendi mollitia earum quisquam, rem quasi quaerat nihil, error, incidunt inventore deserunt ad quibusdam? Voluptas sint earum quasi ipsam!</p>
<p>这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe nemo ex eligendi mollitia earum quisquam, rem quasi quaerat nihil, error, incidunt inventore deserunt ad quibusdam? Voluptas sint earum quasi ipsam!</p>
</body>
</html>
Open the file according to the directory:
Note: 1. The lorem+Tab key can automatically generate a piece of random text to help debug the display effect;
2. Between each paragraph, there is not only a line break, but also an obvious paragraph spacing
2.4 Newline label: br
<!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>
<p>这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> <br>Saepe nemo ex eligendi mollitia earum quisquam, rem quasi quaerat nihil, error, incidunt inventore deserunt ad quibusdam? Voluptas sint earum quasi ipsam!</p>
</body>
</html>Open the file according to the directory:
Note: 1. <br> is a single tag;
2.5 Formatting tags
(1) Bold: strong label and b label;
(2) Oblique: em tags and i tags;
(3) Strikethrough: del tag and s tag;
(4) Underline: ins tag and u tag;
<!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>
<strong>变粗标签strong</strong>
<b>变粗标签b</b>
<br>
<em>倾斜标签em</em>
<i>倾斜标签i</i>
<br>
<del>倾斜标签del</del>
<s>倾斜标签s</s>
<br>
<ins>下划线标签ins</ins>
<u>下划线标签u</u>
</body>
</html>Open the file according to the directory:
2.6 Image tag: img
1. Core attribute: src, which is required
src describes the path of the image, which can be a local absolute path, a relative path, or a network path;
<!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="d:/2.jpg" >
<img src="./2.jpg" >
<img src="2.jpg" >
</body>
</html>Note: (1) The relative path must specify the working directory: the HTML working directory is the directory where the HTML file is located ;
At this time, if you create a new directory image and move 2.jpg into the image directory, and then use the relative path to directly open 2.jpg, the image cannot be displayed normally on the web page:
<img src="2.jpg" >
At this time, you need to indicate the image directory to display the picture normally:
<img src="image/2.jpg" >( ./ indicates the current path, ../ indicates the upper level path of the current path )
(2) Instead of using local photos, you can also open pictures in web pages by using network picture links, such as:
<img src="https://c-ssl.duitang.com/uploads/blog/202107/04/20210704175902_89460.thumb.1000_0.jpeg" >2. alt attribute: When the image is displayed normally, this attribute will not be displayed; if the image cannot be displayed, the text corresponding to alt will be displayed :
There is no 3.jpg picture in the directory where the current HTML file is located. If you try to open the picture at this time, then:
<img src="3.jpg" alt="Loading fail!">
3. title attribute: Hover the mouse over the picture and give a hint;
4.width/height attribute: describe the image size;
Note: 1. When only one of the width and height attributes is set, the image will be proportionally scaled according to the set image size;
2. px is a pixel, which is the most commonly used unit in front-end development;
2.7 Hyperlink label: a
A link is a shortcut, and a hyperlink means that the page that the link jumps to can be outside the current website;
1. Attribute 1: href is required, indicating which page will be redirected after clicking:
<a href="https://www.sogou.com">搜狗</a>
<a href="https://www.baidu.com">百度</a>Open the file according to the directory:
2. Attribute 2: The target attribute is generally written as: target="_blank", and a new tab can be opened without replacing the original interface:
<a href="https://www.sogou.com" target="_blank">搜狗</a>
<a href="https://www.baidu.com" target="_blank">百度</a>2.8 Form Tab
1. table: represents the entire table
2. tr: means a row
3. td: represents a cell
4. th: Indicates a cell in the header, the text is bold;
<table>
<tr>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr>
<td>Mike</td>
<td>112233</td>
</tr>
<tr>
<td>Mary</td>
<td>445566</td>
</tr>
<tr>
<td>John</td>
<td>778899</td>
</tr>
</table>Open the file according to the directory:
Note: 1. The above operation result is not a common table form. The table tag also has some attributes that can modify the interface, such as width, height, border, combining the overall border and the cell border into one cellspacing, etc. :
<table width="500px" height="300px" border="1px" cellspacing="0">
<tr>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr>
<td>Mike</td>
<td>112233</td>
</tr>
<tr>
<td>Mary</td>
<td>445566</td>
</tr>
<tr>
<td>John</td>
<td>778899</td>
</tr>
</table>At this point the interface is:
2. In order to align the data in the cell with the table header, you need to use css, which is only briefly shown here:
<style>
td{
text-align: center;
/* 令td标签中的文字都居中 */
}
</style>Insert the above code between the head tags to center the data:
2.9 List Labels
1. Ordered list: ol (ordered list): rank order;
2. Unordered list: ul (unordered list): ranking in no particular order;
3. List item: li (list item);
<!-- 有序列表 -->
<h3>Java 001</h3>
<ol>
<li>Mike</li>
<li>Mary</li>
<li>John</li>
<li>Alice</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>Mike</li>
<li>Mary</li>
<li>John</li>
<li>Alice</li>
</ul>Open the file according to the directory:
2.10 Form Labels
Forms are an important way for users to enter information and are divided into two parts:
(1) Form field: the area containing form elements, focusing on the form tag;
Use form for front-end and back-end interaction, that is, to submit the user's operation or input on the page to the server;
(2) Form controls: input box, submit button, etc., focusing on input tags;
There are many forms of input tags, which can be expressed as tags used by various users for input;
2.10.1 input tag
1. 单行文本框，如： <br>
<input type="text"> <br>
2. 单行文本框（输入密码专用即输入不可视），如：<br>
<input type="password"> <br>
3. 单选按钮，如：<br>
请选择性别： <input type="radio" name="gender"> 男
<input type="radio" name="gender" checked="checked"> 女<br>
4. 复选框，如：<br>
请选择科目：<input type="checkbox">计算机组成原理
<input type="checkbox">计算机网络
<input type="checkbox" checked="checked">数据结构<br>
5. 按钮，如：<br>
<input type="button" value="提交">Open the file according to the directory:
Note: 1. When the value of type is password, it means that the input content is invisible; when the value of type is text, it means an ordinary single-line text input box;
2. To realize the radio button, you need to specify the same value of the name attribute to realize the radio button;
3. Both the radio button and the check box can add the checked attribute value to check to indicate the default selection;
4. The button attribute can be used in conjunction with the value attribute, and the value of the value attribute represents the content displayed on the button box;
5. The functions of html are limited, and more complex logic and functions (such as: limiting the maximum number of choices, the actual operation after clicking the button, etc.) need to be implemented with js;
6. Submit button (used with form): type="submit", which can trigger the interaction between the form and the server;
7. File selection box:
文件选择框：<br>
<input type="file">
2.10.2 Pull-down menu label: select
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>广州</option>
<option>杭州</option>
</select>
2.10.3 Multi-line edit box label: textarea
<textarea id="" cols="30" rows="10">
abcdefg
higklmn
</textarea>
Note: input tags, select tags, textarea tags, etc. can be called controls, which are the basic elements of a graphical interface;
2.11 No Semantic Labels
No semantics means that it can be used in various scenarios;
1. div occupies one line by default, also known as block-level element;
2. span does not occupy a single line by default, and is called an inline element;