The three cornerstones of network transmission: URL, HTTP, HTML
The front end uses URL and HTTP protocol to send a request for a certain resource to the server. The server responds to the browser with an HTML page, and the browser parses the HTML page.
Standard structure of HTML:
【1】First create a new text using a normal text document and change the suffix of the text to .html or .htm
We can also use VS code to design https://code.visualstudio.com to download VS code
【2】Edit
<html>
<head></head>
<body>
this is my second html... ...
</body>
</html>(You can use it if you use VS code! +tab key to quickly appear the HTML frame)
The head tag pair is the configuration of the web page, and the body tag pair is the content displayed on the page.
<title>、<meta>、<link>、<style>、 <script>、 <base>用在head部分
title tag: Set the title of the web page
meta tag: set web page keywords and description
hyperlink tag
<a href="https://www.baidu.com/">Baidu</a>
The href attribute of a hyperlink is a hypertext reference, that is, it jumps to a certain page, and 'Baidu click' is a click (button) that jumps to another page.
The title attribute is the display content when the mouse hovers
Set anchor point:
When a page is too long, you need to set anchor points to jump between different positions on the same page.
Just like taking an elevator, we can go to any floor
Eg: Write a <a name='3F'></a> in front (set the anchor point, set a position !)
You can write a <a href='#3f'>mobile phone</a> later (when accessing the anchor point, the button will be 'mobile phone' )
The above is a jump to the same page, and the following is a jump to different pages:
<a href='Set anchor point.html#3F'>Hyperlink</a>
Adding #3F after the link will jump directly to the third layer of another file.
List tags:
1.<!DOCTYPE html>
2.<html>
3. <head>
4. <meta charset="UTF-8">
5. <title></title>
6. </head>
7. <body>
8. <!--无序列表:
9. type:可以设置列表前图标的样式 type="square"
10. 如果想要更换图标样式，需要借助css技术： style="list-style:url(img/act.jpg) ;"
11. -->
12. <h1>起床后需要做的事</h1>
13. <ul type="square">
14. <li>睁眼</li>
15. <li>穿衣服</li>
16. <li>上厕所</li>
17. <li>吃早饭</li>
18. <li>洗漱</li>
19. <li>出门</li>
20. </ul>
21. <!--有序列表:
22. type:可以设置列表的标号：1,a,A,i,I
23. start:设置起始标号
24. -->
25. <h1>学习java的顺序</h1>
26. <ol type="A" start="3">
27. <li>JAVASE</li>
28.<li>ORACLE</li>
29. <li>MYSQL</li>
30. <li>HTML</li>
31. <li>CSS</li>
32. <li>JS</li>
33. </ol>
34.
35. </body>
36.</html>
37.Table tag: <table>
1.<!DOCTYPE html>
2.<html>
3. <head>
4. <meta charset="UTF-8">
5. <title></title>
6. </head>
7. <body>
8. <!--表格：4行4列
9. table:表格
10. tr:行
11. td:单元格
12. th:特殊单元格：表头效果：加粗，居中
13. 默认情况下表格是没有边框的，通过属性来增加表框：
14. border:设置边框大小
15. cellspacing：设置单元格和边框之间的空隙
16. align="center" 设置居中
17. background 设置背景图片 background="img/ss.jpg"
18. bgcolor :设置背景颜色
19. rowspan:行合并
20. colspan：列合并
21. -->
22. <table border="1px" cellspacing="0px" width="400px" height="300px" bgcolor="darkseagreen" >
23. <tr bgcolor="bisque">
24. <th>学号</th>
25. <th>姓名</th>
26. <th>年纪</th>
27. <th>成绩</th>
28. </tr>
29. <tr>
30. <td align="center">1001</td>
31. <td>丽丽</td>
32. <td>19</td>
33. <td rowspan="3">90.5</td>
34. </tr>
35. <tr>
36. <td colspan="2" align="center">2006</td>
37. <td>30</td>
38. </tr>
39. <tr>
40. <td>3007</td>
41. <td>小明</td>
42. <td>18</td>
43. </tr>
44. </table>
45. </body>
46.</html><div></div>Tag pairs are used to group related content together and form parts of content.