前端基础总结

HTML初识

△HTML:

超文本标记语言，是一种用于创建网页的标记语言，不是编程语言,没有逻辑
本质上是浏览器可识别的规则
我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm（没有区别）

网页文件的扩展名：.html或.htm（没有区别）

我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）

网页文件的扩展名：.html或.htm（没有区别）

△css：
层叠样式表是一种用来表现HTML等文件样式(效果)的计算机语言

JavaScript：
简称“JS”，是一种属于网络的脚本语言
常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果
通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的

△jQuery：
jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码

△boodstarp(JQ+css):
bootstrap：简洁、直观、强悍的前端开发框架
它在jQuery的基础上进行了更为个性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

△B/S (前端/后端)

Web服务的本质：
浏览器发请求 --> HTTP协议 --> 服务端接收请求 -->
服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
浏览器内嵌了一个socket客户端，默认TCP链接

△浏览器自带socket客户端，自己编写的服务端也可以为浏览器服务

from socket import *
jd_server = socket()

jd_server.bind(("",8001))
jd_server.listen(5)
conn,client_add = jd_server.accept()
from_client_msg = conn.recv(1024)
print(from_client_msg.decode())
conn.send("nihao".encode())
conn.close()
jd_server.close()

按照HTTP协议加载浏览器能看懂的数据：

conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"nihao")

HTTP/1.1 200 OK:
HTTP/1.1 是一个规范
200 代表请求成功
OK 表示一切正常

conn.send(b"
nihao
")  #用标题包裹数据，更好看一些

标签一般形成一个结构写在文件里，这个文件就是HTML文件

HTTP/1.1 是一个规范

conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"nihao")

pycharm中创建一个html文件（英文名，不要空格）
你会发现，整个结构都直接生成好了,因为不管什么浏览器，文档结构都是这样的

html文件可以在pycharm中就能打开

△自己写一个服务器
当浏览器来连服务器时,把HTML文件发送给浏览器

from socket import *

s = socket()
s.bind(("",8881))
s.listen(5)
new_s, addr = s.accept()
data = new_s.recv(1024)
print(data.decode())
new_s.send(b"HTTP/1.1 200 OK\r\n\r\n")

with open("test.html","rb") as f:
    data = f.read()
    new_s.send(data)
new_s.close()
s.close()

HTML文档结构

△最基本的HTML文档：

     
   


 
  
  

 





:HTML文件声明，声明为HTML5文档
、:是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）

、:定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的

:定义了网页标题，在浏览器标题栏显示
、:之间的文本是可见的网页主体内容

注意：对于中文网页需要使用  声明编码，否则会出现乱码
有些浏览器会设置 GBK 为默认编码，则你需要设置为 

△浏览器页面调试工具 F12
Elements（元素）：对浏览器看来，所有标签都是元素
标签对文本进行了标记，所以HTML叫超文本标记语言
浏览器有识别标签的机制

HTML标签格式

标签分类定义

块级/内联:判断依据为显示的web中独占至少一行的body中的标签

块级标签(行外标签,独占一行):

块级标签能够包含内联标签,和某些块级标

一级标题
        标题标签 

     换行标签
     换行横线标签

              段落标签
    第一章内容



  
        换行文档分区标签


           无序列表标签
     
茶
    列表内容标签



  有序列表标签
    li>梅             



                 无标识标签
    
河北省
    
    
邯郸
       



   表格线框宽度      表格标签    
   定义行   第一行
      表头加粗的内容
      第二行
      表内容
    
Month
Savings
  
  
January
$100
  

内联标签(行内标签,不独占一行):
不能包含块级标签

 图片标签
跳到底部  超链接标签
蓝色  文档标签  

全封闭标签:

     网头标签
一级标题
        标题标签 
跳到底部  超链接标签

我的车是 蓝色 的。
   段落标签  文档分区标签
  
        换行文档分区标签


              段落标签
    第一章内容




           无序列表标签
     
茶



  有序列表标签
    li>梅             



                 无标识标签
    
河北省
    
    
邯郸
       




   表格线框宽度      表格标签    
   定义行   第一行
      表头加粗的内容
      第二行
      表内容
    
