🚩前言

🌻今天开始进入javaweb阶段，不同于最初的web阶段，我们将深入的进行前端的部分学习，即便我们所学的仍旧是冰山一角，但是对于后端开发者已经足够。

✏️HTML

📌什么是html

HTML是用来描述网页的一种语言
HTML叫做超文本标记语言
HTML是一种标记语言
标记语言就是一套标记标签
HTML使用标记标签来描述网页

📌网页是由谁来解析的

浏览器
IE
Firefox 火狐——flash中文
safari （浏览器内核webkit）苹果
chrome （浏览器内核blink）谷歌浏览器（推荐）——业界标杆
Opera 手机端
UC，360，百度，搜狗
HTML标记标签通常称为HTML tag
HTML的标签由成对出现的尖括号包围关键字，比如
HTML标签通常是成对出现的，标签中第一个标签是开始标签，第二个标签是结束标签
结束标签是由/结束的
开始标签和结束标签也被称为开放标签和闭合标签

📌什么是网页

html文档描述的就是网页
HTML文档包含了HTML的标签和纯文本
HTML文档就把称为网页
web浏览器的作用是读取HTML文档，并以网页的形式显示出他们，浏览器不会显示HTML标签，而是使用HTML标签来展示页面的内容

📌HTML头部

head元素包含了所有的头部信息元素
title：定义了浏览器工具栏的标题，当网页被收藏到收藏夹，显示的默认标题，显示在搜索引擎结果页面的标题
base：描述了基本的链接地址或者是链接目录，作为HTML文档中所有的链接
link：是引用css层叠样式表
style：是定义css层叠样式表
script：既可以定义script脚本，也可以引用script文件。——【不建议写在head里，写在结束body的最下方】
meta：元数据——用来指定网页的描述，关键词，文件的最后修改时间，网页的作者

✒️HTML标签

 <!-- 标题 -->
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
    <p>这是一个段落</p> 上下各空一行字体不变
    <hr size="24">  有属性的标签
    <br>
    <!-- 注释:解释说明的作用 -->
    <!-- 格式化的一些标签 -->
    <b>粗体文本</b>
    <code>计算机代码 main</code>
    <em>强调文本(斜体)</em>
    <kbd>键盘输入</kbd>
    <pre>预处理(预文本)</pre>
    <small>更小的文本</small>
    <strong>重要的文本</strong>
    <del>删除线</del>
    lg<sub>100</sub>=2  
    2<sup>3</sup>=8
    <font color="green">字体</font>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

✒️超级链接

<!-- 超级链接 -->
    <a href="https://www.baidu.com" target="_self">普通的链接</a>
    <br>
    <a id="tip">锚记连接---提示部分</a>

    <a href="https://www.baidu.com">图像标签<img src="img/a.webp" alt=""></a>
    <a href="2478583866@QQ.com">邮箱链接</a>
    <a href="#tip">跳到提示部分</a>
1
2
3
4
5
6
7
8

✒️图片

<!-- 图片img -->
    <img src="img/a.webp" alt="" align="center">对齐和后面的文本
1
2

✒️行级与块级元素

 <!-- 文档中的块级和行级元素
        块级元素:自占一行----自带换行功能----div,h,p,from,ul,ol
        行级元素:自己没有换行的功能 ----a,span,del,sup,sub,strong
    -->
    <div>文档中的块级元素</div>
    <span>文档中的行级元素</span>
1
2
3
4
5
6

✒️列表

  <!-- 列表 -->
    <!-- 无序列表 -->
    <ul type="disc">
        <li>项目1</li>
        <li>项目2</li>
    </ul>
    <!-- 有效列表 -->
    <ol type="a">
        <li>项目123</li>
        <li>项目123</li>
        <li>项目123</li>
        <li>项目123</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
        <dt>项目</dt>
        <dd>描述项目1</dd>
        <dt>项目2</dt>
        <dd>描述项目2</dd>
    </dl>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

✒️表格

 <!-- 表格 -->
    <table border="1" cellpadding="10内边距" width="1100" cellspacing="0单元格边距">
        <thead>
            <tr>
                <th >学号</th>
                <th>姓名</th>
                <th>联系方式</th>
                <th>毕业院校</th>
                <th >国籍</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>罗永浩</td>
                <td>13523142421</td>
                <td>延边第二中学</td>
                <td rowspan="3">中国</td>
            </tr>
            <tr>
                <td>1002</td>
                <td>罗翔</td>
                <td>13125691131</td>
                <td>北京大学法学院</td>
            </tr>
            <tr>
                <td>1003</td>
                <td>樊登</td>
                <td>15521256672</td>
                <td>西安交通大学</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5" align="center">他们都是有钱人</td>
            </tr>
        </tfoot>
    </table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

