html5+css3总结

 


 

1

1.前端组成 2.语义化理解 3.html标准语法 4.html注意的问题 5.字符实体

13

1.注释的写法 2.注释的作用

25

颜色的设置方法

37

浏览器内核

2

单、双标签的划分

14

1.css文件的引入方式 2.两种外部引入的比较 3.引入方式的权重

26

XHTML: 1.文档结构 2.元素语法 3.属性语法

38

兼容

3

html与body的说明

15

链接: 1.鼠标的变化 2.语法 3.锚点 4.伪类选择器

27

表单: 1.原有表单格式 2.现有表单格式 3.表单的属性列表 4.新增的标签 5.datalist与select的区别 6.get与post的区别 7.常见的输入类型和兼容情况

39

BFC

4

单标签(空元素)

16

图片: 1.语法 2.路径 3.路径的解释 4.取消默认边框和空隙

28

1.html5新增的标签 2.对html5的理解

40

 

5

html的元素类型

17

1.表格的说明 2.注意情况 3.表格合并

29

媒体: 1.视频格式 2.声音格式 3.使用方法

41

 

6

块级元素的空行

18

表格新增的属性和标签

30

css选择器的权重

42

 

7

行内元素的属性

19

布局的方法

31

css属性大纲

43

 

8

改变文本的方向

20

padding

32

单行文本溢出的方法

44

 

9

heading 标签

21

margin

33

浮动float

45

 

10

p标签

22

背景图: 1.基本语法 2.gif,png,jpg区别 3.精灵图 4.图片整合 5.滑动门技术

34

定位position

46

 

11

平时的引用标签

23

边框

35

宽高自适应

47

 

12

计算的代码元素

24

1.地址属性 2.url的加载过程

36

隐藏元素的方法

48

 

 

ss样式:

@charset "utf-8";

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img,input,figure,table,tr,td,th{margin:0;padding:0}

*{ box-sizing:border-box;}

ul,ol,li{list-style:none;}

b,strong{font-weight:100;}

em,i{font-style:normal;}

h1,h2,h3,h4,h5,h6{font-weight:100;font-size:16px;}

a,u{text-decoration: none;}

input{outline:none;}

img{display:block;border:0;}

html,body{height:100%;}

body{font-family: "微软雅黑";}

.clear_fix:after{content:".";height:0;clear:both;display:block;visibility:hidden;overflow: hidden;zoom:1;}

1. HTML 指的是超文本标记语言 (Hyper Text Markup Language),不是一种编程语言

(1)前端页面由三部分组成:

  • html超文本标记语言(结构),描述网页的语义含义
  • css层叠样式表(表现),构建网页中的样式
  • js客户端脚本语言(行为),对事件的操作

(2)语义化的理解:

  • 页面的内容结构化,便于对浏览器、搜索引擎解析。
  • 即使没有css文件的情况下,也以一种文档格式存在,并且容易阅读
  • 搜索引擎的爬虫根据标记来确定上下文和各个关键字的权重,便于SEO
  • 使得阅读源代码的人更容易将网站进行分块,便于阅读理解和维护

(3)html文件的语法:(hyper text markup language)

doctype作用:不是标签,只是声明文档类型,说明一下html文档是用哪个版本编写的。

混杂模式:doctype不存在或格式不正确,在doctype前加入XML声明。

严格、标准模式:申明正确的DTD(文档类型语法规则)

文档的编码格式,元数据

文档的标题

为全网页指定默认的链接地址

外部引入css文件

页面内容

外部引入js文件

(4)在html文件中应注意的问题:

  • 双标签注意 闭合
  • 标签名使用小写
  • img最好不要加链接,同时最好不要加边框,用padding撑开
  • 不要使用"<",">"这样的符号,应使用字符实体:

显示结果

描述

实体名称

 

空格

 

<

小于号

<

>

大于号

>

&

和号

&

"

引号

"

'

撇号

' (IE不支持)

分(cent)

¢

£

镑(pound)

£

¥

元(yen)

¥

欧元(euro)

§

小节

§

©

版权(copyright)

©

®

注册商标

®

商标

×

乘号

×

÷

除号

÷

2. 标签分为单标签和双标签,其中双标签又分为开放标签和闭合标签

单标记:<标记 属性=“属性值”/>

双标记:<标记 属性=“属性值”,属性=“属性值”>

>单标签(空元素):br、hr、img、link、meta、input

>双标签:a,heading,div,span……

3. html与 /html 之间的文本描述网页, 与 之间的文本是可见的页面内容

4. 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。——单标签

5.html的元素类型:

html元素类型

行内元素

块状元素

行内块元素

特征 1

一行显示

换行显示

一行显示

特征 2

宽高无效

可设宽高

可设宽高

特征 3

margin上下无效,padding有效

margin、padding都可设

margin、padding都可设

 

>行内元素:br,sup,sub,strong,b,i,a,span,em,u

>块状元素:hr,div,heading,ul,ol,li,dl,dt,dd,p,table,form,pre,address

pre:预格式文本保留了空格和换行,用来输出代码

address:用于编写地址内容,默认字体为斜体字

>行内块元素:button,img,input,textarea,bdo

6. 在html中,自动地在块级元素前后添加一个额外的空行,此时margin:0;padding:0来取消

7.在行内标签中可以设置哪些属性:style、title(显示额外信息)、id、class

8.改变文本的方向(将两个属性都写在dbo这个标签中):

  • direction:up,down,right,left,rtl,ltr,normal只是文字的倒写而已
  • writing-mode:tb-rl,tb-lr,bt-rl,bt-lr,rl-tb,lr-tb,rl-bt,lr-bt,为文本的方向

9.heading标签:

  • h1、h2、h3、h4、h5、h6
  • h1只能使用一次
  • h2为段落标题
  • h3位段落的小标题,主要用在段落的小结上
  • h4~h6很少使用,用来说明一些不重要的内容

10.p标签:

  • q为短引用,常常为所包含的文本添加引号
  • blockquote为长引用:浏览器会插入换行和外边距

11.平时的引用标签:

  • abbr为缩写内容的展示,要在里面设置title属性
  • address为地址标签,字体通常为斜体字,通常需人为更正
  • bdo为设置文字文本的方向,里面设有writing-mode和direction属性
  • blockquote为长引用,浏览器为其设置外边距和换行,首行缩进需人为
  • q为短引用,与blockquote的差别不大,会自动对内部的内容添加引号
  • dfn定义项目和缩略词的定义,与abbr差不多,只不过更加强大
  • cite定义著作的标题,通常为斜体字

12.计算机的代码元素

  • 特点:平时的html文字和字母间距、大小都是可变的,但是计算机元素标签中的字母是不变的
  • 元素:code、kbd、samp(原本具有的空格和换行都会省略)、pre( 保留原有的空格和换行)、var(变量的初始化)

13.注释的作用:

  • css中:/** **/
  • html中:
  • 通知、提醒、排错

14.css样式表的四种引用方式:

(1)内部样式:在head标签中添加style标签,在里面来编写css样式代码

(2)外部样式 :(两种并比较优缺点)

一. 设置连接的css文件中的编码:@charset "utf-8"; 二. (3)内联样式:

(4)内部样式和外部样式组合使用:

两种外部引用方式的比较: (1)为标签,除了加载css之外还能定义其他事务;import为css范畴,只能加载css (2)在引用css时,html文件与css文件同时加载;import需将html文件加载完之后,才会加载css文件。如果网速慢时,import方式,会只有元素内容而没有相关的样式。 (3)是标签,没有兼容问题;import是css2.1提出的,低版本的浏览器不支持 (4)支持JavaScript对DOM进行操作;import不支持。

三种引用css的方式的权重:

(1) 外部和内部样式的权重和写的顺序有关,后写的覆盖先写的(覆盖相同的内容,不相同的内容保留下来)

(2)内联样式的权重最高

15. 链接:

(1)鼠标移动到该链接时,鼠标的变化(设置cursor属性),添加属性值:

  • auto默认[鼠标]
  • crosshair加号[+]
  • text文本[I]
  • wait等待[O]
  • help帮助[?]
  • progress过程[鼠标+O]
  • move移动[雪花]
  • pointer点击[小手]
  • ne-resize[斜箭头]

(2)语法:

名称 内部可设属性 target(规定此链接在何处显示) target="_blank"新窗口打开 "_self"在当前框架内打开,为默认值 "_top"在顶层或跟框架中打开 "_parent"当前框架上一层打开

(3)锚点:被连接的内容可为name或id

  • 被连接的标签为a时,可为id或name
  • 被连接的标签为其他标签时,为id
  • 发出连接的a中href中必须有#

lalla

离开的时间发了家第三方

sdjfljdsfklkdsf

啦啦 ——此时地址中必须有#

(4)

  • 去掉下划线text-decoration:none
  • 伪类选择符:
  • a:link{} 最初的样子
  • a:visited{}加载之后的样子
  • a:hover{}鼠标悬浮的样子(常用)
  • a:active{}鼠标点击之后的样子

16. 图片:

(1)取消默认边框border:0

(2)解决下边界有空隙display:block

替换文本属性

