一周内容回顾

时间 2021-08-15

标签 css html 前端 python react bootstrap 后端浏览器前端框架服务器栏目 CSS 繁體版

原文原文链接

一周内容回顾

8/2周一内容概要

head内常见标签
body内常见标签
基本标签
常见标签
特殊符号
列表标签
表格标签
form表单标签

内容详细

head内常见标签

title
style
内部能够直接书写css代码调节html样式
可是严格来讲不一样语言应存放在不一样的文件夹内
link
经过href参数引入外部css文件
script
内部能够直接书写js代码
也能够经过src参数引入外部的js文件
meta
定义网页源信息
1.参数description
  定义网站的简介
2.参数keyword
定义用户可能搜索到的关键字 增长网页被搜索到底的几率

body内常见标签

#前提
html标签分为两大类
1.行内标签	(b s u i) 
自身文本多大就占多大
2.块儿级标签 (h p) 
标签独占一行


html标签针对标签个数也有分类
1.双标签
有头有尾<h1></h1>
2.自闭和标签
有头<hr>


#<!--标题系列-->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
#<!--加粗 斜体 下划线 删除线-->
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除线</s>
#<!--段落标签-->
    <p>xxx111</p>
#<!--水平线 换行-->
    <hr>
    <br>

特殊符号

#<!--特殊符号-->
    a &gt;(>) b
    a &lt;(<) b
    何处望神州满眼&nbsp;(空格)风光北固楼天下兴亡多少事
    &yen;   人民币
    &copy;  版权
    &reg;   商标	
    &amp;   特殊&符

常见标签之a连接标签

<a href='https://www.baidu.com'>百度</a>
#href参数
1.放网址点击能够直接跳转
2.锚点功能
  放其余标签的id值点击就能够跳转到对应的标签位置
    
    
#target参数
 控制跳转页面是在当前页仍是新建页
  _self
  _blank

标签两大重要属性

1.id值
相似于标签的身份证号码 在同一个html文件内 id值不能重复
    	<a id='d1'></a>

2.class值
相似于标签的群体号码 多个标签能够属于一个群体 多个标签也属于多个群体
    	<a class='c1'></a>
        <a class='c1 c2'></a>

常见标签之img图片标签

<img src='123.jpg'/>
#src参数
 1.能够放网络图片的地址
 2.也能够放本地图片的地址

#title参数
鼠标悬浮在图片上以后能够展现的文字信息

#alt参数
图片因为某些缘由加载不出来的时候能够提示的文字信息

#width、height参数
调节图片的长宽 默认调节一个就能够 另一个等比例缩放
若是两个都调节那么可能会出现图片失真的状况

常见标签之列表标签

# 1.无序列表
	<ul>
        <li>小李</li>
        <li>小明</li>
        <li>小红</li>
    </ul>
    """总结：页面上看似有规则的横向或者竖向一次排列的标签大几率都是无序列表"""

# 2.有序列表
	<ol type='A'>
        <li>小李</li>
        <li>小明</li>
        <li>小红</li>
	</ol>

# 3.标题列表
	<dl>
        <dt>标题1</dt>
        <dd>内容1</dd>
        <dt>标题2</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
    </dl>

常见标签之table表格标签

<table>
	<thead>
    	<tr>  # 一个tr就表明一行
            <th>序号</th>  # th加粗的文本
            <th>姓名</th>
            <th>年龄</th>
		</tr>
    </thead>  # 表头(字段名称)
	<tbody>
    	<tr>
            <td>1</td>  # td普通文本
            <td>jason</td>
            <td>18</td>
		</tr>
    </tbody>  # 表单(数据部分)
</table>

常见标签之form表单

#前提：该标签能够接受用户的数据并发送给后端服务器
获取用户数据的标签最为常见的就是input标签
而且获取用户数据的标签最好都要有一个name属性用来表示该数据究竟是用户的什么数据

type参数
 text
 password
 date
 email
 radio
 checkbox
 file
 button  # 没有任何做用
 reset  # 重置
 submit  # 触发提交数据的动做


#select标签
 下拉选择
    
#textarea标签
 大文本

8/3周二内容概要

body内常见标签补充
form表单重要参数补充
CDN知识说明
CSS层叠样式表
CSS选择器

内容详细

body内常见标签补充

1.块儿级标签  div
2.行内标签  span
# 上述两个标签主要用于页面的前期结构布局

"""
标签与标签直接能够相互嵌套
eg:
	<div>
		<div></div>
		<a></a>
		<p></p>
	</div>
"""

块儿级标签能够嵌套块儿级标签和行内标签
特例:p标签虽然是块儿级标签可是它不能嵌套块儿级标签
而行内标签只能嵌套行内标签

form表单重要参数补充

input标签
1.value参数  #至关于默认值
本质:用户数据其实都是由value参数存储

2.placeholder参数  #至关于提示信息	
针对radio和checkbox能够默认选中
	
3.checked参数
 checked='checked'
# 在html中若是标签的属性名和属性值相等 那么能够简写为checked
 
