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>

转载于:https://www.cnblogs.com/HUIWANG/p/10947001.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/277612.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Unity中Quaternion的含义及其使用

Unity中Quaternion的含义及其使用

官网API文档&#xff1a; file:///Applications/Unity/Unity.app/Contents/Documentation/html/en/ScriptReference/Quaternion.html Quaternion的意思是四元数&#xff0c;用于代表旋转。 它们是紧致的&#xff0c;不会产生万向节死锁并且能够很容易被插值。Unity内使用Quat…
阅读更多...
Python PIPEs

Python PIPEs

2019独角兽企业重金招聘Python工程师标准>>> https://www.python-course.eu/pipes.php https://www.tutorialspoint.com/python/os_pipe.htm 转载于:https://my.oschina.net/zungyiu/blog/1860857
阅读更多...
延时消息_Handler的消息延时是怎么实现的

延时消息_Handler的消息延时是怎么实现的

消息延时做了什么特殊处理&#xff1f;是发送延时&#xff0c;还是消息处理延时&#xff1f;延时的精度如何&#xff1f;通常我们使用Handler的消息延时都是调用sendMessageDelayed函数实现的&#xff0c;其中delayMillis是需要延时的毫秒。通过跟踪sendMessageDelayed函数可以…
阅读更多...
5月JC学习总结

5月JC学习总结

断剑重铸之日&#xff0c;王者归来之时。为了更美好的明天而战。 五月 悄悄地过了 人儿 不觉中散了 携着一腔热血&#xff1b;来到蛟川 来到机房 微凉的轻风&#xff0c;无声地去了 炽热的骄阳&#xff0c;即将要落了 站在4楼&#xff0c;向窗外眺望&#xff0c;映出的不是夕阳…
阅读更多...
4 关卡流 进阶_全息武器全解析，记住4个点全区第一就是你！

4 关卡流 进阶_全息武器全解析，记住4个点全区第一就是你！

实不相瞒&#xff0c;每次看着全息武器糖糖都感觉自己像钢铁侠高端大气上档次&#xff0c;低调奢华有内涵那么问题来了&#xff01;这个全息武器究竟该怎么玩才能成为真正的钢铁侠&#xff1f;我的使命之全息武器【作者&#xff1a;D38激战阿曼——潜龙小生】全息武器在属性增加…
阅读更多...
terminate called after throwing an instance of 'std::out_of_range' what(): basic_string::substr

terminate called after throwing an instance of 'std::out_of_range' what(): basic_string::substr

运行时报错&#xff1a; terminate called after throwing an instance of std::out_of_rangewhat(): basic_string::substr&#xff1a;__pos Aborted (core dumped) 内存读取越界。 解释1&#xff1a;for example:const std::string sTest( "test" );sTest.substr…
阅读更多...
记一次理想浪漫的毕旅

记一次理想浪漫的毕旅

因为临近毕业离别的氛围和闲散的生活&#xff0c;虽然手头积攒了不少可写的素材和教程&#xff0c;但还是两个月没有在CSDN更新博客。论文答辩之后&#xff0c;我只是每天在宿舍玩玩电脑、打打扑克&#xff0c;唯一让我难受的是&#xff0c;隔几天便送走一位同窗好友。有时甚至…
阅读更多...
【渗透过程】嘉缘网站 --测试

【渗透过程】嘉缘网站 --测试

声明&#xff1a;本片文章测试网站为测试靶场 信息收集阶段&#xff1a; 首先使用了一些常见的扫描工具&#xff1a;nmap 御剑 使用nmap扫描端口 发现网站开放了 135 139 445 3306 等端口 这里可以看到网站开放了一些危害较高端口&#xff1a;135 225等 使用御剑扫描到一些敏感…
阅读更多...
C编程经验总结

C编程经验总结

Turbo c Return (z);return z; 图形界面的有scanf(“%d ~%d\n”,&~,&~);注意&#xff1a;中间不能有乱的东西 Printf(“~~~ %d~~%d\n”,~,~);这儿可以有乱的东西&#xff0c;一切的提示图形界面多是由它完成 函数&#xff0c;变量一定是有类型 除了函数&#xff08;&am…
阅读更多...
文档过期打不开怎么办_标准的产品需求文档在这里！（详细说明版）（2）

文档过期打不开怎么办_标准的产品需求文档在这里！（详细说明版）（2）

接着上篇继续写&#xff0c;上篇请点击标准的产品需求文档在这里&#xff01;(详细说明版)(1)入口已经写完&#xff0c;读此文档的无论是研发人员还是测试都已经知晓此需求需要做的从哪里进入&#xff0c;接下来就是主菜了&#xff0c;进入以后该干嘛。进入以后当然就是新的页面…
阅读更多...
day32

day32

