HTML5新增网页布局 结构元素全局属性 input类型和属性

HTML5

定义：HTML5是用于取代HTML和Xhtml的标准版本
新特性：
		1、新的语义化标签，比如 header、footer、nav
		2、新的表单控件，比如email、url、search
		3、用于绘画的canvas元素
		4、用于媒介回放的video和audio元素

HTML5新增网页布局

以前的网页结构：
		1、不利于网站对方可的易用性
		2、不利于搜索引擎或者爬虫软件建立索引
		3、不利于后期的代码维护

HTML5新增结构元素

标签	说明
header	页面或页面中某一个区块的页眉，通常是一些引导和导航信息
main	规定文档主要内容
nav	定义页面导航链接
section	页面中的一个内容区块，通常由内容及其标题组成
article	代表一个独立的、完整的相关内容块，可独立于页面其他内容使用
aside	非正文的内容，与页面的主要内容是分开的，被删除而不会影响到网页的内容
footer	页面或页面中某个区块的脚注

HTML5新增网页元素

datalist标签

说明：定义可选数据的列表

例：

    <input list="cities" />
    <datalist id="cities">
        <option value="北京"></option>
        <option value="上海"></option>
        <option value="安徽合肥"></option>
    </datalist>

time标签

说明: 标签定义日期或时间

例：

<time datetime="2021-2-14">情人节</time>

mark标签

说明：在视觉上向用户呈现那些需要突出的文字

例：

<p>这是一段文字，请看<mark>我的标记</mark>>部分</p>

audio标签

说明：定义音频，如音乐或其他音频流
语法：<audio src="音频路径" controls="controls"></audio>

  <audio controls autoplay="autoplay" lopp>
    <source src="video/song.mp3" />
    <source src="video/song.ogg">
        您的浏览器不支持阿audio元素播放的音频
    </audio>    

video标签

说明：定义视频，如电影片段或其他视频流
语法：<video src="视频路径"></video>

<video src="video/123.mp4" controls autoplay loop width="200px" height="200px"></video>

canvas标签

说明：HTML5的canvas元素使用JavaScript在网页上绘制图像
		1、canvas用于绘制图像
		2、canvas元素本身没有绘制能力，仅仅是图形的容器
		3、必须使用脚本完成实际的绘图任务
	canvas拥有多种绘制矩形、路径、圆形、字符以及添加图像的方法
	canvas元素属性：
		1、id
		2、width
		3、height
	canvas使用步骤：
		1、使用id获取canvas元素
		2、创建canvas对象
		var c = document.getElementByI("XX");
		var cxt = c.getCOntext("2d");
		矩形、路径、圆形、字符、添加图像

    <canvas id="myCanvas">您的浏览器不支持canvas</canvas>
    <script>
        //js脚本结合canvas绘制一个红色80px 100px的矩形
        //根据id获得canvas元素c
        var c = document.getElementById("myCanvas");
        //获得一个绘图环境对象ctx（在画布上绘图的环境）
        var ctx = c.getContext("2d");
        //绘制矩形
        ctx.fillRect(0,0,80,100);
           //设置颜色
           ctx.fillstyle="#ff0000";
    </script>

HTML5中部分新增全局属性

contenteditable=true：文本可编辑

HTML5新增表单常用的input类型

<form action="#" method="GET">
        <p>电子邮箱 <input type="email" name="myEmail"></p>
        <p>个人主页 <input type="url" name="myurl"></p>
        <p>您的幸运色 <input type="color" name="myColor"></p>
        <p>请输入您要搜索的内容 <input type="search" name="mySearch"></p>
        <p>您的幸运数字<input type="number" name="mynumber" max="10" min="0" step="2" value="4"></p>
        <p>您的第二个幸运数字<input type="range" name="myrange" max="10" min="0" step="2" value="6"></p>
        
        <p><input type="submit" value="提交"></p>
    </form>

  		<p>date<input type="date"></p>
        <p>time<input type="time"></p>
        <p>week<input type="week"></p>
        <p>month<input type="month"></p>
        <p>datetime<input type="datetime-local"></p>

HTML5部分常用新增表单常用的input属性

1、placeholder：给用户一个提示，用于描述文本框期待用户输入的内容
2、required：规定文本框填写内容不能为空，否则不允许用户提交表单
3、pattern：用户输入的内容必须符号正则表达式所指的规则，否则 就不能提交表单
用作于表单验证
好处：
		1、减轻服务器的压力
		2、保证数据的可行性和安全性

<form action="#" method="GET" id="myform">
        <p>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:<input type="text" name="userName" value="" required pattern="[-\w\u4E00-\u9FA5]{4,10}"><span>长度为4~10个字符</span> </p>
        <p>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" name="pwd" value="" pattern="[\dA-z]{6,16}" required><span>长度为6~16个字符</span></p>
        <p>确认密码:<input type="password" name="pwd" value="" pattern="[\dA-z]{6,16}" required><span>长度为6~16个字符</span></p>
        <p>手机号码:<input type="number" name="phone" value="" pattern="1[3456789]\d{9}" required><span>号码长度为11位，以13|4|5|6|7|8|9开头</span></p>
        <p>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:<input type="text" name="email" value="" required></p>
        <p>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄:<input type="number" name="age" value="" pattern="\d[1-9]\d|1[0-2]\d"></p>
        <p ><a href="#" onclick="document.getElementById('myform').submit();return false;"><img src="images/btn.bmp" alt=""></a></p>
    </form>