网络传输三大基石: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>标签对用来将相关内容组合到一起,将内容形成一部分一部分的内容



















