前端学习第一站——HTML+CSS

1 什么是HTML？

2 HTML 元素

3 HTML页面

1 什么是HTML？

即 HyperText Markup language 超文本标记语言，咱们熟知的网页就是用它编写的，HTML 的作用是定义网页的内容和结构。

HyperText 是指用超链接的方式组织网页，把网页联系起来
Markup 是指用 <标签> 的方式赋予内容不同的功能和含义

2 HTML 元素

HTML 由一系列元素 elements 组成，例如

<p>Hello, world!</p>

整体称之为元素
<p> 和 </p> 分别称为起始和结束标签
标签包围起来的 Hello, world 称之为内容
p 是预先定义好的 html 标签，作用是将内容作为一个单独的段落

元素还可以有属性，如

<p id="p1">Hello, world!</p>

属性一般是预先定义好的，这里的 id 属性是给元素一个唯一的标识

元素之间可以嵌套，如

<p>HTML 是一门非常<b>强大</b>的语言</p>

错误嵌套写法：

<p>HTML 是一门非常<b>强大的语言</p></b>

不包含内容的元素称之为空元素，如

<img src="1.png">
<img src="1.png"/>

img 作用是用来展示图片
src 属性用来指明图片路径

3 HTML页面

前面介绍的只是单独的 HTML 元素，它们可以充当一份完整的 HTML 页面的组成部分

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <p id="p1">Hello, world!</p>
    <img src="1.png">
  </body>
</html>

html 元素囊括了页面中所有其它元素，整个页面只需一个，称为根元素
head 元素包含的是那些不用于展现内容的元素，如 title，link，meta 等
body 元素包含了对用户展现内容的元素，例如后面会学到的用于展示文本、图片、视频、音频的各种元素

4 常见的HTML元素

4.1 文本元素

1. 标题元素 h：

<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>

2. 段落元素 p

x <p>段落</p>

3. 列表元素（无序和有序）：

无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

有序列表

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

列表还可以嵌套

<ul>
    <li>
    	北京市
        <ul>
            <li>海淀区</li>
            <li>朝阳区</li>
            <li>昌平区</li>
        </ul>
    </li>
    <li>
    	河北省
        <ul>
            <li>石家庄</li>
            <li>保定</li>
        </ul>
    </li>
</ul>

4. 超链接 a：

 <!-- 超链接 -->

    <a href="1.html">本地网页</a>
    <a href="http://www.baidu.com">互联网网页</a>
    <a href="#p1">网页中锚点</a>
    <hr>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <p id="p1">很下面的内容</p>
    <a href="#">回到顶部</a>

4.2 多媒体元素

1. 图片元素img

<img src="文件路径">

src 格式有 3 种

文件地址
data URL，格式如下

data:媒体类型;base64,数据

object URL，需要配合 javascript 使用

2. 视频元素 video

<video src="文件路径"></video>

3. 音频 audio

<audio src="文件路径"></audio>

4.3 表单元素（重点）

表单的作用：收集用户填入的数据，并将这些数据提交给服务器

<form action="服务器地址" method="请求方式" enctype="数据格式">
    <!-- 表单项 -->
    
    <input type="submit" value="提交按钮">
</form>

常见的表单项

文本框

<input type="text" name="uesrname">

密码框

<input type="password" name="password">

隐藏框

<input type="hidden" name="id">

日期框

<input type="date" name="birthday">

单选框

x <input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">

多选框

<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">

文件上传：

<input type="file" name="avatar">

完整的表单：

<!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>Document</title>
</head>
<style>
</style>
<body>
    <form action="http://localhost:8080/front" >
        username:<input type="text" name="username"/>
        <br>
        password:<input type="password" name="password"/>
        <input type="hidden" name="id" value="1"/>
        <br>
        birth:<input type="date" name="birthday"/>
        <br>
        男<input type="radio" name ="sex" value="男">
        女<input type="radio" name ="sex" value="女">
        <br>
        唱<input type="checkbox" name ="fav" value="唱">
        跳<input type="checkbox" name ="fav" value="跳">
        rap<input type="checkbox" name ="fav" value="rap">
        篮球<input type="checkbox" name ="fav" value="篮球">
        <br>
        <input type="submit" value="提交"/>
    </form>
</body>
</html>

5 Http请求

5.1 请求组成

请求由三部分组成

请求行
请求头
请求体

5.2 请求方式与数据格式

1. get 请求示例

GET /test2?name=%E5%BC%A0&age=20 HTTP/1.1
Host: localhost

%E5%BC%A0 是【张】经过 URL 编码后的结果

2. post 请求示例

POST /test2 HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded
Content-Length: 21

name=%E5%BC%A0&age=18

application/x-www-form-urlencoed 格式细节：

参数分成名字和值，中间用 = 分隔
多个参数使用 & 进行分隔
【张】等特殊字符需要用 encodeURIComponent() 编码为【%E5%BC%A0】后才能发送

3. json 请求示例

POST /test3 HTTP/1.1
Host: localhost
Content-Type: application/json
Content-Length: 25

{"name":"zhang","age":18}

json 对象格式

{"属性名":属性值}

其中属性值可以是

字符串 ""
数字
true, false
null
对象
数组

json 数组格式

[元素1, 元素2, ...]

4. multipart 请求示例（文件上传）

请求方式必须为post，请求体方式为form-data

POST /test2 HTTP/1.1
Host: localhost
Content-Type: multipart/form-data; boundary=123
Content-Length: 125

