html_css基础

最新推荐文章于 2022-11-30 21:37:28 发布

小鹿的

最新推荐文章于 2022-11-30 21:37:28 发布

阅读量225

点赞数

本文链接：https://blog.csdn.net/yutu75/article/details/108716384

版权

html 服务端接收端
import socket
server = socket.socket()
IP_PORT = (127.0.0.1,8001)
sever.bind(IP_PORT)
server.listen()
while 1:
   conn,addr = server.accept()
   from_clicet_msg = conn.recv(1024)
   print(from_clicet_msg_decode('utf-8'))
   conn.sed(b'HTTP/1.1 200 ok\r\n\r\n')
   with open( 'test' ,'rb') as f:
       data = f.read()
   conn.send(data)
   conn.close()

HTML 标签
HTML 指的是超文本标记语言

<title> 标签定义文档的标题
<link> 标签最常用于连接样式表 #<link rel="stylesheet" type="text/css" href="mystyle.css" />
<link rel="icon" href="图标文件路径"> #link 图标
<style> 标签用于为 HTML 文档定义样式信息
<meta>
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面
<meta name="keywords" content="被搜素的内容" />

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

<br>    #标签定义换行
<hr>    #创建水平线
<!-->   #定义注释。
<p></p>
段落标签
<a href = ""></a>
跳转链接 href 属性中指定链接的地址
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
<img src="boat.gif" alt="Big Boat">
插入图像
alt 无法载入图像时，替换文本属性告诉读者她们失去的信息
<table border="1">
创建表格 border表示边框大小
<th>
表格的表头
<tr>
表示每个表格的行
<td>
表示表单每一行的单元格

<ul> 标签
无序列表粗体圆点进行标记
list-style: none; 去除圆点
padding:0; # 去除内边距可以加-left bottom right top
margin：0; #去除外外边距可以加-left bottom right top
<li>
无序列表的列表项
<ol> 标签
有序列表列表项目使用数字进行标记
<li> 标签
有序列表的每个列表项

HTML 块元素
例子：<h1>, <p>, <ul>, <table>，<div>
HTML 内联元素
例子：<b>, <td>, <a>, <img>，<span>

<input> 输入框
placeholder="请输入用户名" #在文本框里加东西
<input type="text"> 普通文本输入框
<input type="password"> 密文输入框
<input type="submit" value="登录"> 提交按钮触发form表单提交数据的动作
<input type="reset"> 重置按钮清空输入的内容
<input type="button" value="注册"> 普通按钮不会触发form表单提交数据的动作
<input type="date"> 时间日期输入框
<input type="file"> 文件选择框
<input type="number"> 纯数字输入框
单选框
性别
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
复选框(多选框)
喜欢的明星:
<input type="checkbox" name="hobby" value="1"> 波多
<input type="checkbox" name="hobby" value="2"> 小泽
<input type="checkbox" name="hobby" value="3"> 仓井

select下拉框标签
性别
<select name="sex" >
<option value="1">男</option>
<option value="2">女</option>
</select>

textarea 多行文本输入框
<textarea name="" cols="30" rows="10">
</textarea>

HTML 元素的属性：
class #规定元素的类名（classname）
id   #规定元素的唯一 id
style   #规定元素的行内样式（inline style）
title   #规定元素的额外信息
<center>   #定义居中的内容
<font> 和 <basefont> #定义 HTML 字体
<s> 和 <strike>       #定义删除线文本
<u>           #定义下划线文本
<i>           #定义斜体字
<b>           #定义粗体文本
<blockquote>       #元素进行缩进处理配合p使用
<abbr>           #定义缩写或首字母缩略语配合p使用
<cite>           #定义著作的标题
<style>           #定义样式定义。
<link>           #定义资源引用。
<div>           #定义文档中的节或区域（块级）
<span>           #定义文档中的行内的小块或区域。
align           #定义文本的对齐方式
bgcolor           #定义背景颜色
color          #定义文本颜色
<h1> - <h6>        #标题

css样式引入方式
第一种
head标签中引入
<style>
/* 选择器{css属性名称:属性值;css属性名称:属性值;} */
div{
/* css注释 */
width: 200px;
height: 200px;
background-color: red;
}
</style>
第二种方式
外部文件引入工作中常用的
创建一个css文件,stylesheet文件,比如test.css文件
里面写上以下代码
div{
/* css注释 */
width: 200px;
height: 200px;
background-color: red;
}
在想使用这些css样式的html文件的head标签中写上下面的内容
<link rel="stylesheet" href="test.css"> href对应的是文件路径
第三种引入方式
内联样式:
<div style="background-color: red;height: 100px;width: 100px;"></div>