(3)路径:(主要是HTML文件调用图片文件)

  • html文件与图片处于同级:
  • 当图片处于子文件夹,html文件处于父文件夹时:
  • 当图片处于父文件夹,html文件处于子文件夹时:

(4)解释路径:./ 当前目录 ../ 父级目录 / 根目录(如abc/123/1.txt,根目录是相对于子目录而言的,这里的abc相当于根目录)

17. 表格:

(1)表格默认:在直接写table的时候,无论有没有内容,都是没有边框的。给table加边框时,只是给表格的外面加边框

(2)表格中常见的标签:caption标题,th表头(加粗)

(3)单元格边距:cellpadding,指定单元格内容与单元格边界之间的空白距离的大小

(4)单元格间距:cellspacing,每个单元格之间的距离

(5)注意:

  • td中不能包含tr
  • 除了表格之外在html标签中将width等属性信息,写在style样式中,必须加单位。 在表格中的width等属性添加时,属性值不能加单位
  • 当不在style内部样式中给td添加样式时,如若想给每一列(竖)设置样式,只需给第一行的当前列添加width等样式。
  • 在合并行和列时:只要不跨行就是合并列(合并行rowspan,合并列colspan),合并时数量是包括自己的。

18. 新增(表格):

(1) :将包含标题的写入进来,仅一个 :将表格的主体部分写进来,可写多个 :通常为表格的总计(可不写),仅一个 (2) border- collapse:collapse(合并)、separate(分离) (3) border-spacing与cellspacing的效果是一致的,形成“宫字格”

19. 布局方法:

(1)固定布局,每一个元素都是固定的尺寸,内容区域居中在浏览器中间

内容区域的尺寸:980,1000,1100,1200

(2)响应式布局,利用媒体查询来实现不同尺寸的浏览器显示结构不一样

一般会有三张设计图,PC,平板,手机

(3)自适应布局,属于响应式里的一种,利用rem、百分比、vwvh等布局单位来实现,设计图一般只有一张,640、750居多

20.padding:

Padding值的编写主要是确定子集在父集内的位置,编写时代码写在父集内

分开写:Padding-top/bottom/right/left:value;

组合写:padding:top right bottom left(上、右、下、左)

Padding:(上下、左右)

Padding:(上、左右、下)

21.margin:

Margin针对的是同级之间的关系

分开写:margin-top/bottom/right/left:value;

组合写:margin:top right bottom left(上、右、下、左)

margin:(上下、左右)

margin:(上、左右、下)

22.背景图:

(1)缩写:background: color url(背景路径) no-repeat position

(2)颜色background-color:

添加背景图background-image:url(图片路径)

平铺background-repeat:no-repeat/repeat/repeat-x/repeat-y

固定性:background-attachment:scroll(滚动)/fixed(固定)

位置:background-position:left/center/right/数值 top/center/bottom/数值

向左向上为负值。

(3)精灵图(雪碧图):将很多的图片集中在一张图片上

(4)图片整合:

原理:背景图的添加和上下左右的移动

要求:

  • 整合的背景图的背景是透明的
  • 根据实际需求,小图标之间留出足够的空间
  • 小图标最好上下排列,最好放在最右侧

优点:

  • 可以减少对服务器的请求次数,从而提高页面的加载速度
  • 整合图片来减小图片的体积

(5)滑动门技术:

原理:两个背景图的叠加,来回滑动

比如:在li中设a,在a中设span。a与span同时设置背景图。调整位置。

(6)jpg,png,gif的区别:

  • jpg(jpeg):

1.不支持透明

2.不支持动画

3.除了编辑图片的的原数据(旋转、裁切)外,其他操作都会是图片的质量产生损失。

4.支持隔行渐进显示(但ie浏览器不支持这个属性,但它会在整个图像信息完全到达的时候显示)。

5.适合于web上的摄影图片和数字照相机

  • gif:

1.透明,是布尔透明类型,只能全透明或全部透明,没有半透明

2.动画,gif支持动画

3.无损耗性,对gif做任何操作,都不会对图像质量产生损耗

4.水平扫描:gif采用LZW进行压缩,有上到下水平压缩。说明横向的比纵向的小

5.gif为可选择行的隔行渐进显示

6.只有256中颜色的gif不适合照片,但是和做图形

  • png:

1.三种类型:png8 256色png别名

png24 全色png别名

png32 全色png别名

2.png32 比 png24多了alpha通道,即透明度。photoshop中png24的透明效果实际上是png32。

3.半透明的png8在ie6以下的浏览器中显示为全透明,说明在ie中如果要设置全透明度时,使用全透明的png8。

4.photoshop中只能导出布尔类型的png8,

fireworks既能导出布尔类型的png8,也能导出alpha的png8

23.边框属性:

对元素设置边框时,显示出的页面效果

宽=元素原宽+边框的宽*2;

长=元素原长+边框的长*2

(1)border:边框大小 边框类型 边框颜色

border:10px solid #f00;

(2)边框大小:border-size(px单位)

(3)边框类型:border-style:solid实线/dashed虚线/dotted点线/double双实线

(4)border-width:上右下左(使用时要先写border)

border-left/right/top/botom

24.地址URL(统一资源定位符):

浏览器宿主环境中,有一个location对象,同时这个对象也是window对象和document对象的属性。

比如地址:https://www.baidu.com/api/sousu?search=baidu&id=123#2

(1)location.href:完整的地址URL

(2)location.protocol:协议 “https:”

  • http:超文本传输协议,普通网页,不加密。
  • https:安全超文本传输协议,安全网页,数据加密。
  • ftp:文件传输协议,将文件下载或上传到网站
  • file:当前电脑自身的文件。

(3)location.host:服务器名称和端口号 “www.baidu.com”

(4)location.hostname:返回服务器名称 “www.baidu.com”

(5)location.port:返回服务器端口号

  • http协议端口号8080
  • https端口号是443

(6)location.pathname:返回URL中的目录和文件名 “api/sousu”

(7)location.search返回查询字符串 “?search=baidu&id=123#2”

(8)location.hash:返回hash值 “#2”

在浏览器中输入url地址之后的加载过程:

(1)利用DNS域名解析系统进行域名解析,将域名解析成IP(域名只是个别名,计算机只认识IP,所以需要DNS进行解析)

(2)查找IP对应的主机服务器(如果第一次访问服务器,会向网络(JSP)供应商请求)

(3)TCP的三次握手,经过三次在客户端和服务器之间传递报文来建立连接

(4)发起http请求,请求入口文件,后端接受到请求相关信息,返回入口文件

(5)解析入口文件,同时如果有资源请求继续发送http请求

(6)入口文件渲染完成(TCP的四次挥手,断开、连接)

25.设置颜色:

  • 符合html4与W3C的颜色英文字母
  • #加上十六进制数
  • rgb(数值,数值,数值),数值的范围是0~255
  • rgba(数值,数值,数值,0~1),加颜色同时设置透明度,这里的透明度并不会改变文字效果

26.XHTML文档说明:(可扩展标记语言)