--123
Content-Disposition: form-data; name="name"

lisi
--123
Content-Disposition: form-data; name="age"

30
--123--

boundary=123 用来定义分隔符
起始分隔符是 --分隔符
结束分隔符是 --分隔符--

数据格式小结

客户端发送

编码
- application/x-www-form-urlencoded ：url 编码
- application/json：utf-8 编码
- multipart/form-data：每部分编码可以不同
表单只支持以 application/x-www-form-urlencoded 和 multipart/form-data 格式发送数据
文件上传需要用 multipart/form-data 格式
js 代码可以支持任意格式发送数据

服务端接收

对 application/x-www-form-urlencoded 和 multipart/form-data 格式的数据，Spring 接收方式是统一的，只需要用 java bean 的属性名对应请求参数名即可
对于 applicaiton/json 格式的数据，Spring 接收需要使用 @RequestBody 注解 + java bean 的方式

6 CSS

6.1 什么是css

Cascading Style Sheet 叠加级联样式表

CSS:表现层（美化网页）

字体、颜色、边距、高度、宽度、背景图片、网页动画、网页浮动...

6.2 快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范:<style>可以编写css代码
        语法：
            选择器{
                声明1;
                声明2;
                声明3;
               }-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>我是标题</h1>
</body>
</html>

CSS的优势：

内容和表现分离
网页结构表现单一，可以实现复用
样式十分丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录

6.3 CSS3种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--2.内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
    <!--3.外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>



<!--1.行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<!--优先级:就近原则，谁离他近就调用什么样式
    这里  行内>外部>内部  -->
<body>
    <h1 style="color: red">我是标题</h1>
</body>
</html>

扩展：外部样式的两种写法

1. 链接式:html

<style> 
<link rel="stylesheet" href="css/style.css">
</style>

2. 导入式:Css2.1专属

<style>
	@import "css/style.css";
</style>

二者的区别：

link属于html标签，而@import是css提供的。
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载的。
兼容性问题：@import只在IE5以上才能识别，而link是html标签，无兼容性问题。
权重问题:@import的权重要高于link。
DOM操作:DOM可以操作link中的样式，而不可以操作@import中的样式。

6.4 常用选择器

1. 基本选择器

标签选择器：选择一类标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器，或选择到页面上所有这个标签的元素*/
        h1{
            color: #a13d30;
            background-color: #3cbda6;
            border-radius: 10px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>

<body>
    <h1>学html</h1>
    <h1>学html</h1>
    <p>这是一个段落标签</p>
</body>

</html>

类选择器 class，选择所有class属性一致的标签，跨标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /*
        类选择器的格式，.class的名称{}
        好处:可以多个标签归类，是同一个class，可以复用
        */
        .hua{
            color: red;
        }
        .zhong{
            color: yellow;
        }
    </style>
</head>
<body>
    <h1 class="hua">标题1</h1>
    <h1 class="zhong">标题2</h1>
    <h1 class="hua">标题3</h1>
    <p class="hua">P标签</p>
</body>
</html>

id选择器：全局唯一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        /*id选择器:#id名称{}
            id必须保证全局唯一，不可复用
            优先级:id选择器>class选择器>标签选择器
        */
        #hua{
            color: #ff008a;
        }
        .style1{
            color: #02ff00;
        }
        h1{
            color: #2d1dc1;
        }
    </style>
</head>
<body>
    <h1 id="hua" class="style1">标题1</h1>
    <h1 class="style1">标题2</h1>
    <h1 class="style1">标题3</h1>
    <h1>标题4</h1>
    <h1>标题5</h1>
</body>
</html>

2. 层次选择器

先看结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
</head>
<body>
    <p>p0</p>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
    <p class="active">p7</p>
    <p>p8</p>
</body>
</html>

后代选择器：所有的后代

/*后代选择器 所有的后代*/
body p{
    background-color: red;
}

子代选择器:只有下一代

body >p{
	background-color: #02ff00;
}

相邻兄弟选择器:相邻的，下面一个同类型的

.active + p{
    background-color: #3cbda6;
}

通用选择器：下面所有同类型的

.active~p{
            background-color: #ff008a;
        }

3. 属性选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background-color: #2700ff;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }

        /*  属性选择器
            属性名 = 属性值
            = :绝对等于
            *= :包含这个元素
            ^= :以...为开头的元素
            $= :以...为结尾的元素*/
        /*1.存在id属性的元素*/
        /* a[id]{
            background-color: yellow;
        }*/
        /*2.选择id等于first的元素*/
        /*a[id=first]{
            background-color: yellow;
        }*/

        /*class中有link的元素*/
        /*a[class*="links"]{
            background-color: yellow;
        }*/

        /*选中href中以http开头的元素*/
        /*a[href^=http]{
            background-color: yellow;
        }*/

        /*选中以pdf结尾的元素*/
        a[href$=pdf]{
            background-color: yellow;
        }

    </style>
</head>
<body>
    <p class="demo">
        <a href="https://www.baidu.com" class="links item first" id="first">1</a>
        <a href="" class="links item first" target="_blank" title="test">2</a>
        <a href="img/123.html" class="links item">3</a>
        <a href="img/123.png" class="links item">4</a>
        <a href="img/123.jpg" class="links item">5</a>
        <a href="abc" class="links item">6</a>
        <a href="/a.pdf" class="links item">7</a>
        <a href="abc.doc" class="links item">8</a>
        <a href="abcd.doc" class="links item">9</a>
    </p>

</body>
</html>