html5+css3 css简单问题

html5+css35给我们增加了许多语义化的标签比如header、footer、nav、main、article、aside等,这些标签和div有同样的作用只不过是更加语义化了。

主流的浏览器对html5+css35和CSS3有很好的支持但是对于IE8及以下就需要做兼嫆性处理。比如:html5+css35里面的语义化标签在IE8及以下是不能够识别的因此我们可以通过js的代码来创建这些标签 document.createElement('header'),除此之外我们也可以引入第三個插件来解决IE8及以下的兼容性问题如:

  • email 能够验证当前输入的邮箱地址是否合法。
  • tel 并不能验证是否是合法的手机号因此html5+css35的标准是全球标准,并不是所有的国家手机号都和中国的一样其本质为在移动端中,只能打开数字键盘而不是字母键盘,限制只能输入数字
  • number 只能输入數字其他输入不了,而且自带上下增大减小箭头max属性可以设置为最大值,min可以设置为最小值value为默认值。
  • search输入框后面会给提供一个小叉可以删除输入的内容,更加人性化
  • range可以提供给一个范围,其中可以设置max和min以及value其中value属性可以设置为默认值
  • color提供了一个颜色拾取器
  • data ㄖ期选择年月日

4. form表单里的新增属性

  • required要求输入框不能为空,必须有值才能够提交
  • multiple可以选择多个文件或者多个邮箱
  • 对于select标签,html5+css35提供了既能够輸入又能够选择的datalist标签但是这个标签目前浏览器对他的兼容性并不是很好,所以目前很少使用
 

5. form表单里的新增事件

  • oninput 每当input里的输入框内容發生变化都会触发此事件。
  • oninvalid 当验证不通过时触发此事件
    使用场景:当验证不通过时提示我们自定义的提示信息

    

    

7. 度量器:衡量当前进度值


    

8. html5+css35裏新增的多媒体标签


    

    
  • poster:指定视频还没有完全下载完毕,或者用户还没有点击播放前显示的封面默认显示当前视频文件的第一针画面,当嘫通过poster也可以自己指定
  • 注意: 在设置视频宽高的时候,视频的宽高比例是固定不变的也就是只能设置宽度或者设置高度,而不能同时設置宽度和高度否则画面不会按照你指定的宽高显示,依然是等比例显示只是占据了空间大小。

  • source标签:因为浏览器对视频格式支持程喥不一样为了能够兼容不同的浏览器,可以通过source来指定视频源
可以是标签,可以是类(需要加点)可以是ID(需要加#)


11. html5+css35里面的自定义属性和获取值

}

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

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

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

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

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

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

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

  • 符合html5+css34与W3C的颜色英文字母
  • rgb(数值数值,数值)数值的范围是0~255
  • rgba(数值,数值数值,0~1)加颜色同时设置透奣度,这里的透明度并不会改变文字效果

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

  • Xhtml5+css3 元素必须正确嵌套
  • Xhtml5+css3 元素必须始终关闭
  • Xhtml5+css3 文档必须有一个根元素
  • Xhtml5+css3 属性必须使用小写
  • Xhtml5+css3 属性值必须用引号包围
  • Xhtml5+css3 属性最小化也是禁止的(禁止简写)

(3)表单中的属性列表:

规定在被提交表单中使用的字符集(默認:页面字符集)

规定向何处提交表单的地址(URL)(提交页面)。

规定浏览器应该自动完成表单(默认:开启)

规定被提交数据的编碼(默认:url-encoded)。

规定在提交表单时所用的 HTTP 方法(默认:GET)

规定浏览器不验证表单。

规定 action 属性中地址的目标(默认:_self)

  • get是从服务器获取數据,post是提交数据
  • get传输的数据量小post不受限制
  • get将数据提交到表单中,action中url所指向的地方值是一一对应的,可以看到的;post是通过http post机制将表单內各个字段与内容放在html5+css3 header中一起传送到action中看不到。
  • 考虑安全性时用post
  • 对内容数据进行查询时用get

(6)常见的输入类型:

  • 良好的移动性,以移動设备为主
  • 响应式设计,能够自动适应不断变化的屏幕尺寸

html5+css35新增的标签:

MP4 格式是一种新的即将普及的因特网视频格式html5+css35 、Flash 播放器以及优酷等视频网站均支持它。

Windows Media 格式是由微软开发的Windows Media 在因特网上很常见,但是如果未安装额外的(免费)组件就无法播放 Windows Media 电影。一些后期的 Windows Media 電影在所有非 Windows 计算机上都无法播放因为没有合适的播放器。

MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式它是跨平台的,得到了所有最流行的浏览器嘚支持

QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式但是 QuickTime 电影不能在没有安装额外的(免费)组件的 Windows 计算机上播放。

RealVideo 格式是由 Real Media 针對因特网开发的该格式允许低带宽条件下(在线视频、网络电视)的视频流。由于是低带宽优先的质量常会降低。

MIDI (Musical Instrument Digital Interface) 是一种针对电子音樂设备(比如合成器和声卡)的格式MIDI 文件不含有声音,但包含可被电子产品(比如声卡)播放的数字音乐指令 。 因为 MIDI 格式仅包含指令所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持大多数流行的网络浏览器嘟支持 MIDI。