css选择器
d选择器
<div id="d1"></div>
#d1{
background-color: green;
width: 100px;
height: 100px;
}

类选择器
<div id="d1" class="c1"></div>
.c1{
background-color: green;
width: 100px;
height: 100px;
}
属性选择器
<div id="d1" class="c1" xx="ss"></div>
[xx]{ 属性查找
background-color: green;
width: 100px;
height: 200px;
}
后代选择器
/* 后代选择器 */
<div id="d3" class="c1">
<span class="c2">span3</span>
</div>
.c1 .c2{
color:blue;
}
/* 儿子选择器 */
.c1 > span{
color:blue;
}
组合选择器 (逗号连接)
<div id="d1">
<span class="c2">span1</span>
</div>
<div id="d3" class="c1">
<span class="c2">span3</span>
</div>
#d1 span,#d3 span{ /* 组合选择器 */
color:green;
}

css样式相关
高度宽度
div{
height: 100px;
width: 100px;
background-color: pink;
}
字体相关
span{
font-size:20px; /* 字体大小 */
color:blue; /* 字体颜色 */
font-family: '楷体','宋体'; /* 字体 */
font-weight: 100; /* 字重字体粗细 100-900，默认是400 */

}

字体对齐
div{
font-size:20px; /* 字体大小 */
color:blue; /* 字体颜色 */
font-family: '楷体','宋体'; /* 字体 */
font-weight: 100; /* 字重字体粗细 100-900，默认是400 */
height: 200px;
width: 200px;
border: 1px solid red;
text-align: center; /* left左对齐，center水平居中，right右对齐 */
line-height: 200px; /* 和height相等，文本内容就能垂直居中对齐 */

}
颜色设置
/*background-color: red; 英文单词*/
/*background-color: #7969d2; 16进制数表示*/
background-color: rgb(92, 187, 138); /* rgb颜色表示方法 */
/*background-color: rgba(92, 187, 138,0.5); !* rgba加上了透明度，透明度的取值范围0-1 *!*/
background-repeat:no-repeat;        /*设置定位与不平铺*/
height: 100px;
width: 100px;
color:red;
opacity: 0.2; /* 整个标签设置透明度 */
边框
# 四个方向单独设置
border: 1px dashed red;     /* 下面三个简写形式 */
border-width: 10px;      /* 线宽 */
border-style: solid;       /* 线样式 */
border-color: blue;       /* 线颜色 */
border-left:10px solid yellow;/* 单边框的简写形式 */

盒子模型
占用空间大小:内边距+边框+content
margin: 外边距距离其他标签或者自己父级标签的距离
padding: 内边距内容和边框之间的距离
border: 边框
content: 内容部分设置的width和height

display属性
display: inline;!       /* 将块级标签改为内敛标签 *!/
display: inline-block;!   /* 将标签改为具有内敛标签和块级标签属性效果的标签，可以设置高度宽度，而且不独占一行 *!*/
display: none;       /* 隐藏标签,！ */ *****常用****/
display: block;        /* 将内敛标签改为块级标签 */
display: flex;       /*弹性盒子*/
align-items:center;       /*弹性盒子内容居中*/
伪元素选择器
div:before{       /*元素的内容之前插入新内容*/
content: '*';
}
元素的内容前面插入新内容

h1:after /*元素的内容之后插入新内容*/
{
content:url(logo.gif);
}

h1:hover /*把鼠标放在链接上的状态*/
{
background-color:red); #把鼠标放在链接上背景变红
}

浮动
class = 'clearfix'       #清除浮动
pull-left           #快速左浮动
pull-right         #快速右浮动
main-left{
   height: 100px;
   width: 100px;
   background-color: red;
    float: left;
/* 浮动起来的元素，可以设置高度宽度，并且不独占一行 */
}

.text_line
{
clear:both; /* clear 属性指定元素两侧不能出现浮动元素 */
}

伪类选择器

/* a标签未访问时设置样式 */
a:link{
color:gold;
}
/* 点击按下去之后，抬起之前显示样式 */
a:active{
color:red;
}
/* 网址被访问过之后，显示样式 */
a:visited{
color:green;
}
/* 鼠标悬浮时设置样式 */
a:hover{
color:purple;
cursor: pointer; /* 鼠标的小手效果 */
/*cursor: help;*/
}

