特色栏目： python 批处理 net编程 Javascript Php Asp Css Html5 Android seo centos

HTML5&CSS3

来源：互联网收集：自由互联发布时间：2021-06-12

1. HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签 HTML5是超文本标记语言的第五次重大修改，2014年10月29日标准规范制定完成。HTML5的设计目的是为了在

1. HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签

HTML5是超文本标记语言的第五次重大修改，2014年10月29日标准规范制定完成。HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式。
新特性：
- 语义特性
- 本地存储特性
- 设备兼容特性
- 连接特性
- 网页多媒体特性
- 性能与集成特性
- CSS3特性
新增标签：
- canvas：标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
- audio：定义音频内容
- video：定义视频（video 或者 movie）
- article：定义页面正文内容
- aside：定义页面内容之外的内容
- dialog：定义对话框，比如提示框
- header：定义了文档的头部区域
- footer：定义 section 或 document 的页脚
- nav：导航
- section：定义文档中的节（section、区段）等

如何让低版本的 IE 支持 HTML5新标签

方式一：Coding JavaScript

          
          
           
           <!--[if lt IE9]> 
          
          
          
          
           
           <script> 
          
          
          
          
           
              (function() {
          
          
          
          
           
                if (! 
          
          
          
          
           
                /*@
           
           [email protected]*/
          
          
          
          
           
                0) return;
          
          
          
          
           
                var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
          
          
          
          
           
                var i= e.length;
          
          
          
          
           
                while (i--){
          
          
          
          
           
                    document.createElement(e[i])
          
          
          
          
           
                } 
          
          
          
          
           
           })() 
          
          
          
          
           
           </script>
          
          
          
          
           
           <![endif]-->

方法二：使用Google的html5shiv包（推荐）

          
          
           
           <!--[if lt IE9]> 
          
          
          
          
           
           <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
          
          
          
          
           
           <![endif]-->

但是不管使用以上哪种方法，都要初始化新标签的CSS。因为HTML5在默认情况下表现为内联元素，对这些元素进行布局需要利用CSS手动把它们转为块状元素方便布局。

        
        
         
         /*html5*/
        
        
        
        
         
         article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

方法三：如果ie6/7/8 禁用脚本的用户，那么就变成了无样式的”白板”网页，该怎么解决呢？可以参照facebook的做法，即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面，用 html4 标签替换 html5 标签，这要比为了保持兼容性而写大量 hack 的做法更轻便一些。

          
          
           
           <!--[if lte IE 8]> 
          
          
          
          
           
           <noscript>
          
          
          
          
           
                <style>.html5-wrappers{display:none!important;}</style>
          
          
          
          
           
                <div class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
          
          
          
          
           
                </div>
          
          
          
          
           
           </noscript>
          
          
          
          
           
           <![endif]-->

这样可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面。

2. input 有哪些新增类型？

<input type="date" name="bday">出现一个日期选择器选择一个日期
<input type="datetime" name="bdaytime">datetime 类型允许你选择一个日期（UTC 时间）
<input type="datetime-local" name="bdaytime">datetime-local 类型允许你选择一个日期和时间 (无时区)
<input type="time" name="usr_time">定义可输入时间控制器（无时区）
<input type="month" name="bdaymonth">month 类型允许你选择一个月份
<input type="week" name="week_year">week 类型允许你选择周和年。
<input type="color" name="favcolor">可以调出浏览器的调色板选择喜欢的颜色
<input type="email" name="email">提交的时候会自动验证email输入正不正确，相当于自动帮我们做了个正则
<input type="number" name="quantity" min="1" max="5">提供一个列表选择数字，可以设定对所接受的数字的限定
<input type="range" name="points" min="1" max="10">range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
<input type="search" name="googlesearch">search 类型用于搜索域，比如站点搜索或 Google 搜索
<input type="tel" name="usrtel">定义输入电话号码字段
<input type="url" name="homepage">url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

Cookie 是服务器保存在浏览器的一小段文本信息，每个 Cookie 的大小一般不能超过4KB。浏览器每次向服务器发出请求，就会自动附上这段信息。
Cookie 保存以下几方面的信息：
- Cookie的名字
- Cookie的值
- 到期时间
- 所属域名（默认是当前域名）
- 生效的路径（默认是当前网址）
浏览器对Cookie数量的限制，规定不一样。目前，Firefox是每个域名最多设置50个Cookie，而Safari和Chrome没有域名数量的限制。
所有Cookie的累加长度限制为4KB。超过这个长度的Cookie，将被忽略，不会被设置。
localStorage是Web Storage的一种，让网页在浏览器端保存数据，存储容量比cookie更大。
localStorage长期保存数据，下一次访问该网站的时候，可以读取到之前保存的数据
不同浏览器对每个域名的存储上限不同：
Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。其中，Firefox的存储空间由一级域名决定，而其他浏览器没有这个限制。也就是说，在Firefox中，a.example.com和b.example.com共享5MB的存储空间。
同源策略：
只有同域的网页才能读取

特性 Cookie localStorage 数据的生命周期一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效除非被清除，否则永久保存存放数据大小 4K左右一般为5MB 与服务器端通信每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题仅在客户端（即浏览器）中保存，不参与和服务器的通信易用性需要程序员自己封装，源生的Cookie接口不友好源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

      
      
       
       localStorage.setItem('name', 'winters');//存储一个叫name的键，值为winters
      
      
      
      
       
       localStorage.getItem("name"); //获取存储的数据
      
      
      
      
       
       localStorage.removeItem("name");//删除存储的数据

4. CSS3效果简单事例

      
      
       
       1. 圆角， 圆形
      
      
      
      
       
       2. div 阴影
      
      
      
      
       
       3. 2D 转换：放大、缩小、偏移、旋转
      
      
      
      
       
       4. 3D 转换：移动、旋转
      
      
      
      
       
       5. 背景色渐变
      
      
      
      
       
       6. 过渡效果
      
      
      
      
       
       7. 动画

预览

5. 全屏图加过渡色

预览

6. loading 动画效果

预览
预览

原文:大专栏 HTML5&CSS3

上一篇：常见表单元素处理
下一篇：HttpWebRequest Timeout