Month
Savings
  
  
January
$100
  

自封闭标签:

   元信息标签
  网头图标标签

     换行标签
     换行横线标签
 图片标签

head内常用标签（了解）：

标签 元信息

用处:标签位于文档的头部,提供的信息是用户不可见的,是一个自封闭标签,全封闭标签,可提供有关页面的元信息（meta-information）

有一下关键字:

charset=

ontent="3"

定义文档字符编码和更新频度的描述:

 
                          三秒刷新

                                           自动跳转

http-equiv=

浏览器内核（渲染引擎）：渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息
渲染引擎是兼容性问题出现的根本原因，大部分渲染效果差不多

IE比较个色  

name="keyword" content="搜索关键字"

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字
某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类

name="description" content="网站描述信息"

设置网站描述信息，用于在搜索引擎搜索时，显示网站基本描述信息

触屏缩放

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

device-width：设备宽度
- initial-scale=1.0，初始显示缩放比例。
- minimum-scale=0.5，最小缩放比例。
- maximum-scale=1.0，最大缩放比例。
- user-scalable=yes，是否支持可缩放比例（触屏缩放）

标签

link 标签 网头图标

body内常用标签

标签 标题

    hehe  #body中没有包裹的就是普通文本显示
    
一级标题
    
二级标题
    
三级标题,大圣
    
四级标题
    
五级标题
    
六级标题

br标签 换行

123


4
5
 
 123
 
 4
 5

注意点:直接回车、空格等空白内容都被认为是一个空格

hr 标签 一行横线

1
2

1
----------------------------------
2

form标签 表单

使用 
 标签可以通过浏览器向服务器传输数据


action属性: 指定提交路径,提交到哪里去


用户名：   
密码:      
    
    

input标签

text/password 输入框

用户名： 


密码: 



        

     

 、                  

        

                 

​

radio 单选框

性别
男  
女

checkbox 多选框

喜欢的明星:
 baby   
 热巴
 艺昕

textarea标签 多行文本输入框

多用于评论

select标签 下拉框

单选

        北京
        上海
        深圳
        惠州

multiple="multiple" 多选

ctrl键多选

    北京
    上海
    深圳
    惠州

a 标签 超链接

锚点：页面内容进行跳转（在自己的页面跳）

第一章
第二章
第三章

第一章 XXX
   #段落标签
    第一章内容

不加href属性,就是普通文本显示

古风

加上href属性,不加值文字有颜色效果,还有下划线,并且点击后会刷新当前的html页面

跳到底部

加上href属性,并且加上值

baidu

跳转对应网址的页面
未访问之前是蓝色的字体颜色
访问之后是紫色的字体颜色
target属性:
_self:在当前标签页打开 href属性值的那个网址
_blank:在新的标签页打开 href属性值的那个网址

p标签 段落

  
    第一章内容

span标签 文档分区

我的车是 蓝色 的。
如果不对 div和span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异

div标签 换行文档分区

div是一个块级元素。这意味着它的内容自动地开始一个新行
可以把文档分割为独立的、不同的部分

  #字体为绿色
  
This is a header
  
This is a paragraph.


内容
 #背景为绿色

ul标签 无序列表

兴趣爱好:
    
               #
作为无序列表的声明
        
茶
        
酒
        
棋
    

ol标签 有序列表

君子:
    
     #
 标签定义有序列表,有序列表的各个列表项有先后顺序，
        
梅
             #所以会使用数字进行标识
        
兰
        
竹
        
菊
    

dl标签 无标识表(缩进)

    

        
河北省
    表头
        
邯郸
      内容 
        
石家庄
        
山西省
        
太原
        
平遥
    

河北省
    邯郸
    石家庄
山西省
    太原
    平遥

tble标签 表格

   表格线框宽度
   定义行   第一行
      表头加粗的内容
      第二行
      表内容
    
Month
Savings
  
  
January
$100
  


表格由 table 元素以及一个或多个 tr、th 或 td 元素组成
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元

border:规定表格边框的宽度


写法二：
第二种写法:



    
    

        
id
        
name
        
