HTML
概念：即 HyperText markup Language 超文本标记语言，作用是定义网页的内容和结构
HTML元素
HTML由一系列元素 elements 组成，例如：
<p>
Hello,world!
</p>
元素可以有属性，如
<p id="p1">
Hello,world!
</p>
元素之间可以嵌套，如
<p>
HTML 是一门非常<b>强大</b>的语言
</p>
不包含内容的元素称之为空元素，如
<img src="1.png">
or
<img src="1.png"/>
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 元素包含的是不用于展现内容的元素
- body 元素包含的是对用户展现内容的元素
常见元素
1.文本
-
Heading
<h1>1号标题</h1> <h2>2号标题</h2> <h3>3号标题</h3> <h4>4号标题</h4> <h5>5号标题</h5> <h6>6号标题</h6> -
Paragraph
<p> 段落 </p> -
List
无序列表
<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> -
Anchor
<a href="网页地址">超链接文本</a>
2.多媒体
-
Image
<img src="文件路径">src格式有3种
-
文件地址
-
data URL
data:媒体类型；basa64,数据 -
object URL
-
-
Video
<video src="文件路径" width="300" controls></video> -
Audio
<audio src="文件路径" controls></audio>
3.表单
收集用户填入的数据，并将这些数据提交给服务器
<form action="服务器地址" method="请求方式" enctype="数据格式">
<!-- 表单项 -->
<input type="submit" value="提交按钮">
</form>
- method 请求方式有
- get(默认) 提交时，数据跟在URL地址之后
- post 提交时，数据在请求体内
- enctype 在 post 请求时，指定请求体的数据格式
- application/x-www-form-urlencoded（默认）
- multipart/form-data
- application/json
- 其中表单项提供多种收集数据的方式
- 表单只支持以 application/x-www-form-urlencoded 和 multipart/form-data 格式发送数据
- 文件上传需要用 multipart/form-data 格式
- js 代码支持任意格式发送数据
常见的表单项
-
文本框
<input type="text" name="username"> -
密码框
<input type="password" name="password"> -
隐藏框
<input type="hidden" name="id" value="1"> -
日期框
<input type="date" name="birthday"> -
单选
checked：默认项
<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">
session 原理
Http 无状态，有会话
- 无状态：请求之间相互独立，第一次请求的数据，第二次请求不能重用
- 有会话：客户端和服务端都有相应的技术，可以暂存数据，让数据在请求间共享
存
GET /s1?name=zhang HTTP/1.1
Host: localhost
取
GET /s2 HTTP/1.1
Host: localhost
Cookie: JSESSIONID-BF219FEFB6FF690DA2537CDDED6C393
CSS
即Cascading Style Sheets,它描述了网页的表现与展示效果
1.选择器
- type 选择器 - 根据标签名进行匹配（元素选择器）
- class 选择器 - 根据元素的 class 属性进行匹配
- id 选择器 - 根据元素的 id 属性进行匹配
class 可重复，id 不可重复
优先级：id > class > type
2.属性和值
- background-color: red
- ...
- display
3.布局
与布局相关的 html 元素
- div
- template
