(第一天)HTML5新增元素、属性、类型(上)

HTML5新增的元素

---

• 结构元素
  • section：内容块，用于分块使用，通常由标题与内容组成
  • article：页面独立的内容，通常用于正文；可嵌套使用，可表示插件
  • aside：article内容之外的区域，如评论区、引用区、广告区等
  • header：头部区域，如页面头部，文章头部等
  • hgroup：标题集合，如标题中包含正标题及子标题
  • footer：底部区域，如页面底部，文章底部等
  • nav：导航；如传统导航条、侧边栏、页内导航、翻页操作。
  • figure：流内容，如瀑布流; 独立内容，移除对网页无影响
  • form：html5的前提下，form下的从属元素可以在form外部，只需在外部的form从属元素中添加form属性，且该属性值等于对应form元素的id值即可。

    
    

        
        

            
正标题
            
副标题
        
        

            

                
主页
                
开发文档
            
        
    
    
    

        
        

            
article
            
            

                这是概要
            
        
        
        

            
红富士
            
这是一个苹果品牌
        
        

            
红富士
            
这是一个苹果品牌
        
        

            
红富士
            
这是一个苹果品牌
        
        
        

            这是页面结尾
        
    
    
    

        
        

            作者
        
        
评论
        
        

            时间
        
    
    
    

        

            
这是一个嵌入内容,嵌入本页所有内容
        
        
    
    
    

        
        

            
        
        
        
    
    
    

        这是页面尾部
    

• 其它元素 （此处只记录重要部分）
  • video：视频
  • audio：音频
  • canvas：画布；一个图形容器，必须使用脚本(js)来绘制图形
  • time：时间 与datetime属性配合使用，datetime属性值2016-10-17T21:30Z中T表示日期与时间的间隔符,Z表示时间为UTC格式.+09:00表示时区的调整。
    • 格式1：2016-10-10
    • 格式2：2016-10-10
    • 格式3：2016-10-10
    • 格式4：2016-10-10
  • address：联系人相关信息，如姓名，地址，联系方式等

Written by IOLG

Email us

Address: 中国,上海市,浦东新区

Phone: +86 021-88888888

HTML5新增的属性

---

• 全局属性
  • contentEditable：布尔类型，true表示允许用户修改内容；该属性有继承特性，若为声明值，则继承父属性值。注：元素须可获得焦点，否则无效。
  • designMode：on/off，若为on，未定义contentEditable属性的元素将全部调整为可编辑状态；off反之；该属性只能通过JS添加修改。定义contentEditable属性的将根据contentEditable自身属性状态执行。
  • hidden：隐藏区域，即通知浏览器加载时不渲染，等待JS相关操作后再做渲染。
  • spellcheck：语法检查，如将该属性添加到input元素中，则该input元素具备输入语法检查功能。
  • tabindex：索引元素，自定义tab按键的先后顺序（1为第一个）；正常情况下，除url类型元素及表单元素外，若需获取tab按键选择，须添加tabindex属性实现；若需添加tabindex属性但又不想立即生效，可将tabindex属性值修改为-1。

这是一个可编辑的列表

tab
tab
tab



    

    
applee
    
列表1-内容3


这是一个编辑的段落

按钮也能编辑


    
    
列表2-内容2
    
列表2-内容3


将未定义contentEditeable属性的所有元素调整为可编辑模式

• time元素pubdate属性
  明确含pubdate属性的time元素为发布日期，区分于其他不同时间

iphone7
发布时间:

2016-10-10

舞会时间:
2016-10-12

• 表单内部元素属性（form从属属性）
  • formaction：自定义提交路径
    
  • formmethod：自定义提交方法（GET、POST等）
    
  • formenctype：自定义编码方式
    
  • formtarget：自定义打开方式
    
  • autofocus：通过添加该属性，自动获取光标焦点；若该属性存在多个，以第一个为准。
    
  • required：适合输入型元素，通过该属性，强制该元素提交时必须存在字符，否则进行提交操作时会提示"请填写此字段"并终止提交。

* ***labels***：多个label元素与一个其他表单元素如input组成一个集合；通过代码示例说明：

张三
李四

以上两个label都是属于同一个input，通过label元素的for属于与input元素的id属性相互关联；在js中，除了元素正常获取的方法外，还可以通过先获取input元素，然后通过input元素.labels[0]的方式访问label元素，labels为一个数组，以0开始从上往下依次索引。

表单元素(共7个)：input、select、textarea、button、datalist、keygen、output (最后3个为HTML5新增的表单元素)。

HTML5新增的类型

---

• input元素的新增类型
  • email：email格式，若格式有误，输入时不提示，提交时错误信息
  • url：url格式；格式输入有误不提示，提交时提示
  • number：数字类型，只能输入数字或科学计数法类型，有加减控件
    
  • range：数字范围，默认为0-100范围内的可滑动控件，value值为初始位置，与number类型一样，可配合min，max，step属性使用
  • date：日期类型，包含日历控件，可选择日期或日期逐步增减；显示方式：年/月/日
  • datetime-local：日期时间类型，与date相同，只是多了时间；显示方式：年/月/日 小时:分钟
  • month：月份时间类型；显示方式：年/月
  • week：星期时间类型；显示方式： --年 第--周
  • color：颜色选择器