如何通过优化我的HTML网页内容？
摘要：概念：即 HyperText markup Language 超文本标记语言，作用是定义网页的内容和结构 # HTML元素 HTML由一系列元素 elements 组成，例如： ~~~html Hello,world! ~~~ 元素可以有属
概念：即 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