网络传输三大基石:URL,HTTP,HTML
前端使用URL利用HTTP协议去向服务器端发送请求某个资源,服务器端响应浏览器一个HTML页面,浏览器对HTML页面解析
HTML的标准结构:
【1】先用普通文本文档新建一个文本,将文本的后缀改为.html 或者 .htm
我们也可以使用VS code去设计 https://code.visualstudio.com 下载VS code
【2】编辑
<html>
<head></head>
<body>
this is my second html... ...
</body>
</html>
(如果使用VS code可以使用!+tab键快速出现HTML框架)
head标签对是对网页的配置,body标签对里面放的就是页面上展示出来的内容
<title>、<meta>、<link>、<style>、 <script>、 <base>用在head部分
title标签:设置网页的标题
meta标签:设置网页关键词和描述
超级链接标签
<a href="https://www.baidu.com/">百度一下</a>
超链接的href属性为超文本引用,即跳到某个页面,'百度一下'为跳转到另一个页面的点击处(按钮)
title属性是鼠标悬浮的显示内容
设置锚点:
当一个页面太长的时候,就需要设置锚点,可以在同一个页面的不同位置之间进行跳转。
就像坐电梯我们可以去任意楼层
Eg: 前面写一个<a name='3F'></a> (设置锚点,设置一个位置!)
后边可以写一个<a href='#3f'>手机</a> (访问锚点,按钮就为'手机')
上面为同一页面的跳转,下面是不同页面的跳转:
<a href='设置锚点.html#3F'>超链接</a>
在链接后加上#3F就是直接跳到另一个文件的三层
列表标签:
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>
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>
标签对用来将相关内容组合到一起,将内容形成一部分一部分的内容