udp(用户数据包协议) 高并发(同时有大量客户端访问服务器,服务器处理不过来)​OSI模型中,属于传输层得协议,仅用于不要求可靠性,以及不要求分组顺序且数据量较小的简单传输,力求快​通讯流程类似对讲机 只管发送不管对方是否接收到,甚至不关心对方存在​UDP可以处理多个客户端,…
阅读更多...
Macbook全系列详细分析及购机指南

Macbook全系列详细分析及购机指南

时至今日&#xff0c;极佳的用户体验、强大的功能、独特的设计感、广阔的市场和无可比拟的品牌魅力已经让苹果公司各种电子产品的迅速普及&#xff0c;其中Macbook逐渐被越来越多的人所青睐&#xff0c;尤其是从事一些特定行业的工作者&#xff08;比如IT、电信、互联网以及艺术…
阅读更多...
惠普m1005连接电脑步骤_电脑连接电视机详细步骤方法图文

惠普m1005连接电脑步骤_电脑连接电视机详细步骤方法图文

电脑连接电视机有什么好处呢&#xff1f;小编想到了几点&#xff0c;那就是屏幕大&#xff0c;而且可以在电视机上使用网络看到自己想看的剧。还有就是可以更多的人一起做着来看。所以总的来说电脑连接电视机还是好处比较多的。下面我就来告诉你们电脑怎么连接电视机。有的时候…
阅读更多...
对程序实施精准手术！阿里安全猎户座实验室首创“自动逆向机器人”

对程序实施精准手术！阿里安全猎户座实验室首创“自动逆向机器人”

近日举办的看雪安全开发者峰会上&#xff0c;阿里安全猎户座实验室首度向外界展示了最新的研究成果——“自动逆向机器人”。该机器人可以像医生一样“望闻问切”&#xff0c;对程序进行显微镜级别的勘察&#xff0c;并完整“回放”其运作过程&#xff0c;因此&#xff0c;可以…
阅读更多...
(24) 不可能的出栈顺序

(24) 不可能的出栈顺序

一、问题描述 给定两个数组&#xff0c;一个进栈顺序&#xff0c;一个出栈顺序。判定出栈数组的出栈顺序是不是有可能的。 二、Code 1 package algorithm;2 3 import java.util.ArrayDeque;4 import java.util.Deque;5 6 /**7 * Created by adrian.wu on 2019/5/30.8 */9 pub…
阅读更多...
《魔兽世界》的魅力究竟在哪儿？

《魔兽世界》的魅力究竟在哪儿？

写在前面&#xff1a;《魔兽世界》&#xff08;World of Warcraft&#xff0c;后面简称WOW&#xff09;&#xff0c;是由暴雪开发的一款大型角色扮演网络游戏&#xff0c;曾经付费的正式用户一度超过1150万人&#xff0c;覆盖244个国家和地区&#xff0c;是曾经的“世界第一网游…
阅读更多...
Service Mesh所应对的8项挑战

Service Mesh所应对的8项挑战

2019独角兽企业重金招聘Python工程师标准>>> Lori Macvittie 微服务架构是把双刃剑&#xff0c;我们享受它带来的开发速度&#xff08;development velocity&#xff09;&#xff0c;却也不得不面对服务间通讯带来的复杂性问题。 目前大多数扩展容器化微服务的架构多…
阅读更多...
stm32cubeide外部中断_【STM32】HAL库 STM32CubeMX教程三----外部中断(HAL库GPIO讲解)

stm32cubeide外部中断_【STM32】HAL库 STM32CubeMX教程三----外部中断(HAL库GPIO讲解)

前言上一节我们讲解了STM32CubeMX的基本使用和工程的配置&#xff0c;那么这一节我们正式来学习CubeMX配置STM32的各个外设功能了今天我们会详细的带你学习STM32CubeMX配置外部中断&#xff0c;并且讲解HAL库的GPIO的各种函数&#xff0c;带你学习不一样的STM32那么话不多说&am…
阅读更多...
html5兼容ie

html5兼容ie

https://www.jb51.net/html5/143049.html转载于:https://www.cnblogs.com/rivsidn/p/10913532.html
阅读更多...
什么叫内部银团_什么是紫钛晶？紫钛晶是不是天然水晶？

什么叫内部银团_什么是紫钛晶？紫钛晶是不是天然水晶？

都说紫钛晶是紫水晶与钛晶的结合&#xff0c;听上去好像这种水晶不是天然的&#xff0c;像是人工合成的&#xff0c;事实上并非如此&#xff0c;紫钛晶也是天然形成的水晶&#xff0c;由于内部的包裹体是金色的&#xff0c;因此被称为紫钛晶。和菩心晶舍家的晶舞倾城一起了解紫…
阅读更多...
最新文章

Copyright @ 2022~2023