HTML5+CSS笔记

HTML5

1.用于

酷炫网站制。游戏开发（小，不卡，轻便，代码写的速度快）。移动开发。应用开发。地理定位

2.优点

①    跨平台

PC。windows。IOS。Android都可用。

②    兼容性

③    世界知名浏览器厂商的支持（微软、Google、苹果、opera、Mozilla）

（iOS不支持Java，Java有平台的限制，只需一个浏览器去解析就可用）

3.什么是html5

HTML+CSS+JavaScript+HTML5+CSS3+API

h5的meta已简化成一行<metacharset=UTF-8>

 

不同浏览器的支持情况，坚持支不支持的       http://caniuse.com

第1==HTML5新增的元素/属性

一、新增的结构元素/标签（语义化）

1.    header

页面或页面中某一区块的页眉，通常是一些引导或导航信息

2.    nav

页面导航的链接组

3.    section

页面中的一个内容区块，通常由内容及其标题组成

4.    article

代表一个独立的完整的相关内容块，可独立于页面其他内容使用

5.    aside

非正文内容

与页面主要内容是分开的，被删除不会影响到网页的内容

6.    footer

页面或页面中某一区块的脚注

（logo一般用h1）

 

二、新增网页元素/标签

1.    video

定义视频，如影片片段或其它视频流

2.    audio

定义音频，如音乐或其它音频流

3.    canvas

定义图形

4.    datalist

定义可选数据的列表

 

5.    time

标签定义时间或日期

    eg：<time>10:45</time><!--搜索引擎--><br/>

6.    mark

在视觉上向用户呈现那些需要突出的文字

（自动加背景颜色）

    eg：<mark>I am markmark</mark>

7.    progress

运行中的进度（进程）

eg：<progress></progress><br/>
<progress value="50" max="100"></progress>

三、h5废除的元素

能用css替代的元素，big,center,font,s,u,strike。不再使用frame框架？

只有部分浏览器支持的元素，applet，blink，bgsound(背景音乐),marquee(左右滚动的)等。其他…………

 

四、新增全局属性

（全网页可用的）

1.    contentEditable

       规定是否允许用户编辑内容

     eg： <p class="green" contentEditable="true">这是一个可编辑的段落</p>

2.    designMode

       整个页面是否可编辑

     eg: document.designMode="on";

 (on可被编辑的，off不可被编辑)

3.    hidden

       规定对元素进行隐藏

     eg：<p hidden="hidden">隐藏了的</p>

4.    spellcheck

是否对元素进行拼写或语法检查

（true检查，false不检查）

     eg：<p contentEditable="true" spellcheck="true">进行语法检查</p>

5.    tabindex

       规定元素的tab键迭制次序（按Tab键获取光标的顺序）

       （基本元素可被编辑的，如index里的text，password等，最先获取光标）

     eg：<p tabindex="3">第三</p><p tabindex="1">第一</p><p tabindex="2">第二</p>

 

 

五、废除的属性

(改用css样式)

table（align，bgcolor,border,cellpadding,width）html(version)  a/link（charset）          lor(clear)、img(align)

 

第2==CSS3高级选择器

1.    first-of-type

              p:first-of-type，选择属性其父元素的首个<p>元素的每个<p>元素

第一个这种类型的孩子，所有层级里的第一个p

2.    last-of-type

              p:last-of-type，最后<p>元素的每个<p>元素

3.    first-child

              p:first-child，第一个子元素的每个<p>元素

              第一个且符合要求p，要是第一个儿子不是p就不符合

4.    last-child

              p:last-child，最后一个子元素的每个<p>元素

5.    nth-child(n)          (下标从1开始 )

              p:nth-child(n)，选择属性其父元素的第n个子元素的每个<p>元素

6.    :before

p:before，在每个<p>元素之前插入内容（content：）

7.    :after

p:after，在每个<p>元素之后插入内容

eg：ul li:nth-child(odd){
            background-color:lawngreen;}
ul li:nth-child(even){
            background-color:orangered;}

 

nth-child(1)=first-child;

clear:after{clear:both}???????

 

 

 

第3==HTML5表单

target{ 掌控新增表单元素、属性

用html5进行表单验证}

 

一、新增input类型

（type=“”）

1.    email

电子邮件地址文本框，提交表单时会自动验证email值

2.    url

网页的url，自动验证url值

3.    number

只包含数值的字段，能够设定对所接受的数字的限定（即number的属性）

最大值max

最小值min

数字间隔step

默认值value

以上可填入的只有数字2,7,12,17

4.    range

滑动条，特定值范围内的数值选择器

        eg：<input type="range" value="3" step="2" max="12"/>

5.    search

搜索框（用于搜索引擎）

 

6.    Date pickers(日期选择器)

拥有多个可供选取日期的新输入类型

①  date：可选择年/月/日        

②    month：选择年/月

③    week：选择年/第几周

④    time：选择时间，小时和分钟，上午/下午 12:00

⑤    datetime：选择时间，年/月/日，UTC时间

（UTC，世界统一时间，协调世界时，universal time coordinated）

⑥    datetime-local：选择时间，年/月/日/时间，本地时间

 

 

二、新增的input属性

 

1.    autofocus

页面加载时自动获得焦点

优先，不可能同时获得光标，从上到下

      eg：<input