1. Basic HTML development methods
1. How to write HTML code
- The syntax itself is relatively simple, and the syntax style is very different from Java and the like (it cannot express some logic, but can only express "what is there" information),
- Use Notepad to create a file and change the suffix
.htmlto
hello world!
Although this code can run, it is not actually a legal HTML syntax, so why can the browser still run normally?
Robustness: "Fault tolerance" is strong
<html>
<head>
<title>tile</title>
</head>
<boby>
hello world!
</body>
</html>
This is a more standardized HTML code, which is composed of tag structure. Each tag is divided into a start tag and an end tag that appear in pairs . The tags can be nested . The tags form a tree shape as a whole. Structure , called the DOM tree : Document Objective Model Document Object Model
To write front-end code, you can use:
-
Use IDEA directly
IDEA Community Edition: Only supports HTML, does not support CSS and JS, many codes do not have highlighting and prompts.
Professional Edition: Supports HTML, CSS and JS, it is fully capable. -
You can use VSCode as the development tool here. VSCode has natural support for the front-end. There is no need to install any additional plug-ins, and it can be well qualified for basic front-end development. The positioning of vSCode is actually as "the first development tool for new languages", especially for some niche languages.
-
VS is called "Integrated Development Environment" and was born in 199x~~ (it can not only edit code, but also has a compiler and a debugger). Its biggest feature is that it is very important. VSCode is called "Editor", a more powerful note-
taking This (only editable, no compiler, no debugger) VSCode is very lightweight
Use VSCode to write, and use the browser to run local files directly.
If you use IDEA, the HTML written by IDEA will have a small browser icon in the upper right corner. You can directly open the browser and run the web page by clicking on the icon. This The running method and the method of directly double-clicking the file are actually essentially different. There will be certain differences between the two operations after learning. - Currently, we are all using the method of directly double-clicking the file.)
How to write HTML faster:
- Enter
!and press tab to generate a set of default page templates (all mainstream development tools have emmet-style shortcut keys)
<!DOCTYPE html> // 这一行,声明了文档的类型.描述了当前文件是html文件
<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>
In VSCode, if you modify the code, remember to save it in time (VSCode can also be configured to save automatically)
2. Developer tools
In the browser, there is a very, very important component, the developer tool !! Through this developer tool, you can observe the basic structure of the page!!!
- Right click –> Inspect. Or just F12
These tabs correspond to different functions
Click this little arrow to select elements on the page
3. Development process
About website construction: website = front-end + back-end
Early development methods: front-end: HTML, CSS, Js; back-end: Servlet,
Nowadays, it is rarely used in the company. Spring is the mainstream development method in the company.
What we learn in class is the native development method, but in actual development, front-end development now also derives some related frameworks:
Three major frameworks of the front end:
-
Angular - Google
-
React —— FaceBook
-
Vue——You Yuxi
Angulal is rarely used in China. The main ones in China are React and Vue. Currently, React has a higher share, but Vue is also catching up.
A website is divided into two parts: front-end (client) + back-end (server).
Usually the client here refers to the browser.
The current mainstream implementation solution of the front-end is actually the so-called three swordsmen of front-end development (HTM, CSS, JS).
In fact, when our Java was born, it was used to write front-end
web development. At the beginning of development, front-end and back-end , the boundary between
At that time, there was a big boss who wanted to do a project to develop a "smart bread machine". In order to take care of some novice teammates in the team, he invented a new language, and Java was born (development of embedded devices). Java It was passed down and was discovered by a company called Sun.
Web development has just emerged. The first websites are usually purely static pages (the website is equivalent to an "online newspaper"). As time goes by, people are no longer satisfied with using web pages as newspapers. They hope There are some more complex interactions
At this time, you need to embed some programming languages in the page to express such logic: applet in Java (the most popular), JS, VBScript
Microsoft launched a browser called IE, which competed with the most powerful browser at the time, called Netscape.
With the popularity of Windows, IE gradually became the dominant player in the browser market (it dominated for nearly 30 years until the first two years). Years ago, Microsoft officially announced that it would abandon IE.)
When IE became mainstream, it launched a ban on Java!! IE announced that it would not support Java!!!
Because Java is not Microsoft's, VB is Microsoft's. In order to support its own technology system, Microsoft Directly using this blocking method to launch an encirclement and suppression campaign against Java
Java sets off on a new track and re-finds its position.
The troops are divided into two groups:
-
Enter J2EE for server development => JavaEE
- Although JSP (Servlet) had its place at the time, the most powerful player in this circle back then (2000-2010) was called PHP - of course Microsoft also followed up and created ASP (the least popular one). web development four swordsmen LAMP => L Linux, A Apache, (HTTP server, httpd), M MySQL, P PHP
-
Enter J2ME for embedded devices => No more
- Back then, on mobile phones (feature phones), the above applications were basically implemented based on J2ME. In previous feature phones, the software installed and the logo when turned on was the Java logo. As time went by and entered the era of smart phones, J2ME The technology stack will be wiped out.
Java is still re-energizing from two angles
-
Server development
- As time goes by, the PHP mechanism has also shown its decline (for the development of some large and complex projects, it is somewhat difficult to be competent).
The development idea of separating the front and back ends has gradually been promoted. Java has begun to exert its power, especially the reinstallation of Java and the launch of Spring, a set of family buckets. This set of family buckets can be considered to cover all aspects of back-end development, leaving competitors at the same period behind. No1 - In the server field, Java's biggest challenger is Go.
Java has one of the biggest problems, which is relatively cumbersome (patterns within patterns, frameworks upon frameworks, euphemistically called, in order to handle high concurrency, big data and high availability...) Java usually To put a simple problem into trouble, Go uses simple methods to solve simple problems. Go is equivalent to a more modern C language. The author of Go is Ken Thomson, the father of C language. Go is now It has also been highly praised by the industry, especially in China, where the development of Go can be said to be at its peak. Especially when writing some short and concise servers, developers are more inclined to use Go instead of Java. Java does have more advantages in solving complex problems. However, a back-end architecture that is more popular in the industry now is called "microservice architecture". From the perspective of business logic, it is natural to dismantle a large and complex server. Split into multiple smaller, leaner servers
- As time goes by, the PHP mechanism has also shown its decline (for the development of some large and complex projects, it is somewhat difficult to be competent).
-
Although J2ME fell and Android rose, Java was chosen as the default development language for Android applications (in order to attract the unemployed J2ME programmers to quickly build the Android ecosystem)
- The rise of the Android ecosystem has promoted the development of Android, and now Android has become the most mainstream operating system on mobile devices. No1
- Challengers on the mobile side mainly come from two aspects:
Android was developed by Google, and Google used Java as the default language for development. Java was later acquired by Oracle. When Oracle saw that Android was so popular, it was very jealous and sued Google! ! "Requiring Google to pay itself a high licensing fee." Google lost the lawsuit and had to pay. Google was very annoyed!!! Google is laying out the next generation mobile system (self-developed system) and installing it on the next generation mobile system. The programming language is Google's own Dart, which is equipped with the development framework Flutter (now Flutter has been released and can support full platform compatibility!!!). Write a code based on Flutter, and this code can support: Android and IOS at the same time. , windows, Linux, Mac, web version!!! And it’s very efficient
With the blessing of double No. 1, Java returns to its peak
2. HTML tags
Now that you have understood the basic development methods of HTML and how the browser views the page structure, you will
now learn the syntax details in HTML. In fact, you will learn the various tags in HTML.A web page may have links, text, buttons, input boxes, pictures... different elements on these pages correspond to HTML tags
HTML describes what is on the page and does not express "logic" (no conditions, loops, methods, classes, etc...)
1. Notes:
<!-- -->- Comments are just to remind programmers what this code does and do not participate in execution. Do not write comments randomly. Comments can be seen by interested people outside!!! Currently, the HTML that is run directly can be seen. In actual development, Often a complete front-end project needs to be built through some packaging and building tools. During the construction process, comments in the HTML will be removed, including some processing (obfuscation and compression...) of the JS code.
- Comments can be switched directly through
ctrl + /(same as IDEA)- Comments cannot be nested
2. Title:
Enter the tag name tab to quickly generate a pair of tags
- h1 - h6
- The smaller the number, the thicker and larger the content inside. The larger the number, the thinner and smaller the content inside.
- The original intention of HTML was to represent newspapers/magazines. This kind of several-level titles are important content in newspapers.
3. Paragraph tagsp
Each
ptag is on its own line , andpthere is paragraph spacing between tags.By
lorem tabpassing it, you can generate a random and relatively long string to facilitate some testing of the interface. IDEA should also have this function.
<p>Lorem</p>>
You can clearly see the spacing between paragraphs, but these paragraphs do not have the first line indented by two Chinese characters. This cannot be achieved with HTML and needs to be matched with CSS. HTML
describes the content (skeleton) of the page.
CSS is the description of the page. Style (what each place looks like specifically)
<style>
p {
text-indent: 2em;
}
</style>
Add this code in front. This code is the CSS code. Currently, the CSS is embedded into HTML through the style tag , so that all p tags are indented by two words on the first line.
4. brLabel: line break
- In HTML, line breaks will be ignored directly. If you want to break lines in the content, you need to use
<br>the tag- br is the abbreviation of break. It means line break. The br tag does not have a large gap like the p tag.
<br/>It is a standard way of writing and is not recommended.<br>brThe tag is a "single tag" with only a start tag and no end tag . Most tags in HTML are in pairs, but there are also a few single tags.
5. Escape characters
HTML will also ignore spaces and merge multiple adjacent spaces into one space.
If you really need to use multiple spaces, you need to use escape characters. In addition to spaces, special symbols such as < > & also need to use escape characters.
HTML special character encoding comparison table
Commonly used escape characters:
| character | decimal | escape character |
|---|---|---|
| " | " |
" |
| & | & |
& |
| < | < |
< |
| > | > |
> |
Do not break spaces ( non-breaking space) |
  |