文档结构

  • XHTML DOCTYPE 是强制性的
  • 中的 XML namespace 属性是强制性的
  • 、、 以及 <body> 也是强制性的</li> </ul> <p>元素语法</p> <ul> <li>XHTML 元素必须正确嵌套</li> <li>XHTML 元素必须始终关闭</li> <li>XHTML 元素必须小写</li> <li>XHTML 文档必须有一个根元素</li> </ul> <p>属性语法</p> <ul> <li>XHTML 属性必须使用小写</li> <li>XHTML 属性值必须用引号包围</li> <li>XHTML 属性最小化也是禁止的(禁止简写)</li> </ul> <p>27.表单:</p> <p>(1)格式1:</p> <p><form name=”表单的名称” method=”get/post” action=”获取/发送的路径”></p> <p><input type=”text” name=”该文本可被调用” value=”在页面中可显示的文本”></p> <p><input type=”password” name=”可被调用” placeholder=”可显示的文本虚拟”></p> <p><input type=”submit” value=”确定”><input type=”reset” value=”取消”></p> <p><input type=”radio” name=”单选按钮的值一致”> checked 默认的选中,</p> <p><input type=”checkbox” > disabled 默认不被选中</p> <p><select name=”可被调用”></p> <p><option></option></p> <p><option ></option></p> <p></select></p> <p><textarea name=”文本可被调用” ></textarea>CSS取消文本框的拖动: resize:none;</p> <p>(2)格式2:</p> <p><fieldset id=""></p> <p><legend>今年的表格计划</legend></p> <p><p><label for="inp1">输入内容:</label><input id="inp1" type="text" placeholder="拉斯科技发到了空间的十分"/></p></p> <p></fieldset></p> <p>(3)表单中的属性列表:</p> <table border="1"> <tbody> <tr> <td> <p>accept-charset</p> </td> <td> <p>规定在被提交表单中使用的字符集(默认:页面字符集)。</p> </td> </tr> <tr> <td> <p>action</p> </td> <td> <p>规定向何处提交表单的地址(URL)(提交页面)。</p> </td> </tr> <tr> <td> <p>autocomplete</p> </td> <td> <p>规定浏览器应该自动完成表单(默认:开启)。</p> </td> </tr> <tr> <td> <p>enctype</p> </td> <td> <p>规定被提交数据的编码(默认:url-encoded)。</p> </td> </tr> <tr> <td> <p>method</p> </td> <td> <p>规定在提交表单时所用的 HTTP 方法(默认:GET)。</p> </td> </tr> <tr> <td> <p>name</p> </td> <td> <p>规定识别表单的名称(对于 DOM 使用:document.forms.name)。</p> </td> </tr> <tr> <td> <p>novalidate</p> </td> <td> <p>规定浏览器不验证表单。</p> </td> </tr> <tr> <td> <p>target</p> </td> <td> <p>规定 action 属性中地址的目标(默认:_self)。</p> </td> </tr> </tbody> </table> <p>(4)html5新增的属性(IE不支持):<datalist>,<keygen>加密,<output></p> <ul> <li>datalist的写法:</li> </ul> <p><input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist></p> <ul> <li>datalist与select的区别:</li> </ul> <p></p> <p>(5)get与post的区别:</p> <ul> <li>get是从服务器获取数据,post是提交数据</li> <li>get传输的数据量小,post不受限制</li> <li>get的安全性低</li> <li>get服务器用Request.QueryString来获取变量。post服务器用request.Form来获取提交的数据。</li> <li>get将数据提交到表单中,action中url所指向的地方,值是一一对应的,可以看到的;post是通过http post机制将表单内各个字段与内容放在html header中一起传送到action中,看不到。</li> </ul> <p>什么时候使用:</p> <ul> <li>考虑安全性时,用post</li> <li>对内容数据进行查询时用get</li> <li>get的维护性高</li> </ul> <p>(6)常见的输入类型:</p> <p>color、search、</p> <p>range、email、url:IE9 及早期版本不支持 、</p> <p>date 、month、time:Firefox 或者IE 11 以及更早版本不支持 、</p> <p>week:IE 不支持 、</p> <p>datetime:Chrome、Firefox 或 IE 不支持、</p> <p>datetime-local:Firefox 或者IE 不支持、</p> <p>tel:Safari 8 及更新版本支持</p> <p>28.对html5的理解:</p> <ul> <li>良好的移动性,以移动设备为主。</li> <li>响应式设计,能够自动适应不断变化的屏幕尺寸</li> <li>支持离线缓存技术,webstorage</li> <li>新增了一些canvas,video,audio标签,nav,header,footer,main,article,section,time,figcaption,figure,aside,details,summary内容元素和date,time,week,datetime,color,range表单控件</li> <li>地理定位</li> <li>新增webSocket/webWork技术</li> </ul> <p>html5新增的标签:</p> <p><header>:页眉 <footer>:页尾 <nav>:导航 <aside>:定义内容之外的东西(侧栏) <article>:包含独立的自包含文章<section> <video><audio><source>:引入音频和视频资源 <figure><figcaption>列表项 <details>:定义额外的细节 <summary>:为details中的标题 <datalist>:下来菜单,与option连用 <canvas>:画布 <mark>:与span相同 <hgroup>: 标题的分组 <embed><command><meter><time><output><progress></p> <p>29.媒体:</p> <p>视频格式</p> <p>MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。</p> <table border="1"> <tbody> <tr> <td> <p>格式</p> </td> <td> <p>文件</p> </td> <td> <p>描述</p> </td> </tr> <tr> <td> <p>AVI</p> </td> <td> <p>.avi</p> </td> <td> <p>AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式,但非 Windows 计算机并不总是能够播放。</p> </td> </tr> <tr> <td> <p>WMV</p> </td> <td> <p>.wmv</p> </td> <td> <p>Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见,但是如果未安装额外的(免费)组件,就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放,因为没有合适的播放器。</p> </td> </tr> <tr> <td> <p>MPEG</p> </td> <td> <p>.mpg .mpeg</p> </td> <td> <p>MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的,得到了所有最流行的浏览器的支持。</p> </td> </tr> <tr> <td> <p>QuickTime</p> </td> <td> <p>.mov</p> </td> <td> <p>QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式,但是 QuickTime 电影不能在没有安装额外的(免费)组件的 Windows 计算机上播放。</p> </td> </tr> <tr> <td> <p>RealVideo</p> </td> <td> <p>.rm .ram</p> </td> <td> <p>RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下(在线视频、网络电视)的视频流。由于是低带宽优先的,质量常会降低。</p> </td> </tr> <tr> <td> <p>Flash</p> </td> <td> <p>.swf .flv</p> </td> <td> <p>Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。</p> </td> </tr> <tr> <td> <p>Mpeg-4</p> </td> <td> <p>.mp4</p> </td> <td> <p>Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上,YouTube 推荐使用 MP4。YouTube 接收多种格式,然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4,将其作为 Flash 播放器和 HTML5 的因特网共享格式。</p> </td> </tr> </tbody> </table> <p>声音格式</p> <table border="1"> <tbody> <tr> <td> <p>格式</p> </td> <td> <p>文件</p> </td> <td> <p>描述</p> </td> </tr> <tr> <td> <p>MIDI</p> </td> <td> <p>.mid .midi</p> </td> <td> <p>MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备(比如合成器和声卡)的格式。MIDI 文件不含有声音,但包含可被电子产品(比如声卡)播放的数字音乐指令。 点击这里播放 The Beatles。 因为 MIDI 格式仅包含指令,所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小,但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。</p> </td> </tr> <tr> <td> <p>RealAudio</p> </td> <td> <p>.rm .ram</p> </td> <td> <p>RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流(在线音乐、网络音乐)。由于是低带宽优先的,质量常会降低。</p> </td> </tr> <tr> <td> <p>Wave</p> </td> <td> <p>.wav</p> </td> <td> <p>Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器(除了 Google Chrome)都支持它。</p> </td> </tr> <tr> <td> <p>WMA</p> </td> <td> <p>.wma</p> </td> <td> <p>WMA 格式 (Windows Media Audio),质量优于 MP3,兼容大多数播放器,除了 iPod。WMA 文件可作为连续的数据流来传输,这使它对于网络电台或在线音乐很实用。</p> </td> </tr> <tr> <td> <p>MP3</p> </td> <td> <p>.mp3 .mpga</p> </td> <td> <p>MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。</p> </td> </tr> </tbody> </table> <p>使用方法:</p> <p><video controls"人为" autoplay"自动" loop"循环" muted"静音"></p> <p><source src="路径/文件名.mp4" type="video/mp4"></source></p> <p><source src="路径/文件名.ogg" type="video/ogg"></source></p> <p><source src="路径/文件名.webm" type="video/webm"></source></p> <p></video></p> <p><audio></p> <p><source src="路径/文件名.mpeg" type="video/mpeg"></source></p> <p><source src="路径/文件名.ogg" type="video/ogg"></source></p> <p><source src="路径/文件名.wav" type="video/wav"></source></p> <p></audio></p> <p>30.css选择器:</p> <p>(1) 1类型选择符, 对所有相同类型的选择符进行设置,div,p,span……</p> <p>(2) 10类选择符 ,在div中进行class设置</p> <p>(3) 100 id选择符,在div中进行id设置</p> <p>特殊选择符(群组选择符、包含选择符、通配符、伪类选择符)</p> <p>(4) (分先后)群组选择符,同父级设置用“,”隔开</p> <p>(5)(权重的叠加)包含选择符,儿子借着老子的名声干啥啥啥</p> <p>(6)通配符,”*”对整个页面进行设置。</p> <p>(7)伪类选择符“:”,比如链接的设置。</p> <p>(8)!important最大</p> <p>31.CSS属性:</p> <p>(1)文本大小设置为偶数,必须大于12px(单位px,pt,em):font-size:value</p> <p>1em=16px;</p> <p>(2)文本颜色:color:#十六进制/rgb(0,255,255)</p> <p>(3)文本字体:font-family:字体1,字体2,字体3</p> <ul> <li>第一个字体加载不出来,就加载第二个,以此类推直至加载出来为止。</li> <li>当字体为中文时或英文字体中有空格,需用“”双引号。</li> <li>当字体只有一个单词是,不加双引号</li> </ul> <p>(4)首行缩进:text-indent:value(为字体的二倍,设为2em)可设为负值为悬挂式缩进。</p> <p>(5)小型的大写字母:font-variant:small-caps</p> <p>(6)大小写的转换:text-transform:capitalize(首字母大写)/uppercase全部大写/lowercase全部小写</p> <p>(7)行高(从第一行到第二行文本的开始):line-height可设为字号的二倍2em</p> <p>当单行文本的行高等于容器的行高时,可实现该单行文本处于垂直方向居中对齐</p> <p>(8)文本倾斜:font-style:italic/oblique/normal</p> <p>(9)文本加粗:font-weight:bold/bolder/light/lighter/normal/100-500正常、600-900加粗</p> <p>(10)水平对齐方式:text-align:center/right/left/justify(两端对齐,只限于低版本浏览器)</p> <p>(11)文本修饰:text-decoratin:none/underline/overline/line-through</p> <p>(12)字间距:letter-spacing:value</p> <p>(13)词间距:word-spacing:value</p> <p>(14)文本流的控制:layout-flow:horizontal(自左向右)/vertival-ideographic(自上而下)【适用于老版本浏览器】</p> <p>32.文本溢出:(单行文本)</p> <ul> <li>容器必须设宽度 width</li> <li>强制文本一行显示 white-space:no-wrap</li> <li>超出文本不显示 overflow:hidden</li> <li>超出文本用省略号代替 text-overflow:ellipsis</li> </ul> <p>33.浮动float:</p> <p>float:left/right/none;</p> <p>清除浮动:clear:right/left/both;</p> <ul> <li>添加浮动之后,元素不占空间</li> <li>元素有浮动,父元素必须有高度</li> </ul> <p>34.定位postion:</p> <p>(1)属性值position:absolute、relative、fixed、static</p> <p>(2)属性值得区别:</p> <ul> <li>absolute:</li> </ul> <p>1.为绝对定位,当确定子集在父集的位置时,父 集必须有定位,若不存在这样的父元素,则默认整个html为参照。</p> <p>2.不占位置,脱离文档流。</p> <ul> <li>relative:(包含快)</li> </ul> <p>1.为相对定位。</p> <p>2.文档流位置不动,只是改变该元素的位置,其他不变。</p> <ul> <li>fixed:</li> </ul> <p>1.固定定位</p> <p>2.不占位置,脱离文档流。</p> <p>3.始终是以浏览器的当前屏幕为参照物,位置始终不变。</p> <p>35.宽高自适应:</p> <p>(1)宽:(适应父元素的宽)</p> <ul> <li>不设</li> <li>为100%</li> </ul> <p>(2)高:</p> <ul> <li>高不设或设为auto,为子元素撑开的高</li> <li>当子元素不确定为多少时,为父元素设置最小高度(IE6不支持)</li> <li>100%,继承的是父元素的高</li> </ul> <p>(3)兼容:</p> <ul> <li>IE浏览器识别“_”,其他浏览器不支持;</li> <li>“!important” 高版本浏览器支持,IE不支持</li> <li>宽高自适应兼容:</li> </ul> <p>1方法. _height:300px ,min-height:300px;</p> <p>2方法. min-height:300px ; height:auto !important ; height:300px;</p> <p>(4)高度坍塌:</p> <p>原因:子元素有float,但父元素没有高或有最小高度,这是父元素出现高度塌陷</p> <p>解决的方法:</p> <ul> <li>方法:在父元素上添加overflow:hidden</li> </ul> <p>原因:因为overflow:hidden触发了BFC</p> <p>BFC的布局规则:计算BFC高度时,里面的浮动元素也参与运算</p> <p>缺点:会隐藏一些置外的元素(定位)。</p> <ul> <li>方法:在浮动的元素后面加上div标签,并设立</li> </ul> <p>clear:both;overflow:hidden;height:0;</p> <p>缺点:在html中形成不必要的空元素,增大代码体积。</p> <ul> <li>方法:在父元素中中添加类名,该类的css样式为</li> </ul> <p>.名:after{content:".";height:0;clear:both;display:block;overflow:hidden;visibility:hidden;zoom:1;}</p> <p>36.隐藏元素的方法:</p> <ul> <li>overflow:hidden 溢出内容隐藏</li> <li>display:none 完全隐藏</li> <li>visibility:none 会留下空白</li> </ul> <p>37.浏览器内核:</p> <table border="1"> <tbody> <tr> <td> <p>内核</p> </td> <td> <p>浏览器</p> </td> <td> <p>前缀</p> </td> <td> <p>公司</p> </td> </tr> <tr> <td> <p>trident</p> </td> <td> <p>IE</p> </td> <td> <p>-ms-</p> </td> <td> <p>microsoft</p> </td> </tr> <tr> <td> <p>webkit</p> </td> <td> <p>safari、chrome(l)</p> </td> <td> <p>-webkit-</p> </td> <td> <p>apple/google</p> </td> </tr> <tr> <td> <p>blink</p> </td> <td> <p>chrome(h)、opera(h)</p> </td> <td> </td> <td> <p>google</p> </td> </tr> <tr> <td> <p>presto</p> </td> <td> <p>opera(l)</p> </td> <td> <p>-o-</p> </td> <td> <p>opera</p> </td> </tr> <tr> <td> <p>gecko</p> </td> <td> <p>firefox</p> </td> <td> <p>-mz-</p> </td> <td> <p>mozilla</p> </td> </tr> </tbody> </table> <p>38.兼容:http://www.jb51.net/css/85640.html</p> <p>(1)图片:img{border:0;display:block;}</p> <ul> <li>图片自带的边框,谷歌不显示,但IE6显示。</li> </ul> <p>方法:border:0;</p> <ul> <li>图片再带的间隙,所有浏览器都有(约3px)</li> </ul> <p>方法1:使图片和<div>写在一行(代码容易乱)</p> <p>方法2:给图片加入display:block</p> <p>(2)双倍浮向:</p> <p>原因:iE6及更低版本浏览器在解析浮动元素时,会把浮向边界(margin)加倍显示</p> <p>方法:给浮动元素添加display:inline。</p> <p>(3)默认高度:【目前解决不了】</p> <p>原因:在IE7及更低版本浏览器部分元素拥有默认高度(在16px左右)</p> <p>方法:font-size:0,overflow:hidden</p> <p>(4)表单:</p> <ul> <li>行高不一致:给表单元素添加float:left</li> <li>按钮默认大小不一致:用a标签来模拟该按钮</li> </ul> <p>(5)百分比:</p> <p>原因:在IE6及以下版本加载百分比时,会按四舍五入来计算往往50%+50%>100%</p> <p>方法:清除浮动。</p> <p>(6)鼠标指针:</p> <p>cursor:hand只适用于IE6及以下</p> <p>cursor:pointer都适用</p> <p>(7)透明:</p> <p>IE:filter:alpha(opacity=value);value取(1-100)整数</p> <p>其他:opacity:value;value取(0-1)之间的小数</p> <p>(8)margin上下重叠:</p> <p>原因:在父与子元素都没有设浮动的情况下,给子元素设置margin-top,会错误的将margin-top设在父元素上。</p> <p>方法1:为父元素添加overflow:hidden</p> <p>方法2:给父或子元素加浮动</p> <p>(9)上下的两个元素,上面的元素设置margin-bottom,下面的元素设置margin-top,他们之间的距离不会叠加,而是会显示最大的那个值。</p> <p>39.BFC:(block formatting context “块级格式化上下文”)</p> <ul> <li>哪些元素会出发BFC:</li> </ul> <p>(1)根元素(html)</p> <p>(2)float不为none</p> <p>(3)position为absolute或fixed</p> <p>(4)display为inline-block,table-cell,table-caption,flex,inline-flex。</p> <p>(5)overflow不为visible</p> <ul> <li>作用:</li> </ul> <p>(1)自适应两栏布局</p> <p>(2)清除内部浮动</p> <p>(3)防止margin的上下重叠</p> <ul> <li>规则:</li> </ul> <p>(1)内部的box在垂直方向,一个接一个的放置(块级元素)</p> <p>(2)box垂直方向的距离由margin决定,属于同一个BFC的两个相邻box的margin会发生折叠</p> <p>(3)BFC的区域不会与float box重叠</p> <p>(4)BFC是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。</p> <p>(5)计算BFC的高度时,浮动元素也参与计算</p> <p>(6)每个元素的margin box的左边,与包含块border box的左边相接触</p> <p>40.在浏览器中垂直水平居中的方法:</p> <ul> <li>position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;</li> <li>一个元素在父元素中左右上下居中:</li> </ul> <p>(1)父元素中设置margin:0 auto;text-align:center</p> <p>(2)需要居中的元素设置:vertical-align:middle;display:inline-block;</p> <p>(3)在需要居中的元素的同一行设置一个空的<span> 标签,设置:</p> <p>display:inline-block;vertical-align:middle;height:100%;width:0;</p> <ul> <li>将父元素设置为弹性盒,设置属性:</li> </ul> <p>display:flex;justify-content:center;align-items:center;</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1276308803150692352"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(html5,css3)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1946840152047415296.htm" title="html5及css有什么区别,html5和css3的区别是什么?" target="_blank">html5及css有什么区别,html5和css3的区别是什么?</a> <span class="text-muted">weixin_39788256</span> <a class="tag" taget="_blank" href="/search/html5%E5%8F%8Acss%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB/1.htm">html5及css有什么区别</a> <div>html5和css3是什么?区别是什么?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。什么是HTML5?HTML,超文本标记语言(HyperTextMarkupLanguage),标准通用标记语言下的一个应用。是用于描述网页文档的一种标记语言。html5是HTML第五次重大修改后的版本,是当前最新版本,主要特点是支持原生的视频播放、离线存储、更多的语义</div> </li> <li><a href="/article/1946834728023814144.htm" title="一文讲透HTML语义化标签" target="_blank">一文讲透HTML语义化标签</a> <span class="text-muted"></span> <div>文章目录语义化标签概述HTML标签及其含义常见HTML5语义化标签语义化标签对搜索引擎(SEO)的影响提升搜索引擎排名增强可访问性改善用户体验语义化标签案例各标签作用说明语义化标签概述HTML语义化是指使用恰当的标签来准确表达内容的结构和含义,使网页不仅对人类开发者可读,也能被搜索引擎、辅助技术等更好地理解和处理。例如,用表示页眉,表示独立内容区块,提升页面可访问性和SEO效果。HTML标签及其含</div> </li> <li><a href="/article/1946828172813201408.htm" title="如何区别HTML和HTML5?" target="_blank">如何区别HTML和HTML5?</a> <span class="text-muted">代码的余温</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>要区分HTML(通常指HTML4及更早版本)和HTML5,主要可以从以下关键方面进行比较:一、文档声明区别二、语义化标签对比用途HTML4标签HTML5新标签头部区域导航栏内容区块独立文章侧边栏页脚主要内容区✅HTML5通过语义化标签取代了泛滥的,提升可读性和SEO三、多媒体支持差异四、图形技术演进constctx=document.getElementById('myCanvas').getCo</div> </li> <li><a href="/article/1946701098827968512.htm" title="wap页面和html5,WAP网站、3G网站、html5触屏版有什么区别?" target="_blank">wap页面和html5,WAP网站、3G网站、html5触屏版有什么区别?</a> <span class="text-muted"></span> <div>目前手机上的网站主要就分为WAP格式和3G格式,从脚本语言来讲,我们通常喜欢说用WML开发的网站就是WAP网站,用XHTML开发的网上3G网站。WML是当初专门为2.5G时代开发的一个脚本,他的功能挺简单的,页面形式呢主要是文字居多,因为那个时候的网速带宽还有机型的限制,所以WAP网站不能用CSS,字体颜色也只有普通文字的黑色和链接文字的蓝色,至于页面背景什么的是不能设置的。3G网站,也就是我们所</div> </li> <li><a href="/article/1946700469141303296.htm" title="html5这什么意思,html5是什么意思?html5和html的区别介绍" target="_blank">html5这什么意思,html5是什么意思?html5和html的区别介绍</a> <span class="text-muted">wiles super</span> <a class="tag" taget="_blank" href="/search/html5%E8%BF%99%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D/1.htm">html5这什么意思</a> <div>一、HTML5是什么?HTML5是HyperTextMarkupLanguage5的缩写,HTML5是超文本标记语言的最新版本,也就是描述网页的代码,html5实际上是三种代码形式,首先是HTML提供结构,其次是层叠样式表(CSS)负责网站的样式和布局,最后是JavaScript是给网站添加动态功能。二、html5和html的区别1、定义上区别HTML5是应用超文本标记语言(HTML)的第五次修改</div> </li> <li><a href="/article/1946698830154100736.htm" title="HTML和HTML5的区别" target="_blank">HTML和HTML5的区别</a> <span class="text-muted">半生凉忆</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>HTML和HTML5的区别什么是HTML?HTML全称为超文本标记语言(HyperTextMarkupLanguage),它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。什么是HTML5?HTML5是HTML的第五个版本,HTML5已经远远超越了标记语言的范畴,它的设计目的是在移动设备上支持多媒体,和HTML比起来,深度和广度上都做了进一步</div> </li> <li><a href="/article/1946693662289227776.htm" title="如何在HTML5页面中嵌入视频" target="_blank">如何在HTML5页面中嵌入视频</a> <span class="text-muted"></span> <div>在HTML5中嵌入视频主要使用标签,这是一种简单且标准的方式。以下是详细步骤和示例:基础实现视频嵌入示例您的浏览器不支持HTML5视频标签。核心属性说明controls添加播放控件(播放/暂停、进度条、音量等)width和height设置播放器尺寸(单位:像素)标签提供多个视频格式源以提高兼容性(浏览器会选择第一个支持的格式):MP4(H.264)-兼容性最好WebM-开源格式,Chrome/Fi</div> </li> <li><a href="/article/1946669454771417088.htm" title="Web开发 02" target="_blank">Web开发 02</a> <span class="text-muted">im_AMBER</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>今天梳理出的HTML+CSS核心知识点,涵盖基础结构、布局、样式优化等实用技巧:总结1一、HTML核心知识1.基础结构文档声明:定义文档为HTML5标准。基本标签::根元素,包裹整个页面。:元数据(标题、样式、脚本等),不显示在页面。:设置网页标题(浏览器标签显示)。:页面内容容器,所有可见内容写在这里。2.常用标签文本与标题:~:标题标签,自动加粗且有默认层级样式。:段落标签,默认有上下边距。图</div> </li> <li><a href="/article/1946616487225651200.htm" title="HTML+CSS+JS" target="_blank">HTML+CSS+JS</a> <span class="text-muted">binzhenliziyuan</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>HTML+CSS+JSHTML基础1.HTML文件中的DOCTYPE是什么作用?2.HTML、XML、XHTML之间有什么区别?3.前缀为data-开头的元素属性是什么?4.谈谈你对HTML语义化的理解?5.HTML5对比HTML4有哪些不同之处?6.meta标签有哪些常用用法?7.img标签的srcset的作用是什么?8.响应式图片处理优化:Picture标签9.在script标签上使用defe</div> </li> <li><a href="/article/1946601474272325632.htm" title="HTML与HTML5知识点复习整理" target="_blank">HTML与HTML5知识点复习整理</a> <span class="text-muted">bottle Shen</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>**本篇文章食用的简单说明**本篇文章为复习HTML与HTML5进行了知识点梳理,其中标题六部分涉及CSS知识(有标注),加粗部分为重点!!!加粗加红为重重点!!!如有遗漏欢迎在评论区补充~推荐大家按记忆梳理部分的内容自行回忆知识点,如有遗忘部分在左下方目录处点击相应部分可以进行跳转。又是努力学习前端的一天,希望大家共同进步~~~(QAQ我只是一个表情)❤***记忆梳理***一、HTML是什么二、</div> </li> <li><a href="/article/1946600840433299456.htm" title="HTML快速复习" target="_blank">HTML快速复习</a> <span class="text-muted"></span> <div>目录!DOCTYPE声明头部head标题title标记元信息meta标记主体body标题分割线段落加粗倾斜下划线文字加删除线预编译标签换行实体字符多媒体标签超链接设置锚点列表标签表格标签框架框架集合form表单模拟百度搜索表单元素文本框密码框单选按钮多选按钮文件隐藏域普通按钮特殊按钮下拉列表多行文本框label标签提交按钮HTML5新增的一些type类型HTML5新增的一些属性thisismyfi</div> </li> <li><a href="/article/1946451569885114368.htm" title="JS获取 CSS 中定义var变量值" target="_blank">JS获取 CSS 中定义var变量值</a> <span class="text-muted">前端 贾公子</span> <a class="tag" taget="_blank" href="/search/tensorflow/1.htm">tensorflow</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录示例代码CSS3:root选择器CSSStyleDeclarationgetPropertyValue()方法styleSheetscssRules关键特性使用示例注意事项典型应用场景WindowgetComputedStyle()方法WindowgetComputedStyle()方法和style的异同在JavaScript中,可以通过getComputedStyle()方法结合getPro</div> </li> <li><a href="/article/1946424459929907200.htm" title="Firefox浏览器Flash及音乐播放插件使用指南" target="_blank">Firefox浏览器Flash及音乐播放插件使用指南</a> <span class="text-muted">酷毙的我啊</span> <div>本文还有配套的精品资源,点击获取简介:随着Firefox逐步淘汰原生FlashPlayer支持,依赖于Flash的内容和某些网页音乐的播放需求催生了特定插件的开发。尽管HTML5已取代Flash成为网页多媒体的核心,教育和娱乐领域的某些旧内容仍然需要使用Flash。用户可以通过安装类似Ruffle这样的Flash模拟器来播放Flash内容,同时,专为Firefox设计的音乐插件如Enhancerf</div> </li> <li><a href="/article/1946388641366470656.htm" title="禁止拖动视频进度条来保障视频安全?" target="_blank">禁止拖动视频进度条来保障视频安全?</a> <span class="text-muted">菜包eo</span> <a class="tag" taget="_blank" href="/search/%E6%95%99%E8%82%B2%E8%A7%86%E9%A2%91/1.htm">教育视频</a><a class="tag" taget="_blank" href="/search/polyv/1.htm">polyv</a><a class="tag" taget="_blank" href="/search/%E8%A7%86%E9%A2%91%E5%AE%89%E5%85%A8/1.htm">视频安全</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>文章目录前言一、何为禁止拖动视频进度条?二、禁止拖动视频进度条的实现原理三、如何实现禁止拖动视频进度条总结前言在知识付费与企业培训场景中,视频内容安全是核心诉求。学员随意拖动进度条可能导致关键知识点遗漏,甚至助长盗录行为。本文深入解析HTML5播放器禁止拖拽进度条的技术方案,通过精准控制播放行为保障学习效果与内容安全。以企业培训、在线教育为例,探讨如何借助技术手段平衡用户体验与内容防护,为开发者提</div> </li> <li><a href="/article/1946384986659680256.htm" title="第二篇 html5和css3开发基础与应用" target="_blank">第二篇 html5和css3开发基础与应用</a> <span class="text-muted">ᝰ落念英</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>第一章html5开发基础与应用第一节简介2014年10月28日,W3C组织公开发布HTML5标准规范。官方文档地址为:https://www.w3.org/TR/2014/REC-html5-20141028/HTML5.1文档地址:https://www.w3.org/TR/2015/WD-html51-20151008/HTML5.2文档地址:https://www.w3.org/TR/201</div> </li> <li><a href="/article/1943987101301272576.htm" title="精通Canvas:15款时钟特效代码实现指南" target="_blank">精通Canvas:15款时钟特效代码实现指南</a> <span class="text-muted">烟幕缭绕</span> <div>本文还有配套的精品资源,点击获取简介:HTML5的Canvas是一个用于绘制矢量图形的API,通过JavaScript实现动态效果。本项目集合了15种不同的时钟特效代码,帮助开发者通过学习绘制圆形、线条、时间更新、旋转、颜色样式设置及动画效果等概念,深化对Canvas的理解和应用。项目中的CSS文件负责时钟的样式设定,而JS文件则包含实现各种特效的逻辑,通过不同的函数或类处理时间更新和动画绘制,提</div> </li> <li><a href="/article/1943963776244051968.htm" title="入门html这篇文章就够了" target="_blank">入门html这篇文章就够了</a> <span class="text-muted">ξ流ぁ星ぷ132</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>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</div> </li> <li><a href="/article/1943919909612351488.htm" title="Vue.js 过渡 & 动画" target="_blank">Vue.js 过渡 & 动画</a> <span class="text-muted">lsx202406</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Vue.js过渡&动画引言在Web开发中,过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架,提供了强大的过渡与动画功能,使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画,包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时,会自动触发过渡效果。过渡</div> </li> <li><a href="/article/1943761678143385600.htm" title="观众信息设置与统计(视频高级分析与统计功能)" target="_blank">观众信息设置与统计(视频高级分析与统计功能)</a> <span class="text-muted">视频砖家</span> <a class="tag" taget="_blank" href="/search/%E8%A7%86%E9%A2%91%E5%AE%89%E5%85%A8/1.htm">视频安全</a><a class="tag" taget="_blank" href="/search/%E8%A7%86%E9%A2%91%E5%8A%A0%E5%AF%86/1.htm">视频加密</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E8%A7%86%E9%A2%91%E8%A7%82%E7%9C%8B%E5%88%86%E6%9E%90/1.htm">视频观看分析</a><a class="tag" taget="_blank" href="/search/%E8%A7%86%E9%A2%91%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">视频数据分析</a> <div>Web播放器(POLYV-html5-player)支持设置观众信息参数,设置后在播放器上报的观看日志中会附带观众信息,这样用户就可以通过管理后台的统计页面或服务端API来查看特定观众的视频观看情况了。一、观众信息设置播放器设置观众信息参数的代码示例如下:varplayer=polyvPlayer({wrap:'#player',width:800,height:533,vid:'88083abb</div> </li> <li><a href="/article/1943717683312783360.htm" title="CSS和CSS3区别对比" target="_blank">CSS和CSS3区别对比</a> <span class="text-muted"></span> <div>CSS(层叠样式表)与CSS3(CSS的第三个版本)的区别主要体现在功能扩展、语法特性以及应用场景等方面。以下是两者的核心对比:一、核心概念与版本关系CSS:是基础样式表语言,用于分离网页内容与样式,最初发布于1996年(CSS1),后续补充了CSS2(1998年),但功能较为基础,主要关注简单的布局和样式。CSS3:是CSS的最新版本(2005年起制定),向下兼容CSS2,并引入模块化设计(如F</div> </li> <li><a href="/article/1943570824522952704.htm" title="【总结】暂序" target="_blank">【总结】暂序</a> <span class="text-muted">ncj393437906</span> <a class="tag" taget="_blank" href="/search/%E3%80%8AHTML5/1.htm">《HTML5</a><a class="tag" taget="_blank" href="/search/Canvas%E6%A0%B8%E5%BF%83%E6%8A%80%E6%9C%AF/1.htm">Canvas核心技术</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E5%BD%A2/1.htm">图形</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E7%94%BB%E4%B8%8E%E6%B8%B8%E6%88%8F%E5%BC%80%E5%8F%91%E3%80%8B/1.htm">动画与游戏开发》</a><a class="tag" taget="_blank" href="/search/canvas/1.htm">canvas</a> <div>文章目录目前项目业务是使用canvas对数据进行成图,不涉及动画游戏业务,《HTML5Canvas核心技术图形、动画与游戏开发》这本书总共有10章,目前只用看到【第5章-动画】章节,目前笔记就先记录到这。</div> </li> <li><a href="/article/1943094312027877376.htm" title="js实现百度地图的自定义marker与css3动画的交互" target="_blank">js实现百度地图的自定义marker与css3动画的交互</a> <span class="text-muted">沈大大520</span> <a class="tag" taget="_blank" href="/search/css3%E5%8A%A8%E7%94%BB/1.htm">css3动画</a><a class="tag" taget="_blank" href="/search/%E6%89%A9%E5%B1%95%E8%87%AA%E5%AE%9A%E4%B9%89%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BEmaker/1.htm">扩展自定义百度地图maker</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>使用过百度地图,业务需求需要对某些特定标记物进行高亮和动画标记,因此采用css3对百度地图的marker组件进行动态效果的调试,一:调用百度地图的apiDocument.map{width:100%;height:100%;background:#d5e6f5;position:absolute;float:left;}二:初始化百度地图创建实例varmap=newBMapGL.Map("map"</div> </li> <li><a href="/article/1942983636076785664.htm" title="Html+Css+JavaScript+Vue+Axios入门" target="_blank">Html+Css+JavaScript+Vue+Axios入门</a> <span class="text-muted">chen_ever</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>一.HTMLHTML(HyperTextMarkupLanguage)是构建网页的基础语言,用于定义网页的结构和内容。以下介绍HTML的基本概念和用法。页面标题这是一级标题这是一个段落。声明文档类型为HTML5。标签是文档的根元素。包含元信息,如标题和CSS链接。包含可见的页面内容。常用HTML标签到:标题标签,数字越小级别越高。:段落标签。链接文本:超链接标签。:图像标签。和:无序列表。和:有序</div> </li> <li><a href="/article/1942958432315305984.htm" title="HTML5 浏览器支持" target="_blank">HTML5 浏览器支持</a> <span class="text-muted">lsx202406</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>HTML5浏览器支持引言随着互联网技术的飞速发展,HTML5已经成为网页开发的新标准。HTML5的出现,使得网页开发更加便捷、高效。本文将详细探讨HTML5的浏览器支持情况,帮助开发者更好地了解和利用这一技术。HTML5浏览器支持概述支持程度目前,大多数主流浏览器都对HTML5提供了较好的支持。以下是一些主流浏览器的HTML5支持情况:Chrome:Chrome浏览器对HTML5的支持非常好,几乎</div> </li> <li><a href="/article/1942761144296992768.htm" title="原生cesium 实现 多图例展示+点聚合(base64图标)" target="_blank">原生cesium 实现 多图例展示+点聚合(base64图标)</a> <span class="text-muted"></span> <div>个人简介:某大型测绘遥感企业资深Webgis开发工程师,软件设计师(中级)、CSDN优质创作者作者:柳晓黑胡椒❣️专栏:cesium实践(原生)若有帮助,还请关注➕点赞➕收藏,不行的话我再努努力需求背景解决思路解决效果index.vue需求背景1.需要展示多个站点图例的图表及闪烁效果2.需要考虑层级高时,多图例的点聚合效果,且点聚合显示需要采用设计的圆形图标解决思路闪烁效果:采用css3的anim</div> </li> <li><a href="/article/1942568525432418304.htm" title="CSS3 文本效果详解" target="_blank">CSS3 文本效果详解</a> <span class="text-muted">lly202406</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>CSS3文本效果详解引言随着Web技术的发展,CSS3为前端设计师和开发者提供了丰富的文本效果选项。这些效果不仅能够增强网页的美观性,还能提升用户体验。本文将详细介绍CSS3中的文本效果,包括文本阴影、文本描边、文本装饰、文本换行、文本大小写等,并探讨如何在实际项目中应用这些效果。文本阴影文本阴影是CSS3中最常见的文本效果之一。它可以为文本添加阴影,使其更加立体,提升视觉效果。基本语法text-</div> </li> <li><a href="/article/1942307421179408384.htm" title="html怎么设置好看的文本框,html页面输入框input的美化" target="_blank">html怎么设置好看的文本框,html页面输入框input的美化</a> <span class="text-muted">PassatCC</span> <a class="tag" taget="_blank" href="/search/html%E6%80%8E%E4%B9%88%E8%AE%BE%E7%BD%AE%E5%A5%BD%E7%9C%8B%E7%9A%84%E6%96%87%E6%9C%AC%E6%A1%86/1.htm">html怎么设置好看的文本框</a> <div>input输入框是网页必不可少的组件,可是每个浏览器对于输入框的显示样式各有不同例如:上图分别就是谷歌浏览器和IE浏览器自带显示的输入框,样式也不足人意,所以大多都会自己写样式以下是一个简单的文本框样式input{border:1pxsolid#ccc;padding:7px0px;border-radius:3px;/*css3属性IE不支持*/padding-left:5px;}效果图:样式属</div> </li> <li><a href="/article/1942268199458369536.htm" title="HTML5中背景图片如何设置" target="_blank">HTML5中背景图片如何设置</a> <span class="text-muted">十指流玉</span> <a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a> <div>自己试验了很多种方式,最终发现有一种方式最得朕心~~哈哈哈哈哈先看一下效果图吧:只截取了一部分,图片的人物不会因为页面大小而变得扭曲(这一点非常重要),我已经很满足啦~~~~~下面看一下代码吧,其实也很简单。body{/*background:rgb(185,246,246);*//*设置颜色背景*/background-image:url(photo5.png);/*设置背景图片*/backgr</div> </li> <li><a href="/article/1942260629779836928.htm" title="html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度" target="_blank">html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度</a> <span class="text-muted">weixin_39886205</span> <a class="tag" taget="_blank" href="/search/html%E8%AF%BB%E5%8F%96%E5%AA%92%E4%BD%93%E9%95%BF%E5%BA%A6/1.htm">html读取媒体长度</a> <div>显示网页的终端屏幕分辨率大小不一,为了能使同一网页能在不同的终端中合适显示,CSS3推出了媒体查询media。用媒体查询media能根据屏幕分辨率大小确定网页宽度,这主要在CSS文件中根据屏幕分辨率大小定义网页宽度。以前用百分比来根据屏幕分辨率大小确定网页宽度,但由于同样的百分比随着屏幕分辨率的增大,网页离屏幕两边的距离也随之变宽,不能很好的解决这个问题;用媒体查询media就能很好的解决这个问题</div> </li> <li><a href="/article/1942199604627959808.htm" title="CSS3盒子模型" target="_blank">CSS3盒子模型</a> <span class="text-muted"></span> <div>div:nth-child(1){/*传统盒子模型=width+border+padding*/width:200px;height:200px;background-color:pink;padding:10px;border:10pxsolidred;box-sizing:content-box;}div:nth-child(2){/*有了这句话就让盒子变成CSS3盒子模型*//*paddin</div> </li> <li><a href="/article/38.htm" title="ASM系列六 利用TreeApi 添加和移除类成员" target="_blank">ASM系列六 利用TreeApi 添加和移除类成员</a> <span class="text-muted">lijingyao8206</span> <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E4%BB%A3%E7%90%86/1.htm">动态代理</a><a class="tag" taget="_blank" href="/search/ASM/1.htm">ASM</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E7%A0%81%E6%8A%80%E6%9C%AF/1.htm">字节码技术</a><a class="tag" taget="_blank" href="/search/TreeAPI/1.htm">TreeAPI</a> <div>    同生成的做法一样,添加和移除类成员只要去修改fields和methods中的元素即可。这里我们拿一个简单的类做例子,下面这个Task类,我们来移除isNeedRemove方法,并且添加一个int 类型的addedField属性。   package asm.core; /** * Created by yunshen.ljy on 2015/6/</div> </li> <li><a href="/article/165.htm" title="Springmvc-权限设计" target="_blank">Springmvc-权限设计</a> <span class="text-muted">bee1314</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a> <div> 万丈高楼平地起。 权限管理对于管理系统而言已经是标配中的标配了吧,对于我等俗人更是不能免俗。同时就目前的项目状况而言,我们还不需要那么高大上的开源的解决方案,如Spring Security,Shiro。小伙伴一致决定我们还是从基本的功能迭代起来吧。 目标: 1.实现权限的管理(CRUD) 2.实现部门管理 (CRUD) 3.实现人员的管理 (CRUD) 4.实现部门和权限</div> </li> <li><a href="/article/292.htm" title="算法竞赛入门经典(第二版)第2章习题" target="_blank">算法竞赛入门经典(第二版)第2章习题</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>2.4.1 输出技巧 #include <stdio.h> int main() { int i, n; scanf("%d", &n); for (i = 1; i <= n; i++) printf("%d\n", i); return 0; } 习题2-2 水仙花数(daffodil</div> </li> <li><a href="/article/419.htm" title="struts2中jsp自动跳转到Action" target="_blank">struts2中jsp自动跳转到Action</a> <span class="text-muted">麦田的设计者</span> <a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/webxml/1.htm">webxml</a><a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E8%B7%B3%E8%BD%AC/1.htm">自动跳转</a> <div>1、在struts2的开发中,经常需要用户点击网页后就直接跳转到一个Action,执行Action里面的方法,利用mvc分层思想执行相应操作在界面上得到动态数据。毕竟用户不可能在地址栏里输入一个Action(不是专业人士)   2、<jsp:forward page="xxx.action" /> ,这个标签可以实现跳转,page的路径是相对地址,不同与jsp和j</div> </li> <li><a href="/article/546.htm" title="php 操作webservice实例" target="_blank">php 操作webservice实例</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a> <div>首先大家要简单了解了何谓webservice,接下来就做两个非常简单的例子,webservice还是逃不开server端与client端。我测试的环境为:apache2.2.11 php5.2.10做这个测试之前,要确认你的php配置文件中已经将soap扩展打开,即extension=php_soap.dll; OK 现在我们来体验webservice //server端 serve</div> </li> <li><a href="/article/673.htm" title="Windows下使用Vagrant安装linux系统" target="_blank">Windows下使用Vagrant安装linux系统</a> <span class="text-muted">_wy_</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/vagrant/1.htm">vagrant</a> <div>准备工作: 下载安装 VirtualBox :https://www.virtualbox.org/ 下载安装 Vagrant :http://www.vagrantup.com/ 下载需要使用的 box : 官方提供的范例:http://files.vagrantup.com/precise32.box 还可以在 http://www.vagrantbox.es/ </div> </li> <li><a href="/article/800.htm" title="更改linux的文件拥有者及用户组(chown和chgrp)" target="_blank">更改linux的文件拥有者及用户组(chown和chgrp)</a> <span class="text-muted">无量</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/chgrp/1.htm">chgrp</a><a class="tag" taget="_blank" href="/search/chown/1.htm">chown</a> <div>本文(转) http://blog.163.com/yanenshun@126/blog/static/128388169201203011157308/ http://ydlmlh.iteye.com/blog/1435157 一、基本使用: 使用chown命令可以修改文件或目录所属的用户:        命令</div> </li> <li><a href="/article/927.htm" title="linux下抓包工具" target="_blank">linux下抓包工具</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>原文地址: http://blog.chinaunix.net/uid-23670869-id-2610683.html tcpdump -nn -vv -X udp port 8888 上面命令是抓取udp包、端口为8888 netstat -tln 命令是用来查看linux的端口使用情况 13 . 列出所有的网络连接 lsof -i 14. 列出所有tcp 网络连接信息 l</div> </li> <li><a href="/article/1054.htm" title="我觉得mybatis是垃圾!:“每一个用mybatis的男纸,你伤不起”" target="_blank">我觉得mybatis是垃圾!:“每一个用mybatis的男纸,你伤不起”</a> <span class="text-muted">alafqq</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div>最近看了  每一个用mybatis的男纸,你伤不起 原文地址 :http://www.iteye.com/topic/1073938 发表一下个人看法。欢迎大神拍砖; 个人一直使用的是Ibatis框架,公司对其进行过小小的改良; 最近换了公司,要使用新的框架。听说mybatis不错;就对其进行了部分的研究; 发现多了一个mapper层;个人感觉就是个dao; </div> </li> <li><a href="/article/1181.htm" title="解决java数据交换之谜" target="_blank">解决java数据交换之谜</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%BA%A4%E6%8D%A2/1.htm">数据交换</a> <div>交换两个数字的方法有以下三种 ,其中第一种最常用   /* 输出最小的一个数 */ public class jiaohuan1 { public static void main(String[] args) { int a =4; int b = 3; if(a<b){ // 第一种交换方式 int tmep =</div> </li> <li><a href="/article/1308.htm" title="渐变显示" target="_blank">渐变显示</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div><style type="text/css"> #wxf { FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#97FF98); height: 25px; } </style></div> </li> <li><a href="/article/1435.htm" title="探索JUnit4扩展:断言语法assertThat" target="_blank">探索JUnit4扩展:断言语法assertThat</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/assertThat/1.htm">assertThat</a> <div>一.概述         JUnit 设计的目的就是有效地抓住编程人员写代码的意图,然后快速检查他们的代码是否与他们的意图相匹配。 JUnit 发展至今,版本不停的翻新,但是所有版本都一致致力于解决一个问题,那就是如何发现编程人员的代码意图,并且如何使得编程人员更加容易地表达他们的代码意图。JUnit 4.4 也是为了如何能够</div> </li> <li><a href="/article/1562.htm" title="【Gson三】Gson解析{"data":{"IM":["MSN","QQ","Gtalk"]}}" target="_blank">【Gson三】Gson解析{"data":{"IM":["MSN","QQ","Gtalk"]}}</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/gson/1.htm">gson</a> <div>  如何把如下简单的JSON字符串反序列化为Java的POJO对象? {"data":{"IM":["MSN","QQ","Gtalk"]}}   下面的POJO类Model无法完成正确的解析:   import com.google.gson.Gson;</div> </li> <li><a href="/article/1689.htm" title="【Kafka九】Kafka High Level API vs. Low Level API" target="_blank">【Kafka九】Kafka High Level API vs. Low Level API</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>1. Kafka提供了两种Consumer API High Level Consumer API Low Level Consumer API(Kafka诡异的称之为Simple Consumer API,实际上非常复杂) 在选用哪种Consumer API时,首先要弄清楚这两种API的工作原理,能做什么不能做什么,能做的话怎么做的以及用的时候,有哪些可能的问题  </div> </li> <li><a href="/article/1816.htm" title="在nginx中集成lua脚本:添加自定义Http头,封IP等" target="_blank">在nginx中集成lua脚本:添加自定义Http头,封IP等</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/nginx+lua/1.htm">nginx lua</a> <div>Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言,从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器,但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站,我们不希望爬虫抓取子域名的页面,降低我们的Page rank。 location /{</div> </li> <li><a href="/article/1943.htm" title="java-归并排序" target="_blank">java-归并排序</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.Arrays; public class MergeSort { public static void main(String[] args) { int[] a={20,1,3,8,5,9,4,25}; mergeSort(a,0,a.length-1); System.out.println(Arrays.to</div> </li> <li><a href="/article/2070.htm" title="Netty源码学习-CompositeChannelBuffer" target="_blank">Netty源码学习-CompositeChannelBuffer</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>CompositeChannelBuffer体现了Netty的“Transparent Zero Copy” 查看API( http://docs.jboss.org/netty/3.2/api/org/jboss/netty/buffer/package-summary.html#package_description) 可以看到,所谓“Transparent Zero Copy”是通</div> </li> <li><a href="/article/2197.htm" title="Android中给Activity添加返回键" target="_blank">Android中给Activity添加返回键</a> <span class="text-muted">hotsunshine</span> <a class="tag" taget="_blank" href="/search/Activity/1.htm">Activity</a> <div> // this need android:minSdkVersion="11" getActionBar().setDisplayHomeAsUpEnabled(true); @Override public boolean onOptionsItemSelected(MenuItem item) { </div> </li> <li><a href="/article/2324.htm" title="静态页面传参" target="_blank">静态页面传参</a> <span class="text-muted">ctrain</span> <a class="tag" taget="_blank" href="/search/%E9%9D%99%E6%80%81/1.htm">静态</a> <div> $(document).ready(function () { var request = { QueryString : function (val) { var uri = window.location.search; var re = new RegExp("" + val + "=([^&?]*)", &</div> </li> <li><a href="/article/2451.htm" title="Windows中查找某个目录下的所有文件中包含某个字符串的命令" target="_blank">Windows中查找某个目录下的所有文件中包含某个字符串的命令</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E6%89%BE%E6%9F%90%E4%B8%AA%E7%9B%AE%E5%BD%95%E4%B8%8B%E7%9A%84%E6%89%80%E6%9C%89%E6%96%87%E4%BB%B6/1.htm">查找某个目录下的所有文件</a><a class="tag" taget="_blank" href="/search/%E5%8C%85%E5%90%AB%E6%9F%90%E4%B8%AA%E5%AD%97%E7%AC%A6%E4%B8%B2/1.htm">包含某个字符串</a> <div>findstr可以完成这个工作。   [html]  view plain copy   >findstr /s /i "string" *.*   上面的命令表示,当前目录以及当前目录的所有子目录下的所有文件中查找"string&qu</div> </li> <li><a href="/article/2578.htm" title="改善程序代码质量的一些技巧" target="_blank">改善程序代码质量的一些技巧</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E9%87%8D%E6%9E%84/1.htm">重构</a> <div>有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点,程序你只写一次,但以后会无数次的阅读。当你第二天回头来看你的代码 时,你就要开始阅读它了。当你把代码拿给其他人看时,他必须阅读你的代码。因此,在编写时多花一点时间,你会在阅读它时节省大量的时间。让我们看一些基本的编程技巧:    尽量保持方法简短    尽管很多人都遵</div> </li> <li><a href="/article/2705.htm" title="SharedPreferences对数据的存储" target="_blank">SharedPreferences对数据的存储</a> <span class="text-muted">dcj3sjt126com</span> <div>SharedPreferences简介:                                                   &nbs</div> </li> <li><a href="/article/2832.htm" title="linux复习笔记之bash shell (2) bash基础" target="_blank">linux复习笔记之bash shell (2) bash基础</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/bash/1.htm">bash</a><a class="tag" taget="_blank" href="/search/bash+shell/1.htm">bash shell</a> <div>转载请出自出处: http://eksliang.iteye.com/blog/2104329 1.影响显示结果的语系变量(locale)  1.1locale这个命令就是查看当前系统支持多少种语系,命令使用如下: [root@localhost shell]# locale LANG=en_US.UTF-8 LC_CTYPE="en_US.UTF-8" </div> </li> <li><a href="/article/2959.htm" title="Android零碎知识总结" target="_blank">Android零碎知识总结</a> <span class="text-muted">gqdy365</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>1、CopyOnWriteArrayList add(E) 和remove(int index)都是对新的数组进行修改和新增。所以在多线程操作时不会出现java.util.ConcurrentModificationException错误。 所以最后得出结论:CopyOnWriteArrayList适合使用在读操作远远大于写操作的场景里,比如缓存。发生修改时候做copy,新老版本分离,保证读的高</div> </li> <li><a href="/article/3086.htm" title="HoverTree.Model.ArticleSelect类的作用" target="_blank">HoverTree.Model.ArticleSelect类的作用</a> <span class="text-muted">hvt</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a> <div>ArticleSelect类在命名空间HoverTree.Model中可以认为是文章查询条件类,用于存放查询文章时的条件,例如HvtId就是文章的id。HvtIsShow就是文章的显示属性,当为-1是,该条件不产生作用,当为0时,查询不公开显示的文章,当为1时查询公开显示的文章。HvtIsHome则为是否在首页显示。HoverTree系统源码完全开放,开发环境为Visual Studio 2013</div> </li> <li><a href="/article/3213.htm" title="PHP 判断是否使用代理 PHP Proxy Detector" target="_blank">PHP 判断是否使用代理 PHP Proxy Detector</a> <span class="text-muted">天梯梦</span> <a class="tag" taget="_blank" href="/search/proxy/1.htm">proxy</a> <div>1. php 类 I found this class looking for something else actually but I remembered I needed some while ago something similar and I never found one. I'm sure it will help a lot of developers who try to </div> </li> <li><a href="/article/3340.htm" title="apache的math库中的回归——regression(翻译)" target="_blank">apache的math库中的回归——regression(翻译)</a> <span class="text-muted">lvdccyb</span> <a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a><a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a> <div>这个Math库,虽然不向weka那样专业的ML库,但是用户友好,易用。 多元线性回归,协方差和相关性(皮尔逊和斯皮尔曼),分布测试(假设检验,t,卡方,G),统计。   数学库中还包含,Cholesky,LU,SVD,QR,特征根分解,真不错。   基本覆盖了:线代,统计,矩阵, 最优化理论 曲线拟合 常微分方程 遗传算法(GA), 还有3维的运算。。。 </div> </li> <li><a href="/article/3467.htm" title="基础数据结构和算法十三:Undirected Graphs (2)" target="_blank">基础数据结构和算法十三:Undirected Graphs (2)</a> <span class="text-muted">sunwinner</span> <a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a> <div>  Design pattern for graph processing. Since we consider a large number of graph-processing algorithms, our initial design goal is to decouple our implementations from the graph representation</div> </li> <li><a href="/article/3594.htm" title="云计算平台最重要的五项技术" target="_blank">云计算平台最重要的五项技术</a> <span class="text-muted">sumapp</span> <a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%B9%B3%E5%8F%B0/1.htm">云平台</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E5%9F%8E%E4%BA%91/1.htm">智城云</a> <div>云计算平台最重要的五项技术 1、云服务器 云服务器提供简单高效,处理能力可弹性伸缩的计算服务,支持国内领先的云计算技术和大规模分布存储技术,使您的系统更稳定、数据更安全、传输更快速、部署更灵活。 特性 机型丰富 通过高性能服务器虚拟化为云服务器,提供丰富配置类型虚拟机,极大简化数据存储、数据库搭建、web服务器搭建等工作; 仅需要几分钟,根据CP</div> </li> <li><a href="/article/3721.htm" title="《京东技术解密》有奖试读获奖名单公布" target="_blank">《京东技术解密》有奖试读获奖名单公布</a> <span class="text-muted">ITeye管理员</span> <a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a> <div>ITeye携手博文视点举办的12月技术图书有奖试读活动已圆满结束,非常感谢广大用户对本次活动的关注与参与。  12月试读活动回顾: http://webmaster.iteye.com/blog/2164754 本次技术图书试读活动获奖名单及相应作品如下: 一等奖(两名) Microhardest:http://microhardest.ite</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>