select标签
option子标签
selected='selected'  
# 简写 selected   默认选中
      

form标签
action参数    #用来控制数据提交的地址
novalidate参数  #取消浏览器的校验动做
 

#button标签若是写在了form表单的内部 那么也能够出发提交动做
    
    
    """
    可以触发form表单提交数据的标签有两个
    	<input type='submit'/>
    	<button></button>
    """

CDN知识说明

主要功能:
使用户就近获取所需内容，下降网络拥塞，提升用户访问响应速度和命中率


# 有些常见的软件各大互联网都开设了免费的CDN服务
eg:前端相关CDN服务 >>> https://www.bootcdn.cn/

"""要想使用CDN的前提是你的计算机必须时刻有网络"""

CSS层叠样式表

"""css就是用来调节html标签样式的"""

# 语法结构
	选择器 {
        属性名1:属性值1;
        属性名2:属性值2;
    }
  
# 语法注释
	/*注释内容*/
   
# css引入方式
	1.style标签内部直接书写
    	<style></style>
    
    2.link标签href属性引入外部css文件
    	<link href='' rel='stylesheet'></link>
    
    3.在标签内部直接书写
    	<p style='color:red;'></p>

css选择器

# 基本选择器
	1.标签选择器(直接写标签名称便可)
    	p {
            color:red;
        }
    
    2.类选择器(书写标签class属性值并在前面加点)
    	.c1 {
            color:blue;
        }
    
    3.id选择器(书写标签id属性值并在前面加#)
    	#d1 {
            color:black;
         }
    
    4.通用选择器(指代全部的标签)
		* {
         	color:green;   
		}


 # 组合选择器
 1.后代选择器
 2.儿子选择器
 3.毗邻选择器
 4.弟弟选择器

8/4周三内容概要

组合选择器
伪类选择器
伪元素选择器
选择器优先级
html样式调节

内容详细

组合选择器

1.儿子选择器(大于号)
	div>p {}

2.后代选择器(空格)
	div p {}

3.毗邻选择器(加号):同级别紧挨着的下一个
	div+p {}

4.弟弟选择器(数字1左边的键)
	div~p {}

属性选择器

#前提
HTML标签除了能够有自带的属性以外还支持自定义属性

eg:
<p id='d1' class='c1' name='小明' age=20 xxx=yyy></p>

# 关键性的符号就是中括号
[name] {color:red}  
	查找含有属性名name的标签

[name='jason'] {color:red}
	查找含有属性名name而且属性值是jason的标签

p[name='jason'] {color:red}
	查找含有书名name而且属性值是jason的p标签

分组与嵌套

1.分组(逗号隔开 同级别)  
#找p标签、div标签、span标签
    
    p,div,span {
                color:yellowgreen;
            }

2.嵌套(不一样的选择器能够混合使用)  
#找id=d一、class=c一、div标签
	#d1,.c1,div {
			  color:yellowgreen;	
    		}


div.c1 {}  # 找class=c1的div标签

伪类选择器

# 以连接标签为例
1.未点击状态
		a:link {
				color:blue;
			}
2.悬浮状态
		a:hover {
				color:red;
			}
3.点击状态(不松开)
		a:active {
				color:green;
			}
4.点击以后的状态
		a:visited {
				color:pink
			}
 

# 以input为例  获取焦点状态
input:focus {}

伪元素选择器css

"经过css代码给html标签添加文本内容或者修改"
# 改变文本第一个字
p:first-letter {
				font-size:48px;
				color:red;
			}

    
# 在文本开头添加内容
p:before {
				content:'#';
				color:red;
			}

    
# 在文本末尾添加内容
p:after {
				content:'?';
				color:blue;
			}

选择器优先级

1.相同选择器不一样位置
	就近原则
2.不一样选择器不一样位置
	行内式 > id选择器  > 类选择器 > 标签选择器

    
"""优先级也能够打破 须要借助于关键字"""
eg:!important

字体属性相关

1.长宽
width
height

#行内标签没法设置长宽 彻底取决于内部文本

2.字体大小
font-size


2.字体颜色
color:red
color:#xxxxxx
color:RGB(0,0,0)
    
#取色
1.借助微信/QQ截图自带的三基色取色
2.利用浏览器自带的取色器取色

文字属性

1.文字对齐
text-align:center
    
2.文字装饰
text-decoration:none
    
3.首行缩进
text-indet:32px

背景属性

#背景色
#背景图片

引入方式:
1.background-color:RGB(0,0,0);
2.background-image:url('111.png');

位置方式： 
background-repeat:no-repeat;
background-position:center
    
#若是多个参数都是相同的前缀
那么能够简写为background:#xxxxxx url('111.png') no-repeat center;

8/5周四内容概要

边框属性
display属性
盒子模型
浮动属性
浮动带来的影响
溢出属性
定位属性
z-index属性
脱离文档流

内容详细

边框属性

border-left-color:yellow;
border-left-width:5px;
border-left-style:solid;
能够简写为:
#border-left:5px solid yellow