文字装饰
/* 记住，去除a标签下划线的时候使用 */
a{
text-decoration: none;
}

text-decoration: line-through;   #定义穿过文本下的一条线
text-decoration: overline;       #定义文本上的一条线
text-decoration: underline;       #定义文本下的一条线

定位
static 静态定位,也就是标签默认
relative: 相对定位,按照自己原来的位置进行移动
absolute: 绝对定位,按照父级标签或者祖先辈儿标签设置了相对定位的标签位置进行移动,如果没有找到相对定位标签,会找到整个文档的位置进行移动
fixed: 固定定位, 按照浏览器窗口的位置进行移动

position:relative;
top\left\right\bottm四个方向的值来控制标签位置
按照自己原来的位置进行移动
标签还占据自己原来的空间
脱离正常文档流，所以能够覆盖别的标签

position:relative;
脱离正常文档流，并且不占自己原来的空间
如果父级或者祖先辈标签没有设置相对定位，那么绝对定位的元素会按照整个html文档的位置进行移动,
如果父级标签或者祖先辈标签设置了相对定位，那么按照父级标签或者祖先辈标签的位置进行移动

固定定位
.c3{
/* 相对于浏览器窗口来设置位置 */
position: fixed;
left:40px;
bottom: 60px;
height: 40px;
width: 80px;
background-color: aqua;
text-align: center;
line-height: 40px;
border-radius: 50%;

}

选择器优先级
css继承效果 -- 优先级0
元素选择器--优先级是1
优先级相同的，会优先显示后面的
类值选择器优先级为10
id选择器优先级为100
内敛样式优先级为1000
!important优先级最高
多级选择器，优先级累加，但是不进位，意思是11个类值选择器也大不过一个id选择器

javascript
js代码的引入方式
<script>
js代码
</script>
创建.js结尾的文件，写js代码，通过script标签的src属性来引入
<script src="xx.js"></script>

变量
var a = 10; #声明变量
var b; #只声明没有赋值，默认值为undefined

数值类型
number类型
var a = 11;
var b = 11.11;
typeof a; number
typeof b; number
+ - * / % 都行,没有取整

字符串
var s = '欣慰';
typeof s; "string"
索引取值：s[0]; s.charAt(1);
切片： s.substring(起始值,结束值); 都是索引值
移除两端空格：
   var a = ' hello ';
   a.trim();
   a.trimLeft();
   a.trimRight();

布尔类型(boolean类型)
true
false

undefined和null类型
undefined #变量声明了,但是没有赋值,此时这个变量是undefined类型
null # 变量不用了,就可以给变量赋值为null,--- object类型

数组(array)
var name = [11,22,33];   //创建一个数组
names[0]           //索引,索引也是从0开始的
names.push(ele)    // 尾部追加元素
   示例:a.push('xx'); -- [11, 22, 33, "xx"]

var ele = names.obj.pop() // 尾部移除一个元素
示例:a.pop(); -- [11, 22, 33]

var ele = obj.shift() // 头部移除一个元素
示例:a.shift(); -- [11, 22, 33]

names.splice(index,0,ele)        // 在指定索引位置插入元素
names.splice(从哪删(索引),删几个(个数),删除位置替换的新元素(可不写,可写多个))
names.splice(index,1,ele)        // 指定索引位置替换元素
names.splice(index,1)        // 指定位置删除元素
   示例: a.splice(1,2) -- [11, 22, 33]
       a.splice(1,1,'xx','oo','asdf'); -- [11, "xx", "oo", "asdf", 33]

names.slice(start,end)         // 切片
   示例:a.slice(1,3);-- [22, 33]

names.reverse()         // 原数组反转
   示例:a.reverse(); -- [44, 33, 22, 11]

names.join(sep)        // 将数组元素连接起来以构建一个字符串
   示例: var a = ['ni','hao','ma',18]
       a.join('+'); -- "ni+hao+ma+18"

names.concat(val,..)         // 连接数组
   示例: var a = [11,22]; var b = ['aa','bb']
   var c = a.concat(b); c -- [11, 22, "aa", "bb"]

names.sort()            // 对原数组进行排序
   很尬!
   需要自己定义规则:
       function compare(a,b){
return a - b; 当大于0时,两个数据换位置
};
使用: a.sort(compare); 升序排列

自定义对象类型（dict）
// 声明
info = {
name:'武沛齐',
"age":18
}

var a = {username:'xx',password:'123'}; //可以不加引号
typeof info;
"object"