|
6. Format labels
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<ins>下划线</ins>
<u>下划线</u>
Although these tags are written in multiple lines in the html file, they are actually displayed in a single line on the page.
The line break entered in the html file has nothing to do with the line break displayed. To display the line break here, you need to use the brtag
But like the previous h1-h6, p, these can all occupy one line - block-level elements.
However, this set of formatting tags here cannot occupy one line - inline elements.
7. Image tag img
- img is also a single tag (no end tag required)
- There are many attributes that can be written in img, the most important of which is the src attribute. The specific location of the image is described through src.
- The src here can be an absolute path , a relative path , or a network path.
<img src="./flower.png" alt="">
<img src="E:\flower.jpg" alt = "小花">
<img src="https://...." alt="">
In the start tag of html (the end tag does not work), you can set some attributes for the tag. The attributes are all in the form of "key-value pairs"
Key-value pairs are separated by spaces (it can be one space, multiple spaces, or newlines), and keys and values are separated by =.
The key here does not need to be quoted, and the value is generally used. ""To cause it, and a tag can set multiple attributes.
Different html tags support different attributes (of course, there are also some attributes that every tag has)
altReplacement text: If the picture hangs, the attributes in the alt will be used to represent the picture. If the picture can be displayed normally, the content in the alt will not be displayed.title: Prompt text, when the mouse is placed on the picture, there will be a promptwidth / height: Control the width and height. Generally, you only need to change one of the height and width, and the other will be scaled proportionally, otherwise the picture will be unbalanced.border: Border, the parameter is the width in pixels, but it is generally set using CSS
<img src="flower.png" title="that's a flower">
When setting the size, an important unit is involved: called px."pixel". Each pixel can display a different color.
It is generally believed that the more pixels a monitor has, the better the overall display effect will be.
If you set the width and height at the same time, it may cause the image itself to be out of proportion . If you only set the width/height, the other dimension will automatically scale proportionally~~
8. Hyperlink tag: a
href: required, indicating which page will jump to after clicking
target: opening method, the default is _self, if it is _blank, it will be opened with a new tab.
a tag is also an inline element , not a block-level element
If you put the picture in the a tag, you can achieve the effect of jumping after clicking on the picture.
Several forms of links:
1. External links: href refers to the address of other websites
<a href="https://www.bing.com">bing</a>
<a href="https://blog.csdn.net/qq_56884023/article/details/124161117?spm=1001.2014.3001.5502">博客</a>
2. Internal links: For links between internal pages of the website, just write relative paths.
<a href="a.html">跳转到 a.html</a>
3. Empty link: It belongs to the development stage. The specific address of some links is not yet certain, so you can use # to occupy a place in the href.
<a href="#">空链接</a>
4. Download link: The path corresponding to href corresponds to an ordinary file (not html or the like), which will trigger the download operation (zip files can be used)
<a href="test.zip">点击下载</a>
5. Web page element link: You can add a link to any element such as pictures (put the element in the a tag). For example, if you put the picture in the a tag, you can achieve the effect of jumping after clicking on the picture.
<a href="http://bing.com">
<img src="flower.png" alt="">
</a>
6. Anchor link: You can quickly locate a certain position on the page
Jumping within this page, this mechanism can be implemented through anchor links, or through js (using js, some animation effects can be added). The anchor links themselves belong to HTML content, and their functions are limited. JS functions is stronger
Disable a tag jump:
<a href="javascript:void(0);">or<a href="javascript:;">a is called a hyperlink. Connection represents a state in which the client and server are ready for communication. Link is a shortcut.
9. Table label table
is a set of labels,
table: represents the entire table
tr: represents a line
td: represents a column
th: represents a column in the headerConstruct a table through html, which represents the address book
If you don't add any attributes, the table you see will be a particularly "original" table. Add some attributes to the table tag to make the table more "table-like".
<body>
<table>
<tr>
<td>张三</td>
<td>101</td>
</tr>
<tr>
<td>李四</td>
<td>102</td>
</tr>
<tr>
<td>王五</td>
<td>103</td>
</tr>
</table>
</body>
borderadd border
width / heightSet table size
<table border="2px" width = "500px" hight = "200px">
Use thtags to add headers to tables
<tr>
<th>姓名</th>
<th>号码</th>
</tr>
Use cellspacingthe property to remove gaps between cells
<table border="2px" width = "500px" height = "300px" cellspacing = "0">
Use the property in css text-alignto center the content of the table
<!DOCTYPE html>
<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>Table</title>
</head>
<body>
<style>
td {
text-align: center;
}
</style>
<table border="2px" width = "500px" height = "300px" cellspacing = "0">
<tr>
<th>姓名</th>
<th>号码</th>
</tr>
<tr>
<td>张三</td>
<td>101</td>
</tr>
<tr>
<td>李四</td>
<td>102</td>
</tr>
<tr>
<td>王五</td>
<td>103</td>
</tr>
</table>
</body>
</html>
These can also be achieved through CSS. In actual development, table attributes are rarely used directly. This is a legacy of history. In ancient times, there was only HTML and no CSS.
10. List tags
<body>
<h3>无序列表</h3>
<ul>
<li>Gwen</li>
<li>Gwen</li>
<li>Gwen</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>Gwen</li>
<li>Gwen</li>
<li>Gwen</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>student</dt>
<dd>Gwen</dd>
<dd>Gwen</dd>
<dd>Gwen</dd>
</dl>
</body>
The most commonly used one is the unordered list.
The usage scenario is no longer simple. It uses its own display behavior to
list multiple "parallel relationship" elements together. In this case, ul is often used.
Here The small dots can be modified through CSS whether they should be displayed or what they should be displayed as.
11. Form tag form
input
- Form tags are an important means of interaction between users and pages . Most HTML tags "display"
form tags to users and allow users to "enter"- form represents a form tag that allows users to enter some information and submit it to the server.
- In the form, you can put some components and
inputlabels that interact with the user. There are many forms.
Various input controls, single-line text boxes, buttons, radio boxes, check boxes.
- type (required), there are many types of values, such as button, checkbox, text, file, image, password, radio, etc.
- name: Give the input a name. Especially for radio buttons, only one with the same name can be selected.
- value: default value in input
- checked: checked by default. (for radio buttons and multi-select buttons)
- maxlength: Set the maximum length.
1. Text box
<form>
<input type="text">
</form>
2. Password box
It is also a single-line text box, but this can be used to enter passwords
<input type="password">
3. Radio button
Note: The radio button boxes must have the same name attribute to achieve the multiple-select effect.
<input type="radio" name="gender" > 男
<input type="radio" name="gender" checked = "checked"> 女
Match labelthe radio button and idattributes. Any html element can specify the id attribute. In a page, the value of id cannot be repeated (unique).
<input type="radio" name = "gender" id = "male">
<label for="male">男</label>
<input type="radio" name = "gender" checked = "checked" id = "female">
<label for="female">女</label>
Download click text, you can also select
4. Check box
You can also use checked to indicate selected by default. You can also use label to select the element by clicking on the text.
<input type="checkbox" checked = "checked"> 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox"> 学习
5. Ordinary buttons
<input type="button" value="这是按钮" onclick="alert('hello')">
onclick is a js code. onclick means that it is triggered when an element is clicked . The triggered content is the code in "", which will be executed directly by the browser. alert means that a dialog box will pop up.
The second way of writing:
<button onclick="alert('hello')">这是按钮</button>
6. Submit button
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
The submit button must be placed within the form tag. After clicking, it will try to send the message to the server.
7. Clear button
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>
The clear button must be placed in the form. Clicking it will reset all user input content in the form.
8. Select file
<input type="file">
Click "Select File" and a dialog box will pop up. You can select a local file, and then the browser will open the file.
Further, you can achieve the effect of submitting/uploading the file to the server.
select
<body>
<form>
<select>
<option>--请选择年份--</option>
<option selected = "selected">2001</option> <!--默认选项-->
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
</select>
</form>
</body>
Use select to represent a drop-down menu. Each menu item is an option. You can use selected to represent the default option.
textarea
- Multi-line text box.
- The content in the text field is the default content. Note that spaces will also have an impact.
- Rows and cols are not used directly, they are changed using css.
<textarea name="" id="" cols="30" rows="10">
</textarea>
12. No semantic tags: div & span
Tags with the highest factory frequency
The previous tags are all "semantic" tags. Each tag has a clear role. The original intention of HTML was to represent media such as "newspapers/magazines". However, with the development of the times, HTML has become more than
just As a "newspaper", it becomes an "application".
Compared with semantic tags, non-semantic tags are more suitable for "applications"
divThe and here spancan replace most of the above functions with semantic tags (but the form series cannot be replaced...)
In extreme terms, 90% of the tags on a web page can be div / span (completely feasible , but this approach is not common)
-
div: The default is a block-level element (occupies one line) -
span: The default is an inline element (not exclusive to one line)
You can also think of div and span as a rectangular box, in which various page content can be placed.
<div>
<span>hello</span>
<span>hello</span>
</div>
<div>
<span>hello</span>
<span>hello</span>
</div>
Emmet shortcut keys
Quickly enter tagsinput[tab]
Quickly enter multiple tagsdiv*3[tab]
tag with id div#sex[tab]
Label with class namediv.sex[tab]
label elementul>li*3[tab]
Label with sibling elementsspan+span
Label with contentdiv{hello}
Label with content (with number)div{$.hello}
MDN reference documentation
Mozilla is an open source organization, and its largest product is the Firefox browser.
HTML (Hypertext Markup Language)
You can also place the mouse on the label you want to view and click to jump:
3. Comprehensive cases
1. Case 1: Display resume information
<!DOCTYPE html>
<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>个人简历</title>
</head>
<body>
<h1>我的简历</h1>
<h2>基本信息</h2>
<img src="flower.jpg" alt="">
<p>求职意向：Java 开发工程师</p>
<p>练习电话：111</p>
<p>个人邮箱：[email protected]</p>
<p>
<a href="https://blog.csdn.net/qq_56884023?type=blog">我的博客</a>
</p>
<p>
<a href="https://GitHub.com"></a>
</p>
<h2>教育背景</h2>
<ol>
<li>2000-2005 翻斗小学</li>
<li>2006-2008 翻斗中学</li>
<li>2009-2012 翻斗大学</li>
</ol>
<h2>专业技能</h2>
<ul>
<li>熟练掌握 Java 的基础语法，熟悉面向对象程序设计的基本思想</li>
<li>熟练掌握常用的数据结构，和集合类，例如顺序表，链表，二叉树，哈希表等</li>
<li>熟悉 MySQL 数据库，熟悉 MySQL 语句，并且能进行基本的增删改查</li>
<li>熟悉网络原理和网络编程，例如：TCP、UDP、IP 等常见协议的底层机制</li>
</ul>
<h2>项目经验</h2>
<ol>
<!-- 第一个项目 -->
<li>
<h3>留言墙</h3>
<p>开发时间：2012.9-2013.1</p>
<p>功能介绍：</p>
<ul>
<li>支持留言发布</li>
<li>支持匿名留言</li>
</ul>
</li>
<!-- 第二个项目 -->
<li>
<h3>学习小助手</h3>
<p>开发时间：2013.9-2014.1</p>
<p>功能介绍：</p>
<ul>
<li>支持错题检索</li>
<li>支持同学探讨</li>
</ul>
</li>
</ol>
<h2>个人评价</h2>
<p>本人学习成绩优异，多次获得学校奖学金</p>
</body>
</html>
2. Case 2: Fill in resume information
iconfont-Alibaba vector icon library
<!DOCTYPE html>
<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>填写简历</title>
</head>
<body>
<h1>请填写简历信息</h1>
<table>
<!-- 1、姓名 -->
<tr>
<td>
姓名
</td>
<td>
<input type="text">
</td>
</tr>
<!-- 2、性别 -->
<tr>
<td>
性别
</td>
<td>
<input type="radio" name = "gender" id = "male">
<label for="male">
<img src="boy.png" alt="" width="17px"> 男
</label>
<input type="radio" name = "gender" id = female checked = "checked">
<label for="female">
<img src="girl.png" alt="" width="17px"> 女
</label>
</td>
</tr>
<!-- 3、选择出生日期 -->
<tr>
<td>
出生日期
</td>
<td>
<select>
<option>--请选择年份--</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
<select>
<option>--请选择月份--</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>--请选日期--</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>
</select>
</td>
</tr>
<!-- 4、输入学校 -->
<tr>
<td>
就读学校
</td>
<td>
<input type="text">
</td>
</tr>
<!-- 5、选择应聘岗位 -->
<tr>
<td>应聘岗位</td>
<td>
<input type="checkbox" id = "frontend">
<label for="frontend">前端开发</label>
<input type="checkbox" id = "backend">
<label for="backend">后端开发</label>
<input type="checkbox" id = "qa">
<label for="qa">测试开发</label>
<input type="checkbox" id = "op">
<label for="op">运维开发</label>
</td>
</tr>
<!-- 6、掌握的技能 -->
<tr>
<td>
掌握的技能
</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<!-- 7、项目经历 -->
<tr>
<td>
项目经历
</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<!-- 8、确认要求 -->
<tr>
<!-- 这个 td 空着，占个位置 -->
<td></td>
<td>
<input type="checkbox" id = "confirm">
<label for="confirm">我已仔细阅读过公司招聘要求</label>
</td>
</tr>
<tr>
<!-- 这个 td 空着，占个位置 -->
<td></td>
<td>
<h3>请应聘者确认：</h3>
<ul>
<li>以上信息真实有效</li>
<li>能够尽快取公司实习</li>
<li>能够接收公司的加班文化</li>
</ul>
</td>
</tr>
</table>
</body>
</html>