HTML 和CSS
1 HTML 介绍
1.1 web 服务本质
import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(8096)
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"<h1>Hello world!</h1>")
conn.close()
浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
1.2HTML是什么？
超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm
1.3HTML文档结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css样式优先级</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>声明为HTML5文档。
<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
<title>、</title>定义了网页标题，在浏览器标题栏显示。
<body>、</body>之间的文本是可见的网页主体内容。
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
1.4HTML标签格式
HTML标签是由尖括号包围的关键字，如<html>, <div>等
HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
也有一部分标签是单独呈现的，比如：<br/>、<hr/>、< img src="1.jpg" />等。
标签里面可以有若干属性，也可以不带属性。
标签的语法：
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
几个很重要的属性：
id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
style：规定元素的行内样式（CSS样式）
1.5HTML注释
<!注释内容>
1.6标签
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
2.常用标签
2.1 head内常用标签
标签
意义
<title><title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件或网站图标
<meta/> 定义网页原信息
Meta标签
Meta标签介绍：
<meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的。
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" c
三种引入CSS样式的方式
head内style标签内部直接书写CSS代码
link标签引入外部CSS文件
直接在标签内通过style属性书写CSS样式
ps:注意页面css样式通常都应该写在单独的css文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{color:red}
</style>
<link rel="stylesheet" href="css文件名">
</head>
<body>
<p style="color:deeppink">我是一个p标签</p>
</body>
</html>
基本选择器
标签选择器
ID选择器
类选择器
通用选择器
基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器 所有span标签的颜色都是红色*/
span {
color: red;
}
id选择器
#s1 {
font-size: 24px;
}
类选择器
.c1 {
color: orange;
}
通用选择器
* {
color: blue;
}
</style>
</head>
<body>
<span id="s1">span</span>
<div class="c1">div
<p>p
<span>span</span>
</p>
</div>
<div class="c1">div</div>
</body>
</html>
标签通常都必须有的属性
id 用来唯一标识标签
class 标签类属性，可以有多个值
ps:你可以把它理解成Python面向对象的继承
组合选择器
后代选择器
儿子选择器
毗邻选择低
弟弟选择器
组合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器 div里面所有的span标签都变成蓝色 子子孙孙*/
div span{
color: blue;
}
/*儿子选择器*/
div>span {
color: red;
}
/*毗邻选择器 对下不对上*/
div+span {
color: blue;
}
/*弟弟选择器 对下不对上*/
div~span {
color: deeppink;
}
</style>
</head>
<body>
<span>我是div上面的span</span>
<div>
<span>我是div里面的第一个span</span>
<p>我是div里面的第一个p
<span>我是div里面的第一个p里面的span</span>
</p>
<span>我是div里面的第二个span</span>
</div>
<span>我是div下面的第一个span</span>
<span>我是div下面的第二个span</span>
</body>
</html>
属性选择器
伪类选择器
伪元素选择器
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*只要有xxx属性名的标签都找到*/
[xxx] {
color: red;
}
/*只要标签有属性名为xxx并且值为1*/
[xxx='1'] {
color: blue;
}
/*规定p标签内部必须有属性名为xxx并且值为2的标签*/
p[xxx='2'] {
color: green;
}
</style>
</head>
<body>
<span xxx="2">span</span>
<p xxx>我只有属性名</p>
<p xxx="1">我有属性名和属性值并且值为1</p>
<p xxx="2">我有属性名和属性值并且值为2</p>
</body>
</html>
你可以给任意的标签加任意的属性名和属性值
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link {
color: red;
}
a:hover {
color: yellow;
}
a:active {
color: black;
}
a:visited {
color: green;
}
input:focus {
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="http://www.xiaohuar.com">笑话网</a>
<a href="http://www.sogo.com">搜狗网</a>
<input type="text">
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p:first-letter {*/
/*color: red;*/
/*font-size: 24px;*/
/*}*/
p:before {
content: '*';
color: green;
}
p:after {
content: '?';
color: deeppink;
font-size: 48px;
}
</style>
</head>
<body>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
</body>
</html>
分组与嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
color: red;
}
p {
color: red;
}
span {
color: red;
}
/*分组*/
div,p,span {
color: blue;
}
/*嵌套:不同的选择器可以共用一个样式
后代选择器与标签组合使用*/
div p,span {
color: red;
}
</style>
</head>
<body>
<div>div</div>
<p>p</p>
<span>span</span>
</body>
</html>
选择器优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1 {
color: green;
}
.c1 {
color: aqua;
}
p {
color: red;
}
</style>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<p id="p1" class="c1">p</p>
<p id="p1" class="c1" style="color: blue">p</p>
</body>
</html>
选择器优先级
相同选择器 不同引入方式
就近原则 谁越靠近标签谁说了算
不同选择器 相同的引入方式
行内样式 > id选择器 > 类选择器 > 标签选择器
样式修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 100px;
}
p {
font-family: "Sitka Banner", "Arial", sans-serif
}
p {
font-size: 16px;
font-weight: lighter;
}
</style>
</head>
<body>
<div>div</div>
<div>div</div>
<p>以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可</p>
</body>
</html>
如何修改标签样式
宽和高
文本颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: red;
color: rgb(0,0,255);
color: #FF6700;
color: rgba(0,0,255,0.8);
}
</style>
</head>
<body>
<p>以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可</p>
</body>
</html>
文本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
text-align: right;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-indent: 48px;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>以把多个字体名称作为</p>
<a href="http://www.xiaohuar.com">笑话网</a>
</body>
</html>
背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: green;
background-image: url("1.png");
background-repeat: no-repeat;
background-position: center;
background: no-repeat center url("1.png") blue ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
背景图片示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height: 400px;
background-color: tomato;
}
.box {
height: 400px;
background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");
background-attachment: fixed;
}
.c2 {
height: 400px;
background-color: red;
}
.c3 {
height: 400px;
background-color: fuchsia;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="box"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
/*border-width: 3px;*/
/*border-style: dashed;*/
/*border-color: deeppink;*/
border: 3px solid red;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
画圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: red;
border: 3px solid black;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div {*/
/*display: none;*/
/*}*/
/*inline将块儿级标签变成行内标签*/
/*div {*/
/*display: inline;*/
/*}*/
/*span {*/
/*display: block;*/
/*}*/
/*将选择的标签既具有行内标签特点又有块儿级标签的特点*/
span {
display: inline-block;
height: 400px;
width: 400px;
background-color: red;
border: 3px solid black;
}
</style>
</head>
<body>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
</body>
</html>