✒️框架

 <!-- 框架 -->
    <iframe src="https://tiyu.baidu.com/match/lpl/tab/%E8%B5%9B%E7%A8%8B/from/baidu_aladdin" frameborder="1"  width="800" height="600"></iframe>
1
2

✒️表单

 <!--表单 -->
    <form action="" method="post">
        <p>账户:
            <input type="text">
        </p>
        <p>密码:
            <input type="password">
        </p>
        <p>性别:
            <input type="radio" name="gender" checked>男
            <input type="radio" name="gender">女
        </p>
        <p>地址:
            <select multiple --多选>
                <option value="">请选择省</option>
                <option value="">吉林省</option>
                <option value="">北京市</option>
            </select>
            <select >
                <option value="">请选择市</option>
                <option value="">长春市</option>
                <option value="">北京市</option>
            </select>
            <select >
                <option value="">请选择区</option>
                <option value="">朝阳区</option>
                <option value="">三里屯</option>
            </select>
        </p>
        <p>爱好:
            <input type="checkbox">读书
            <input type="checkbox">游泳
            <input type="checkbox" checked>打扑克
        </p>
        <p>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>
        <p>邮箱:
            <input type="email" name="" id="">自带验证功能
        </p>
        <p>数字
            <input type="number" name="" id="">
        </p>
        <p>头像
            <input type="file" name="" id="">
        </p>
        <p>隐藏
            <input type="hidden" name="" id="">
        </p>
        <p>
            <input type="submit" value="自来也">
            <input type="reset" name="" id="">
            <input type="button" value="卡卡西">

            <button type="submit">提交</button>
            <button type="button">自定义</button>
            <button type="reset">重置</button>
        </p>
    </form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

action：数据提交后台地址
method：数据提交方式
get：默认值，会把所有的提交的数据拼接在地址栏——【不安全，有长度的限制】
post：封装一个请求体，把数据提交给后台，不会拼接——【安全，没有长度限制】
readonly与disabled的区别
readonly可以提交到后台
disabled不可以提交到后台

✒️音频标签和视频标签

  <!-- 定义音频内容 -->
    <audio src=""></audio>
    <!-- 定义视频内容 -->
    <video src=""></video>
1
2
3
4

✒️转义字符

&nbsp；  空格
&alt ：	&
1
2

✒️HTML4与HTML5之间的关系

在HTML4里几个标签在HTML5中有的被删除有的被废弃
HTML5在2012年成为稳定的版本
HTML5新增
画布
多媒体
重力感应
地图
webSocket——网页端的网络通信

✏️CSS

✒️类选择器

  /* 类选择器可以选择多个用空格隔开 */
        .fontstyle{
            color: red;
            font-size: 20px;
        }
        .backcolor{
            background-color: aqua;
        }
1
2
3
4
5
6
7
8

✒️id选择器

   /* id选择器 每个标签元素的id是唯一的不能重复*/
        #dd{
            color: blue;
            font-size: 30px;
        }
标签选择器
       /* 标签选择器 */
        p{
            font-family: "仿宋";

        }
1
2
3
4
5
6
7
8
9
10
11

✒️全部选择器

/* 通配符,全部选择器 页面初始化*/
*{
margin: 0;
padding: 0;
}

✒️组合选择器

/* and 组合选择器 */
        h1,div{
            font-size: 100px;
        }
        /* 后代选择器 */
        div p{
            background-color: red;
        }
        /* 子选择器 */
        div>p{
            background-color: aqua  ;
        }
        /* 紧跟着div的p元素 */
        div+p{
            background-color: pink;
        }
        /* 属性选择器 */
        input[name]{
            color: red;
            width: 1000px;
            font-size: 50px;
        }
        input[name=username]{
            color: blue;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

✒️伪类选择器

a{
            color: red;
        }
        /* 初始状态 */
        a:link{
            color: blueviolet;
        }
        /* 激活状态 */
        a:active{
            color: aqua;
        }
        /* 鼠标悬停状态 */
        a:hover{
            color: greenyellow;
        }
        /* 访问过的状态 */
        a:visited{
            color: black;
        }
        img:hover{
            width: 200px;
        }
        p::first-letter{
            color: red;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

☀️总结

快速的进行过去的html以及css的部分学习，并加入了一点新的东西，通过代码块的练习可以快速回忆起过去所学，以便投入到更深入的学习当中。