目录
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: 21name=%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>