// 常用方法
var val = info['name']       // 获取,通过键取值必须加引号,
info.name 也是可以的
info['age'] = 20           // 修改
info['gender'] = 'male'       // 新增
delete info['age']           // 删除

创建对象
var a = new String('ss')
typeof a; 'object'

流程控制
if判断
var a = 0;
if(a > 1){
// console.log('1111');
// var hhhh = document.getElementById('d1');
// hhhh.innerText = '彭于晏';
}else if(a<1){

console.log('2222');
}else {
console.log('3333');
}

运算符
比较运算符
var a = '11';
var b = 11;

a == b;
true
a === b;
false
a != b;
false
a !== b;
true
=== 绝对等于（值和类型均相等）
当进行==比较时候：先检查两个操作数数据类型，如果相同，
则进行===比较，如果不同，则愿意为你进行一次类型转换，转换成相同类型
后再进行比较，而===比较时，如果类型不同，直接就是false.

算数运算符
+ - * / % ++ --
++ 自增 1
-- 自减 1

var a = 2;
a++ 先执行逻辑在+1
++a 先+1 在执行逻辑

for 循环
循环数组
方式1：
for (var i in a){
console.log(i,a[i]);
}
方式2
for (var i=0;i<a.length;i++){
console.log(i,a[i]);
}

for (var i=0;i<10;i++){
console.log(i);
}

循环自定义对象
var d = {name:'chao', age:18};
for (var i in d){          #获取的是d的索引值
   console.log(i,d[i]);
}
不能用下面的属性取值的方法
for (var i in d){
   console.log(i,d.i);
}

while循环
var a = 0;
undefined
while (a < 10){
console.log(a);
a++;
}

函数
普通函数
function f1(a,b){
return a+b;
}
执行: f1(1,2) -- 3
function f1(a,b){
return a,b;
};

f1(1,2);
不能返回多个值: 2

匿名函数
var a = function (a,b){
console.log('xxx');
}

var d = {'xx':'oo','f':function (a,b){
console.log('xxx');
}};
执行:d.f(1,2);

自执行函数
(function () {
alert('自执行函数!')
})()

javascript 输出

window.alert()        # 弹出警告框
document.write()        #方法将内容写到 HTML 文档中
innerHTML       #写入到 HTML 元素
console.log       #写入到浏览器的控制台

location.href; 获取当前页面的地址
location.href = 'http://www.baidu.com'; 跳转到这个网址上
location.reload(); 刷新当前页面
<script>
// window.alert(location.href);                   # 获取当前页面的地址
// document.write(location.href);
document.getElementById("aaa").innerHTML = "大笨猪变成大笨兔了！";
document.write(location.href = "http://www.baidu.com")       #'http://www.baidu.com'; 跳转到这个网址上
document.write(location.reload())                   #刷新当前页面
</script>

setTimeout() 设定一个指定等候时间 (单位是千分之一秒)时间到了, 浏览器就会执行一个指定的代码, 如下图:
setTimeout("changeState()",3000 ); changeState()#指定要执行的函数 3000 指定等待时间
function changeState(){
let content=document.getElementById('content');
content.innerHTML="<div style='color:red'>我是三秒后显示的内容！</div>";
}
var t = setTimeout(function(){console.log('xxx')},3000);
清除定时器：
   clearTimeout(t);
var t = setInterval(function(){console.log('xxx')},2000);         #每2秒（2000 毫秒）弹出 "xxx" :
清除定时器：
   clearInterval(t);

创建标签
var btn=document.createElement("a");           #创建标签
var t=document.createTextNode("CLICK ME");       #定义标签里面的内容
btn.appendChild(t);                   #添加标签里面的内容
btn.setAttribute("href", "http://www.baidu.com")       #添加标签的属性和属性值
document.body.appendChild(btn);
var inpEle = document.getElementById('showtime');   #获取id对应的标签对象
inpEle.value = 属性值();             #创建一个标签属性并且给他赋值

查找标签
#### 直接查找选择器

元素选择器
var h = document.getElementsByTagName('h1');
   结果是个数组
      HTMLCollection [h1]
   索引取值获取标签对象
var h = document.getElementsByTagName('h1')[0];

类值选择器
var s = document.getElementsByClassName('c1');
结果也是数组：HTMLCollection(2)
var s = document.getElementsByClassName('c1')[1];

id选择器
var a = document.getElementById('xx');

