您的位置：首页 > Web前端 > JavaScript

HTML5+CSS3+JS学习笔记-1

2016-12-03 20:25 633 查看
<!DOCTYPE HTML>

<html>

<!--Html5文档头部声明简洁多了-->

<head>

<meta charset="utf-8">

<title>Html5新增练习1</title>

</head>

<style type="text/css">

header,nav,section,footer{
width:400px;
height:40px;
border:solid 1px #333333;
margin-bottom:10px;
margin:10px auto;

}

aside,article{
width:150px;
height:35px;
border:solid 1px #000000;
float:left;
margin-left: 10px;

}

</style>

<body>

<!--Html5新增语义标签-->

<header>头部</header>

<nav>导航</nav>

<section>

  <aside>左侧</aside>

  <article>文章</article>

</section>

<footer>底部</footer><br>

<div align="center">

<form name="fom">
<!--Html5 新增input 属性 不同的浏览器效果不同 

    required 通过浏览器 验证效果不同 

        placeholder 默认显示内容

    autofocus 自动获取焦点 

    -->
姓名:<input type="text" name="username" required placeholder="请输入姓名" autofocus><br><br>
<!-- 新增input type 类型 通过浏览器 验证效果不同 -->

    邮件:<input type="email" name="email"><br><br>

    日期:<input type="date" name="mydate"><br><br>

    网址:<input type="url" name="myurl"><br><br>

    手机:<input type="number" name="phone"><br><br>

    亮度:<input type="range" name="du" min="0" max="255" value="200">255<br><br>

    颜色:<input type="color" name="color" ><br><br>

    地址:

    <select>

    <optgroup label="江西">

            <option>南昌市</option>

            <option>赣州市</option>

        </optgroup>

        <optgroup label="湖南">

            <option>长沙市</option>

            <option>岳阳市</option>

        </optgroup>

    </select><br><br>

    <!--新增 datalist 数据列表 标签 需要加id 跟 input list关联才能生效-->

    搜索车型:<input type="text" list="car">

    <datalist id="car">

    <option>奥迪</option>

        <option>大众</option>

    </datalist>

    

    <!-- type="submit" 信息才能提交 type="button" 不能提交 -->

    <input type="s
4000
ubmit"  name="submit" value="提交">

    

</form>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航