This is the 16th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021 “@TOC
One, foreword
1. HTML code is made up of various tags. 2. HTML code infrastructure
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Copy the codeSecond, the various tags of HTML
2.1 Comment Labels
<! - comments -- >
Copy the codeIn VSCODE, you can use the CTRL +/ shortcut to comment and uncomment. Unlike Java, HTML comments can be seen in developer tools. Press F12 when opening a web page to open developer tools.
2.2 Title Label
H1, h6, six, the smaller the number, the larger the font. Let’s see the effect. Code:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<h1>The largest level 1 label</h1>
<h2>The second largest secondary tag</h2>
<h3>The third largest</h3>
<h4>The fourth largest</h4>
<h5>ite</h5>
<h6>bro</h6>
</body>
</html>
Copy the codeEffect:
2.3 Paragraph labels: P
As the name implies, a paragraph tag represents a paragraph. Let’s say I need to copy a long piece of text into my HTML code. It’s supposed to look like this: segmented. But it’s really…
The best teacher of writing is writing, and the best teacher is teaching.
At the end of his book Knowledge Hero 2.0, published in 2002, Liu reflected, “I have been working as a journalist for 10 years. During these 10 years, I have always had to answer the question of my relationship with my interviewees carefully.”
Twenty years later, that question is still worth asking.
There are two questions: why should the interviewee accept the interview? And why do journalists do interviews? Most of the interviews and reports can not achieve expectations, it is these two problems have not been clear, clear.
How to think deeply about these two problems? CSDN specially invites Mr. Liu Ren, the author of Knowledge Hero 2.0, to co-build the “CSDN Liu Ren Writing Class”, specially recruiting science and technology journalists who love writing to help them improve their interview and writing ability, and improve their thinking of continuous self-evolution.
Liu ren agrees with Fei xiaotong: I don’t think the task of teachers is to impart existing knowledge. Students can learn from books themselves, but mainly to guide students to dare to go into the unknown. Teachers have to lead the way. Whether reliable knowledge has been gained as a result is another question.
Liu ren wants to improve her writing skills, so she runs classes to explore new knowledge of writing with the help of students.
Actually: stuck together, not segmented.
P Label Usage example:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<! -- the largest level in < h1 > tag < / h1 > < h2 > the second secondary tag < / h2 > < h3 > three < / h3 > < h4 > fourth-largest < / h4 > < h5 > property < / h5 > < h6 > bro < h6 > -- >
<p>The best teacher of writing is writing, and the best teacher is teaching.</p>
<p>At the end of his book Knowledge Hero 2.0, published in 2002, Liu reflected, "I have been working as a journalist for 10 years. During these 10 years, I have always had to answer the question of my relationship with my interviewees carefully." Twenty years later, that question is still worth asking.</p>
<p>There are two questions: why should the interviewee accept the interview? And why do journalists do interviews? Most of the interviews and reports can not achieve expectations, it is these two problems have not been clear, clear. How to think deeply about these two problems? CSDN specially invites Mr. Liu Ren, the author of Knowledge Hero 2.0, to co-build the "CSDN Liu Ren Writing Class", specially recruiting science and technology journalists who love writing to help them improve their interview and writing ability, and improve their thinking of continuous self-evolution. Liu ren agrees with Fei xiaotong: I don't think the task of teachers is to impart existing knowledge. Students can learn from books themselves, but mainly to guide students to dare to go into the unknown. Teachers have to lead the way. Whether reliable knowledge has been gained as a result is another question. Liu ren wants to improve her writing skills, so she runs classes to explore new knowledge of writing with the help of students.</p>
</body>
</html>
Copy the codeEffect presentation: Well, this is segmented, very good.
2.4 Newline Label: BR
Br is short for break. Stands for change of line. Note that br is a single tag and does not need to end with a paragraph tag like p
12345
<br>
23456
Copy the codeEffect: 12345 and 23456 are not in one line
2.5 Image label: IMG
Format: 
SRC indicates the image path, which can be a network path or a local path.
2.6: Hyperlink label: A
Provides a link to the TAB, click on the current page to jump to the target page. Format:
2.7 Form Label
Table: indicates the entire table tr: indicates a row of the table TD: indicates a cell TH: indicates the header cell. Thead: the header area of the table. Tbody: The table gets the body area.
Here’s an example:
<table width="600px">
<tr>
<td>The name</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>gender</td>
<td>
<input type="radio" name="gender" checked="checked" id="male">
<label for="male"><img src="Male image/PNG". width="20" height="20">male</label>
<input type="radio" name="gender" id="famale" >
<label for="famale"><img src="Female image/PNG". width="20" height="20">female</label>
</td>
</tr>
Copy the codeEffect:
2.8 List Labels
List labels are classified into ordered list and unordered list: ordered list: ul, LI Unordered list: OL, LI User-defined list: DL, DT, dd
Ordered list, unordered list tag demo:
<ul>
<! -- Unordered list -->
<li>Java</li>
<li>C++</li>
</ul>
<ol>
<! -- Ordered list -->
<li>The data structure</li>
<li>multithreading</li>
</ol>
Copy the code
Iii. Comprehensive Cases:
3.1 Presenting your Resume
Effect:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Resume information</title>
</head>
<body>
<h1>Chia-wen chang</h1>
<! -- I'm a note hey hey hey -->
<div>
<h2>The basic information</h2>
<img src="Photo of Zhang Jiawen /uzi.png" width="500" height="500">
<p><span>Job Objective: Java development engineer</span></p>
<p><span>Contact number: 123-456-7892</span></p>
<p><span>Email address: [email protected]</span></p>
<p><a href="https://gitee.com/">My Gitee</a></p>
<p><a href="https://www.csdn.net/">My blog</a></p>
</div>
<! -- Education, div -->
<div>
<h2>Education background</h2>
<ol>
<li>2004-2008 XXX Kindergarten</li>
<li>XXX primary school. 2008-2012</li>
<li>XXX middle school. 2013-2016</li>
<li>XXX high school. 2016-2020</li>
<li>XXX university 2020-2024</li>
</ol>
</div>
<div>
<! -- Professional Skills
<h2>Professional skills</h2>
<li>Java basic syntax is solid</li>
<li>Common data structures can be independently implemented and skillfully applied</li>
<li>Familiar with computer network theory</li>
<li>Master web development ability</li>
</div>
<div>
<! -- My project -->
<h2>My project</h2>
<ol>
<li>
<h3>wall</h3>
<p>Development time: August 2008 to October 2009</p>
<p>Function introduction:</p>
<ul>
<li>Support students to leave messages</li>
<li>Support for anonymous messages</li>
</ul>
<li> <h3>Analyse assistant</h3></li>
<p>Development time: November 2021 to December 2021</p>
<p>Function introduction:<ul>
<li>Can replay LPL matches</li>
<li>We can find out who the actors are</li>
</ul>
</p>
</ol>
</div>
<h2>Personal assessment</h2>
<p>Do well in school</p>
</body>
</html>
Copy the code3.2 Filling in your Resume:
Effect:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Fill out your resume</title>
</head>
<body>
<h3>Please fill in your resume information</h3>
<table width="600px">
<tr>
<td>The name</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>gender</td>
<td>
<input type="radio" name="gender" checked="checked" id="male">
<label for="male"><img src="Male image/PNG". width="20" height="20">male</label>
<input type="radio" name="gender" id="famale" >
<label for="famale"><img src="Female image/PNG". width="20" height="20">female</label>
</td>
</tr>
<tr>
<td>Date of birth</td>
<td>
<select>
<option>-- Please select the year</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
</select>
<select>
<option>-- Please select the month</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option>-- Please select a date</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
</select>
</td>
</tr>
<tr>
<td>school</td>
<td>
<input type='text'>
</td>
</tr>
<tr>
<td>To apply for jobs</td>
<td>
<input type="checkbox" id="frontend"><label for="frontend">The front-end development</label>
<input type="checkbox" id="backend"><label for="backend">The backend development</label>
<input type="checkbox" id="qa"><label for="qa">Test development</label>
<input type="checkbox" id="op"> <label for="op">Operations and development</label>
</td>
</tr>
<tr>
<td>Master the skill</td>
<td>
<textarea cols="50" rows="10" ></textarea>
</td>
</tr>
<tr>
<td>Project experience</td>
<td>
<textarea cols="50" rows="10"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" id="confirm"> <label for="confirm">I have read the company's recruitment requirements carefully</label>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">Check my status</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h4>Applicant confirmation:</h4>
<ul>
<li>The above information is true and valid</li>
<li>Be able to come to the company as early as possible</li>
<li>Can accept the company overtime culture</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Copy the code