客服热线:

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

2019-04-21 21:21:54浏览:3 评论: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新增的结构标签

<header>...</header>     头部

<nav>...</nav> 导航

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

<aside>...</aside>      侧边栏

<footer>...</footer> 页脚

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


HTML5新增的结构标签

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

<figure>

<img src=https://www.school360.cn/skin/m03skinBlue/image/nopic.gif alt="figure标签"  title="figure标签" />

<figcaption>figure的标题</figcaption>

</figure>


HTML5新增的结构标签

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

IE不支持 <details> 标签

<details>

<summary>details中的标题</summary>

<p>详细的内容</p>

</details>


HTML5新增的结构标签

<mark>  </mark>

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

如:<p>你是<mark>大长腿</mark>吗?</p>


<meter> </meter>标签

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

<meter min="0" max="100" value="80"></meter>

low:最低临界点

high:最高临界点

<meter min="0" max="100" value="81" low="20" high="80"></meter>


<progress></progress>标签

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

<progress max="100" value="20"></progress>

max:定义完成值

value:定义当前值


<datalist></datalist>标签

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

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

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

<input id="myCar" list="cars" />

<datalist id="cars">

  <option value="BMW">

  <option value="Ford">

  <option value="Volvo">

</datalist>

<source></source> 标签

<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。

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

<audio controls>

    <source src=https://www.school360.cn/skin/m03skinBlue/image/nopic.gif >

    <source src=https://www.school360.cn/skin/m03skinBlue/image/nopic.gif >

  Your browser does not support the audio element.

</audio> 


<embed/>标签

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

<embed> 标签必须有 src 属性

<embed src=https://www.school360.cn/skin/m03skinBlue/image/nopic.gif />

<canvas> </canvas> 标签

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

    <canvas id="myCanvas">你的浏览器不支持canvas标签</canvas>

    <script type="text/javascript">

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

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

        ctx.fillStyle='#FF0000';

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

    </script>


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属性添加到开始标签中

<p style=“color:red;”>红色字体</p>

2.内部样式表

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

<head>

 <style>

 p{color:red;}

</style>

</head>

3.外部样式表

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

4.导入式

<head>

<style>

@import url(my.css);

</style>

  </head>

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


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前端教程:雪碧图和滑动门

上一篇:

WEB前端教程:03Form表单

  • 信息二维码

    手机看新闻

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