客服热线:15659465595

WEB前端教程:04HTML5新增元素和css选择器

2019-04-21 21:21:54浏览:9 评论:0 来源:功课网   
核心摘要:关于HTML5你知道多少?HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。1993年HTML的草案发布,在html5

关于HTML5你知道多少?

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。

1993年HTML的草案发布,在html5版本之前,html共有4个版本.2.0版、3.2版、4.0版,再到1999年的4.01版。

为什么会有HTML5这个版本?

4.01后,w3c并不看好html,他们转而去发展XHTML,但并不理想。这时候由浏览器厂商们提出的H5标准更能顺应web2.0的时代,所以h5被慢慢推广了起来。

  2004年,浏览器主要厂商成立了WHATWG(Web Hypertext Application Technology Working Group)组织,它们创立了HTML5规范,专门针对WEB应用开发新功能(web应用新功能被认为是HTML4中最薄弱的环节)。WEB2.0也正是那个时候提出的。WEB2.0实至名归,开创了web的第二个时代,旧的静态网站逐渐让位于需要更多特性的动态网站和社交网站。2014年10月底(29日),HTML5规范正式定稿。


常见的html5新增语义化标签

1.header 页面头部

2.footer 页脚

3.article 定义页面独立的内容区域

4.aside 定义页面的侧边栏内容

5.details 文档某个部分的细节

6.summary 是details中的标题

7.figure 规定独立的流内容

8.figcaption 是figure的标题

9.mark  标记

10.nav 导航链接

11.meter用来表示范围已知且可度量的内容。

12.ruby加注释


HTML5新增的结构标签

...     头部

...导航

...定义文档中的节。比如章节、页眉、页脚或文档中的其它部分 

...      侧边栏

...页脚

...代表一个独立的、完整的相关内容块,可独立于页面其它内容使用。例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等


HTML5新增的结构标签

用于对元素进行组合。多用于图片与图片描述组合


figure标签

figure的标题



HTML5新增的结构标签

标签用于描述文档或文档某个部分的细节

IE不支持标签


details中的标题

详细的内容




HTML5新增的结构标签

 

定义带有记号的文本,它会给你要突出显示的文本下加个背景色。

如:

你是大长腿吗?



标签

标签定义度量衡。仅用于已知最大和最小值的度量。


low:最低临界点

high:最高临界点



标签

标签定义运行中的进度(进程)


max:定义完成值

value:定义当前值


标签

标签定义选项列表,与 input 元素配合使用该元素,来定义 input 可能的值

datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。



 

 

 


标签

标签为媒介元素(比如和)定义媒介资源。

标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。


   

   

  Your browser does not support the audio element.

 


标签

标签定义嵌入的内容,比如插件,当然也可以用来嵌入声音

标签必须有 src 属性

标签

canvas只是个容器,你可以通过控制坐标在canvas上绘制图形。一般配合js使用能实现非常复杂的动画效果

   你的浏览器不支持canvas标签

    cript type="text/javascript">

        var canvas=document.getElementById('myCanvas');

        var ctx=canvas.getContext('2d');

        ctx.fillStyle='#FF0000';

        ctx.fillRect(0,0,80,100);

    cript>


c s s

什么是CSS

CSS(Cascading Style Sheets)层叠样式表,又叫级联样式表,简称样式表

1.用于HTML文档中元素样式的定义

实现了将内容与表现分离

提高代码的可重用性和可维护性

2.文件后缀是.css


CSS与HTML之间的关系

1.HTML用于构建网页的结构

2.CSS用于构建HTML元素的样式

3.HTML是页面的内容组成,CSS是页面的表现


结构层   HTML

表示层   CSS

行为层   Javascript


使用CSS样式表的方式

1.内联方式

直接把CSS代码用style属性添加到开始标签中

红色字体


2.内部样式表

直接把CSS代码添加到头部的style标签中


 


3.外部样式表

ink rel="stylesheet" href=""/>   StyleSheet,的意思就是样式调用

4.导入式

 

优先级:行内样式>内部样式>外部样式>导入样式


css加载方式link和@import的区别,为什么不推荐使用@import?

1. @import是CSS提供加载样式的一种方式,只能用于加载CSS。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义rel连接属性等。

2. 加载顺序的差别。当一个页面被加载的时候,link引用的CSS会同时被加载,@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候会比较明显。

3. 兼容性的差别。@import在IE5以上才能识别,而link标签无此问题。

4. 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为dom操作元素的样式时,用@import方式的样式也许还未加载完成。

5.使用@import方式会增加HTTP请求,会影响加载速度,所以谨慎使用该方法。


css语法

1.css是以属性/值对形式出现

2.属性和属性值之间用冒号(:)连接

3.多对属性之间用分号(;)隔开

如:color:red;


CSS样式表特征

1.继承性

指被包含在内部的标签可以拥有外部标签的样式,比如:text-*、font-*、line-height,但有些属性不能继承,比如:border、padding、margin

2.层叠性

可以定义多个样式

3.优先级

样式定义冲突时,按照不同样式规则的优先级来应用样式


css基础选择器

1.通用选择器,全局选择器(*)

可以与任何元素匹配

常用于设置一些默认样式

优先级最低

2.元素选择器

HTML文档中的元素

p、b、div、a、img、body等

3.类选择器

.className{  }  如:.box{ color:red; }

类名不能以数字开头

一个页面中class名字可以重复

4.ID选择器

#idName{   }  如:#box{color:red;}

一个页面中id相同的id名只能出现一次

一般重复使用的样式不使用ID选择器,因为ID属性是唯一的

5.合并选择器

语法:选择器1,选择器2,...{ }

作用:提取共同的样式,减少重复代码

例如:.header,.footer{height:300px;}


div+css布局

内容和显示分离,便于维护扩展,网页布局方便,当需求改变的时候,效果最明显

div:

1.可定义文档中的分区或节

2.可以把文档分割为独立的、不同的部分。

3.是一个块级元素。这意味着它的内容自动地开始一个新行

4.通常与css进行配合,会有更加强的表现形式


布局实例时需要用到的css属性

width:数值

height:数值

background-color:颜色

float:left 使div不占据一行

(责任编辑:小编)
下一篇:

如何选择适合小学生诵读的古诗

上一篇:

WEB前端教程:03Form表单

  • 信息二维码

    手机看新闻

  • 分享到
打赏
免责声明
• 
本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们
 
0相关评论