age
    
    
    
    

    
    

        
1
        
xiaoming
        
20
    
    

        
2
        
xiaoli
        
18
    
    
   

img标签 图片

src属性:图片路径  必须写
alt属性:图片加载失败或者正在加载时提示的内容
title属性:鼠标悬浮时显示的内容

# 不常用,通过css来控制
width:设置宽度
height:设置高度

css

层叠样式表,作用是为标签加效果

123

基本选择器

元素选择器

标签名称{css属性:值}

div{width:100px;}

id选择器

id{}

html代码:


    

css写法:
    #d1{
        background-color: green;
        width: 100px;
        height: 100px;
    }

类选择器

.class1{属性:值}

html代码:

    baby



   热巴



    唐艺昕



css写法:
.c1{
    background-color: green;
    width: 100px;
    height: 100px;
}

属性选择器

html代码:

    baby



   热巴


css写法:
[xx]{
           /*属性查找*/
           background-color: green;
    width: 100px;
    height: 200px;
       }


        [xx='ss']{
            /*属性带属性值查找*/
    background-color: green;
    width: 100px;
    height: 200px;
}

后代选择器

html代码:

div id="d1" class="c1" xx="ss">
        
            baby
        
    

热巴

唐艺昕

xxxxxxx

div a{    color: yellow;}

组合选择器

div,a{ color: yellow;}

html代码:
div id="d1" class="c1" xx="ss">
        
            baby
        
    

热巴

唐艺昕

xxxxxxx css代码: 注意:a标签字体颜色设置,必须找到a标签才能设置 #d1 a,#d3 a{ background-color: pink; color:yellow; }

css样式引入方式

head标签中引入

给所有div标签加样式

外部文件引入

（工作中常用的）

创建一个css文件,stylesheet文件,比如test.css文件。里面写上以下代码
div{
    /* css注释 */
    width: 200px;
    height: 200px;
    background-color: red;
}

在想使用这些css样式的html文件的head标签中写上下面的内容
 href对应的是文件路径

内联样式

multiple="multiple"?

css样式相关

display属性

改变标签属性:
inline: 将块级标签变成了内联标签
block:将内联标签变成块级标签
inline-block: 同时具备内联标签和块级标签的属性,也就是不独占一行,但是可以设置高度宽度
none: 设置标签隐藏 （了解，后面用）

html代码

 
        我是span标签
    
    

        鹅鹅鹅,曲项向天歌!
    

    

        白毛浮绿水
    

css写法

span{display: block;}             将内联标签变成块级标签
    .c1{
        background-color: red;    内容背景颜色
        height: 100px;            内容背景高度
        width: 100px;             内容背景宽度
        display: inline;          将块级标签变成内联标签
        /*display: inline-block;*/  同时具备内联标签和块级标签的属性
         }

颜色设置

英文单词:red;
十六进制: #ff746d;
rgb: rgb(155, 255, 236);

背景颜色透明度: rgba(255, 0, 0,0.3);      
单纯的就是颜色透明度

标签透明度（例如背景图片透明度）: opacity: 0.3;         
0到1的数字,这是整个标签的透明度

盒子模型

标签占空间总大小=margin+border+padding+content

html代码

    窗前明月光

css写法

div{ width: 200px;                           内容宽度
     height: 100px;                          内容高度
     background-color: rgba(255, 0, 0,0.3);  内容背景颜色
     background-image: url("fage.png");      内容背景图片 url写图片路径,也可以是网络地址路径
     margin: 10px 15px              外边距:上下 左右  距离无颜色
     border: 4px solid red;         边框:大小 样式 颜色 
     padding: 4px 2px 6px 8px;   上4右2下6左8  内边距       
}

margin 外边距

距离其他标签或者自己父级标签的距离

html代码

    

        窗前明月光
    
    

        

        
    

css写法

  .c1{
        background-color: red;
        height: 100px;
        width: 100px;
     /*margin: 10px 15px;*/     上下10，左右15
        margin-left: -10px;
    }
    .c2{
        background-color: green;
        height: 20px;
        width: 20px;
        /*margin: 10px 15px;*/
        margin-left: 20px;
    }