#### 间接查找选择器
var div1 = document.getElementsByClassName('c1')[0];
div1.nextElementSibling.style.color = 'red'; 找下一个兄弟标签,并改了色
div1.previousElementSibling; 找上一个兄弟
div1.firstElementChild; 找第一个儿子
div1.lastElementChild; 找最后一个儿子
div1.children; 找所有儿子,是一个数组
div1.parentElement; 找到自己的父级标签

innerText
获取文本内容(只获取文本内容，不带标签)
var h = document.getElementsByTagName('h1')[0];
h.innerText;

设置文本内容
h.innerText = 'xxx'
h.innerText = '<a href="">百度</a>' //不能生成标签效果

innerHTML
获取内容（连带着标签都获取）
var h = document.getElementsByTagName('h1')[0];
h.innerHTML
设置文本
h.innerHTML = '<a href="">百度</a>'; // 能够生成标签效果

值操作
标签对象.value;

### 事件

捕获用户行为，触发相应的动作

常用事件
onblur 失去光标时触发的事件
onfocus 获取光标时触发的事件
onclick 左键单击事件
onchange 域内容发生变化时触发的事件

类值操作
var d = document.getElementById('d1');
d.classList; 查看类值
d.classList.add('ppp'); 添加类值
d.classList.remove('ppp'); 删除类值
d.classList.toggle('pppp'); 切换有就删除，没有就添加

style样式操作
标签对象.style.backgroundColor = 'blue';

var d = new Date();
d.toLocaleString(); 获取本地可读时间
d.getTime(); 获取时间戳

Jquery
导入js
<script src='xx.js'></script>

var d1 = $('#d1'); -- jquery对象 -- jQuery.fn.init [div#d1]
var d = document.getElementById('d1'); -- 原生dom对象 -- <div id='d1'></div>
jquery对象和dom对象之前不能调用互相的方法

jquery对象和dom对象可以互相转换
d1[0] -- dom对象
$(d) -- jquery对象

语法:
$(document).ready(function(){
// 开始写 jQuery 代码...
});
.ready 为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
（DOM）是一种平台和语言无关的界面，它允许程序和脚本动态访问和更新文档的内容，结构和样式。”
DOM是HTML的标准对象模型和编程接口
HTML元素作为对象
所有HTML元素的属性
访问所有HTML元素的方法
所有HTML元素的事件

选择器
$('#d1')         id选择器
$('.c1')        class选择器
$('标签名称') --    元素选择器例子($('标签名称') -- $('span') )
$('*')       选择所有元素
$('this')       选取当前html元素
$(' p.intro')   选取 class 为 intro 的 <p> 元素
例子:
<h2 class="intro">这是一个标题</h2>
<p class="intro">这是一个段落，点击按钮隐藏。</p> #选这里哟！

$("p:first")   选取第一个 <p> 元素
$("ul li:first")   选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")   选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")       选取带有 href 属性的元素
$(":button")   选取所有 type="button" 的 <input> 元素和 <button> 元素
$("tr:even")   选取偶数位置的 <tr> 元素
$("tr:odd")   选取奇数位置的 <tr> 元素

鼠标事件
click #单击 <p> 元素时警报文本
例子:
$("p").click(function(){
alert("段落被点击了。");
});

dblclick #双击 <p> 元素时警报文本
例子:
$("p").dblclick(function(){
alert("这个段落被双击。");
});

mouseenter #当鼠标指针进入 <p> 元素时，设置背景色为红色
例子:
$("p").mouseenter(function(){
$("p").css("background-color","red");
});

mouseleave #当鼠标指针离开 <p> 元素时，设置背景色为灰色
例子:
$("p").mouseleave(function(){
$("p").css("background-color","gray");
});

hover #当鼠标指针悬停在上面时，改变 <p> 元素的背景颜色
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","pink");
});

表单事件:
当提交表单时，显示警告框：
$("form").submit(function(){
alert("提交");
});

parent() 方法
返回 <span> 的直接父元素：

$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});

$（选择）.parent（可选。规定缩小搜索父元素范围的选择器表达式。） #也可以是多个

siblings() 方法
返回属于 <h2> 的同胞元素的所有 <p> 元素：
$(document).ready(function(){
$("h2").siblings("p");
});

小鹿的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html_css基础

html 服务端接收端import socketserver = socket.socket()IP_PORT = (127.0.0.1,8001)sever.bind(IP_PORT)server.listen()while 1: conn,addr = server.accept() from_clicet_msg = conn.recv(1024) print(from_clicet_msg_decode('utf-8')) conn.sed(b'HTTP...
复制链接

扫一扫