一.基本标签
2020年10月15日星期四
1.骨架:标签[元素/标记]
2.<!doctype html>–申明文档类型–HTML5
专业术语:DTD–文档定义类型[document type definiton]
3.开始标签
Zh-cn-----中文
--头部-不可视化区域-存储信息-给浏览器查看 --身体-可视化区域-给用户看的所有信息 元数据:专门告诉浏览器或搜索引擎关于网页的基本信息Charset=”utf-8”
属性 属性值-------存在于开始标签里
字符集信息 网页的编码格式
Gb2312 gb国标缩写 包含了6763个字
Gbk 国标扩展 21886
Gb18030 70224
Utf-8 包含全世界所有的语言文字
Name=”keywords” ------核心搜索关键字 作用:作为网页名字的补充
名字 关键字
Content=”内容” -----
Name=”description”
名字 描述-------
Div 双标签:最基础的分区标签 存放内容的
标题标签:
~ 双标签 字体大小依次减小 字体加粗具有权重
三个列表标签:
无序列表:ul 双标签
标签下面只能是
有序列表:ol 双标签
标签下面只能是<li></li>标签,跟无序列表一样
Ol开始标签的属性:
Type:1,A,a,I,i
<ol type=””>
<li></li>
</ol>
自定义列表:dl 双标签
<dt>列表的标题</dt>
<dd>b列表标题的内容</dd>
内容展示的标签:(从左到右排列的)
Span---双标签---包裹文字 没效果 可横排显示
Strong--双标签--加粗 权重高 strong>b
B--双标签--加粗
Em--双标签--倾斜--权重高 em>i
I--双标签--倾斜
<dl>
<dt></dt>
<dd></dd>
</dl>
Img 图片 单标签
属性:src:“图片的地址”----路径不能出现汉字
路径的写法
1.相对路径:当前位置寻找,范围小,指定区域寻找
参照物:位置关系,兄弟关系
图片和网页同级,直接写图片名称 04.gif
当前目录:表示方法 ./ (可省略)
上级目录:表示方法 …/
上上级目录:表示方法 …/…/
根目录:表示方法 /
2.绝对路径:完整的路径
范围大,根
从盘符出发:C盘/D盘
从网页出发:http/https:
Alt:图片加载不出来说明是一张什么图片
Title:说明图片信息
Width:图片的真实宽
Height:图片的真实高
目的:网页加载慢的时候,用来占据位置,防止网页布局混乱
a标签
超链接 双标签
属性:
href=”需要链接的地址”
Hypetext reference 超文本引用
点击网页某个部分可以跳转到其他网页或者指定位置
Target=”_blank”—新窗口打开
“_self”—默认当前窗口
<a href=” ” target=”_blank” id=”top”>输入文字
换行标签
锚点:标签起一个id名
在a标签中的href=”#id名字” 可以跳转到指定地方
CSS样式
写法:
1.行内样式:直接将样式写在开始标签中 style属性中
2.内嵌样式:head标签中通过style标签书写
3.外部样式:在css文档中写css样式,那个页面需要css样式,就引入那个页面
在head标签中通过link标签引入
行内样式的缺点:
1.样式和结构没有分离
2.不利于后期维护
3.样式不能重复使用
内嵌样式的优点:
1.样式和结构分离
2.能够重复使用
缺点:
只能在一个页面使用,不能在多个页面使用
外部样式的优点:
1.结构样式分离
2.有利于后期维护
3.多个页面使用
4.可重复使用
优先级:行内样式>内嵌样式=外部样式
CSS基本选择器
1.标签选择器:选择范围广
语法 标签名{css属性名称:属性值;…}
2.id选择器:#表示id选择器 具有唯一性
语法 #id名字{css属性名称:属性值;…}
3.class选择器 .表示class选择器
语法 .class名字{css属性名称:属性值; …}
4.通配符选择器:*表示通配符选择器
语法 在style标签中 *{css样式}
含义:选择页面中所有的标签
单个权重问题
Id>class>标签>通配符
组合选择器
1.后代选择器:选择器之间用空格隔开
2.子元素选择器:表示符号:>
3.兄弟选择器:表示符号:~
4.比邻选择器:表示符号:+
5.属性选择器:表示方法:
[属性名=”属性值”]{css样式}
选择器名[属性名=”属性值”]{css样式}
6.逗号(并集)选择器:表示符号:, 设置共同的样式
7.li .beauty{font-weight:bold;}
就是选择li标签里边的并且li的名字为beauty的标签
组合选择器权重问题
Id>class>tag(标签)
看id数
Id数越多,权重越大
Id数一样
class数越多,权重越大
class数一样
标签数越多,权重越大
权重一样的,后边覆盖前边的
命名规则:
1.英文状态下的小写字母
2.必须由字母,数字,连字符(-)所组成
3.必须见名知意
4.不允许带有广告的单词:advertising:ad:adv
5.禁止出现中文拼音和汉字,或者禁止出现单个字母和纯数字
6.禁止驼峰命名 itemName
color:red; 字体颜色
font-size:30px; 字体大小 单位:像素px
font-weight:bold; 字体粗细 bold粗体 默认:normal
font-weight:lighter;字体粗细 lighter细体 100-900的数字—字重
text-decoration:none; 文字修饰
none 没有的
undreline 下划线
overline 上划线
line-through 中划线(删除线)
字体颜色表示方法:
1.颜色的英文单词
2.十六进制的颜色0-9和a-f组成 (6位)
#ffffff—白色
#000000–黑色
3.rgb–三原色(红色 0~255)
(绿色 0~255)
(蓝色 0~255)
4.rgba–三原色 a-透明度
0 完全透明 1完全显示 0.5半透明 简写.5
字体默认大小:
浏览器默认字体大小:16px
最小字体:12px
单位:绝对单位 px 像素
相对单位 em–父元素字体大小–父元素*倍数=像素
rem–根据根标签html字体大小计算
Html标签
1.按照写法:单双标签
2.排列顺序:块级标签和行级标签
块级标签:div p ul li h系列标签 dl ol
特点:独占一行
行级标签:span a strong i em b
特点:横排显示,在同一行显示
盒模型
网页中所有的标签都可以看做是一个盒模型
1.content 内容
2.Padding 内边距
特点 a,把整个盒子撑大
B,padding区域颜色和内容区域的颜色一致
C,Padding 作用:设置盒子边框和内容的距离
Padding的写法:
分样式:padding-top: 上
Padding-right: 右
Padding-bottom:下
Padding-left: 左
复合样式:
Padding:50px; 上=右=下=左
Padding:50px 30px; 上=下 左=右
Padding:50px 30px 20px;上 左=右 下
Padding:50px 30px 20px 10px;上 右 下 左
文本对齐方式:left center right
text-aglin:center; 居中对齐
3.border 边框
Border:30px solid red;
大小 样式 颜色
不给边框颜色:默认颜色就是内容字体的颜色
不给边框大小:默认边框线大小为3px
边框线可以没有大小,颜色,但是必须设置样式
Border分样式:
border-width:边框线大小
border-style:边框线样式
border-color:边框线颜色
边框线颜色:transparent 透明色
边框线样式:solid 实线
Dashed 虚线
Dotted 点线
Double 双实线
单个边框的复合样式:
border-top:30px solid red;上边框线
border-left:30px solid red;左边框线
border-bottom:30px solid red;下边框线
border-right:30px solid red;右边框线
单个边框的复合样式:
border-top-width:上边框线的大小
border-top-style:上边框线的样式
border-top-color:上边框线的颜色
4.margin:外边距
调整盒子和盒子之间的距离,可以有负值
应用:盒子和盒子之间的距离
正值:向下
负值:向上
特殊值:auto–一般是复合样式:只有左右
自动的 浏览器会帮助你计算 左右值一样
Margin的应用
外边距重合问题:兄弟关系
外边距重合:谁的外边距大就显示谁的外边框
解决问题的方案:
1.中间添加一个元素,设置边框线
2.给其中一个设置外边距或者上边距
嵌套关系:
外边距重合,谁的外边距大就显示谁的外边框
解决问题的方案:
1.给父级添加padding
2.加边框线
3.加overflow:hidden;(内容超出隐藏)
标准盒模型的
box-sizing:content-box;
实际大小:
width:width(content)+padding(左右)+border(左右)
height:width(content)+padding(上下)+border(上下)
实际占据空间位置大小:
content+border+padding+margin
怪异盒模型:IE模式
box-sizing:border-box;
怪异盒模型 width=content+border+padding
大小:width/height
占据位置大小:width/height+margin
怪异盒模型实际大小包含padding和border
font-failmy:字体样式
目前的字体设计领域:字体大致分为两大类
1.serif(有衬线):多用于网页正文,内容等大量文字内容区域
2.san serif(无衬线):多用于文章标题,表格,宣传海报等一些要求文字醒目的领域。
@font-face 引入文字
@font-face{font-faimly:BB;src:url(“.font/h.ttf”);}
white-space:nowrap;-------文本不换行
over-flow:hidden;---------超出文本隐藏
text-overflow:ellipsis;---------文本超出的显示省略号
省略号三步走,缺一不可;-----限制宽度
line-height:行高
测量这一行文字的顶部到下一行文字的顶部,一行文字的的高度
目的:设置文字,行与行之间的距离
行间距:两行文字之间的距离
行高的计算:行高=字体大小+行间距
整体设计:一行文字的高度=行高倍数值*字体大小
body{font:16px/1.5 simsun,”黑体”}
整体设置行高和字体样式,注意:顺序不能变
文字的垂直居中:行高的大小和盒子的高度一致
vertical-align:基线对齐
vertical-align:2px;可以是数值
top:顶部最上边
text-top:文字顶部
middle: 小写x中线对齐
baseline:小写x下面基线对齐
text-bottom:文字底部
bottom:底部最下边
解决图片下方的空隙问题:
1.使用除了baseline以外的其他属性值
2.直接将图片变成块级元素:display:block;
vertical-align起作用的前提条件
作用范围是哪一些标签:行内元素(inline)
行内块元素(inline-block)
只有以上两个才会存在基线对齐问题
块级元素没有基线对齐问题!!!!!
图片和文字之间的垂直居中对齐:
需要给对齐的行内或者行内块都要设置一个
vertical-align:middle;
1.块级元素:(负责结构的) display:block;
常见的块级元素:div, p, ul, li, ol, dl, h1~h6…
特点:
1.独占一行
2.支持宽高padding,margin,margin:auto;
3.不给宽度的时候,宽度默认是父级的100%
4.可以容纳其他的块级镖旗和行级标签
5.p标签,不可包裹其他块级标签(为什么?控制台)
2.行级元素:(负责内容的)display:inline;
常见的行级标签:span, img, a, i, strong, em, b…
特点:
1.多个行内元素
2.不支持宽高,margin不支持上下,不支持margin:auto;
3.支持padding,上下padding,只对自身有效,上下padding不影响其他元素的位置。
4.行级标签不能包裹块级标签
5.a标签可以包裹其它块级标签(例外)
6.a标签不能嵌套a标签(why?控制台)
标签之间可以相互转换:通过设置display的值实现
3.行内块元素:display:inline-block;
特点:不支持margin:auto;
行内块有间隙问题:空白字符–看不见–实际存在且有大小
解决方案:
给行内块元素的父级(body)设置字体大小为0
行内块元素重新设置大小
hover:伪类
写法:选择器:hover{css样式}
hover—鼠标悬停在元素上,然后出现一些css样式(改变或增加css样式)
1.自身的hover div:hover{css样式}
2.通过自己hover儿子(后代) div:hover span{css样式}
3.div:hover ~p{css样式}
绝对不能越辈分,无法选择爸爸爷爷,只能选择兄弟邻居后代
元素的隐藏:
1.设置display:none;
让这个元素消失,不占任何位置
显示:只要不是none就行
2.visibility:hidden;
让这个元素消失,只是视觉上消失,实际页面存在,依然对布局起作用。
显示:visibility:visible;—可见度
3.opacity:0~1;
0 完全透明–视觉消失,实际页面存在
1 完全显示
设置透明度—连带内容一起清晰或模糊
背景样式
背景单个样式:
background-color:背景颜色
background-img:url(“图片地址”):背景图片
background-repeat:背景平铺
默认:repeat;
不重复:no-repeat;
x轴平铺:repeat-x;
y轴平铺:repeat-y;
背景图大小:background-size;
1个值:等比例缩放
2个值:宽,高
特殊值:cover:图片等比例缩放,直到覆盖背景区域,然后停止缩放
contain:等比例缩放图片,直到有一条边触碰到盒子边框就会停止缩放
值:px,%;
背景图显示位置:origin
background-origin:
padding-box;默认值,从padding区域开始显示
content-box;从内容区域开始显示
border-box;背景图片相对于边框左上角开始xians
背景图片裁剪:
background-clip;
padding-box;显示内边距和内容区域的背景图
content-box;显示内容区域部分的背景图
border-box;全部显示,以外的裁剪
背景定位:
background-position:x y;
值:数值,px,%;
关键词:left,top,right,bottom,center
搭配:水平和垂直方向
给一个关键词时,默认是居中
背景关联:
background-attachment:
fixed(不动)/scroll(动)
决定背景在这个视口是固定的还是滚动的
背景的复合样式:
颜色 图片 重复 定位/大小 关联;
background:red url() repeat 50px 10px/100px scroll;
多张背景图:后面加逗号隔开
样式初始化:
1.浏览器兼容—页面差异性
2.标签的默认样式,不同的浏览器默认值不一样
3.对seo有影响
样式统一:样式初始化
通配符:网站大,css文件大,所有的标签都会初始化,运行负载加大了,加载时间长,导致用户体验效果变差。
逐个清除:力求影响最小化
body{user-select:none;}-----禁止用户选择文字
圆角:
border-radius:单位 px %; 复合样式
一个值:四个角一样
两个值:左上角右下角,右上角和左下角
三个值:左上角,右上角和左下角,右下角
四个值:左上角,右上角,右下角,左下角
50% 半径=圆
分样式:单独设置某一个角
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
渐变色:img 背景图片
1.线性渐变
linear-gradient(red,blue)
渐变色方向默认是从上到下
可以改变方向:
to 到哪里去
to right (to right,red 10%,blue)
to left
to bottom
to top
对角线:
角度问题-----deg (30deg,red,blue)
负值/正值
值变大-----顺时针旋转
值变小-----逆时针旋转
重复性渐变:
repeating-linear-gradient(red,red 10px,blue 10px,blue 20px);
无限重复填满整个盒子
2.径向渐变:
radial-gradient();
(形状 at 圆心位置,color1,color2…)
椭圆:ellipse 半径不一样 长轴和短轴
圆:circle 半径一样大
radial-gradient(circle at 50px 50px,red,yellow)
重复径向渐变:
repeating-radial-gradient(circle at 50px 50px,red,red 10px,blue 10px,blue 20px)
半径长短:
closest-side:圆心到最近的边距离开始渐变过度
farthest-side:最远的边
radial-gradient(farthest-side at 50px 50px) ;
closest-corner:最近的角
farthest-corner:最远的角
多张背景渐变:
先径向渐变再线性渐变
文章浏览阅读645次。这个肯定是末尾的IDAT了,因为IDAT必须要满了才会开始一下个IDAT,这个明显就是末尾的IDAT了。,对应下面的create_head()代码。,对应下面的create_tail()代码。不要考虑爆破,我已经试了一下,太多情况了。题目来源:UNCTF。_攻防世界困难模式攻略图文
文章浏览阅读2.9k次,点赞3次,收藏10次。偶尔会用到,记录、分享。1. 数据库导出1.1 切换到dmdba用户su - dmdba1.2 进入达梦数据库安装路径的bin目录,执行导库操作 导出语句:./dexp cwy_init/[email protected]:5236 file=cwy_init.dmp log=cwy_init_exp.log 注释: cwy_init/init_123..._达梦数据库导入导出
文章浏览阅读1.9k次。1. 在官网上下载KindEditor文件,可以删掉不需要要到的jsp,asp,asp.net和php文件夹。接着把文件夹放到项目文件目录下。2. 修改html文件,在页面引入js文件:<script type="text/javascript" src="./kindeditor/kindeditor-all.js"></script><script type="text/javascript" src="./kindeditor/lang/zh-CN.js"_kindeditor.js
文章浏览阅读2.3k次,点赞6次,收藏14次。SPI的详情简介不必赘述。假设我们通过SPI发送0xAA,我们的数据线就会变为10101010,通过修改不同的内容,即可修改SPI中0和1的持续时间。比如0xF0即为前半周期为高电平,后半周期为低电平的状态。在SPI的通信模式中,CPHA配置会影响该实验,下图展示了不同采样位置的SPI时序图[1]。CPOL = 0,CPHA = 1:CLK空闲状态 = 低电平,数据在下降沿采样,并在上升沿移出CPOL = 0,CPHA = 0:CLK空闲状态 = 低电平,数据在上升沿采样,并在下降沿移出。_stm32g431cbu6
文章浏览阅读1.2k次,点赞2次,收藏8次。数据链路层习题自测问题1.数据链路(即逻辑链路)与链路(即物理链路)有何区别?“电路接通了”与”数据链路接通了”的区别何在?2.数据链路层中的链路控制包括哪些功能?试讨论数据链路层做成可靠的链路层有哪些优点和缺点。3.网络适配器的作用是什么?网络适配器工作在哪一层?4.数据链路层的三个基本问题(帧定界、透明传输和差错检测)为什么都必须加以解决?5.如果在数据链路层不进行帧定界,会发生什么问题?6.PPP协议的主要特点是什么?为什么PPP不使用帧的编号?PPP适用于什么情况?为什么PPP协议不_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输
文章浏览阅读587次。软件测试工程师移民加拿大 无证移民,未受过软件工程师的教育(第1部分) (Undocumented Immigrant With No Education to Software Engineer(Part 1))Before I start, I want you to please bear with me on the way I write, I have very little gen...
文章浏览阅读304次。Thinkpad X250笔记本电脑,装的是FreeBSD,进入BIOS修改虚拟化配置(其后可能是误设置了安全开机),保存退出后系统无法启动,显示:secure boot failed ,把自己惊出一身冷汗,因为这台笔记本刚好还没开始做备份.....根据错误提示,到bios里面去找相关配置,在Security里面找到了Secure Boot选项,发现果然被设置为Enabled,将其修改为Disabled ,再开机,终于正常启动了。_安装完系统提示secureboot failure
文章浏览阅读10w+次,点赞93次,收藏352次。1、用strtok函数进行字符串分割原型: char *strtok(char *str, const char *delim);功能:分解字符串为一组字符串。参数说明:str为要分解的字符串,delim为分隔符字符串。返回值:从str开头开始的一个个被分割的串。当没有被分割的串时则返回NULL。其它:strtok函数线程不安全,可以使用strtok_r替代。示例://借助strtok实现split#include <string.h>#include <stdio.h&_c++ 字符串分割
文章浏览阅读2.3k次。1 .高斯日记 大数学家高斯有个好习惯:无论如何都要记日记。他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210后来人们知道,那个整数就是日期,它表示那一天是高斯出生后的第几天。这或许也是个好习惯,它时时刻刻提醒着主人:日子又过去一天,还有多少时光可以用于浪费呢?高斯出生于:1777年4月30日。在高斯发现的一个重要定理的日记_2013年第四届c a组蓝桥杯省赛真题解答
文章浏览阅读851次,点赞17次,收藏22次。摘要:本文利用供需算法对核极限学习机(KELM)进行优化,并用于分类。
文章浏览阅读1.1k次。一、系统弱密码登录1、在kali上执行命令行telnet 192.168.26.1292、Login和password都输入msfadmin3、登录成功,进入系统4、测试如下:二、MySQL弱密码登录:1、在kali上执行mysql –h 192.168.26.129 –u root2、登录成功,进入MySQL系统3、测试效果:三、PostgreSQL弱密码登录1、在Kali上执行psql -h 192.168.26.129 –U post..._metasploitable2怎么进入
文章浏览阅读257次。本文将为初学者提供Python学习的详细指南,从Python的历史、基础语法和数据类型到面向对象编程、模块和库的使用。通过本文,您将能够掌握Python编程的核心概念,为今后的编程学习和实践打下坚实基础。_python人工智能开发从入门到精通pdf