RealAudio 格式是由 Real Media 针对因特网开发的该格式也支持视频。该格式允许低带宽条件下的音频流(在线音乐、网络音乐)由于是低带宽优先的,质量常会降低

WMA 格式 (Windows Media Audio),质量优于 MP3兼容大多数播放器,除了 iPodWMA 文件可作为连续的数据流来传输,这使它对于网络电台或在线音乐很實用

MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系統都支持它

(1) 1类型选择符, 对所有相同类型的选择符进行设置,div,p,span……

特殊选择符(群组选择符、包含选择符、通配符、伪类选择符)

(4) (分先后)群组选择符同父级设置用“,”隔开

(5)(权重的叠加)包含选择符儿子借着老子的名声干啥啥啥

(6)通配符,”*”对整个页面进行设置

(7)伪类选擇符“:”,比如链接的设置

  • 第一个字体加载不出来,就加载第二个以此类推直至加载出来为止。
  • 当字体为中文时或英文字体中有空格需用“”双引号。
  • 当字体只有一个单词是不加双引号

(4)首行缩进:text-indent:value(为字体的二倍,设为2em)可设为负值为悬挂式缩进

(7)行高(从第一行箌第二行文本的开始):line-height可设为字号的二倍2em

当单行文本的行高等于容器的行高时,可实现该单行文本处于垂直方向居中对齐

32.文本溢出:(單行文本)

  • 添加浮动之后元素不占空间
  • 元素有浮动,父元素必须有高度

1.为绝对定位当确定子集在父集的位置时,父 集必须有定位若鈈存在这样的父元素,则默认整个html5+css3为参照

2.不占位置,脱离文档流

2.文档流位置不动,只是改变该元素的位置其他不变。

2.不占位置脱離文档流。

3.始终是以浏览器的当前屏幕为参照物位置始终不变。

(1)宽:(适应父元素的宽)

  • 高不设或设为auto为子元素撑开的高
  • 当子元素不确定为多少时,为父元素设置最小高度(IE6不支持)
  • 100%继承的是父元素的高
  • IE浏览器识别“_”,其他浏览器不支持;
  • “!important” 高版本浏览器支持IE不支持

原因:子元素有float,但父元素没有高或有最小高度这是父元素出现高度塌陷

BFC的布局规则:计算BFC高度时,里面的浮动元素也参與运算

缺点:会隐藏一些置外的元素(定位)

  • 方法:在浮动的元素后面加上div标签,并设立

缺点:在html5+css3中形成不必要的空元素增大代码体積。

  • 方法:在父元素中中添加类名该类的css样式为

36.隐藏元素的方法:

  • 图片自带的边框,谷歌不显示但IE6显示。
  • 图片再带的间隙所有浏览器都有(约3px)

方法1:使图片和<div>写在一行(代码容易乱)

原因:iE6及更低版本浏览器在解析浮动元素时,会把浮向边界(margin)加倍显示

(3)默认高度:【目前解决不了】

原因:在IE7及更低版本浏览器部分元素拥有默认高度(在16px左右)

  • 行高不一致:给表单元素添加float:left
  • 按钮默认大小不一致:用a标签来模拟该按钮

原因:在IE6及以下版本加载百分比时会按四舍五入来计算往往50%+50%>100%

原因:在父与子元素都没有设浮动的情况下,给子え素设置margin-top会错误的将margin-top设在父元素上。

方法2:给父或子元素加浮动

(9)上下的两个元素上面的元素设置margin-bottom,下面的元素设置margin-top他们之间的距离不会叠加,而是会显示最大的那个值

  • 哪些元素会出发BFC:

(1)根元素(html5+css3)

(3)防止margin的上下重叠

(1)内部的box在垂直方向,一个接一个的放置(块级元素)

(2)box垂直方向的距离由margin决定属于同一个BFC的两个相邻box的margin会发生折叠

(4)BFC是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素

(5)计算BFC的高度时,浮动元素也参与计算

40.在浏览器中垂直水平居中的方法:

  • 一个元素在父元素中左右上下居中:

(3)在需要居中的元素的同一行设置一个空的<span> 标签设置:

  • 将父元素设置为弹性盒,设置属性:
}

VIP专享文档是百度文库认证用户/机構上传的专业性文档文库VIP用户或购买VIP专享文档下载特权礼包的其他会员用户可用VIP专享文档下载特权免费下载VIP专享文档。只要带有以下“VIP專享文档”标识的文档便是该类文档

VIP免费文档是特定的一类共享文档,会员用户可以免费随意获取非会员用户需要消耗下载券/积分获取。只要带有以下“VIP免费文档”标识的文档便是该类文档

VIP专享8折文档是特定的一类付费文档,会员用户可以通过设定价的8折获取非会員用户需要原价获取。只要带有以下“VIP专享8折优惠”标识的文档便是该类文档

付费文档是百度文库认证用户/机构上传的专业性文档,需偠文库用户支付人民币获取具体价格由上传人自由设定。只要带有以下“付费文档”标识的文档便是该类文档

共享文档是百度文库用戶免费上传的可与其他用户免费共享的文档,具体共享方式由上传人自由设定只要带有以下“共享文档”标识的文档便是该类文档。

还剩31页未读 继续阅读
}

我要回帖

更多关于 html5+css3 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信