Sukie_
Sukie_

HTML CSS整理笔记

码字不易，转载请务必注明原文出处。
不断学习，后期的新增笔记会继续加到文章上方

点击链接后退页面：
<a href="javascript:history.go(-1)">回到上一个网页a>

——修改placeholder提示的样式：
1.除IE外通用写法
 类名或标签名::placeholder {color: red;}
2.加兼容前缀写法

css超出一行显示省略号：
给定宽度(width:100px)、
超出隐藏（overflow:hidden）、
强制在同一行显示（white-space: nowrap）、
省略号（text-overflow:ellipsis）

——常见字体单位——
1.em
相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：该div继承的父级字体大小*1.5。（根据他爸）

2.rem
r即root，始终相对于根节点html的font-size进行缩放。（根据祖先html）

3.vh
vh指当前屏幕可见高度的1%，即 height:100vh == height:100%;
区别：当元素没有内容时候，若设置height:100%该元素高度不会被撑开。但设置height:100vh，该元素会被撑开和屏幕高度一致。

4.vw
Viewport width 视窗宽度。1vw = 视窗宽度的1%，1vw就是当前屏幕宽度的1%，
对比：
width:100%; 设置元素宽度占父元素的宽度100%。
width:100vw; 相对于屏幕可见宽度来设置，所以会出现50vw 比50%大的情况。

从这里往下是分类整理


——1.HTML5基础——
5.在网页中，HTML决定结构和内容，CSS设定网页的表现样式，JavaScript控制网页的行为。
6.必须位于HTML文档第一行。
7.<meta>标签：用于方便浏览器解析或搜索引擎搜索，一般放置于<head>中，用"名称/值"方式：
  (1)表示文档内容类型、字符串编码信息 如：<meta charset="UTF-8">
  (2)为搜索引擎定义关键词: 
<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">
  (3)为网页定义描述内容:    
<meta name="description" content="Free Web tutorials on HTML and CSS">
  (4)定义网页作者:    
<meta name="author" content="Hege Refsnes">
  (5)每30秒中刷新当前页面:   
<meta http-equiv="refresh" content="30">

8.字体样式标签：<strong>字体变粗、<em>和<i>都有斜体的效果，区别<em>表示对内容的强调
9.注释 
10.常用转义字符：
  //空格
> //大于号>
< //小于号<
" //双引号"
© //版本符号

11.常用图片格式：JPG、GIF、PNG、BMP
12.图片标签，必须要有src和alt属性：
<img src="图片地址" alt="图片的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />

13.超链接标签(target指定在哪个窗口打开 值有_self自身窗口、_blank新建窗口)
	<a href="链接地址" target="目标打开窗口位置">附连接的文本或图像a>
14.链接地址
	(1)绝对路径(指向目标地址的完整描述 多指向本站点外的文件
如<a href="http://www.baidu.com/index.html">百度a>)、
	(2)相对路径(一般指向本站点内的文件,如<a href="login/login.html">登陆<a>)
	(3)相对路径中"../"表示当前目录的上级目录，"../../"表示上上级目录
15.超链接的应用场合：
	(1)页面间链接：如<a href="login.html" target="_blank">为您跳转到登录页a>
	(2)锚链接：
	先在目标位置B设置标记如：<a name="new">这里是目标位置a>，
	然后在A位置设置链接路径href属性值为"#标记名"如：a>
	(3)功能性链接：单击时启动本机自带的应用程序如QQ、电子邮箱等
	如电子邮件链接："mailto:电子邮件地址"

16.元素分类
(1)块元素：如<p><h1><div>无论内容有多少，该元素都独占一行(一块)。
   块状元素特点：如果没有设置自身宽度，则显示为父容器的100%。
(2)行内元素：如<strong><a> 显示宽度由自己的内容决定，其他元素可以排在它后面。

16.元素类型转换：
(1)块状元素转为内联元素：display: inline;
(2)内联元素转为块状元素：display: block;
(3)把元素设为内联块状元素： display: inline-block;
(就是同时具备内联元素、块状元素特点，如img、input)

——2 列表、表格、媒体元素——
17.三种列表：
	(1)有序列表<ol><li>
   	(2)无序列表<ul><li> ul中只能嵌套li，而li可以嵌套任意标签。
	(3)定义列表<dl><dt><dd> 是标题及列表项的结合。
18.表格基本结构：单元格、行、列
	(1)<table><tr><th><td>
	(2)HTML5中已废除table的border属性，用css控制边框宽度。
	(3)跨列(横跨)：<td colspan="所跨的列数">内容td>
	   跨行(竖跨)：<td rowspan="所跨行数">内容td>，两者都要删除被合并的其他单元格。
	(4)表格特点：同行单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐。

19.视频元素：
	(1)controls属性提供播放暂停和音量控件、autoplay属性自动播放、loop属性循环播放
<video src="视频路径" controls="controls">你的浏览器不支持video标签video>
	(2)source元素链接不同的视频文件，浏览器会自动选择第一个可识别的格式：
	<video controls>
		<source src="video/video.webm" />
		<source src="video/video.mp4" />你的浏览器不支持video标签
	<video>
20.音频元素：使用语法和视频元素一样，只要把video换成audio即可。

21.HTML5的结构元素(先划分结构再写内容)：
	header(头部)、footer(脚部)、
	section(独立区域)、article(独立文章内容)、
	aside(相关内容或应用,常用于侧边栏)、nav(导航类辅助内容)

22.<iframe>框架:方便在页面中引用站外的页面内容。
   <iframe name="此框架的标识名" src="引用的页面地址">iframe>
23.<iframe>和锚链接的结合：使锚链接的内容在iframe框架中打开
	<iframe name="mainFrame" src="框架引用的页面地址" />
	<a href="链接路径" target="mainFrame">点击在框架中打开a>

——3 表单——
24.表单标签form：
<form method="post" action="login.html" enctype="text/plain">
 表单内容
form>
	(1)action="url"属性意为把表单提交到某个页面,method=get|post意为向服务器发送数据的方式。
	(2)提交方法：get提交,表单数据会在地址栏url中显示；而post提交不会显示，所以post提交更安全。
	(3)enctype="text/plain"指enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。text/plain 	空格转换为加号+，但不对特殊字符编码。

24.表单元素：
	(1)表单元素<input>标签的属性：
	type(默认text,其他password,email,checkbox,radio,button,submit,reset,file,image,url,hidden,number,range,search等)、name、value(可选,该元素的初始值)、size(该元素的初始宽度)、maxlength(可输入的最大字符数)、checked(按钮被选中)
	(2)列表框<select><option>标签：
	<select>中至少包含一个<option>。在<option>有多行选项需滚动查看时，size属性设置可提示看到的行数，selected属性默认选中该列表项。
	(3)按钮：button普通(要和事件如onclick关联使用),submit(提交表单到action指定的url并传递表单数据),reset重置。要求美观可使用图片按钮如<input type="image" src="图片路径"/>
	(4)多行文本域：不能用value属性赋初始值
	<textarea name="标识名" cols="显示的列数" rows="显示的行数">
		自我评价	
	textarea>
	(5)数字number：限制输入的数据为数字，设定最大值最小值、合法的数据间隔step或默认值等
	<input type="number" name="num" min="0" max="100" step="10"/>
	(6)滑块range：作用和数字number一样，只是外观显示为用滑动条选择数值
	<input type="range" name="range" min="0" max="100" step="10"/>
	(7)search搜索框:在任意页面中用于输入搜索关键词的文本框
	<input type="search" name="sousuo" />
	(8)文件域：多用于文件上传
	<input type="file" name="files"/>
	<input type="submit" name="upfiles" value="上传"/>
	(9)当表单数据包含普通数据、文件数据等多部分内容时，要设置表单的enctype编码属性为 multipart/form-data,表示把表单数据分为多部分提交。
	(10)表单隐藏域hidden：数据不会页面中显示，但会随表单一同提交。
	<input type="hidden" name="userid" value="20"/>
	(11)表单元素 只读属性readonly、禁用disabled
	(12)W3CHTML5标准中，规定对布尔类型的属性，属性值可以省略。
	(13)表单元素的标注label：当点击标注的文本时，浏览器会自动对焦关联的表单元素，for属性规定label与哪个表单元素绑定。name和id属性必需。
	<label for="female">女label>
	<input type="radio" name="sex" id="female" />

24.HTML5表单新标签
<form>		供用户输入的表单
<input>	输入域
<textarea>	文本域 (多行输入)
<label>	定义 <input> 元素的标签，一般为输入标题
<fieldset>	定义一组相关的表单元素，并使用外框包含起来
<legend>	定义 <fieldset> 元素的标题
<select>	下拉选项列表
<optgroup>	选项组
<option>	下拉列表中的选项
<button>	点击按钮
<datalist>	指定一个预先定义的输入控件选项列表
<keygen>	定义了表单的密钥对生成器字段
<output>	计算结果

25.表单验证
	(1)好处：减轻服务器的压力；保证数据的可行性和安全性。
	(2)placeholder:为文本框提示用户输入
	<input type="text" name="name" placeholder="请输入你的姓名"/>
	(3)required：规定文本框不能为空
	<input type="email" name="email" required/>
	(4)pattern：输入的内容必须符合正则表达式自定义的规则
	<input type="text" name="tel" required pattern="^1[35]\d{9}"/>规定以13、15开头的11位数字

——4 CSS3基础——
26.CSS：Cascading Style Sheet层叠样式表,又称风格样式表Style Sheet，用于设计网页风格。
27.CSS3的基本语法结构：
	(1)CSS中注释为 /*内容*/
	(2)CSS规则由选择器、声明组成。
	(3)声明必须放在大括号{}中，声明可以是一或多条。
	(4)每条声明由一个属性和值组成，属性和值用冒号:分开，每条语句以分号;结尾如
<style type="text/css">
	h1{
	   font-size : 12px;
	   color : red;		
	}
style>

28.在HTML中引入CSS样式的方式：
	(1)行内样式：直接在标签中用style属性设置CSS 如<p style="font-size:10px;">字体大小p>
	(2)内部样式表：把css写在head的<style>中，规范化应为<style type="text/css">
	(3)外部样式表：文件扩展名为.css，在外部样式表中不需要<style>标签。
	a.链接式引用外部样式表：
		<link type="text/css" rel="stylesheet" href="css/style.css"/>
	b.导入式引用外部样式表：
	<style type="text/css">
	  @import url("css/stype.css");
	typle>

29.样式优先级："就近原则"，行内样式>内部样式表>外部样式表
当有很多样式时，用 !important 可以为某一个样式覆盖掉其他所有样式。
如 #textcolor{ clor:pink !important;}

30.CSS选择器命名规范：驼峰命名法，用语义化单词命名且不能和ID选择器同名.
31.CSS3的基本选择器
	(1)标签选择器：以标签名作选择器的名称如 h1{color:red;}
	(2)类选择器：选择器名可自定义如 .red{color:red;}同时要设置<标签 class="red">内容标签>
	(3)ID选择器：选择器名可自定义如 #red{color:red;}同时要设置<标签 id="red">内容标签>，但同一个id属性的选择器在页面中只能用一次。

32.基本选择器的优先级：ID选择器>类选择器>标签选择器
31.CSS3的高级选择器
	1.层次选择器：
	(1)后代选择器A B{ }：中间用空格隔开，只要是A的后代元素都会被选中。
	(2)子选择器A>B{ }：只能选择A的子元素。
	(3)相邻兄弟选择器A+B{ }：只用于A后面一个同级元素
	(4)通用兄弟选择器A~B{ }：用于A后面所有的同级元素

	2.结构伪类选择器：根据文档对象模型DOM的节点(元素级别)来操作。
	(1)B:first-child	作为父元素的第一个子元素B，作用和(3)相似
	(2)B:last-child	作为父元素的最后一个子元素B
	(3)A B:nth-child(n)	在父级中查第n个子元素是不是B，不分类型
	(4)B:first-of-type 	选择父元素内B类型的第一个元素B
	(5)B:last-of-type	选择父元素内B类型的最后一个元素B
	(6)A B:nth-of-type(n) 在父级里先是不是B类型，再看位置n

	3.属性选择器：
	(1)A[arrt]  选择包含属性arrt的A标签(也可写多个属性，但要同时存在)
	(2)A[arrt = val]  选择包含属性arrt,且属性值=val(区分大小写)的A标签
	(3)A[arrt ^= val] 选择包含属性arrt,且属性值以val开头的任意字符串
	(4)A[arrt $= val] 选择包含属性arrt,且属性值以val结尾的任意字符串
	(5)A[arrt *= val] 选择包含属性arrt,且属性值包含val字符串的A标签

——5 CSS3美化网页——
32.CSS3设置文本样式：
	(1)<span>标签：用来设置行内元素(或几个文字)的样式。
	(2)字体样式：
	font-size：常用单位px
	font-family：若同时设中英文字体，英文字体要设置在中文字体前面
	font-style：normal标准、italic斜体、oblique倾斜
	font-variant：small-caps; 字体设置为新型的大写字母，所有小写字母都转换为大写。
	font-weight：normal标准、bold粗、bolder更粗、lighter细、100-900数字越大越粗
	font：一次设置字体所有属性，顺序为"字体风格-粗细-大小-类型"
	如 font:italic bold 36px "宋体";

	(3)用font简写方式至少要指定 font-size和 font-family 属性，其他的属性(如font-weight、font-style、font-variant、line-height)如未指定将使用默认值。缩写时 font-size 与 line-height中间要加"/"斜扛如 "12px/1.5em"
	
32.Text-transform：控制文本的大小写：
	none 		默认，定义既有小写字母也有大写字母的标准文本(原文)
	capitalize 	每个单词以大写字母开头
	uppercase 	全部为大写字母
	lowercase 	全部小写字母
	inherit 	从父元素继承text-transform属性的值。

32.direction属性：规定文本的方向/书写方向。
	ltr	文本方向从左到右
	rtl	方向从右到左
	inherit 继承父元素direction属性的值。
32.文字排版
(1)适用大多数浏览器：
从左向右 writing-mode: vertical-lr;
从右向左 writing-mode: vertical-rl;
(2)只适用IE浏览器:
从左向右 writing-mode: tb-lr;
从右向左 writing-mode: tb-rl

33.排版网页文本
	(1)color文本颜色:
	 RGB：如color:#FF0000; 另一种方法rgb(r,g,b)其中三个参数取整0~255
	 RGBA：在RGB基础上加控制alpha透明度的参数，取值0~1，0表示完全透明
	(2)text-align水平对齐:
	 left左(默认)、center中间、right右、justify两端对齐
	(3)text-indent首行缩进：2em或2px 缩进两个字符
	(4)text-height文本行高: 单位px或 按倍数(行高是字体大小的倍数)
	(5)text-decoration文本装饰：
	none默认无、underline下划线、overline上划线、line-through删除线
	
	(2)vertical-align垂直对齐：只能作用于<table>表格单元格的对象:
		top顶、middle居中、bottom底
	
	(4)text-shadow文本阴影：
	语法"text-shadow:阴影颜色 x轴位移(x-offset) y轴位移(y-offset) 模糊半径(blur-radius);"
	如text-shadow: blue 10px 10ox 2px;
	(5)查询浏览器是否支持HTML5及CSS3属性的网址www.caniuse.com

33.CSS3设置超链接样式：
伪类:根据标签处于某种行为或状态来修饰超链接样式。其他标签如p可以使用hover
和active。
	语法"标签名:伪类名{声明;}"
	(1)a:link	未访问前的超链接
	(2)a:visited 访问过后
	(3)a:hover	鼠标移到链接上
	(4)a:active	鼠标点击未释放
	(5)设置伪类的顺序：a:link - a:visited - a:hover - a:active
	(6)虽有四种样式,但实际开发中只设置<a>标签选择器样式、鼠标悬浮链接样式

34.CSS3设置列表样式
	(1)list-style-type：列表项标记类型
	none无符号、decimal数字、disc实心圆(默认)、circle空心圆、square实心正方形
	(2)list-style-image：用图像做列表项标记
	(3)list-style-position：设置列表项标记的位置
	(4)list-style：一次设置列表的所有属性 (属性值为none时说明列表无样式)
	顺序为 list-style-type + list-style-position + list-style-image 

35.<div>：可用于网页布局，把HTML文档分成独立不同的部分。
36.CSS3设置背景样式：
	(1)background-color：背景色不能继承，其默认值是透明transparent	
	(2)background-image：url(图片路径)、none(不显示背景图像)
	(3)background-repeat：背景图像重复平铺
	 repeat(沿水平和垂直方向)、no-repeat(不平铺,只显示一次)、
	 repeat-x(只沿水平方向)、repeat-y(只沿垂直方向)、
	
	(4)background-position：背景图的位置(X水平Y垂直方向的偏移量，如果只有一个方向关键字，则默认另一个关键字为center)
	 1.Xpos Ypos:如 0px 0px：默认无偏移,从左上角出现
			   30px 40px：正向偏移,图像向右和向下出现
			   -50px -60px：反向偏移,图像向左和向上出现
	 2.X% Y%：如30% 50%(水平方向偏移30%，垂直方向居中)
	 3.X水平关键词(left,center,right)、Y垂直关键词(top,center,bottom)
	
	(5)background：一次设置背景的所有属性 
	(6)background-size背景图片尺寸：
	auto(保持图片原尺寸,不易失真)、cover(放大填满容器标签)、
	百分比percentage、contain(按照图片本身的宽高比例适应定义背景的区域)

37.gradient线性渐变：颜色沿着一条直线方向过渡
(1)常规语法：" linear-gradient(position, color1, color2,...)"
(2)浏览器兼容语法：" -兼容前缀-linear-gradient(position,color1,color2,...)"
(3)渐变的直线方向：
	to left  从右向左、to top left 向左上方、to bottom left  向左下方、
	to right 从左向右、to top right向右上方、to bottomo right向右下方、
	to bottom从上向下、to top 从下向上、
38.CSS3径向渐变radial-gradient：圆形渐变，颜色从一个起点朝所有方向混合，语法和线性渐变相似。

———6 盒子模型———
39.盒子模型的组成：
content网页内容、border边框、padding内边距、margin外边距
(1)边框border：
  border-color 边框颜色：如border-color:#369 #000 #111 #F00;按“上右下左顺时针”设置
  border-width 边框粗细：如细thin、中等medium、粗的thick
  border-style 边框样式：常用none无边框、dotted点线边框、dashed虚线边框、solid实线边框
  border 简写:如下边框border-bottom:9px red dashed;四条边框border:9px blue solid;
(2)margin外边距：盒子边框以外和其他盒子间的距离 
	margin-top:上外边距、margin-bottom：下外边距
	margin-left：左外边距、margin-right：右外边距
	margin：简写"上右下左"
	auto：设置盒子在它的父容器里居中显示。如margin:0px auto;让整个盒子居中。
如果将元素的 margin设为负值，则元素会变大。
(块元素可以把左右页边距设置为"自动"中心对齐。margin:auto;但前提宽度不能是100%)

注意：很多标签都有自身默认的外边距，所以一般用并集选择器统一设置这些标签的外边距为0px,这样不会产生不必要的空隙。
   如清除body和h2自带的外边距 body,h2{margin:0px;}

(3)padding内边距：
	padding-left、padding-right、padding-top、padding-bottom、
	padding"上右下左"

40.盒子模型的尺寸：
增加边框、内边距、外边距后不会影响内容区域的尺寸，但会增加盒子模型的总尺寸。
(1)内盒总尺寸 = border(上下/左右)+padding(上下/左右)+内容宽/高度
(2)整个盒子的宽度 = 内容宽度+左右padding+左右边框border+左右margin

41.box-sizing拯救布局
(语法)box-sizing:content-box、border-box、inherit
(1)content-box：盒子的宽度或高度=border+padding+(margin)+width/height
(2)border-box：盒子的宽或高度等于元素内容的宽或高度
	(即 该内容宽/高度=盒子宽/高度-border-padding )
(3)inherit：使元素继承父元素的盒子模型模式。

42.border-radius圆角边框：语法和边框相似，只是四个边框带圆角
(语法)border-radius:length{1~4个数字};
(1)用border-radius制作特殊图形
	圆形：元素的宽度和高度必须相同。圆角半径为元素宽度的一半，或直接设圆角半径为50%
	半圆形：元素的高度是宽度的2倍，且圆角半径为元素的宽度值。
	扇形：即制作四分之一圆形。"三同"元素宽度、高度、圆角半径 "一不同"

43.盒子阴影：和文本阴影相似
(语法)box-shadow:inset x-offset y-offset blur-radius color;
inset：内部阴影，可选。
x-offset：X轴水平位移，正值在右，负值在左。
y-offset：Y轴垂直位移，正值在下，负值在上。
blur-radius：模糊半径可选，只能>=0 值越大阴影向外面积越大,边缘越模糊。

——7 浮动——
44.标准文档流：元素根据块元素或行内元素的特性从上到下，从左到右的方式自然排列。
45.display属性：用于指定标签的显示方式
	block：块元素的默认值，该元素前后自带换行符
	inline：行内元素的默认值，元素会显示为行内元素
	inline-block：行内块元素，兼具行内元素和块元素的特性
	none：元素不会显示

46.Float：指定网页元素向哪个方向浮动
left左、right右、none默认无(元素不浮动 显示在其文本出现的位置)
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果是右浮动，后面的文本流将环绕在它左边：

47.clear清除浮动：当子元素全部浮动了，父级将包不住子元素会造成边框塌陷，所以要清除浮动元素对其他元素的影响。
48.clear属性：规定元素的哪一侧不允许其他浮动元素。
	left(左侧不允许浮动元素)、right(右侧不允许)、
	both(左右都不允许，常用于文本在图片下方显示)、
	none(允许浮动元素出现在两侧)

49.解决父级边框塌陷的方法：
(1)浮动元素后加空的div，该div设样式clear:both;margin:0px;padding:0px;
(2)设置父元素固定高度把边框撑开。
(3)父级添加overflow属性:设置外层盒子的overflow:hidden。但此方法不能用于有下拉列表框的场景。
(4)父级用伪类after设样式(推荐)

50.Overflow属性：溢出处理，也可用于扩展盒子高度。
	1) visible 默认溢出内容可见，显示在盒子外面
	2) hidden  多出来的内容被隐藏且没有滚动条
	3) scroll  有垂直水平2条滚动条，可查看多余内容
	4) auto    如果内容溢出，自动显示滚动条(只有垂直条)查看
	5) inherit 继承父特性

————8 定位网页元素————
51.Position属性：指定盒子的位置，相对它父级的位置或它自身应该在的位置。
(1)static 默认无定位，元素按照标准文档布局。
(2)relative相对定位
a.特性:
	1.以标准文档流排版为基础，相当于它在原来位置偏移指定的距离。
	2.元素位置偏移后，仍会保留原位置。
	3.层级提高，可以遮盖标准文档流元素和浮动元素。
b.使用场景：
	相对定位可以不设偏移量，让后面的绝对定位以它为祖先元素作基准定位。
c.语法 position:relative,指定偏移量时：水平left(正值向右移)、right(正值向左),垂直top(正值向下)、bottom(正值向上)。如
	div{ 
		position: relative;
		top:-20px;
		left:20px;
	}
(3)absolute绝对定位
a.特性：
	1.以已定位的祖先元素作基准定位，如果没有定位的祖先元素，则以浏览器窗口为基准定位。
	2.元素位置偏移后，不保留原位置(其他元素可以用它原来的空位)
	3.层级提高，可以遮盖标准文档流元素和浮动元素。
	4.设置绝对定位的元素脱离文档流，对其他盒子的定位无影响
b.使用场景：下拉菜单、焦点图轮播、弹出数字气泡、特别花边等。

(4)fixed固定定位
a.特性：直接以浏览器窗口为基准定位，偏移位置不受窗口滚动条滚动的影响。
b.使用场景：窗口边缘的固定广告、返回顶部图标、边缘固定导航栏等。

52.z-index属性：设置定位元素的堆叠顺序。默认值0，值大的层位于值小层的上方。
(1)网页中的元素都含有两个堆叠层级，一个是未设置绝对定位时所处的环境，此时z-index是0；另一个是设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定。

53.设置元素透明度的方法(通常两种方法搜设置以适应所有浏览器兼容)
(1)opacity:x  		 x值为0~1，值越小越透明
(2)filter:alpha(opacity=x) x值为0~100，值越小越透明

——9 CSS3做网页动画——
54.transform变形：
指效果的集合，如平移、旋转、缩放、倾斜效果。
 语法 transform:[transform-function]*;
 其中transform-function是变形函数，如要设置多个，则中间以空格分开。在用2D变形时要加浏览器兼容性前缀。
 
常用2D变形函数如下：
(1)translate(tx,ty)：
平移函数，将元素从原位置(基于X,Y坐标)移动到指定位置上。
tx表示X轴(横坐标)上移动的向量长度，正值向右，负值向左。
ty表示Y轴(纵坐标)上移动的向量长度，正值向下，负值向上。

(2)scale(sx,sy)：
缩放函数，定义宽高度(元素尺寸)的缩放比例，默认值1。0~0.99缩小，大于1放大。
sx表示宽度即横坐标方向的缩放量。
sy表示高度即纵坐标方向的缩放量。

(3)rotate(a)；
旋转函数，只取一个值为度数值,单位deg表示角度°
正值顺时针转，负值逆时针转。
rotate函数只旋转，不改变元素形状。

(4)skew(ax,ay)：
倾斜函数，取值为度数值，单位deg
ax表示水平方向即X轴的倾斜角度。
ay表示垂直方向即Y轴的倾斜角度。
55.3D变形函数：translate3d()平移函数、scale3d()缩放函数、rotate3d()旋转函数

56.transition过渡：
指动画转换的过程，如渐现、渐弱、动画快慢等。
通过指定属性的初始状态、结束状态，在两个状态间通过平滑过渡的方式实现动画。
语法:[transition-property  transition-duration 
	     transition-timing-function  transition-delay]*
(速记法)transition: 过渡属性 过渡用时 过渡的动画函数 过渡的延迟时间

主要包括四个属性值：
(1)transition-property：
   过渡属性，设置过渡或动态模拟的CSS属性
(2)transition-duration：
   过渡用时，从旧属性到新属性的用时，单位为s
(3)transition-timing-function：
   指定过渡函数、过渡速度,有以下方式：
	ease	速度由快到慢，逐渐变慢(默认)
	liner	匀速
	ease-in  越来越快(渐显)
	ease-out 越来越慢(渐隐)
	ease-in-out 先加速再减速(渐显渐隐)
(4)transition-delay：设置过渡是否延迟时间执行。
注意：transition-duration指完成过渡需要的时间；transition-delay指过渡在什么时间之后触发。

57.总结如何用transition实现过渡动画：
(1)在默认样式中声明元素的初始状态。
(2)声明过渡元素之中状态样式，如悬浮状态
(3)在默认样式中通过添加过渡函数，添加不同的样式。

58.过渡的触发机制：
(1)伪类触发:  :hover、 :active、 :focus、 :checked等
(2)媒体查询：通过@media属性判断设备的尺寸、方向等。
(3)JavaScript触发：用JavaScript脚本触发。

59.animation动画
animation制作动画的步骤:
(1)通过类似Flash动画的关键帧(@keyframes)声明一个动画；
其中@keyframes称为关键帧，可以设置多段属性。语法
 @keyframes 动画名称{
	from{ //css样式代码 }
	百分比1{ //css样式 }
	百分比2{ //css样式 }
	100%{ //css样式 }
 }
(2)找到要设置动画的元素，调用关键帧已声明的动画。
如 animation: spread(动画名) 2s linear(匀速);

60.animation动画的语法和属性：
" animation: 动画名称 播放时间 播放方式 开始播放的时间 播放次数 播放方向 播放状态 动画时间之外的状态 "
其中属性分别为：
animation-name 动画名称、
animation-duration 播放时间、
animation-timing-function 播放方式、
animation-delay 开始播放的时间、
animation-iteration-count 播放次数(无限次用infinite)、
animation-diriection 播放方向、
animation-play-state 播放状态、
animation-fill-mode 动画时间之外的状态、

—— 其他HTML部分——
utf-8 和 utf8的使用
只有MySQL可以用"utf8"，但其他地方一律使用大写"UTF-8"。
网页推荐使用长后缀名.html

有的浏览器中直接输出中文会出现中文乱码，可加声明<meta charset="UTF-8">
————
超链接

<a href="链接网址" target="目标">页面间链接a>


<a name=wo>a>
<a href=#wo>锚链接a>


<a href="mailto:[email protected]" target="_blank">功能性链接a>

<a>标签链接Email地址，使用mailto能发送电子邮件。
如果mailto后面同时有多个参数，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
<a href="mailto:[email protected]?subject=主题名称 &body=邮件内容">


<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本a>
——
超链接伪类：
a:link       访问前
a:visited    访问后
a:hover      鼠标悬停
a:active     鼠标选中未释放
————
创建表格：
1、<table>：整个表格以<table>标记开始、table>标记结束，table在加css样式前不会显示表格线。
2、<tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不用等整个表格加载完后显示。）
3、<tr>：表格的一行，所以有几对tr 表格就有几行。
4、<th>：表格的头部的一个单元格，表格表头，文本默认粗体且居中显示。
5、<td>：表格的一个单元格，一行中包含几对<td>这行中就有几个单元格。
6、表格中列的个数，取决于一行中数据单元格的个数。
7.设置样式border-collapse:collapse;可以把双线边框线合并为一条线边框。

<table border="边距宽度">
 <tr>
  <td rowspan="跨行数量" colspan="跨列数量" align="文本状态">td>
 tr>
table>
————
表格可以添加标题和摘要标签进行优化。
(1)摘要：<table summary="表格简介文本">
摘要的内容不会在浏览器中显示。作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
(2)标题：<caption>
描述表格内容，标题的显示位置：表格上方。
语法：
<table summary="表格简介">
    <caption>标题caption>
    <tr><td>td>tr>
table>
————
内联框架iframe
<iframe>iframe>
相关属性 src="引用页面地址" name="框架标识名" frameborder="边框" 
scrolling="是否出现滚动条" noresize="noresize"更改页面大小
用<a targer="">配合<iframe name="">可实现窗口间的关联
————
表单
<form method="提交方式" action="提交地址"> 
如果是文件域要在表单中加 enctype="multipart/form=data" 属性
隐藏域：type="hidden"
只读：readonly="readonly"
禁用：disabled="disabled"

普通输入框
<input type="text" name="名称" size="长度" maxlength="最大长度"/>

radio单选按钮
<input type="radio" name="sex" value="男" id="nan"/>
<label for="nan">男label>
<input type="radio" name="sex" value="女" id="nv"/>
<label for="nv">女label>

checkbox多选按钮
<input type="checkbox" name="" value="1"/>

下拉列表
<select name="名称">
  <optoin value="值">1option>
select>

文本域textarea
<textarea  rows="行数" cols="列数">文本textarea>
————
透明度
opacity:(范围0~1)  
filter:aplha(opcitive=透明度<(100)>);
————
Location 对象的方法：
.assign() //加载新文档
.reload() //刷新当前文档
.replace() //用新文档替换当前文档
————
在网页中显示代码，当代码为一行时可用<code>包裹，多行代码用<pre>。
<pre>：预格式化，它包围的文本会保留空格和换行符

下拉列表进行多选操作：在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。

通用选择器匹配所有标签 *{ }

浏览器根据选择器权值来使用权值最高的css样式
规则：
标签的权值为1，类选择器的权值为10，ID选择器的权值为100。

!important有最高权值
!important要写在分号的前面，但注意当网页制作者不设置css样式时，浏览器会按照自己的样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但 !important优先级例外，权值高于用户自设置的样式。

什么是“置换元素”？
置换元素会根据标签属性来显示的元素。反之就是非置换元素了。
如img根据src属性来显示，input根据value属性显示，因此可知img和input是置换元素，同理textarea、 select也是置换元素。
————
段落排版：
(1)letter-spacing：单个汉字间隔或单个字母间隔。
(2)word-spacing：按单词来设置间隔。
——
1、border-style 边框样式：
dashed（虚线）| dotted（点线）| solid（实线）

2、border-color 边框颜色
3、border-width 边框宽度：
thin | medium | thick。常用像素(px)。

4、当margin(或padding或border)的left和right的值相同，如：
margin:10px 20px 30px 20px;
缩写：
margin:10px 20px 30px;
——
布局模型与盒模型都是 CSS概念。布局模型建立在盒模型基础上。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
流动（Flow）是默认的网页布局模式。特征：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
流动模型下，内联元素会在所处的包含元素内从左到右水平分布显示。

2、浮动模型 (Float)
任何元素默认是不能浮动的，可用CSS定义为浮动。

3、层模型（Layer）
让html元素在网页中精确定位，就像PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
(1)绝对定位(position: absolute)
将元素从文档流中拖出来，然后用left、right、top、bottom属性相对最靠近它的一个带有定位属性的父包含块进行绝对定位。如果不存在这样的父包含块，则相对于body元素即相对于浏览器窗口。

(2)相对定位(position: relative)
元素在正常文档流中的偏移位置。首先按static(float)方式生成一个元素(元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留。

(3)固定定位(position: fixed)
始终位于浏览器窗口内视图的设置位置，不受文档流动影响，
另外属性background-attachment:fixed;的作用也是设置背景图片固定。

relative与absolute组合：
1、参照定位的元素必须是相对定位元素的前辈元素。
2、参照定位的元素必须加入position:relative。
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

设置颜色的方法：
1、单词：p{color:red}
2、RGB
由 R(red)、G(green)、B(blue)三种颜色比例来配色。
p{color:rgb(133,45,200)}
每一项的值可以是 0~255 的整数，也可以是0%~100% 的百分数。如：
p{color:rgb(20%,33%,25%)}

3、十六进制颜色
其原理也是 RGB 设置，每一项的值由 0-255 变成了十六进制 00-ff。p{color:#00ffff;}
——
相对单位长度值：
1、px像素
像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器和使用显示器的实际像素值有关。

2、em
(1)元素给定字体的 font-size 值，如果元素的 font-size 为 14px，那么 1em = 14px；如果font-size 为18px，那么 1em = 18px。
如 p{font-size:12px; text-indent:2em;}意思首行缩进 24px(即两个字体大小的距离)

(2)当 font-size 设置为 em时，计算标准以它父元素的 font-size 为基础。
如：<p>以这个<span>例子span>为例p>
 p{font-size:14px}  span{font-size:0.8em;}
这里 span 字体大小就为11.2px(14 * 0.8 = 11.2px)

3、%百分比
p{font-size:12px; line-height:130%}
设置行高(行间距)为字体的130%（12 * 1.3 = 15.6px）

块状元素没有设置宽度时怎么居中?
 1.加入 table 标签
 2.设置 display: inline方法：显示类型设为行内元素，进行不定宽元素的属性设置
 3.设置 position: relative 和 left:50%。利用相对定位，将元素从左偏移50%实现居中。
——
隐性改变display类型：
1. position : absolute;
2. float:left 或 float:right;
不论什么元素(display:none除外)，设置以上属性之一，该元素的display显示类型就会自动变为 以display:inline-block(行内块状元素)方式显示，此时可设置元素的 width 和 height，且默认宽度不占满父元素。
(如 a是行内元素，直接设置它的 width 无效，但设置 position:absolute 绝对定位后就可以设置宽度)

文本格式化标签：
<b>	  文本加粗
<strong>文本加粗(加重语气)
<i>	  斜体字
<em>	  斜体(强调文字)
<big>	  字体放大
<small> 	字体缩小
<sub>	  定义下标字
<sup>	  定义上标字
<ins>	  插入字(字体下划线)
<del>	  字体删除线

"计算机输出" 标签：
<code>	 定义计算机代码
<kbd>	 键盘输入
<samp>	 定义计算机代码样本
<var>	 定义变量
<pre>	 预格式化文本(会保留文本的多个空格)

引文、引用、及标签定义：
<abbr>		缩写
<address>	地址联系信息
<bdo>		文字方向(设置dir="rtl"为从右到左显示)
<blockquote>	长文本引用(不会自带双引号，但会两边自动缩进)
<q>		短句引用语(自带双引号)
<cite>		定义引用、引证
<dfn>		定义一个定义项目。

title=""属性规定关于元素的额外信息。标签中加上title属性可实现鼠标移过时出现提示文字，如<p title="提示">
——
<base>元素:
描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:  
<head>      
   <base href="//www.baidu.cn" target="_blank"/>      
head>
提示：在HTML中，<base>标签没有结束标签。
——
HTML 颜色值RGB
由红(R)、绿(G)、蓝(B)组成。
每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。
十六进制值写法：#号后加3个或6个十六进制字符。
三位数表示法为：#RGB，转换为六位数表示为：#RRGGBB
——
常见的 URL Schemes
http	超文本传输协议	以http开头的普通网页不加密
https	安全超文本传输协议	https 加密所有信息交换
ftp		文件传输协议		把文件上传或下载到网站
file	本地计算机上的文件。
——
HTML5 多媒体标签
<embed>	定义内嵌对象
<object>定义内嵌对象
<param>	定义对象的参数
<audio>	定义声音内容
<video>	定义视频或者影片
<source>定义media元素的多媒体资源(<video>、<audio>)
<track>	规定media元素的字幕文件或其他包含文本的文件 (<video>、<audio>)
——
audio音频设置
1.解决方法：
下例使用两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg来播放音频。如果失败，代码将回退尝试 <embed> 元素。
<audio controls height="100" width="100">
   <source src="horse.mp3" type="audio/mpeg">
   <source src="horse.ogg" type="audio/ogg">
   <embed height="50" width="100" src="horse.mp3">
audio>

2.雅虎播放器使用免费，提供一个小型的播放按钮。
（1）如果使用它，要把这段JS插入网页底部：
 <script src="http://mediaplayer.yahoo.com/latest">script>
（2）然后把MP3文件链接到页面中，JS会自动为每首歌创建播放按钮如：
 <a href="音频路径">音乐1a>
 <a href="horse.mp3">音乐2a>
 <script src="http://mediaplayer.yahoo.com/latest">script>

3.用超链接
以下代码指向 mp3 文件链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：
<a href="horse.mp3">音乐1a>
——
video视频播放设置
1.最好的解决方法
下例中使用了4种不同的视频格式。HTML 5 <video> 元素会尝试以 mp4、ogg、webm其中一种格式来播放视频。如果都失败，则回退到 <embed> 元素。
HTML5的source + object + embed。
<video width="320" height="240" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   <source src="movie.webm" type="video/webm">   
   <object data="movie.mp4" width="320" height="240">
	<embed src="movie.swf" width="320" height="240">
   object> 
video>

2.优酷解决方案
如果要在网页中播放视频，可把视频上传到优酷等视频网站，然后在你的网页中插入 HTML代码即可播放视频：
 <embed  src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
	width="480" height="400" 
	type="application/x-shockwave-flash">
embed>

3.使用超链接
如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。
以下代码指向 AVI文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"如 Windows Media Player 来播放该 AVI 文件：
<a href="https://www.xxx.com/html/intro.swf">播放该视频a>
——
HTML中如何键入空格？
1.用空格占位符  
但 有不间断的特性。即连续的 会在同一行内显示。即使有多个 ，浏览器也不会把它们回车拆行。
2.段落间距<p>、换行<br/>
3.用JS动态给HTML添加空格：
例为照顾CSS样式或照顾特殊效果的实现。如果你不单单想让div之间是null，而是想动态添加空格的话，这样(jquery):
  $("#id").innerHTML += " ";
——
display: none; 元素不显示也不会占位
visibility: hidden;  元素只是隐藏但仍然占位置
visibility: collapse; 隐藏但不占空间，类似display:none;
——
clip 剪辑一个绝对定位的元素。
clip : rect(top, right, bottom, left);

CSS 伪类：
1.Anchor伪类 (伪类如:link冒号和伪类名之间不能有空格)
在支持 CSS 的浏览器中，链接的不同状态可用不同的方式显示：
a:link {color:#FF0000;}   /* 未访问的链接 */ 
a:visited {color:#00FF00;} /* 已访问的链接 */ 
a:hover {color:#FF00FF;}  /* 鼠标划过链接 */ 
a:active {color:#0000FF;}  /* 已选中的链接 */

2.CSS类和伪类配合使用：
p : first-child{ }   匹配父级中第一个<p>子元素
p > i:first-child{ } 匹配所有<p>元素的第一个 <i> 子元素
p:first-child i{ }  匹配第一个<p>元素中的所有 <i> 元素
——
White-space属性：设置如何处理元素内的空白。
normal 	默认。空白会被浏览器忽略。
pre 		空白会被浏览器保留。其行为方式类似 <pre>标签。
nowrap 	文本不会换行，文本在同一行上继续，直到遇到<br/>为止。
pre-wrap 	保留空白符序列，但是正常地进行换行。
pre-line 	合并空白符序列，但是保留换行符。
inherit 	从父元素继承 white-space 属性的值。
——
浏览器兼容前缀：
-moz-      火狐等使用 Mozilla内核的浏览器
-webkit-   谷歌、Safari等使用 Webkit内核的浏览器
-o-        Opera浏览器，使用Blink内核
-ms-       IE，使用 Trident内核
——
viewport 是用户网页的可视区域。

你可能感兴趣的:(学习笔记,html,css)

  • C++ 11 Lambda表达式和min_element()与max_element()的使用_c++ lamda函数 min_element((1) 2401_84976182 程序员c语言c++学习
    既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上CC++开发知识点，真正体系化！由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新如果你需要这些资料，可以戳这里获取#include#include#includeusingnamespacestd;boolcmp(int
  • 精通Canvas：15款时钟特效代码实现指南 烟幕缭绕
    本文还有配套的精品资源，点击获取简介：HTML5的Canvas是一个用于绘制矢量图形的API，通过JavaScript实现动态效果。本项目集合了15种不同的时钟特效代码，帮助开发者通过学习绘制圆形、线条、时间更新、旋转、颜色样式设置及动画效果等概念，深化对Canvas的理解和应用。项目中的CSS文件负责时钟的样式设定，而JS文件则包含实现各种特效的逻辑，通过不同的函数或类处理时间更新和动画绘制，提
  • 基于链家网的二手房数据采集清洗与可视化分析 Mint_Datazzh 项目selenium网络爬虫
    个人学习内容笔记，仅供参考。项目链接：https://gitee.com/rongwu651/lianjia原文链接：基于链家网的二手房数据采集清洗与可视化分析–笔墨云烟研究内容该课题的主要目的是通过将二手房网站上的存量与已销售房源，构建一个二手房市场行情情况与房源特点的可视化平台。该平台通过HTML架构和Echarts完成可视化的搭建。因此，该课题的主要研究内容就是如何利用相关技术设计并实现这样
  • 算法学习笔记：17.蒙特卡洛算法 ——从原理到实战，涵盖 LeetCode 与考研 408 例题
    在计算机科学和数学领域，蒙特卡洛算法（MonteCarloAlgorithm）以其独特的随机抽样思想，成为解决复杂问题的有力工具。从圆周率的计算到金融风险评估，从物理模拟到人工智能，蒙特卡洛算法都发挥着不可替代的作用。本文将深入剖析蒙特卡洛算法的思想、解题思路，结合实际应用场景与Java代码实现，并融入考研408的相关考点，穿插图片辅助理解，帮助你全面掌握这一重要算法。蒙特卡洛算法的基本概念蒙特卡
  • 分布式学习笔记_04_复制模型 NzuCRAS 分布式学习笔记架构后端
    常见复制模型使用复制的目的在分布式系统中，数据通常需要被分布在多台机器上，主要为了达到：拓展性：数据量因读写负载巨大，一台机器无法承载，数据分散在多台机器上仍然可以有效地进行负载均衡，达到灵活的横向拓展高容错&高可用：在分布式系统中单机故障是常态，在单机故障的情况下希望整体系统仍然能够正常工作，这时候就需要数据在多台机器上做冗余，在遇到单机故障时能够让其他机器接管统一的用户体验：如果系统客户端分布
  • 算法学习笔记：15.二分查找 ——从原理到实战，涵盖 LeetCode 与考研 408 例题 呆呆企鹅仔 算法学习算法学习笔记考研二分查找
    在计算机科学的查找算法中，二分查找以其高效性占据着重要地位。它利用数据的有序性，通过不断缩小查找范围，将原本需要线性时间的查找过程优化为对数时间，成为处理大规模有序数据查找问题的首选算法。二分查找的基本概念二分查找（BinarySearch），又称折半查找，是一种在有序数据集合中查找特定元素的高效算法。其核心原理是：通过不断将查找范围减半，快速定位目标元素。与线性查找逐个遍历元素不同，二分查找依赖
  • 入门html这篇文章就够了 ξ流ぁ星ぷ132 html前端
    HTML笔记文章目录HTML笔记html介绍什么是htmlhtml的作用HTML标签介绍常用标签标签and标签and标签u标签del删除线br标签用于换行pre标签，预处理标签span标签div标签sub标签andsup标签hr标签h1,h2...h6标签：HTML5中的语义标签：特殊字符img标签a标签第一种用法：超链接第二种用法：锚点video标签表格标签：form标签input标签selec
  • OKHttp3源码分析——学习笔记 Sincerity_ 源码相关Okhttp源码解析读书笔记httpclientcache
    文章目录1.HttpClient与HttpUrlConnection的区别2.OKHttp源码分析使用步骤:dispatcher任务调度器,（后面有详细说明）Request请求RealCallAsyncCall3.OKHttp架构分析1.异步请求线程池,Dispather2.连接池清理线程池-ConnectionPool3.缓存整理线程池DisLruCache4.Http2异步事务线程池,http
  • GoView 强势入驻 GitCode：拖拽低代码，打造高颜值数据大屏 GitCode 代码君 gitcode低代码开源
    信息可视化时代，数字大屏日益成为展示核心KPI、运营状态、监控预警的主流形式。然而，用传统方式开发一个定制化数字大屏需要解决多少问题？1.繁复的数据源集成，各种不同的协议和格式……2.让人晕头转向的可视化逻辑，调动艰难的样式、布局、动画，和往往难以统一的风格3.牵一发而动全身的代码结构，就想换个主题色结果开启的全局CSS大冒险……现在，一个开源项目即可搞定上述问题——拖拽式低代码数字可视化平台Go
  • flutter知识点 ZhDan91 flutter
    #时隔4年了#4年前用flutter开发海外项目和医疗项目。绘制界面的语法与html还是较类似的。把这些封印的记忆和技术回顾一下，最开始是开发Android出身的，所以开发起flutter来依旧是用的androidstudio开发工具。整理下用到的知识点：整理来源：flutter面试题——基础篇（1）-CSDN博客1、Dart是单线程的。在单线程中以消息循环来运行的。其中敖汉两个任务队列。一个是微
  • Python学习笔记5|条件语句和循环语句 iamecho9 Python从0到1学习笔记python学习笔记
    一、条件语句条件语句用于根据不同的条件执行不同的代码块。1、if语句基本语法：if布尔型语句1:代码块#语句1为True时执行的代码示例：age=int(input("请输入你的年龄:"))ifage>=18:print("你已成年")2、if-else语句如果if条件不成立，则执行else代码块：if布尔型语句1:代码块#语句1为True时执行的代码else:代码块#语句1为False时执行的代
  • Vue.js 过渡 & 动画 lsx202406 开发语言
    Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡
  • JavaScript之DOM操作与事件处理详解 AA-代码批发V哥 JavaScriptjavascript
    JavaScript之DOM操作与事件处理详解一、DOM基础：理解文档对象模型二、DOM元素的获取与访问2.1基础获取方法2.2集合的区别与注意事项三、DOM元素的创建与修改3.1创建与插入元素3.2修改元素属性与样式3.2.1属性操作3.2.2样式操作3.3元素内容的修改四、DOM元素的删除与替换4.1删除元素4.2替换元素五、事件处理：实现页面交互5.1事件绑定的三种方式5.1.1HTML属性
  • Vue3 tailwindcss
    1、安装tailwindcsspnpmi-Dtailwindcsspostcssautoprefixer#yarnadd-Dtailwindcsspostcssautoprefixer#npmi-Dtailwindcsspostcssautoprefixer2、创建TailwindCSS配置文件npxtailwindcssinit-ptailwind.config.js/**@type{impor
  • Vue框架之模板语法全面解析 AA-代码批发V哥 Vuevue.js
    Vue框架之模板语法全面解析一、模板语法的核心思想二、插值表达式：数据渲染的基础2.1基本用法：渲染文本2.2纯HTML渲染：`v-html`指令2.3一次性插值：`v-once`指令三、指令系统：控制DOM的行为3.1条件渲染：`v-if`与`v-show`3.1.1`v-if`：动态创建/销毁元素3.1.2`v-else`与`v-else-if`：条件分支3.1.3`v-show`：动态显示/
  • css遗忘的知识2(grid布局，&父类选择器与:has() 讲解) 不断努力的根号七 csscss前端javascript
    ---grid布局1.基础Grid布局定义gird布局和行宽.container{display:grid;grid-template-columns:100px200px300px;/*三列，宽度分别为100px,200px,300px*/grid-template-rows:100px200px;/*两行，高度分别为100px,200px*/}常用单位fr(fractionalunit)：可用
  • three前置课程知识
    学习中文网(1.threejs文件包下载和目录简介|Three.js中文网)threejs官方文件包所有版本：https://github.com/mrdoob/three.js/releases更新迭代较快，要选择对应版本使用---下载zip压缩包Threejs官网中文文档链接：https://threejs.org/docs/index.html#manual/zh/重要的内容docs包:文档
  • Webpack5 多页面实践
    特性维度单页面应用-SPA多页面统一目录-MPA多页面单独部署-MPA入口数量单个，只有一个HTML文件多个，多个HTML文件多个，多个HTML文件，分别打包输出资源输出结构所有资源输出到统一目录（如js/,css/）所有页面的资源共用js/,css/等目录每页资源放在各自目录（如index/js/,index/css/）公共资源复用高：依赖打入主包或懒加载chunk，资源完全共享中：可通过spl
  • 5G标准学习笔记14 - CSI--RS概述 刘孬孬沉迷学习 5G学习笔记信息与通信
    5G标准学习笔记14-CSI–RS概述大家好~，这里是刘孬孬，今天带着大家一起学习一下5GNR中一个非常非常重要的参考信号------------------CSI-RS信号，CSI-RS不是持续发送，UE只能在网络明确配置了CSI-RS的情况下才能使用其进行信道测量。前言对于CSI-RS，肯定还离不开前面所说的CSI（channelstateinformation），前面也讲过CSI对于MIMO
  • 5G标准学习笔记06-基于AI/ML波束管理 刘孬孬沉迷学习 5G学习笔记
    5G标准学习笔记06-基于AI/ML波束管理前言前面对于孬孬学习了波束管理的概述，下面要进一步来看一下传统波束管理和现在3GPP中推动的AL/ML波束管理之前的区别联系。一、传统波束管理方法流程传统BM流程主要包括以下步骤：波束扫描（BeamSweeping）：gNB通过顺序发送多个窄波束（SSB或CSI-RS），覆盖整个服务区域，UE测量每个波束的信号质量（如L1-RSRP或L1-SINR）。波
  • 5G标准学习笔记03- CSI 反馈增强概述 刘孬孬沉迷学习 5G笔记学习
    5G标准学习笔记03-CSI反馈增强概述大家好，最近在研究AI/ML3gpp标准NR空口的有关内容，后面可能会给大家介绍一下对应的有关内容AI/ML在3GPP标准中的研究进展在AI/ML在NR空口的应用中，对应标准主要聚焦了3个case进行讨论研究分别是：CSI反馈增强；波束管理；定位精度增强；这三个内容可能比较涉及RAN1/2的具体内容，后面会基于这个进行一定的介绍。今天主要是主要介绍CSI反馈
  • 前端面试题——5.AjAX的缺点？ 浅端 前端面试题前端面试题
    ①传统的web交互是：用户一个网页动作，就会发送一个http请求到服务器，服务器处理完该请求再返回一个完整的HTML页面，客户端再重新加载，这样极大地浪费了带宽。②AJAX的出现解决了这个问题，它只会向服务器请求用户所需要的数据，并在客户端采用JavaScript处理返回的数据，操作DOM更新页面。③AJXA优点：无刷新更新页面异步服务器通信前端后端负载均衡④AJAX缺点：干掉了Back和Hist
  • 学习笔记(33):matplotlib绘制简单图表-绘制混淆矩阵热图 宁儿数据安全 #机器学习学习笔记matplotlib
    学习笔记(33):matplotlib绘制简单图表-绘制混淆矩阵热图一、绘制混淆矩阵热图代码解析1.1、导入必要的库importmatplotlib.pyplotaspltfromsklearn.metricsimportconfusion_matriximportseabornassnsmatplotlib.pyplot：Python中最常用的绘图库，用于创建各种图表confusion_matr
  • 配置Nginx实现静态资源访问 Gappsong874 nginx运维网络安全web安全安全架构运维开发
    Nginx是一款高性能的HTTP和反向代理服务器，常用于处理静态资源请求。通过合理配置，可以显著提升静态资源的访问速度和服务器性能。以下内容将详细介绍如何配置Nginx以实现静态资源的高效访问。基本静态资源配置静态资源通常包括HTML文件、CSS样式表、JavaScript脚本、图片、视频等。Nginx通过简单的配置即可处理这些请求。在Nginx的配置文件中，通常位于/etc/nginx/ngin
  • JQ+vue实现图片拼接（无限套娃版） 小周同学: jsvuejqueryvue.jsjavascriptjquery
    css样式/*css初始化*/*{margin:0;padding:0;}/*去掉li的小圆点*/li{list-style:none;}/*去掉a的下划线*/a{text-decoration:none;}/*搜索框去除边框*/input,button,select{border:0;/*设置背景颜色为透明*/background-color:transparent;/*去掉外轮廓*/outli
  • Apache http 强制 https 熊猫小账本App WebLinuxSafehttpapachehttpsssl
    1.修改一下文件配置sudonano/etc/apache2/sites-enabled/000-default.confServerNamehongweizhu.comServerAliaswww.hongweizhu.comServerAdminwebmaster@localhostDocumentRoot/var/www/html#强制重定向到HTTPSRewriteEngineOnRewr
  • LLaMA 学习笔记 AI算法网奇 深度学习基础人工智能深度学习
    目录LLaMA模型结构：模型微调手册：推理示例：指定位置加载模型测试ok：模型下载：llama-stack下载modelscope下载LLaMA优化技术RMSNormSwiGLU激活函数旋转位置编码（RoPE）LLaMA模型结构：llama3结构详解-CSDN博客模型微调手册：大模型微调LLaMA详细指南（准备环境、数据、配置微调参数+微调过程）_llama微调-CSDN博客显存占用：FP16/B
  • BOOT_KEY按键（学习笔记） 小高Baby@ 学习笔记
    先来让我们了解一下GPIO是什么吧，它在单片机中也有很重要的作用，接下来我们来看看吧。esp32C3是QFN32封装（一种集成电路（IC）封装类型），GPIO引脚一共有22个，从GPIO-0到GPIO-21。从理论上来说，所有的IO引脚都可以复用为任何外设功能，但有些引脚用作连接芯片内部FLASH或者外部FLASH功能时，官方不建议用作其它用途。esp32c3的GPIO，可以用作输入、输出，可以配
  • 在html中加入网址,网页超链接怎么做，添加超链接网址的的详细步骤 一只爪子 在html中加入网址
    此系列教程主要讲解HTML从基础到精通。自己能够设计一个完整的前端网页项目。程序员写代码在HTML中添加图片其实很简单，就是添加一个img的标签。图片标签的语法一般有src、alt、width、height四种属性就够用了。效果：图片的显示效果图片路径的写法src表示的是图片的路径，这里面的值应该怎么写呢？(1)html文件和图片在相同一个文件夹下。HTML文件和图片文件在相同的目录下，可以直接书
  • jmeter gui 生成不了cli报告文件
    在windows系统下，使用Jmetergui生成HTML报告报错，使用命令行也报错：报错信息：Anerroroccurred:Errorwhileprocessingsamples:Consumerfailedwithmessage:Consumerfailedwithmessage:Consumerfailedwithmessage:Consumerfailedwithmessage:Begi
  • java责任链模式 3213213333332132 java责任链模式村民告县长
    责任链模式，通常就是一个请求从最低级开始往上层层的请求，当在某一层满足条件时，请求将被处理，当请求到最高层仍未满足时，则请求不会被处理。 就是一个请求在这个链条的责任范围内，会被相应的处理，如果超出链条的责任范围外，请求不会被相应的处理。 下面代码模拟这样的效果： 创建一个政府抽象类,方便所有的具体政府部门继承它。 package 责任链模式; /** *
  • linux、mysql、nginx、tomcat 性能参数优化 ronin47
    一、linux 系统内核参数 /etc/sysctl.conf文件常用参数 net.core.netdev_max_backlog = 32768 #允许送到队列的数据包的最大数目 net.core.rmem_max = 8388608 #SOCKET读缓存区大小 net.core.wmem_max = 8388608 #SOCKET写缓存区大
  • php命令行界面 dcj3sjt126com PHPcli
    常用选项 php -v php -i PHP安装的有关信息 php -h 访问帮助文件 php -m 列出编译到当前PHP安装的所有模块 执行一段代码 php -r 'echo "hello, world!";' php -r 'echo "Hello, World!\n";' php -r '$ts = filemtime("
  • Filter&Session 171815164 session
    Filter HttpServletRequest requ = (HttpServletRequest) req; HttpSession session = requ.getSession(); if (session.getAttribute("admin") == null) { PrintWriter out = res.ge
  • 连接池与Spring,Hibernate结合 g21121 Hibernate
            前几篇关于Java连接池的介绍都是基于Java应用的，而我们常用的场景是与Spring和ORM框架结合，下面就利用实例学习一下这方面的配置。         1.下载相关内容：     &nb
  • [简单]mybatis判断数字类型 53873039oycg mybatis
           昨天同事反馈mybatis保存不了int类型的属性,一直报错，错误信息如下:       Caused by: java.lang.NumberFormatException: For input string: "null" at sun.mis
  • 项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space 程序员是怎么炼成的 eclipsejvmtomcatcatalina.sheclipse.ini
       在启动比较大的项目时，因为存在大量的jsp页面，所以在编译的时候会生成很多的.class文件，.class文件是都会被加载到jvm的方法区中，如果要加载的class文件很多，就会出现方法区溢出异常 java.lang.OutOfMemoryError: PermGen space.     解决办法是点击eclipse里的tomcat，在
  • 我的crm小结 aijuans crm
    各种原因吧，crm今天才完了。主要是接触了几个新技术： Struts2、poi、ibatis这几个都是以前的项目中用过的。 Jsf、tapestry是这次新接触的，都是界面层的框架，用起来也不难。思路和struts不太一样，传说比较简单方便。不过个人感觉还是struts用着顺手啊，当然springmvc也很顺手，不知道是因为习惯还是什么。jsf和tapestry应用的时候需要知道他们的标签、主
  • spring里配置使用hibernate的二级缓存几步 antonyup_2006 javaspringHibernatexmlcache
    ．在spring的配置文件中 applicationContent.xml，hibernate部分加入 xml 代码 <prop key="hibernate.cache.provider_class">org.hibernate.cache.EhCacheProvider</prop> <prop key="hi
  • JAVA基础面试题 百合不是茶 抽象实现接口String类接口继承抽象类继承实体类自定义异常
    /*   * 栈（stack）：主要保存基本类型（或者叫内置类型）（char、byte、short、   *int、long、 float、double、boolean）和对象的引用，数据可以共享，速度仅次于   * 寄存器（register），快于堆。堆（heap）：用于存储对象。   */  &
  • 让sqlmap文件 "继承" 起来 bijian1013 javaibatissqlmap
            多个项目中使用ibatis , 和数据库表对应的 sqlmap文件（增删改查等基本语句)，dao, pojo 都是由工具自动生成的, 现在将这些自动生成的文件放在一个单独的工程中，其它项目工程中通过jar包来引用 ，并通过"继承"为基础的sqlmap文件，dao,pojo 添加新的方法来满足项
  • 精通Oracle10编程SQL(13)开发触发器 bijian1013 oracle数据库plsql
    /* *开发触发器 */ --得到日期是周几 select to_char(sysdate+4,'DY','nls_date_language=AMERICAN') from dual; select to_char(sysdate,'DY','nls_date_language=AMERICAN') from dual; --建立BEFORE语句触发器 CREATE O
  • 【EhCache三】EhCache查询 bit1129 ehcache
    本文介绍EhCache查询缓存中数据，EhCache提供了类似Hibernate的查询API，可以按照给定的条件进行查询。   要对EhCache进行查询，需要在ehcache.xml中设定要查询的属性   数据准备 @Before public void setUp() { //加载EhCache配置文件 Inpu
  • CXF框架入门实例 白糖_ springWeb框架webserviceservlet
    CXF是apache旗下的开源框架，由Celtix + XFire这两门经典的框架合成，是一套非常流行的web service框架。 它提供了JAX-WS的全面支持，并且可以根据实际项目的需要，采用代码优先（Code First）或者 WSDL 优先（WSDL First）来轻松地实现 Web Services 的发布和使用，同时它能与spring进行完美结合。 在apache cxf官网提供
  • angular.equals boyitech AngularJSAngularJS APIAnguarJS 中文APIangular.equals
    angular.equals   描述: 比较两个值或者两个对象是不是 相等。还支持值的类型，正则表达式和数组的比较。   两个值或对象被认为是 相等的前提条件是以下的情况至少能满足一项： 两个值或者对象能通过=== （恒等） 的比较 两个值或者对象是同样类型，并且他们的属性都能通过angular
  • java-腾讯暑期实习生-输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1] bylijinnan java
    这道题的具体思路请参看 何海涛的微博：http://weibo.com/zhedahht import java.math.BigInteger; import java.util.Arrays; public class CreateBFromATencent { /** * 题目：输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A
  • FastDFS 的安装和配置 修订版 Chen.H linuxfastDFS分布式文件系统
    FastDFS Home:http://code.google.com/p/fastdfs/ 1. 安装 http://code.google.com/p/fastdfs/wiki/Setup http://hi.baidu.com/leolance/blog/item/3c273327978ae55f93580703.html 安装libevent (对libevent的版本要求为1.4.
  • [强人工智能]拓扑扫描与自适应构造器 comsci 人工智能
          当我们面对一个有限拓扑网络的时候,在对已知的拓扑结构进行分析之后,发现在连通点之后,还存在若干个子网络,且这些网络的结构是未知的,数据库中并未存在这些网络的拓扑结构数据....这个时候,我们该怎么办呢?       那么,现在我们必须设计新的模块和代码包来处理上面的问题
  • oracle merge into的用法 daizj oraclesqlmerget into
    Oracle中merge into的使用 http://blog.csdn.net/yuzhic/article/details/1896878 http://blog.csdn.net/macle2010/article/details/5980965 该命令使用一条语句从一个或者多个数据源中完成对表的更新和插入数据. ORACLE 9i 中，使用此命令必须同时指定UPDATE 和INSE
  • 不适合使用Hadoop的场景 datamachine hadoop
    转自：http://dev.yesky.com/296/35381296.shtml。 　　Hadoop通常被认定是能够帮助你解决所有问题的唯一方案。 当人们提到“大数据”或是“数据分析”等相关问题的时候，会听到脱口而出的回答：Hadoop!  实际上Hadoop被设计和建造出来，是用来解决一系列特定问题的。对某些问题来说，Hadoop至多算是一个不好的选择，对另一些问题来说，选择Ha
  • YII findAll的用法 dcj3sjt126com yii
    看文档比较糊涂，其实挺简单的： $predictions=Prediction::model()->findAll("uid=:uid",array(":uid"=>10));   第一个参数是选择条件：”uid=10″。其中:uid是一个占位符，在后面的array(“:uid”=>10)对齐进行了赋值； 更完善的查询需要
  • vim 常用 NERDTree 快捷键 dcj3sjt126com vim
    下面给大家整理了一些vim NERDTree的常用快捷键了，这里几乎包括了所有的快捷键了，希望文章对各位会带来帮助。 切换工作台和目录 ctrl + w + h 光标 focus 左侧树形目录ctrl + w + l 光标 focus 右侧文件显示窗口ctrl + w + w 光标自动在左右侧窗口切换ctrl + w + r 移动当前窗口的布局位置 o 在已有窗口中打开文件、目录或书签，并跳
  • Java把目录下的文件打印出来 蕃薯耀 列出目录下的文件文件夹下面的文件目录下的文件
    Java把目录下的文件打印出来 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 11:02:
  • linux远程桌面----VNCServer与rdesktop hanqunfeng Desktop
    windows远程桌面到linux，需要在linux上安装vncserver，并开启vnc服务，同时需要在windows下使用vnc-viewer访问Linux。vncserver同时支持linux远程桌面到linux。   linux远程桌面到windows，需要在linux上安装rdesktop，同时开启windows的远程桌面访问。   下面分别介绍，以windo
  • guava中的join和split功能 jackyrong java
    guava库中，包含了很好的join和split的功能，例子如下： 1） 将LIST转换为使用字符串连接的字符串    List<String> names = Lists.newArrayList("John", "Jane", "Adam", "Tom");
  • Web开发技术十年发展历程 lampcy androidWeb浏览器html5
    回顾web开发技术这十年发展历程： Ajax 03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。 彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a
  • 架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好) nannan408 buffer
    1.前言。   如题。 2.代码。   IoService IoService是一个接口，有两种实现：IoAcceptor和IoConnector；其中IoAcceptor是针对Server端的实现，IoConnector是针对Client端的实现；IoService的职责包括： 1、监听器管理 2、IoHandler 3、IoSession
  • ORA-00054:resource busy and acquire with NOWAIT specified Everyday都不同 oraclesessionLock
    [Oracle] 今天对一个数据量很大的表进行操作时，出现如题所示的异常。此时表明数据库的事务处于“忙”的状态，而且被lock了，所以必须先关闭占用的session。   step1，查看被lock的session：   select t2.username, t2.sid, t2.serial#, t2.logon_time from v$locked_obj
  • javascript学习笔记 tntxia JavaScript
      javascript里面有6种基本类型的值:number、string、boolean、object、function和undefined。number：就是数字值，包括整数、小数、NaN、正负无穷。string:字符串类型、单双引号引起来的内容。boolean:true、false object:表示所有的javascript对象，不用多说function:我们熟悉的方法，也就是
  • Java enum的用法详解 xieke90 enum枚举
    Java中枚举实现的分析：     示例：  public static enum SEVERITY{ INFO,WARN,ERROR }     enum很像特殊的class，实际上enum声明定义的类型就是一个类。 而这些类都是类库中Enum类的子类      (java.l
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他