HTML+CSS
1 HTTP
socket就是对TCP和UDP的封装, 都是基于网络层的
套接字编程的是CS模式
浏览器访问页面是BS模式
HTTP的特点
1) 支持的是BS模式
2) 简单快速
3) 灵活
4) 无连接: 限制每次链接只处理一次请求
5) 无状态: 不记录状态, 一次连接就从头开始
HTTP URL(统一资源定位符)
格式: http://域名:端口/绝对路径
HTTP请求
HTTP请求 = 请求行 + 消息报头 + 请求正文
1) 请求行
格式
Method Request-URI HTTP-Version CRLF
其中Method表示请求方法, Request-URL表示统一资源定位符, HTTP-version表示HTTP的版本, CRLF表示回车和换行
请求方法:
GET 请求获取Request-URI所标识的资源
POST 在Request-URI所标识的资源后附加新的数据
HEAD 请求获取由Request-URI所标识的资源的响应消息报头
PUT 请求服务器存储一个资源，并用Request-URI作为其标识
DELETE 请求服务器删除Request-URI所标识的资源
TRACE 请求服务器回送收到的请求信息，主要用于测试或诊断
CONNECT 保留将来使用
OPTIONS 请求查询服务器的性能，或者查询与资源相关的选项和需求
2) 请求报头
3) 请求正文
同理HTTP的相应格式是
HTTP响应 = 状态行 + 消息报头 + 响应正文
1) 状态行
格式
HTTP-Version Status-Code Reason-Phrase CRLF
其中Reason-Phrase表示状态码的文本描述
状态码
由三个数字组成, 第一个数字定义相应类别
1xx：指示信息--表示请求已接收，继续处理
2xx：成功--表示请求已被成功接收、理解、接受
3xx：重定向--要完成请求必须进行更进一步的操作
4xx：客户端错误--请求有语法错误或请求无法实现
5xx：服务器端错误--服务器未能实现合法的请求
常见的状态码
200 OK 客户端请求成功
400 Bad Request 客户端请求有语法错误，不能被服务器所理解
401 Unauthorized 请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
403 Forbidden 服务器收到请求，但是拒绝提供服务, 一般是没有权限访问
404 Not Found 请求资源不存在，eg：输入了错误的URL
500 Internal Server Error 服务器发生不可预期的错误
503 Server Unavailable 服务器当前不能处理客户端的请求，一段时间后可能恢复正常
2) 消息报头
3) 响应正文
关于消息报头, 分为普通报头, 请求报头, 相应报头, 实体报头
格式
名字：空格 值
2 HTML
整体结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
HTML分为两部分 DOCTYPE + HTML
其中DOCTYPE表示文件类型, 没有的话浏览器会按照怪异模式解析, 加上之后按照标准模式解析
HTML是整个内容标签, 分为两部分 HEAD + BODY
1) HEAD标签
HEAD分为 META 和 非META标签
关于META标签
<!--网站内容的关键字-->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<!--网站的描述-->
<meta name="description" content="网站信息描述">
<!--经过2秒之后跳转到百度-->
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
<!--文档格式是UTF8-->
<meta http-equiv="content-Type" charset="UTF8">
<!--告诉浏览器以什么浏览器渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7 " />
非META标签
<title>标签标题</title>
<!--设置标签的icon-->
<link rel="icon" href="http://www.jd.com/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="css/drawer.css"/>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
2) BODY
BODY内的标签分为 块级元素 和 内联元素
块级（block）元素的特点：
①总是在新行上开始；
②高度，行高以及外边距和内边距都可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度；
④它可以容纳内联元素和其他块元素。
内联（inline）元素的特点：
①和其他元素都在一行上；
②高，行高及外边距和内边距不可改变；
③宽度就是它的文字或图片的宽度，不可改变；
④内联元素只能容纳文本或者其他内联元素。
1) 块级元素
div:文档节
div没有特殊效果, 使用频率最该
h1,h2,h3,h4,h5,h6:标题
p:段落
ul:无序列表
里面的项目用li表示
ol:有序列表
里面的项目用li表示
table:表格
tr:表格行
th:表头单元格
td:表格单元
caption:表格标题
thead:组合表头内容(th)
tbody:组合主体内容(td)
tfoot:组合表注内容(td)
dl:列表
dt:列表项目
dd:项目描述
form:表单
br:换行(空标签)
hr:水平分割线(空标签)
更多的标签:
section:文档节
dir:目录列表
nav:导航
header:页眉
article:文章
aside:文章侧栏
footer:页脚
details:元素的细节
summary:details元素可见的标题
dialog:对话框窗口
menu:命令的菜单,列表
menuitem:菜单项目
command:命令按钮
fieldset:围绕元素的边框(可用于表单内元素分组)
legend:在边框上的标题
select:选择列表(内联元素)
optgroup:组合选择列表选项
option:选择列表选项(也可做datalist选项)
datalist:下拉列表(id要与input中list属性值绑定)
col:表格列属性;(空标签)
colgroup:表格格式化列组
iframe:内联框架
figure:媒介内容分组
figcaption:figure标题
map:图像映射
area:图像区域
canvas:图形容器(脚本来绘制图形)
video:视频
source:媒介源
track:文本轨道
audio:声音内容
pre:格式文本
blockquote:块引用
address:文档联系信息
center:居中文本(不赞成使用)
spacer:在水平和垂直方向插入空间(空元素)
2) 内联元素
a:链接
img:图片
select:下拉列表
span:内联容器
strong:粗体强调
b:粗体
i:斜体
label:input标记(点击文本触发控件)
input:输入框
textarea:多行文本输入框
更多标签
abbr:缩写
em:强调
mark:突出显示的文本
bdi:文本方向
bdo:文字方向
big:大字体
small:小字体
sup:上标
sub:下标
del:被删除的文本
strike:删除线
s:删除线
ins:被插入的文本
u:下划线
nobr:禁止换行
wbr:单词换行时机(空标签)
tt:打字机文本
kbd:键盘文本
time:日期/时间
cite:引用
q:短引用("")
font:字体设定(不常用)
acronym:缩写(html5不支持)
dfn:字段(不常用)
embed:内嵌(空标签)
button:按钮
keygen:生成秘钥(空标签)
output:输出结果
ruby:中文注音
rt:注音
rp:浏览器不支持ruby元素显示的内容
progress:进度条
meter:度量
var:定义变量
code:计算机代码文本
samp:计算机代码样本
3 CSS
引用CSS的方法
1) 在标签内部用属性style
<p style="background-color: red">hello css</p>
2) 在head中编写style标签
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
3) 在head中使用标签link导入css文件
<link rel="stylesheet" type="text/css" href="css/drawer.css"/>
4) 在head中的style中使用 @import 导入
但是此方法是在网页加载完毕之后再加载CSS文件, 所以页面会闪烁一下(从没有样式到加载样式)
<style type="text/css">
@import"mystyle.css";
</style>
基本选择器
1) 标签选择器
直接是标签名字
div{
}
2) id选择器
使用id定义
使用 #id
id是唯一的, 如果有重复的id, 都会选择到
#myid{
}
3) 类选择器
使用class定义
使用 .类名
class不是唯一的, 可以多个使用 这才是最常用的
.myclass{
}
4) 通配选择器
*{
}
组合选择器
E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 :div,p { color:#f00; }
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝
E > F 子元素选择器，匹配所有E元素的子元素F :div > p { color:#f00; }
E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F :div + p { color:#f00; }
E ~ F 普通兄弟选择器（以破折号分隔） :.div1 ~ p{font-size: 30px; }
属性选择器
E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素
div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
伪类
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
before after伪类 :
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
例：p:before{content:"hello";color:red;display: block;}
CSS优先级
1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
