HTML5表单与新特性-优快云博客

一：表单控件

单行文本框

-------------------------------------------------------------------------------------------------------

单行密码框

-------------------------------------------------------------------------------------------------------

单选按钮

注：一组单选按钮只能选择一个，单选按钮是一组相互排斥的按钮。要实现相互排斥，就要将所有单选按钮的name属性值设为一样

-------------------------------------------------------------------------------------------------------

多选按钮

注：一组多选按钮的name属性值也要设为一致

-------------------------------------------------------------------------------------------------------

提交按钮

-------------------------------------------------------------------------------------------------------

重置按钮

-------------------------------------------------------------------------------------------------------

图片按钮

注：图片按键具有将表单功能提交的功能，同时点击图片上的坐标值也可进行提交

-------------------------------------------------------------------------------------------------------

文件上传

-------------------------------------------------------------------------------------------------------

普通按钮

-------------------------------------------------------------------------------------------------------

隐藏域

注：隐藏里面的表单控件我们在浏览器上面是看不见的！但是这个数据也可以被提交给表单的处理程序进行处理！

------------------------------------------------------------------------------------------------------

下拉列表

<select  name=”名称”>

                  <option  value=”值”></option>

                  <option  value=”值”  selected=”selected”></option>

                  <option  value=”值”></option>

</select>

-------------------------------------------------------------------------------------------------------

文本域

二：标签中的通用属性

每一个标签中都会拥有的属性！

title：标题当鼠标放上的时候显示的文字信息！
class：我们将class的属性值称之为“类名”，只要是拥有相同的class的属性值不管是什么标签我们都可以将其称之为一类！class属性一般多用于CSS中
id：id的属性值必须是唯一的在一个HTML文档中 ID的属性值必须要唯一！它就好像我们的身份证号码一样！id属性一般多用于JavaScript中
style：它主要是用来设置CSS样式的！

三：HTML5

HTML5是W3C和WHATWG两个组织研发的

W3C叫万维网联盟，主要制定WEB标准，是一个非盈利性的组织。

WHATWG 叫web超文本技术工作组，是由Firefox(火狐)、Chrome（谷歌）、safari（苹果）、IE（微软）等浏览器公司成立了一个组织。

HTML5它是新一代的互联网标准。它的出现是为了取代HTML4和XHTML

XHTML可扩展的超文本标记语言它的出现是为了取代HTML4 。XHTML与HTML4之间有什么区别？并没有太大的区别，这两者之间的区别在于XHTML文档中有一个DTD

DTD：文档类型定义 Document Type Definition

HTML5它是于2014年9月份正式发布

HTML5它已经不再简单的超文本标记语言

HTML5= HTML+CSS+JavaScript 的集合

HTML5它主要是在移动端使用的非常多！就是因为移动端的兴起才导致HTML5的发展！

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

HTML5的文档结构：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>Document</title>
    </head>
</html>

①HTML5新增的语义化标签：

语义化：当我们看到这些标签时就能明白它其中的含义！

我们在html4的XHTML的时代的时候要实现一个盒子！就要使用div与span标签。但是在HTML5中新增了和div标签同样功能的标签，但是这些标签具有语义化！

<header> 头标签

<nav> 导航标签

<aside> 侧边栏标签

<article> 文章标签

<footer> 页脚标签

<section> 栏目标签

②表单控件中新增的属性：

required 必填内容项不能为空，如果没有内容，会提示用户填写此字段，也不会提交表单

placeholder 提示信息

autofocus 自动获取焦点

③表单控件input标签新增的type属性值：

属性值	功能
email	限定用户输入的内容必须是一个email类型
url	限定用户输入的内容必须网站要包含http://
date	限定用户输入的必须是日期类型年月日
week	限定用户输入的必须是周类型
time	限定用户输入的必须是时间类型小时和分钟
month	限定用户输入的必须是月类型
number	限定用户输入的必须是数值类型
color	颜色拾色器
range(min max value)	范围