HTML5基础学习

最新推荐文章于 2022-10-09 16:48:55 发布

huaxingling

最新推荐文章于 2022-10-09 16:48:55 发布

阅读量194

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/huaxingling/article/details/109219192

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5基础学习

HTML5介绍

H5不是新的语言，是HTML第五次重大修改后的版本。
浏览器支持，所有主流浏览器（chromy, safari, firefox）IE9及以上。（有选择性地支持，并不是全部支持。 IE9把语义元素解析为为行级元素）注：IE8及以下不支持，想让IE8支持，有如下方法：
方法一：手动创建语义标签，默认是行级元素，需要display:block转为块级元素。
方法二：引入第三方插件 <script src=“../js/html5shiv.min.js”></script>。
改变了用户与文档的交互方式，例如增加了多媒体标签， video, audio, canvas。
增加了其他新特性: 语意特性，本地存储特性，多媒体，二维三维，特效（过渡，动画）。
相对于h4
1. 进步: 摒弃了一些不合理，不常用的标签属性。
2. 新增了一些标记和属性 —— 表单。
3. 从代码角度而言，html5的网页结构代码更简洁。

HTML5 新增标签和属性

HTML5新元素

表单新增的type属性

需要注意：

type=“tel” 是为移动端打开手机键盘服务的，网页端无效果
datetime目前浏览器不支持，可用datetime-local达到效果。

<!--
email: 验证邮箱必须是名字+@+域名格式
tel: 移动端时，打开手机键盘，网页端无效果
url: 验证以http://开头
number: 只能输入数字和小数点，不能输入其它字符,
        value: 默认值,
        max: 最大值，
        min: 最小值.
search: 添加了清除图标，更人性化
range: 滑动块
        value: 默认值，如不设置，则在最大和最小中间,
        max: 最大值,
        min: 最小值.
color: 颜色选取
----时间相关-----
time: 时间（时分秒）
date: 日期(年月日)
datetime: 大多数浏览器都不支持datetime, 用datetimelocal
-->
<form>
    用户名: <input type="text"> </br>
    密码: <input type="password"> </br>
    邮箱: <input type="email"> </br>
    电话: <input type="tel"> </br>
    网址: <input type="url"> </br>
    数量: <input type="number" value="1" max="100" min="1" /></br>
    搜索产品: <input type="search"></br>
    范围: <input type="range" value="50" min="0" max="100"> </br>
    颜色: <input type="color"> </br>
    时间: <input type="time"></br>
    日期: <input type="date"></br>
    时间+日期: <input type="datetime"></br>
    时间+日期: <input type="datetime-local"></br>
    月份: <input type="month"></br>
    星期: <input type="week"></br>
    提交: <input type="submit">
</form>

表单新增的其它属性

<!--
placeholder: 提示文本，提示占位
autofocus: 自动获取焦点
autocomplete: 自动提示 on/off, 也可用于表单，有两前提:
    1. 必须成功提交过
    2. input必须有name属性
required: 必须输入
pattern: 可以放入正则表达式的验证
    *: 代表任意个
    ?: 代表0个或1个
    +: 代表1个或多个
multiple: 放于type=file中，可以一次选择多个文件
multiple: 在type="email"中时，可以输入多个email, 各email之间用逗号分割
form: 通过设置form的id, 在form以外功过form="xx"引用，提交表单时，依旧可以把表单外的元素一起提交
-->
 <form name="form" id="myForm">
 	用户名: <input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"></br>
   电话: <input type="tel" name="phoneNumber" required pattern="^(\+86)?1\d{10}$"></br>
  文件: <input type="file" name="file" multiple> </br>
  邮箱: <input type="email" name="email" multiple></br>
        <input type="submit"> </br>
</form>
 地址: <input type="text" name="address" form="myForm">

表单新增元素

datalist：解决既可选择 list，又可输入的情况
keygen : 传递公钥到服务器，浏览器基本不支持
output: 显示，类似span, 实用性不强

<!--
datalist: 选择有的列表项，输入没有的列表项；
设置datalist中的id, 在input中通过list="id of datalist" 相关联；
option value是主显示内容，label是提示作用；
option既可以是双标签，也可以是单标签；
datalist的浏览器兼容性不太好，不推荐使用。
-->
<form>
  专业: <input type="text" name="major" list="majorList">
  <datalist id="majorList">
      <option value="英语" label="美/英式英语"></option>
      <option value="法语" label="纯正法语"></option>
      <option value="中文" label="普通话"></option>
  </datalist>
  <input type="submit">
</form>

input type="url"时， option中的value必须以http://开头，否则验证不过，没办法提交。

网址: <input type="url" name="web" list="webList">
<datalist id="webList">
	<option value="http://www.qq.com" label="QQ"></option>
    <option value="http://www.sohu.com" label="搜狐"></option>
    <option value="http://www.163.com" label="163"></option></datalist>

表单新增事件

oninput: 当input中的值发生改变时触发，注意区分和onkeyup的区别，
onkeyup是当键盘弹起时调用，如果通过鼠标复制内容，则不会触发，多个键一起作用时，会触发多次。
oninvalid: 当input中的值验证无效时触发

<script>
    document.getElementById("userName").oninput = function() {
        console.log("oninput:" + this.value);
    }
    document.getElementById("phoneNumber").oninvalid = function() {
        console.log("请输入11位手机号码");
    }
</script>

<body>
    <form>
        用户名: <input type="text" name="userName" id="userName" /> </br>
        电话: <input type="tel" name="phoneNumber" id="phoneNumber" pattern="^1\d{10}$" /></br>
        <input type="submit" />
    </form>
</body>

huaxingling

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础学习

HTML5介绍H5不是新的语言，是HTML第五次重大修改后的版本。浏览器支持，所有主流浏览器（chromy, safari, firefox）IE9及以上。（有选择性地支持，并不是全部支持。 IE9把语义元素解析为为行级元素）注：IE8及以下不支持，想让IE8支持，有如下方法：方法一：手动创建语义标签，默认是行级元素，需要display:block转为块级元素。方法二：引入第三方插件 <script src=“../js/html5shiv.min.js”></script
复制链接

扫一扫