HTML5新增标签元素讲解

2019-09-12 郑州网站建设  

1.新增表单元素:

Input  type=XXX

Email email: 提示格式不正确

url   地址  :地址格式:.....

Number:数值型 

属性:min 最小  max最大

Range: 范围内数字的输入域  滑动条 了解

Date 日期选择器

Tel :电话号码的输入框

Color: 选色器

2.新增表单属性:

autocomplete 属性规定 form input 域需要拥有自动完成功能。  on  打开 off 关闭。

表单提示框autofocus 属性规定在页面加载时,域自动地获得焦点。autofocus="autofocus"  页面上只有一个

formaction - 重写表单的 action 属性  重定向表单提交  控制表单数据提交时候,提交到那个页面进行数据处理

formmethod - 重写表单的 method 属性

image类型的input元素的宽度和高度

height:

width:

list: 属性规定输入域的 datalist

解释:关联选项  input-à关联成下拉列表  datalist      list=”val”   =è datalist  id=”val”

  Datalist 所有选项必须 option

  Label 提示

  Value  下拉列表中出现的值

required 属性规定必须在提交之前填写输入域(不能为空)。 必填项  可以用在所有的input 类型的元素上。

案例:

用户登录界面效果图

 

Css代码

@charset "utf-8";

/* CSS Document */

*{ margin:0px;padding:0px;}

ul,li{ list-style:none;}

a{ text-decoration:none;}

header{

      border:0px solid #ff0000;

      width:90%;

      height:80px;

      margin:0 auto;

      font-size:50px;

      background-color:#E9F8FE;

      text-align:center;

      line-height:80px;

}

nav{

      width:90%;

      height:30px;

      margin:20px auto;

      border:0px solid #ff0000;

      background-color:#8CCFF0; 

}

nav ul{ padding-left:30px;}

nav ul li{

      width:80px;

      float:left;

      line-height:30px;

      font-weight:bold;    

}

nav ul li a:hover{ color:#F00;}

 

section{

      height:600px;

      width:90%;

      border:1px solid #CCC;

      margin:0 auto;  

}

aside{

     width:20%;

      float:left;

      height:600px;

      border-right:1px solid #ccc; 

}

aside ul{

      border:0px solid #00ff00;

      height:400px;   

}

aside ul li a{

      color:#000;

      line-height:40px;

      border-bottom:1px solid #ccc;

      text-align:center;

      display:block;   

}

form{

     width:75%;

      float:left;

      margin-left:10px;    

      padding-left:30px;

      padding-top:20px;

}

form p{ line-height:30px;}

 

footer{

      width:90%;

      height:100px;

      text-align:center;

      margin-top:20px;    

}

 

 

 

 

 

 

 

 

 

 

 

 

 

Html代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<link rel="stylesheet" href=http://www.divcss5.com/html5/"css/style.css">

</head>

<body>

<header>

      XXX科技有限企业出品

</header>

<nav>

      <ul>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2034.html转载请标明出处,谢谢合作!
标签:
  • HTML5
  • 元素
  • 表单
  • input
  • 1.
  • 新增
  • typ