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(文档类型语法规则)
<!doctype html>
<html>
<head>
<meta charset="utf-8"> 文档的编码格式,元数据
<title></title>文档的标题
<base href="地址"/>为全网页指定默认的链接地址
<link rel="stylesheet" type="text/css" href="地址" />外部引入css文件
或<style type="text/css">外部、内部引入css文件
@import url(地址)
</style>
</head>
<body>
页面内容
</body>
<script src="地址">这里不要写内容</script>外部引入js文件
或<script type="text/javascript">内部写入js文件
js操作内容
</script>
</html>
(4)在html文件中应注意的问题:
- 双标签注意 闭合
- 标签名使用小写
- img最好不要加链接,同时最好不要加边框,用padding撑开
- 不要使用"<",">"这样的符号,应使用字符实体:
显示结果 | 描述 | 实体名称 |
空格 | ||
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
" | 引号 | " |
' | 撇号 | ' (IE不支持) |
¢ | 分(cent) | ¢ |
£ | 镑(pound) | £ |
¥ | 元(yen) | ¥ |
€ | 欧元(euro) | € |
§ | 小节 | § |
© | 版权(copyright) | © |
® | 注册商标 | ® |
™ | 商标 | ™ |
× | 乘号 | × |
÷ | 除号 | ÷ |
2. 标签分为单标签和双标签,其中双标签又分为开放标签和闭合标签
单标记:<标记 属性=“属性值”/>
双标记:<标记 属性=“属性值”,属性=“属性值”></标记>
>单标签(空元素):br、hr、img、link、meta、input
>双标签:a,heading,div,span……
3. html与 /html 之间的文本描述网页,<body> 与 </body> 之间的文本是可见的页面内容
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样式代码
<style type="text/css"> #name{background:yellow} </style>
(2)外部样式 :(两种并比较优缺点)
一. <link rel="stylesheet" type="text/css" href="地址"> 设置连接的css文件中的编码:@charset "utf-8"; 二. <style type="text/css"> @import url(地址) </style> (3)内联样式:
<div style="width:200px"></div>
(4)内部样式和外部样式组合使用:
<link rel="stylesheet" type="text/css" href="地址">
<style type="text/css"> #name{background:yellow} </style> 两种外部引用方式的比较: (1)<link>为标签,除了加载css之外还能定义其他事务;import为css范畴,只能加载css (2)<link>在引用css时,html文件与css文件同时加载;import需将html文件加载完之后,才会加载css文件。如果网速慢时,import方式,会只有元素内容而没有相关的样式。 (3)<link>是标签,没有兼容问题;import是css2.1提出的,低版本的浏览器不支持 (4)<link>支持JavaScript对DOM进行操作;import不支持。
三种引用css的方式的权重:
(1) 外部和内部样式的权重和写的顺序有关,后写的覆盖先写的(覆盖相同的内容,不相同的内容保留下来)
(2)内联样式的权重最高
15. 链接:
(1)鼠标移动到该链接时,鼠标的变化(设置cursor属性),添加属性值:
- auto默认[鼠标]
- crosshair加号[+]
- text文本[I]
- wait等待[O]
- help帮助[?]
- progress过程[鼠标+O]
- move移动[雪花]
- pointer点击[小手]
- ne-resize[斜箭头]
(2)语法:
<a href="url">名称</a> 内部可设属性 target(规定此链接在何处显示) target="_blank"新窗口打开 "_self"在当前框架内打开,为默认值 "_top"在顶层或跟框架中打开 "_parent"当前框架上一层打开
(3)锚点:被连接的内容可为name或id
- 被连接的标签为a时,可为id或name
- 被连接的标签为其他标签时,为id
- 发出连接的a中href中必须有#
<div id="div1"style="background:red;"></div> <p>lalla</p> <div id="div2"style="background:yellow;"></div> <p>离开的时间发了家第三方</p> <p>sdjfljdsfklkdsf</p> <div id="div3"style="background:plum;margin-bottom:800px"></div> <a href="#div1">啦啦</a> ——此时地址中必须有#
(4)
- 去掉下划线text-decoration:none
- 伪类选择符:
- a:link{} 最初的样子
- a:visited{}加载之后的样子
- a:hover{}鼠标悬浮的样子(常用)
- a:active{}鼠标点击之后的样子
16. 图片:
(1)取消默认边框border:0
(2)解决下边界有空隙display:block
<img src="地址" alt="替换文本属性" title="额外的信息"/>
(3)路径:(主要是HTML文件调用图片文件)
- html文件与图片处于同级:<img src=”图片名”>
- 当图片处于子文件夹,html文件处于父文件夹时:<img src=”子文件夹名/图片名”>
- 当图片处于父文件夹,html文件处于子文件夹时:<img src=”../图片名”>
(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) <thead>:将包含<th>标题的<tr>写入进来,仅一个 <tbody>:将表格的主体部分写进来,可写多个 <tfoot>:通常为表格的总计(可不写),仅一个 (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 是强制性的
- <html> 中的 XML namespace 属性是强制性的
- <html>、<head>、<title> 以及 <body> 也是强制性的
元素语法
- XHTML 元素必须正确嵌套
- XHTML 元素必须始终关闭
- XHTML 元素必须小写
- XHTML 文档必须有一个根元素
属性语法
- XHTML 属性必须使用小写
- XHTML 属性值必须用引号包围
- XHTML 属性最小化也是禁止的(禁止简写)
27.表单:
(1)格式1:
<form name=”表单的名称” method=”get/post” action=”获取/发送的路径”>
<input type=”text” name=”该文本可被调用” value=”在页面中可显示的文本”>
<input type=”password” name=”可被调用” placeholder=”可显示的文本虚拟”>
<input type=”submit” value=”确定”><input type=”reset” value=”取消”>
<input type=”radio” name=”单选按钮的值一致”> checked 默认的选中,
<input type=”checkbox” > disabled 默认不被选中
<select name=”可被调用”>
<option></option>
<option ></option>
</select>
<textarea name=”文本可被调用” ></textarea>CSS取消文本框的拖动: resize:none;
(2)格式2:
<fieldset id="">
<legend>今年的表格计划</legend>
<p><label for="inp1">输入内容:</label><input id="inp1" type="text" placeholder="拉斯科技发到了空间的十分"/></p>
</fieldset>
(3)表单中的属性列表:
accept-charset | 规定在被提交表单中使用的字符集(默认:页面字符集)。 |
action | 规定向何处提交表单的地址(URL)(提交页面)。 |
autocomplete | 规定浏览器应该自动完成表单(默认:开启)。 |
enctype | 规定被提交数据的编码(默认:url-encoded)。 |
method | 规定在提交表单时所用的 HTTP 方法(默认:GET)。 |
name | 规定识别表单的名称(对于 DOM 使用:document.forms.name)。 |
novalidate | 规定浏览器不验证表单。 |
target | 规定 action 属性中地址的目标(默认:_self)。 |
(4)html5新增的属性(IE不支持):<datalist>,<keygen>加密,<output>
- datalist的写法:
<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
- datalist与select的区别:
(5)get与post的区别:
- get是从服务器获取数据,post是提交数据
- get传输的数据量小,post不受限制
- get的安全性低
- get服务器用Request.QueryString来获取变量。post服务器用request.Form来获取提交的数据。
- get将数据提交到表单中,action中url所指向的地方,值是一一对应的,可以看到的;post是通过http post机制将表单内各个字段与内容放在html header中一起传送到action中,看不到。
什么时候使用:
- 考虑安全性时,用post
- 对内容数据进行查询时用get
- get的维护性高
(6)常见的输入类型:
color、search、
range、email、url:IE9 及早期版本不支持 、
date 、month、time:Firefox 或者IE 11 以及更早版本不支持 、
week:IE 不支持 、
datetime:Chrome、Firefox 或 IE 不支持、
datetime-local:Firefox 或者IE 不支持、
tel:Safari 8 及更新版本支持
28.对html5的理解:
- 良好的移动性,以移动设备为主。
- 响应式设计,能够自动适应不断变化的屏幕尺寸
- 支持离线缓存技术,webstorage
- 新增了一些canvas,video,audio标签,nav,header,footer,main,article,section,time,figcaption,figure,aside,details,summary内容元素和date,time,week,datetime,color,range表单控件
- 地理定位
- 新增webSocket/webWork技术
html5新增的标签:
<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>
29.媒体:
视频格式
MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。
格式 | 文件 | 描述 |
AVI | .avi | AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式,但非 Windows 计算机并不总是能够播放。 |
WMV | .wmv | Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见,但是如果未安装额外的(免费)组件,就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放,因为没有合适的播放器。 |
MPEG | .mpg .mpeg | MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的,得到了所有最流行的浏览器的支持。 |
QuickTime | .mov | QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式,但是 QuickTime 电影不能在没有安装额外的(免费)组件的 Windows 计算机上播放。 |
RealVideo | .rm .ram | RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下(在线视频、网络电视)的视频流。由于是低带宽优先的,质量常会降低。 |
Flash | .swf .flv | Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。 |
Mpeg-4 | .mp4 | Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上,YouTube 推荐使用 MP4。YouTube 接收多种格式,然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4,将其作为 Flash 播放器和 HTML5 的因特网共享格式。 |
声音格式
格式 | 文件 | 描述 |
MIDI | .mid .midi | MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备(比如合成器和声卡)的格式。MIDI 文件不含有声音,但包含可被电子产品(比如声卡)播放的数字音乐指令。 点击这里播放 The Beatles。 因为 MIDI 格式仅包含指令,所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小,但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。 |
RealAudio | .rm .ram | RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流(在线音乐、网络音乐)。由于是低带宽优先的,质量常会降低。 |
Wave | .wav | Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器(除了 Google Chrome)都支持它。 |
WMA | .wma | WMA 格式 (Windows Media Audio),质量优于 MP3,兼容大多数播放器,除了 iPod。WMA 文件可作为连续的数据流来传输,这使它对于网络电台或在线音乐很实用。 |
MP3 | .mp3 .mpga | MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。 |
使用方法:
<video controls"人为" autoplay"自动" loop"循环" muted"静音">
<source src="路径/文件名.mp4" type="video/mp4"></source>
<source src="路径/文件名.ogg" type="video/ogg"></source>
<source src="路径/文件名.webm" type="video/webm"></source>
</video>
<audio>
<source src="路径/文件名.mpeg" type="video/mpeg"></source>
<source src="路径/文件名.ogg" type="video/ogg"></source>
<source src="路径/文件名.wav" type="video/wav"></source>
</audio>
30.css选择器:
(1) 1类型选择符, 对所有相同类型的选择符进行设置,div,p,span……
(2) 10类选择符 ,在div中进行class设置
(3) 100 id选择符,在div中进行id设置
特殊选择符(群组选择符、包含选择符、通配符、伪类选择符)
(4) (分先后)群组选择符,同父级设置用“,”隔开
(5)(权重的叠加)包含选择符,儿子借着老子的名声干啥啥啥
(6)通配符,”*”对整个页面进行设置。
(7)伪类选择符“:”,比如链接的设置。
(8)!important最大
31.CSS属性:
(1)文本大小设置为偶数,必须大于12px(单位px,pt,em):font-size:value
1em=16px;
(2)文本颜色:color:#十六进制/rgb(0,255,255)
(3)文本字体:font-family:字体1,字体2,字体3
- 第一个字体加载不出来,就加载第二个,以此类推直至加载出来为止。
- 当字体为中文时或英文字体中有空格,需用“”双引号。
- 当字体只有一个单词是,不加双引号
(4)首行缩进:text-indent:value(为字体的二倍,设为2em)可设为负值为悬挂式缩进。
(5)小型的大写字母:font-variant:small-caps
(6)大小写的转换:text-transform:capitalize(首字母大写)/uppercase全部大写/lowercase全部小写
(7)行高(从第一行到第二行文本的开始):line-height可设为字号的二倍2em
当单行文本的行高等于容器的行高时,可实现该单行文本处于垂直方向居中对齐
(8)文本倾斜:font-style:italic/oblique/normal
(9)文本加粗:font-weight:bold/bolder/light/lighter/normal/100-500正常、600-900加粗
(10)水平对齐方式:text-align:center/right/left/justify(两端对齐,只限于低版本浏览器)
(11)文本修饰:text-decoratin:none/underline/overline/line-through
(12)字间距:letter-spacing:value
(13)词间距:word-spacing:value
(14)文本流的控制:layout-flow:horizontal(自左向右)/vertival-ideographic(自上而下)【适用于老版本浏览器】
32.文本溢出:(单行文本)
- 容器必须设宽度 width
- 强制文本一行显示 white-space:no-wrap
- 超出文本不显示 overflow:hidden
- 超出文本用省略号代替 text-overflow:ellipsis
33.浮动float:
float:left/right/none;
清除浮动:clear:right/left/both;
- 添加浮动之后,元素不占空间
- 元素有浮动,父元素必须有高度
34.定位postion:
(1)属性值position:absolute、relative、fixed、static
(2)属性值得区别:
- absolute:
1.为绝对定位,当确定子集在父集的位置时,父 集必须有定位,若不存在这样的父元素,则默认整个html为参照。
2.不占位置,脱离文档流。
- relative:(包含快)
1.为相对定位。
2.文档流位置不动,只是改变该元素的位置,其他不变。
- fixed:
1.固定定位
2.不占位置,脱离文档流。
3.始终是以浏览器的当前屏幕为参照物,位置始终不变。
35.宽高自适应:
(1)宽:(适应父元素的宽)
- 不设
- 为100%
(2)高:
- 高不设或设为auto,为子元素撑开的高
- 当子元素不确定为多少时,为父元素设置最小高度(IE6不支持)
- 100%,继承的是父元素的高
(3)兼容:
- IE浏览器识别“_”,其他浏览器不支持;
- “!important” 高版本浏览器支持,IE不支持
- 宽高自适应兼容:
1方法. _height:300px ,min-height:300px;
2方法. min-height:300px ; height:auto !important ; height:300px;
(4)高度坍塌:
原因:子元素有float,但父元素没有高或有最小高度,这是父元素出现高度塌陷
解决的方法:
- 方法:在父元素上添加overflow:hidden
原因:因为overflow:hidden触发了BFC
BFC的布局规则:计算BFC高度时,里面的浮动元素也参与运算
缺点:会隐藏一些置外的元素(定位)。
- 方法:在浮动的元素后面加上div标签,并设立
clear:both;overflow:hidden;height:0;
缺点:在html中形成不必要的空元素,增大代码体积。
- 方法:在父元素中中添加类名,该类的css样式为
.名:after{content:".";height:0;clear:both;display:block;overflow:hidden;visibility:hidden;zoom:1;}
36.隐藏元素的方法:
- overflow:hidden 溢出内容隐藏
- display:none 完全隐藏
- visibility:none 会留下空白
37.浏览器内核:
内核 | 浏览器 | 前缀 | 公司 |
trident | IE | -ms- | microsoft |
webkit | safari、chrome(l) | -webkit- | apple/google |
blink | chrome(h)、opera(h) | | |
presto | opera(l) | -o- | opera |
gecko | firefox | -mz- | mozilla |
38.兼容:http://www.jb51.net/css/85640.html
(1)图片:img{border:0;display:block;}
- 图片自带的边框,谷歌不显示,但IE6显示。
方法:border:0;
- 图片再带的间隙,所有浏览器都有(约3px)
方法1:使图片和<div>写在一行(代码容易乱)
方法2:给图片加入display:block
(2)双倍浮向:
原因:iE6及更低版本浏览器在解析浮动元素时,会把浮向边界(margin)加倍显示
方法:给浮动元素添加display:inline。
(3)默认高度:【目前解决不了】
原因:在IE7及更低版本浏览器部分元素拥有默认高度(在16px左右)
方法:font-size:0,overflow:hidden
(4)表单:
- 行高不一致:给表单元素添加float:left
- 按钮默认大小不一致:用a标签来模拟该按钮
(5)百分比:
原因:在IE6及以下版本加载百分比时,会按四舍五入来计算往往50%+50%>100%
方法:清除浮动。
(6)鼠标指针:
cursor:hand只适用于IE6及以下
cursor:pointer都适用
(7)透明:
IE:filter:alpha(opacity=value);value取(1-100)整数
其他:opacity:value;value取(0-1)之间的小数
(8)margin上下重叠:
原因:在父与子元素都没有设浮动的情况下,给子元素设置margin-top,会错误的将margin-top设在父元素上。
方法1:为父元素添加overflow:hidden
方法2:给父或子元素加浮动
(9)上下的两个元素,上面的元素设置margin-bottom,下面的元素设置margin-top,他们之间的距离不会叠加,而是会显示最大的那个值。
39.BFC:(block formatting context “块级格式化上下文”)
- 哪些元素会出发BFC:
(1)根元素(html)
(2)float不为none
(3)position为absolute或fixed
(4)display为inline-block,table-cell,table-caption,flex,inline-flex。
(5)overflow不为visible
- 作用:
(1)自适应两栏布局
(2)清除内部浮动
(3)防止margin的上下重叠
- 规则:
(1)内部的box在垂直方向,一个接一个的放置(块级元素)
(2)box垂直方向的距离由margin决定,属于同一个BFC的两个相邻box的margin会发生折叠
(3)BFC的区域不会与float box重叠
(4)BFC是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
(5)计算BFC的高度时,浮动元素也参与计算
(6)每个元素的margin box的左边,与包含块border box的左边相接触
40.在浏览器中垂直水平居中的方法:
- position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;
- 一个元素在父元素中左右上下居中:
(1)父元素中设置margin:0 auto;text-align:center
(2)需要居中的元素设置:vertical-align:middle;display:inline-block;
(3)在需要居中的元素的同一行设置一个空的<span> 标签,设置:
display:inline-block;vertical-align:middle;height:100%;width:0;
- 将父元素设置为弹性盒,设置属性:
display:flex;justify-content:center;align-items:center;