让外边距为零

body{
    margin: 0;
}

border 边框

html代码

    窗前明月光

css写法

边框简写方式,对四个边框进行设置
           /*宽度/样式/颜色*/
窗前明月光
                                         

order-left: 1px solid green;  单对左边边框设置   
border-top: 1px solid blue;   上边边框       


细写
border-width: 5px;  边框宽度
border-style: dashed;  边框样式
border-color: aqua; 边框颜色

padding 内边距

内容和边框之间的距离

html写法

   /*宽度/样式/颜色*/
窗前明月光


padding: 6px 8px;           上下6左右8
padding: 4px 2px 6px 8px;   上4右2下6左8
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;

content: 内容部分

背景

html代码

    窗前明月光

css写法

background-color: #ff746d;            背景颜色
background-color: rgba(255, 0, 0,0.3);背景颜色
background-image: url("fage.png");   url写图片路径,也可以是网络地址路径

background-repeat: no-repeat;        不重复
background-repeat: repeat-y;         y方向上
background-position: right top;      右上
（lift top,center top,right top,center bpttom）
background-position: 100px 50px;     离左边边多少,离右边多少  一般通过css设置

简写方式: 
    background: #ff0000 url("fage.png") no-repeat right bottom;

高度宽度

css写法:
    div{
        height: 100px;
        width: 100px;
        background-color: pink;
    }
    span{                        ！！！行级标签不能设置高度宽度
        height: 100px;
        width: 100px;
        background-color: green;
    }

可以设置百分比，会按照父级标签的高度宽度来计算

234

css写法:
        .c1{
        width: 200px;
        height: 100px;
        background: red;
    }
        .c2{
            width: 50%;
            height: 50%;
            background: gold;
        }

字体相关

html代码

    窗前明月光

css写法

font-size: 50px;  1.5em     /* 默认字体大小是16px=1em */
color:green;        /* 字体颜色 */

font-family:        '楷体', '宋体';      浏览器如果不支持第一个选第二个。。。

font-weight: 400;    /* 字体粗细 100-900,默认是400 */

字体对齐

字体对齐

html代码:
    

        窗前明月光
    

css写法

div{  height: 100px;
      width:200px;
      background-color: yellow;
      text-align: center;  标签文本水平居中于块级标签  
      line-height: 100px;  和height高度相同,标签文本垂直居中于块级标签
        /*垂直居中*/ 
      text-align: right;右对齐

浮动

浮动的元素,不独占一行,并且可以设置高度宽度

html代码

scc写法

body{ margin: 0; }   要浮动,先让默认为8的外边距为0

c1{
background-color: red;  height: 100px;
width: 200px;  float: left;
}
.c2{
background-color: green;  height: 100px;
width: 200px;  float: right;
}

.c3{
background-color: pink;
height: 100px;
width: 100%;}

塌陷解决

父级标签没有高度了,子标签一浮动,会让下面的标签顶上来

方式1：给父级标签加高度 不常用

方式2：清除浮动(clear属性) 不常用

.c3{
background-color: pink;  height: 100px;
width: 100%;
clear: both;    （这个标签上面不允许有浮动的元素）
}

方式3：子标签底下加一个空白的带clear属性的div标签 常用

html代码:

方式4:div标签后面用after拼一个内容为空的带clear属性的块

需要先用伪元素选择器

html代码:

css代码:

.clearfix:after{
    content:'';         设置内容
    display:block;       设置块
    clear:both;         设置clear属性
}

伪元素 after

在原内容上增加元素

html代码:

    一段文字

css代码:

div{
    background-color:pink;
    height:100px;
    width:200px;}
div:after{
content:'?';
color:white;}

伪类 hover

添加鼠标放上之后的 效果

html代码:

css写法:

.c1{
    background-color:red;
    height:300px;
    width:300px;}

.c1:hover{                                     /*鼠标悬浮时设置效果*/
/*background-color:green;*/
background-image:url("a.png");
cursor: pointer;}      pointer 手
                      default 箭头，crosshair 十字，progress 箭头和沙漏

悬浮显示其他标签效果

html代码: