前端html+CSS基础

一.HTML

1.前言与常用标签

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari	webkit	现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。
chrome	Chromium/Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera	blink	现在跟随chrome用blink内核。

Web标准构成：主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

web标准小结

• web标准有三层结构，分别是结构（html）、表现（css）和行为（javascript）
• 结构类似人的身体， 表现类似人的着装， 行为类似人的行为动作
• 理想状态下，他们三层都是独立的， 放到不同的文件里面

声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 指定html 语言种类

head 头部. 标题 title 文档标题

标签名	定义	说明
	标题标签	作为标题使用，并且依据重要性递减
	段落标签	可以把 HTML 文档分割为若干段落
	水平线标签	没啥可说的，就是一条线
	换行标签
	div标签	用来布局的，但是现在一行只能放一个div
	span标签	用来布局的，一行上可以放好多个span

标签	显示效果
b或strong	粗体
i或em	斜体
s或del	加删除线
u或ins	加下划线

b 只是加粗 strong 除了可以加粗还有 强调的意思， 语义更强烈。

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的宽度
border	数字	设置图像边框的宽度

**注意: **

1. 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3. 采取 键值对 的格式 key=“value” 的格式

   ​

链接标签

文字或图片

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

快捷键是： ctrl + / 或者 ctrl +shift + /

相对路径

路径分类	符号
同一级路径
下一级路径	“/”
上一级路径	“…/”

锚点定位

1. 使用相应的id名标注跳转目标的位置。 (找目标)

第2集

2. 使用 链接文本创建链接文本（被点击的） （拉关系） 我也有一个姓毕的姥爷..

base标签

1. base 可以设置整体链接的打开状态
2. base 写到 之间
3. 把所有的连接 都默认添加 target="_blank" 在新窗口中打开链接

预格式化文本pre

 标签可定义预格式化的文本。被包围在 
 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

特殊字符

大于号 >

小于号 <

空格  

2.表格table

表格作用：

存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表

格式数据

1. table用于定义一个表格标签。
2. tr标签 用于定义表格中的行，必须嵌套在 table标签中。
3. td 用于定义表格中的单元格，必须嵌套在标签中。

**总结： **

• 表格的主要目的是用来显示特殊数据的

• 一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签

• 中只能嵌套 类的单元格
• 标签，他就像一个容器，可以容纳所有的元素

表格属性 重点记住 cellspacing 、 cellpadding

属性名	含义	常用属性值
border	设置表格的边框（border="0"为无边框）	像素值
cellspacing	设置单元格与单元格边框之间的空白间距	像素值（默认为2像素）
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值（默认为1像素）
width	设置表格宽度	像素值
height	设置表格高度	像素值
align	这是表格在网页中的水平对齐方式	left、center、right

表头单元格标签th

• 作用：
  • 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
• 语法：
  • 只需用表头标签替代相应的单元格标签即可

表格标题caption

1. caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
2. caption 标签必须紧随 table 标签之后。
3. 这个标签只存在 表格里面才有意义。

合并单元格

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并：colspan=“合并单元格的个数”

合并的顺序我们按照 先上 后下 先左 后右 的顺序

1. 先确定是跨行还是跨列合并
2. 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 ：
3. 删除多余的单元格 单元格

3.列表和表单

列表

无序列表ul

1. 
中只能嵌套
，直接在
标签中输入其他标签或者文字的做法是不被允许的。
2. 
与
之间相当于一个容器，可以容纳所有元素。

有序列表ol

1. 列表项1
2. 列表项2
3. 列表项3
4. ......

自定义列表

名词1

名词1解释1

名词1解释2

... 名词2

名词2解释1

名词2解释2

...

标签名	定义	说明
	无序标签	里面只能包含li 没有顺序，我们以后布局中最常用的列表
	有序标签	里面只能包含li 有顺序， 使用情况较少
	自定义列表	里面有2个兄弟， dt 和 dd

表单

input控件

• input 输入的意思
• 标签为单标签
• type属性设置不同的属性值用来指定不同的控件类型
• 除了type属性还有别的属性

type的属性	描述
text	文本框
password	密码框
radio	单选按钮
checkbox	复选框
button	普通按钮
submit	提交按钮
reset	重置按钮
image	图像形式提交按钮
file	文件域

属性	属性值	描述
name	由用户自定义	控件的名称
value	由用户自定义	input控件中的默认文本值
size	正整数	input控件在页面中的显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符数

checked="checked"表示就默认选中了

label标签

作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

1.第一种用法就是用label直接包括input表单。

用户名：

2.第二种用法 for 属性规定 label 与哪个表单元素绑定

男

textarea文本域

• 语法：

<textarea >
  文本内容
textarea>

• 作用：

  通过textarea控件可以轻松地创建多行文本输入框.

  cols=“每行中的字符数” rows=“显示的行数” 我们实际开发不用

select下拉列表

选项1 选项2 选项3 ...

1. 中至少包含一对 option
   在option 中定义selected =" selected "时，当前项即为默认选中项。

   form表单域

   各种表单控件

   属性	属性值	作用
   action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
   method	get/post	用于设置表单数据的提交方式，其取值为get或post。
   name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

   二.CSS

   1.样式、选择器、文字文本样式

   行内样式

   <标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容

   内部样式

   外部样式

   属性	作用
   rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
   type	定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略
   href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

   选择器 CSS选择器干啥的？ 选择标签用的， 把我们想要的标签选择出来

   选择器	作用	缺点	使用情况	用法
   标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
   类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
   id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
   通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

   文字文本样式font

   属性	表示	注意点
   font-size	字号	我们通常用的单位是px 像素，一定要跟上单位，谷歌浏览器默认的文字大小为16px，最小为12px
   font-family	字体	实际工作中按照团队约定来写字体 p{font-family: Arial,“Microsoft Yahei”, “微软雅黑”;}
   font-weight	字体粗细	记住加粗是 700 或者 bold ， 不加粗 是 normal 或者 400 记住数字不要跟单位 数值在100-900之间
   font-style	字体样式	记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal
   font	字体连写	1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现 写法： 选择器 { font: font-style font-weight font-size/line-height font-family;}必须有font-size和font-family属性

   css外观属性

   属性	表示	注意点
   color	颜色	我们通常用 十六进制 比如 而且是简写形式 #fff
   line-height	行高	控制行与行之间的距离
   text-align	水平对齐	可以设定文字水平的对齐方式 left左对齐(默认);right右对齐;center居中对齐
   text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em; 1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
   text-decoration	文本修饰	记住 添加 下划线 underline ; 取消下划线 none;

   复合选择器

   选择器	作用	特征	使用情况	隔开符号及用法
   后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
   子代选择器	选择 最近一级元素	只选亲儿子	较少	符号是**>** .nav>p
   交集选择器	选择两个标签交集的部分	既是 又是	较少	没有符号 p.one
   并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
   链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法

   伪类选择器

   • a:link /* 未访问的链接 */
   • a:visited /* 已访问的链接 */
   • a:hover /* 鼠标移动到链接上 */
   • a:active /* 选定的链接 */

   2.display、行高、背景、特性

   标签显示模式display

   元素模式	元素排列	设置样式	默认宽度	包含
   块级元素block	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
   行内元素inline	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
   行内块元素inline-block	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

   • 块转行内：display:inline;
   • 行内转块：display:block;
   • 块、行内元素转换为行内块： display: inline-block;

   行高line-height

   • 如果 行高 等 高度 文字会 垂直居中
   • 如果行高 大于 高度 文字会 偏下
   • 如果行高小于高度 文字会 偏上

   CSS 背景(background)

   属性	作用	值
   background-color	背景颜色	预定义的颜色值/十六进制/RGB代码 语法：background-color:颜色值; 默认的值是 transparent 透明的
   background-image	背景图片	url(图片路径)， none(无背景图，默认的) background-image : none | url (url)
   background-repeat	是否平铺	repeat 背景图像在纵向和横向上平铺（默认的） /no-repeat 不平铺 /repeat-x 在横向上平铺/repeat-y 在纵向平铺
   background-position	背景位置	length(百分比,长度值)/position(方位名词 : top | center | bottom | left | center | right) 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
   background-attachment	背景固定还是滚动	scroll(随对象内容滚动) / fixed(背景图像固定)
   背景简写	更简单	background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
   背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值，最后一个参数是alpha 透明度 取值范围 0~1之间，低于 ie9 的版本是不支持的

   CSS层叠性

   • 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
   • 样式不冲突，不会层叠

   CSS继承性

   子标签会继承父标签的某些样式，如文本颜色和字号。

   想要设置一个可继承的属性，只需将它应用于父元素即可。

   CSS优先级 权重

   标签选择器	计算权重公式
   继承或者 *	0,0,0,0
   每个元素（标签选择器）	0,0,0,1
   每个类，伪类	0,0,1,0
   每个ID	0,1,0,0
   每个行内样式 style=""	1,0,0,0
   每个!important 重要的	∞ 无穷大

   数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

   3.盒子模型

   • 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
   • 盒子里面的文字和图片等元素是 内容区域
   • 盒子的厚度 我们成为 盒子的边框
   • 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
   • 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

   盒子边框border

   属性	作用
   border-width	定义边框粗细，单位是px
   border-style	边框的样式
   border-color	边框颜色

   边框的样式：

   • none：没有边框即忽略所有边框的宽度（默认值）
   • solid：边框为单实线(最为常用的)
   • dashed：边框为虚线
   • dotted：边框为点线

   综合写法border : border-width || border-style || border-color

   ​ border: 1px solid red; 没有顺序

   表格的细线边框border-collapse:collapse

   • 通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，

   • 但是两个单元格之间的边框会出现重叠，从而使边框变粗

   • 通过css属性：

     table{ border-collapse:collapse; }  
     

     • collapse 单词是合并的意思
     • border-collapse:collapse; 表示相邻边框合并在一起。

     ​

   内边距padding

   1. 添加了内边距，内容和边框 有了距离。
   2. 盒子会变大了(解决办法：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小)

   值的个数	表达意思
   1个值	padding：上下左右内边距;
   2个值	padding: 上下内边距 左右内边距 ；
   3个值	padding：上内边距 左右内边距 下内边距；
   4个值	padding: 上内边距 右内边距 下内边距 左内边距 ；

   盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

   如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。

   外边距（margin）

   margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离，和padding类似。

   margin可以让一个块级盒子实现水平居中必须：

   • 盒子必须指定了宽度（width）
   • 然后就给左右的外边距都设置为auto，语法： margin:auto;或margin: 0 auto;

   清除元素的默认内外边距

   {
   padding:0; / 清除内边距 /
   margin:0; / 清除外边距 */
   }

   外边距合并

   1.相邻块元素垂直外边距的合并

   • 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
   • 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
   • 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

   2.嵌套块元素垂直外边距的合并（塌陷）

   • 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
   • 父元素的上外边距会与子元素的上外边距发生合并
   • 合并后的外边距为两者中的较大者

   解决方案：

   1. 可以为父元素定义上边框。
   2. 可以为父元素定义上内边距
   3. 可以为父元素添加overflow:hidden。
   4. 还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题。

   圆角边框border-radius(CSS3)

   语法：border-radius:length; 让正方形length=50%则为圆形 ， 对于长方形设置为高度的一半

   盒子阴影box-shadow(CSS3)

   box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；

   4.浮动、书写顺序

   CSS 提供了 3 种机制来设置盒子的摆放位置，分别是

   普通流（标准流:块级元素，行内元素，行内块元素）

   浮动 (让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行)

   定位(将盒子定在某一个位置 自由的漂浮在其他盒子的上面)

   在 CSS 中，通过 float 中文， 浮 漏 特 属性定义浮动，语法如下：

   选择器 { float: 属性值; }
   

   属性值	描述
   none	元素不浮动（默认值）
   left	元素向左浮动
   right	元素向右浮动

   float —— 浮漏特

   特点	说明
   浮	加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
   漏	加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
   特	特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙

   浮动元素与兄弟盒子的关系

   在一个父级盒子中，如果前一个兄弟盒子是：

   • 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
   • 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

   清除浮动

   父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

   1.使用after伪元素清除浮动

   .clearfix:after { content: “”; display: block; height: 0; clear: both; visibility: hidden; }

   .clearfix {zoom: 1;} / IE6、7 专有 */

   2.使用双伪元素清除浮动

   .clearfix:before,.clearfix:after {
   content:"";
   display:table;
   }
   .clearfix:after {
   clear:both;
   }
   .clearfix {
   *zoom:1;
   }

   CSS属性书写顺序

   建议遵循以下顺序：

   1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
   2. 自身属性：width / height / margin / padding / border / background
   3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
   4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

   5.定位

   定位也是用来布局的，它有两部分组成：定位=定位模式+边偏移

   在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

   定位模式 (position) 语法：选择器 { position: 属性值; }

   定位模式(position)	是否脱标占有位置	移动位置基准	模式转换（行内块）	使用情况
   静态static	不脱标，正常模式	正常模式	不能	几乎不用
   相对定位relative	不脱标，占有位置	相对自身位置移动	不能	基本单独使用
   绝对定位absolute	完全脱标，不占有位置	相对于定位父级移动位置	能	要和定位父级元素搭配使用
   固定定位fixed	完全脱标，不占有位置	相对于浏览器移动位置	能	单独使用，不需要父级

   子绝父相 —— 子级是绝对定位，父级要用相对定位。

   绝对定位的盒子居中

   position:relative;

   top:50%;

   left:50%;

   transform: translate(-50%,-50%);

   堆叠顺序（z-index）

   1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
   2. 如果属性值相同，则按照书写顺序，后来居上；
   3. 数字后面不能加单位。

   注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

   6.css高级技巧

   透明度

   opacity:0~1;

   元素的显示与隐藏

   display 显示

   • display 设置或检索对象是否及如何显示。

     display: none 隐藏对象
     
     display：block 除了转换为块级元素之外，同时还有显示元素的意思。
     

   • 特点： 隐藏之后，不再保留位置。

   visibility 可见性

   • 设置或检索是否显示对象。

     visibility：visible ; 　对象可视
     
     visibility：hidden; 　  对象隐藏
     

   • 特点： 隐藏之后，继续保留原有位置。

   overflow 溢出

   • 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

   属性值	描述
   visible	不剪切内容也不添加滚动条
   hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
   scroll	不管超出内容否，总是显示滚动条
   auto	超出自动显示滚动条，不超出不显示滚动条

   三者关系比较

   属性	区别	用途
   display	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
   visibility	隐藏对象，保留位置	使用较少
   overflow	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

   鼠标样式cursor

   属性值	描述
   default	小白 默认
   pointer	小手
   move	移动
   text	文本
   not-allowed	禁止

   轮廓线 outline

   语法：outline: none;

   防止拖拽文本域resize

   语法：

   vertical-align垂直对齐

   让文字居中对齐，是 text-align: center;

   vertical-align 垂直对齐，它只针对于行内元素或者行内块元素

   语法：vertical-align : baseline |top |middle |bottom

   图片、表单和文字对齐

   语法：vertical-align : middle

   去除图片底侧空白缝隙

   • 原因：

     图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。

     就是图片底侧会有一个空白缝隙。

   • 解决的方法就是：

     • 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。

   溢出的文字省略号显示

   1. 先强制一行内显示文本

      white-space: nowrap;

   2. 超出的部分隐藏

      overflow: hidden;

   3. 文字用省略号替代溢出的部分

      text-overflow: ellipsis;

   精灵技术

   首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。

   1. 精确测量，每个小背景图片的大小和 位置。
   2. 给盒子指定小背景图片时， 背景定位基本都是 负值。

   滑动门

   一般的经典布局都是这样的：

   <li>
     <a href="#">
       <span>导航栏内容span>
     a>
   li>
   

   css样式

   *{

   padding:0;
   margin:0;
   

   }
   body{

   background: url(images/wx.jpg) repeat-x;
   

   }
   .father {

   padding-top:20px;
   

   }
   li {

   padding-left: 16px;
   height: 33px;
   float: left;
   line-height: 33px;
   margin:0  10px;
   background: url(./images/to.png) no-repeat left ;
   

   }
   a {

   padding-right: 16px;
   height: 33px;
   display: inline-block;
   color:#fff;
   background: url(./images/to.png) no-repeat right ;
   text-decoration: none;
   

   }
   li:hover,
   li:hover a {

   background-image:url(./images/ao.png);
   

   }

   总结：

   1. a 设置 背景左侧，padding撑开合适宽度。
   2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
   3. 之所以a包含span就是因为 整个导航都是可以点击的。

   CSS三角形

   1. 我们用css 边框可以模拟三角效果
   2. 宽度高度为0
   3. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
   4. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;

   阻止链接跳转

   需要给href添加 javascript:void(0); 或者 javascript:;

   7.练习

   网站ico图标

   1.使用ico图标

   • 首先把favicon.ico 这个图标放到根目录下。

   • 再html里面， head 之间 引入 代码。

   2.制作ico图标

   我们可以自己做的图片，转换为 ico图标，以便放到我们站点里面。

   方法步骤：

   • 首先把我们想要的切成图片。
   • 要把图片转换为 ico 图标，我们借助于第三方转换网站： http://www.bitbug.net/。 比特虫

   总结：

   代码：       
   

   注意：

   1. 她（它）是显示在浏览器中的网页图标。
   2. 它是图标形式，不是一个图片
   3. 位置是放到 head 标签中间。
   4. 后面的type=“image/x-icon” 属性可以省略。（我相信你也愿意省略。）
   5. 为了兼容性，请将favicon.ico 这个图标放到根目录下。

   网站优化三大标签

   1.网页title 标题

   一般不超过28个中文，最先出现的词语权重高，主关键词出现3次，辅关键词出现1次

   2.Description 网站说明

   品优购网：

   注意点：

   1. 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击。
   2. 同样遵循简短原则，字符数含空格在内不要超过 120 个汉字。
   3. 补充在 title 和 keywords 中未能充分表述的说明.
   4. 用英文逗号 关键词1,关键词2

   3.Keywords 关键字

   Keywords是页面关键词，是搜索引擎关注点之一。Keywords应该限制在6～8个关键词左右，电商类网站可以多 少许。

   品优购网：

   字体图标iconfont

   可以做出跟图片一样可以做的事情,改变透明度、旋转度，等…
   但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等…
   本身体积更小，但携带的信息并没有削减。
   几乎支持所有的浏览器

   UI设计人员给我们svg文件，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。

   ​ 推荐网站： http://icomoon.io

   • icomoon字库

   IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

   • 阿里icon font字库

   http://www.iconfont.cn/

   这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！

   在样式里面声明字体： 告诉别人我们自己定义的字体(一定注意字体文件路径的问题)

   @font-face {
     font-family: 'icomoon';
     src:  url('fonts/icomoon.eot?7kkyc2');
     src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
       url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
       url('fonts/icomoon.woff?7kkyc2') format('woff'),
       url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
   }
   

   给盒子使用字体

   span {
   		font-family: "icomoon";
   	}
   

   过渡transition

   过渡动画： 是从一个状态 渐渐的过渡到另外一个状态

   语法格式:

   transition: 要过渡的属性  花费时间  运动曲线  何时开始;
   

   属性	描述	CSS
   transition	简写属性，用于在一个属性中设置四个过渡属性。	3
   transition-property	规定应用过渡的 CSS 属性的名称。	3
   transition-duration	定义过渡效果花费的时间。默认是 0。	3
   transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3
   transition-delay	规定过渡效果何时开始。默认是 0。	3

   运动曲线 默认是 ease 匀速:lineaar 逐渐慢下来:ease 加速:ease-in 减速:ease-out 先加后减速:ease-in-out

   获得焦点元素

   :focus 伪类 选择器用于选取获得焦点的元素 。 我们这里主要针对的是 表单元素

   :hover

   8.命令行、gulp

   命令行

   • 盘符： 就可以进入某个盘符

   • dir 列出目录中的所有文件

   • cd 切换文件夹(目录)

     • cd 目录名 可以进入指定目录，目录名可以是绝对路径也可以是相对路径
     • cd …/ 返回上一层目录
       • cd ./ 当前目录
       • cd / 返回根目录（盘符下）

   • md/mkdir 创建文件夹

   • rd/rmdir 删除文件夹

     • rd newdir 删除目录，如果目录中有其它内容会提示目录不是空的
     • rd /S newdir 删除目录，如果目录中有其它内容会提示newdir, 是否确认(Y/N)?，输入Y按回车删除
     • rd /S /Q newdir 静默删除目录，如果目录中有其它内容，不提示直接删除(此操作危险)

   • 创建文件

     • cd./>文件 比如 cd./>index.html 这样就可以创建一个html页面

   • 删除文件

     • del 文件名 比如 del index.html

     ​

   小技巧

   • 自动补全

     • 在敲出文件/目录前几个字母后，按下tab键
       • 如果有以这前几个字母开头的文件/目录，系统会自动补全
       • 如果补全的文件/目录不是想要的可以继续按tab键，切换到下一个文件/目录，知道找到想要的为止

   • 曾经使用过的命令

     • 按上/下光标键可以在曾经使用过的命令间来回切换
     • 如果不想执行当前的命令可以按ctrl + c 中断r

   • cls 清屏 （CLear Screen）

   • exit 退出

   • 快捷键 ctrl + c 终止当前操作

   • notepad 记事本

   • calc 计算器

   gulp

   Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。

   • 自动压缩代码
   • 自动打包、代码检查
   • 打开浏览器，并监视源码变化实时刷新
   • 部署到线上服务器

   安装

   • 安装node.js

     https://nodejs.org/

     检测node 是否安装成功

      node -v
   

   • 安装cnpm

   npm install -g cnpm --registry=https://registry.npm.taobao.org
   

   检测安装cnpm 是否成功

       cnpm -v
   

   • 安装gulp

     gulp中文网

     gulp官网

     # 全局安装
     cnpm install  gulp -g
     

     检测安装成功 gulp

   ​ gulp -v

   本地环境搭建体验

   以下内容首先打开命令行，然后切换到项目的根目录，输入以下命令并运行

   • 初始化

     # 在当前目录自动生成一个package.json文件
     cnpm init -y
     

   • 安装插件

     # 当前项目中安装gulp
     cnpm install gulp --save-dev
     # 压缩html的插件
     cnpm install gulp-htmlmin --save-dev
     # 压缩css的插件
     cnpm install gulp-cssmin --save-dev
     # 自动打开浏览器，并实时刷新插件(浏览器同步测试工具)
     cnpm install browser-sync --save-dev
     

   • 配置文件

     在当前项目的根目录中创建一个gulpfile.js文件，如链接中文件

     gulpfile.js

     ​

   演示自动化构建

   # 自动化压缩和复制文件到发布目录dist
   gulp build
   # 开启测试用的服务器
   gulp dev
   

   你可能感兴趣的:(前端开发笔记,html,css,前端web)

   • swagger访问路径 igotyback swagger
     Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
   • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
     示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
   • 四章-32-点要素的聚合 彩云飘过
     本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
   • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
     ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
   • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
     ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
   • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
     Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
   • webpack图片等资源的处理 dmengmeng
     需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
   • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
     目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
   • 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
     作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
   • 斟一小组鸡血视频 和自己一起成长
     http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
   • Dockerfile命令详解之 FROM 清风怎不知意 容器化java前端javascript
     许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
   • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
     一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
   • 【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
     【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
   • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
     html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
   • spring mvc @RequestBody String类型参数 zoyation spring-mvcspringmvc
     通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
   • ubuntu安装opencv最快的方法 Derek重名了
     最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
   • 处理标签包裹的字符串，并取出前250字符 周bro 前端javascript开发语言
     //假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
   • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
     1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
   • 360前端星计划-动画可以这么玩 马小蜗
     动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
   • h5小游戏定制开发 红匣子实力推荐
     随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
   • css2中的透明 琪33
     .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
   • Nginx从入门到实践(三) 听你讲故事啊
     动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
   • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
     Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
   • 前端知识点 ZhangTao_zata 前端javascriptcss
     下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
   • 非关系型数据库 天秤-white nosql
     一、为什么要用Nosql1.单机MySQL的时代。一个基本的网站访问量一般不会太大，单个数据库完全足够。那时候更多使用的静态网页html，服务器根本没有太大压力。这时候网站的瓶颈是什么？-数据量如果太大，一个机器放不下。-数据量太大需要建立数据的索引（B+Tree），一个服务器内存放不下。-访问量读写混合，一个服务器承受不了。2.memcached缓存+MySQL+垂直拆分（读写分离）。网站80%
   • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
     Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
   • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
     边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
   • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
     爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
   • 七.正则化 愿风去了
     吴恩达机器学习之正则化（Regularization）http://www.cnblogs.com/jianxinzhou/p/4083921.html从数学公式上理解L1和L2https://blog.csdn.net/b876144622/article/details/81276818虽然在线性回归中加入基函数会使模型更加灵活，但是很容易引起数据的过拟合。例如将数据投影到30维的基函数上，模
   • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
     前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
   • JAVA中的Enum 周凡杨 javaenum枚举
     Enum是计算机编程语言中的一种数据类型---枚举类型。 在实际问题中，有些变量的取值被限定在一个有限的范围内。     例如，一个星期内只有七天 我们通常这样实现上面的定义： public String monday; public String tuesday; public String wensday; public String thursday
   • 赶集网mysql开发36条军规 Bill_chen mysql业务架构设计mysql调优mysql性能优化
     (一)核心军规 (1)不在数据库做运算    cpu计算务必移至业务层； (2)控制单表数据量    int型不超过1000w，含char则不超过500w；    合理分表；    限制单库表数量在300以内； (3)控制列数量    字段少而精，字段数建议在20以内
   • Shell test命令 daizj shell字符串test数字文件比较
     Shell test命令 Shell中的 test 命令用于检查某个条件是否成立，它可以进行数值、字符和文件三个方面的测试。 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于则为真 -lt 小于则为真 -le 小于等于则为真 实例演示： num1=100 num2=100if test $[num1]
   • XFire框架实现WebService(二) 周凡杨 javawebservice
        有了XFire框架实现WebService(一)，就可以继续开发WebService的简单应用。 Webservice的服务端(WEB工程)： 两个java bean类： Course.java    package cn.com.bean; public class Course {     private
   • 重绘之画图板 朱辉辉33 画图板
            上次博客讲的五子棋重绘比较简单，因为只要在重写系统重绘方法paint（）时加入棋盘和棋子的绘制。这次我想说说画图板的重绘。        画图板重绘难在需要重绘的类型很多，比如说里面有矩形，园，直线之类的，所以我们要想办法将里面的图形加入一个队列中，这样在重绘时就
   • Java的IO流 西蜀石兰 java
     刚学Java的IO流时，被各种inputStream流弄的很迷糊，看老罗视频时说想象成插在文件上的一根管道，当初听时觉得自己很明白，可到自己用时，有不知道怎么代码了。。。 每当遇到这种问题时，我习惯性的从头开始理逻辑，会问自己一些很简单的问题，把这些简单的问题想明白了，再看代码时才不会迷糊。 IO流作用是什么？ 答：实现对文件的读写，这里的文件是广义的； Java如何实现程序到文件
   • No matching PlatformTransactionManager bean found for qualifier 'add' - neither 林鹤霄
     java.lang.IllegalStateException: No matching PlatformTransactionManager bean found for qualifier 'add' - neither qualifier match nor bean name match!   网上找了好多的资料没能解决，后来发现：项目中使用的是xml配置的方式配置事务，但是
   • Row size too large (> 8126). Changing some columns to TEXT or BLOB aigo column
     原文：http://stackoverflow.com/questions/15585602/change-limit-for-mysql-row-size-too-large   异常信息： Row size too large (> 8126). Changing some columns to TEXT or BLOB or using ROW_FORMAT=DYNAM
   • JS 格式化时间 alxw4616 JavaScript
     /** * 格式化时间 2013/6/13 by 半仙 [email protected] * 需要 pad 函数 * 接收可用的时间值. * 返回替换时间占位符后的字符串 * * 时间占位符:年 Y 月 M 日 D 小时 h 分 m 秒 s 重复次数表示占位数 * 如 YYYY 4占4位 YY 占2位<p></p> * MM DD hh mm
   • 队列中数据的移除问题 百合不是茶 队列移除
          队列的移除一般都是使用的remov();都可以移除的,但是在昨天做线程移除的时候出现了点问题,没有将遍历出来的全部移除,  代码如下;      // package com.Thread0715.com; import java.util.ArrayList; public class Threa
   • Runnable接口使用实例 bijian1013 javathreadRunnablejava多线程
     Runnable接口 a.       该接口只有一个方法：public void run(); b.       实现该接口的类必须覆盖该run方法 c.       实现了Runnable接口的类并不具有任何天
   • oracle里的extend详解 bijian1013 oracle数据库extend
     扩展已知的数组空间，例： DECLARE TYPE CourseList IS TABLE OF VARCHAR2(10); courses CourseList; BEGIN -- 初始化数组元素，大小为3 courses := CourseList('Biol 4412 ', 'Psyc 3112 ', 'Anth 3001 '); --
   • 【httpclient】httpclient发送表单POST请求 bit1129 httpclient
     浏览器Form Post请求 浏览器可以通过提交表单的方式向服务器发起POST请求，这种形式的POST请求不同于一般的POST请求 1. 一般的POST请求，将请求数据放置于请求体中，服务器端以二进制流的方式读取数据，HttpServletRequest.getInputStream()。这种方式的请求可以处理任意数据形式的POST请求，比如请求数据是字符串或者是二进制数据 2. Form
   • 【Hive十三】Hive读写Avro格式的数据 bit1129 hive
      1. 原始数据 hive> select * from word; OK 1 MSN 10 QQ 100 Gtalk 1000 Skype      2. 创建avro格式的数据表   hive> CREATE TABLE avro_table(age INT, name STRING)STORE
   • nginx+lua+redis自动识别封解禁频繁访问IP ronin47
     在站点遇到攻击且无明显攻击特征，造成站点访问慢，nginx不断返回502等错误时，可利用nginx+lua+redis实现在指定的时间段 内，若单IP的请求量达到指定的数量后对该IP进行封禁，nginx返回403禁止访问。利用redis的expire命令设置封禁IP的过期时间达到在 指定的封禁时间后实行自动解封的目的。 一、安装环境： CentOS x64 release 6.4(Fin
   • java-二叉树的遍历-先序、中序、后序（递归和非递归）、层次遍历 bylijinnan java
     import java.util.LinkedList; import java.util.List; import java.util.Stack; public class BinTreeTraverse { //private int[] array={ 1, 2, 3, 4, 5, 6, 7, 8, 9 }; private int[] array={ 10,6,
   • Spring源码学习-XML 配置方式的IoC容器启动过程分析 bylijinnan javaspringIOC
     以FileSystemXmlApplicationContext为例，把Spring IoC容器的初始化流程走一遍： ApplicationContext context = new FileSystemXmlApplicationContext ("C:/Users/ZARA/workspace/HelloSpring/src/Beans.xml&q
   • [科研与项目]民营企业请慎重参与军事科技工程 comsci 企业
          军事科研工程和项目 并非要用最先进，最时髦的技术，而是要做到“万无一失”    而民营科技企业在搞科技创新工程的时候，往往考虑的是技术的先进性，而对先进技术带来的风险考虑得不够，在今天提倡军民融合发展的大环境下，这种“万无一失”和“时髦性”的矛盾会日益凸显。。。。。。所以请大家在参与任何重大的军事和政府项目之前，对
   • spring 定时器-两种方式 cuityang springquartz定时器
     方式一： 间隔一定时间 运行 <bean id="updateSessionIdTask" class="com.yang.iprms.common.UpdateSessionTask" autowire="byName" /> <bean id="updateSessionIdSchedule
   • 简述一下关于BroadView站点的相关设计 damoqiongqiu view
     终于弄上线了，累趴，戳这里http://www.broadview.com.cn   简述一下相关的技术点   前端：jQuery+BootStrap3.2+HandleBars，全站Ajax（貌似对SEO的影响很大啊！怎么破？），用Grunt对全部JS做了压缩处理，对部分JS和CSS做了合并（模块间存在很多依赖，全部合并比较繁琐，待完善）。   后端：U
   • 运维 PHP问题汇总 dcj3sjt126com windows2003
     1、Dede(织梦)发表文章时,内容自动添加关键字显示空白页 解决方法： 后台>系统>系统基本参数>核心设置>关键字替换（是/否），这里选择“是”。 后台>系统>系统基本参数>其他选项>自动提取关键字，这里选择“是”。   2、解决PHP168超级管理员上传图片提示你的空间不足 网站是用PHP168做的，反映使用管理员在后台无法
   • mac 下 安装php扩展 - mcrypt dcj3sjt126com PHP
     MCrypt是一个功能强大的加密算法扩展库，它包括有22种算法，phpMyAdmin依赖这个PHP扩展，具体如下： 下载并解压libmcrypt-2.5.8.tar.gz。 在终端执行如下命令： tar zxvf libmcrypt-2.5.8.tar.gz cd libmcrypt-2.5.8/ ./configure --disable-posix-threads --
   • MongoDB更新文档 [四] eksliang mongodbMongodb更新文档
     MongoDB更新文档 转载请出自出处：http://eksliang.iteye.com/blog/2174104 MongoDB对文档的CURD，前面的博客简单介绍了，但是对文档更新篇幅比较大，所以这里单独拿出来。 语法结构如下： db.collection.update( criteria, objNew, upsert, multi) 参数含义 参数   
   • Linux下的解压，移除，复制，查看tomcat命令 y806839048 tomcat
     重复myeclipse生成webservice有问题删除以前的，干净 1、先切换到：cd usr/local/tomcat5/logs 2、tail -f catalina.out 3、这样运行时就可以实时查看运行日志了 Ctrl+c 是退出tail命令。 有问题不明的先注掉   cp /opt/tomcat-6.0.44/webapps/g
   • Spring之使用事务缘由(3-XML实现) ihuning spring
       用事务通知声明式地管理事务   事务管理是一种横切关注点。为了在 Spring 2.x 中启用声明式事务管理，可以通过 tx Schema 中定义的 <tx:advice> 元素声明事务通知，为此必须事先将这个 Schema 定义添加到 <beans> 根元素中去。声明了事务通知后，就需要将它与切入点关联起来。由于事务通知是在 <aop:
   • GCD使用经验与技巧浅谈 啸笑天 GC
     前言 GCD(Grand Central Dispatch)可以说是Mac、iOS开发中的一大“利器”，本文就总结一些有关使用GCD的经验与技巧。 dispatch_once_t必须是全局或static变量 这一条算是“老生常谈”了，但我认为还是有必要强调一次，毕竟非全局或非static的dispatch_once_t变量在使用时会导致非常不好排查的bug，正确的如下： 1
   • linux（Ubuntu）下常用命令备忘录1 macroli linux工作ubuntu
     在使用下面的命令是可以通过--help来获取更多的信息1,查询当前目录文件列表：ls ls命令默认状态下将按首字母升序列出你当前文件夹下面的所有内容，但这样直接运行所得到的信息也是比较少的，通常它可以结合以下这些参数运行以查询更多的信息：  ls / 显示/.下的所有文件和目录  ls -l 给出文件或者文件夹的详细信息 ls -a 显示所有文件，包括隐藏文
   • nodejs同步操作mysql qiaolevip 学习永无止境每天进步一点点mysqlnodejs
     // db-util.js var mysql = require('mysql'); var pool = mysql.createPool({ connectionLimit : 10, host: 'localhost', user: 'root', password: '', database: 'test', port: 3306 });
   • 一起学Hive系列文章 superlxw1234 hiveHive入门
       [一起学Hive]系列文章 目录贴，入门Hive，持续更新中。   [一起学Hive]之一—Hive概述，Hive是什么 [一起学Hive]之二—Hive函数大全-完整版 [一起学Hive]之三—Hive中的数据库(Database)和表(Table) [一起学Hive]之四-Hive的安装配置 [一起学Hive]之五-Hive的视图和分区 [一起学Hive
   • Spring开发利器：Spring Tool Suite 3.7.0 发布 wiselyman spring
     Spring Tool Suite(简称STS)是基于Eclipse，专门针对Spring开发者提供大量的便捷功能的优秀开发工具。   在3.7.0版本主要做了如下的更新：   将eclipse版本更新至Eclipse Mars 4.5 GA Spring Boot(JavaEE开发的颠覆者集大成者，推荐大家学习)的配置语言YAML编辑器的支持(包含自动提示，
   按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
   首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

   版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.