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>

HTML 和CSS的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. CF1271E Common Number

    数学+二分 连续打了3场$codeforces$,深深的被各种模拟贪心分类讨论的$C$,$D$题给恶心到了 还有永远看到题一脸懵的$B$题 首先考虑画出不同函数值迭代转移的关系,要注意考虑连边是否能成 ...

  2. 20181301刘天宁 MyOD

    一.题目要求: 1.复习c文件处理内容编写myod.c 2.用myod XXX实现Linux下od -tx -tc XXX的功能 3.main与其他分开,制作静态库和动态库 4.编写Makefile ...

  3. ES6 小记

    1.let & const let:相当于var,不同的是没有变量提升,且只在声明的作用域内有效(新增了块级作用域). Const: 声明一个静态场量,一旦声明,常量的值就不能改变. for. ...

  4. 前言「HarmonyOS应用开发基础篇」

    场景一.随着智能设备种类的不断增多,我们基本上每人都有好几台智能设备,比如智能手机,平板,耳机,音响,穿戴设备等等.这些设备都具有独立性,偶尔的组合也是我们通过手动去搭配,并且不一定能够完全组合在一起 ...

  5. 谈谈volatile

    volatile的作用: volatile关键字的作用包括:保障可见性,保障有序性. 何为保障可见性,看下面的代码: package com.mashibing.thread.lock; public ...

  6. SpringBoot 构建 Docker 镜像的最佳 3 种方式

    本文将介绍3种技术,通过 Maven 把 SpringBoot 应用构建成 Docker 镜像. (1)使用 spring-boot-maven-plugin 内置的 build-image. (2) ...

  7. uboot分析——makefile

    1.makefile分析 $(TOPDIR)/makefile | |-----> include $(obj)/include/config.mk  确定板子环境 | || | V |---- ...

  8. linux配置yum源、mount及yum命令

    配置yum源:  在/mnt目录下新建一个空的目录,名为rhel. [root@localhost mnt]# mkdir rhel 然后 [root@localhost Packages]# cd ...

  9. mysql mybatis Date java时间和写入数据库时间不符差一秒问题

    1,java的数据库实体定义 private Timestamp createTime:2,非常重要!ddl语句建表字段的单位 datetime要手动设置保留3位毫秒数,不然就四舍五入了! ALTER ...

  10. 解决calamari无法获取节点信息的bug

    前言 一直在做calamari的相关的一些打包和安装的工作,都是业余弄的东西,所以并没有仔细的进行功能点的验证测试,正好ceph社区群里面有人问了个问题 calamari上是不是能看到ceph的ver ...