border-top-color:red;
border-top-width:10px;
border-top-style:dashed;
能够简写为:
#border-top:10px dashed red

border-right-color:yellow;
border-right-width:3px;
border-right-style:dotted;
能够简写为:
#border-top:3px dotted yellow

border-bottom-color:pink;
border-bottom-width:8px;
border-bottom-style:solid;
能够简写为:
#border-bottom:8px solid pink

终极缩写形式 上下左右所有采起同样的样式
#border:5px solid black

#画圆
border-radius:50%

display属性

display:none
eg:
   钓鱼网站

盒子模型

1.外边距(margin)
2.边框(border)
3.内边距(padding)
4.内容(content)

#margin用来调节标签与标签之间的距离
#padding用来调节标签与标签内部(文本或者标签)的距离


margin-left:20px;
margin-top:20px;
margin-right:40px;
margin-bottom:60px;
#前缀一致 那么能够缩写为如下几种状况:
margin:10px  # 一个参数表示上下左右
margin:20px 40px  # 第一个控制上下 第二个控制左右
margin:20px 30px 40px  # 第一个控制上 第二个控制左右 第三个控制下
margin:10px 20px 30px 40px  # 上右下左(顺时针)


padding-left:40px;
padding-top:30px;
padding-right:40px;
padding-bottom:60px
#前缀如出一辙 也能够缩写 规律跟margin一致

浮动属性

float  # 页面布局确定须要用到浮动

"""浮动的元素脱离文档流 至关于漂浮在空中"""
#前提
浏览器针对文本是优先展现的

浮动带来的影响

浮动会致使父标签元素"塌陷" 


#解决方法：
1.本身再写一个div撑着（不可取）
2.用clear属性
    clear:left、right、both  # 不容许标签左侧有浮动的元素
3.终极结论
	.clearfix:after {
				content:'啦啦啦';
				display:block;
				clear:both
			}
  
#结论：
在写css代码以前先写好解决浮动带来塌陷的css代码
哪一个父标签塌陷了就给哪一个父标签加一个clearfix类属性便可

溢出属性

# 圆形头像制做
overflow参数

eg:
div {
				width:100px;
				height:100px;
				border:3px solid black;
				border-radius:100%;
				overflow:hidden
			}
img {
				width:100%;
			}

定位属性

1.非定位态(静态) 
	全部的标签默认都是非定位状态 没法使用定位改变位置  #static
2.相对定位  
	position:relative    #相对于标签原来的位置作定位
3.绝对定位 
	position:absolute    #相对于已经定位过的父标签作定位
	eg:小米官网购物车
4.固定定位  
	position:fixed       #相对于浏览器窗口作定位

是否脱离文档流

#脱离文档流:
通俗来讲就是原来的位置是否能够被其余标签占用


脱离文档流
1.浮动
2.绝对定位
3.固定定位


不脱离文档流
相对定位

8/6周五内容概要

三层结构的模态框
编写简易博客园界面
前端框架之Bootstrap

内容详细

三层结构的模态框

#考题：
1.最上面一层须要有一个form表单 获取用户名和密码
2.第二层就是浅黑色
3.第三层放一张图片



<!DOCTYPR html>
<html>
	<head>
		<title>模态框</title>
		<style>
			.cover {
				position:fixed;
				top:0px;
				left:0px;
				right:0px;
				bottom:0px;
				background-color:rgba(127,127,127,0.75);
				z-index:999
			}
			.modal {
				position:fixed;
				top:50%;
				left:50%;
				z-index:1000;
				background-color:white;
				height:200px;
				width:400px;
				margin-top:-100px;
				margin-left:-200px;
				
			}
		</style>
	</head>
	<body>
		<div class='content'>
			<img src='111.png'/>
		</div>
		<div class='cover'></div>
		<div class='modal'>
			<form action=''>
				<p>username:
					<input name='username' type='text'/>
				</p>
				<p>password:
					<input name='password' type='password'/>
				</p>
				<input type='submit' value='注册'/>
				<input type='button' value='取消' id='d1'/>
			</form>
		</div>
	</body>
</html>

书写简易博客园界面

"""
搭建网页不要急着写 先利用div构造页面的大体布局
在使用div作页面布局的时候 因为div个数较多为了可以很好的区分
咱们一般会给不一样的div起不一样的class属性(属性值最好可以有必定的区分度)
"""
# 1.先写html代码
# 2.再写css代码

前端框架

1.页面搭建相关
Bootstrap elementui layui

2.功能应用相关
react Vue
 
# Bootstrap框架
可以让你cv快速搭建页面

# 压缩文件
	bootstrap.css  # 未压缩的
    bootstrap.min.css  # 压缩以后的
      
# 页面布局
	<div class='container'>  # 左右两边是否有留白
		<div class='row'>  # 一行均分12份
			<div class='col-md-6 c1'></div>  # 控制占几份
         
# 响应式布局
	可以根据浏览器窗口和机器型号的不一样自动调节比例

"""使用bootstrap的状况下给标签调样式 通常都是修改标签的calss值便可"""