基础学习12 HTML5基础

最新推荐文章于 2022-09-11 17:42:34 发布

aZF1997

最新推荐文章于 2022-09-11 17:42:34 发布

阅读量189

点赞数

分类专栏：学习文章标签：笔记

本文链接：https://blog.csdn.net/aZF1997/article/details/98094624

版权

学习专栏收录该内容

45 篇文章 0 订阅

订阅专栏

H5新增语义化标签以及属性

结构标签

（1）<section></section> 独立内容模块 ，可以h1-h6组成大纲 ，表示文档结构，有章节、页眉、页脚或其他部分。

（2）article  （文章） 文章核心部分
 （3）aside 标签内容之外相辅的信息  侧边栏
（4）header 头部/标题
(5)footer 底部
(6)nav 导航
（7）<figure>标签 代替原来的li>img+p就是有文字有图片的区域

    </figure>
   <li>
       img
       p
   </li>

IE使用新标签的兼容性处理

利用js去创造这些新的标签方法: document.createElement(‘ 标签名 ’);

 <script>
        /*1：手动创建语义化标签*/
        /*创建标签的*/

        /*先创建在使用*/
        /*  document.createElement('header');
          document.createElement('nav');*/
      
         /* document.createElement('footer');
          document.createElement('aside');
          document.createElement('article');
          document.createElement('section');*/
  </script>
    <!--生成语义化标签  必须放在头部使用-->
2:<script src="html5shiv.min.js/html5shiv.js"></script>

less than 小于 great than 大于小于lt 大于gt

新增的表单属性值：

类型	使用示例	含义
email		输入邮箱格式
tel		输入手机号码格式
url		输入url格式
number		输入数字格式
search		搜索框（体现语义化）
range		自由拖动滑块
time		小时分钟
date		年月日 Chrome FireFox
datetime		时间 Safari
month		月年
week		星期年

<meter  low="60" high="90"  min="0" max="100" optimum="85" value="90"></meter> 
 衡量占有率的条  区间 范围的描述  三色 绿色   黄色  红色 

投票率  磁盘占有率  

min:最小值 0G 0
max:最大值 80G  100
low: 60分  
high: 90分

====

pattern:提供了字符串模式匹配的验证方法   pattern=“^1[3,5,7,8][0-9]{9}$"
^字符的开始是数字1   $字符串的结尾是一个数字

[0-9]数字的意思  [3,5,7,8] 区间 从中选一个  电话号的第2位

email: 1:自动切换键盘显示出@符号 2: 提供了邮箱的完整验证(格式)

tel: 1: 只是打开移动端的数字键盘 ,不提供验证(原因就是实现起来太复杂)

如果你想看到数字键盘弹出来,把你的文档发到qq上 ,拿手机的浏览器打开一点看一看好了不看就拉倒知道就算了

number: 数字输入的地方 min : 最小值 max:最大值 —>减少后面js对数字区间的验证

step: 步长 ,增量

search: 功能不是搜索只是用在搜索框上提高用户体验利用鼠标删除不涉及键盘

range: 范围 , 区间滑块,标尺

常用新属性

逻辑属性 true 除了0以外 / false 0 selected = “true/false”===> 表单控件里有selected 属性的话 selected = “true" checked

属性	用法	含义
placeholder	<input type=“text” placeholder=“请输入用户名”	占位符当用户输入的时候里面的文字消失删除所有文字，自动返回
autofocus	<input type=“text” autofocus	规定当页面加载时 input 元素应该自动获得焦点一张界面只能用一次
multiple	<input type=“file” multiple	多文件上传
autocomplete	<input type=“text” autocomplete=“off/on”	规定表单是否应该启用自动完成功能有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮成功的提交过一次 2.这个表单元素您必须给他名字
required	<input type=“text” required	必填项内容不能为空不填会阻断提交
accesskey	<input type=“text” accesskey=“key”	规定激活（使元素获得焦点）元素的快捷键采用 alt + key的形式
pattern	”	字符串匹配的模式

<form action="">
  <fieldset>
    <legend>个人信息表</legend>
   <!--get 方式可以看到参数  地址栏-->
<form action=""  method="get">
    <!--邮箱的验证  完整 的邮箱验证-->
    <label for="email">邮箱:</label><input type="email" name="email" id="email"><br>
      <!--网络地址的判断  不完整-->
    地址:<input type="url" name="url"><br>
    <!--数字  只有数字 可以是小数  min最小值 max最大值  step 增量  步长-->
    数字:<input type="number" max="100" min="1" step="3"><br>


    <!--pc端看不到效果 专门给移动端准备的  打开数字键盘的 只能输入数字
    可以这样做 当前文档拿电脑qq发到手机qq 拿 手机浏览器打开此文档 点文本框

    -->
    电话号:<input type="tel" ><br>
    <!--文本框  提高了用户体验-->
    请输入书籍名字: <input type="search"><br>

    <!--下拉列表 datalist 配合一个文本框使用 写+选   文本输入框写list属性 list= 关联的下拉列表的id -->


    <input type="text" list="course" id="student" name="student" >
    <datalist id="course">
        <option value="数学">
        <option value="语文">
        <option value="体育">
        <option value="音乐">
        <option value="美术">
        <option value="计算机">

    </datalist><br>


    <!--范围  默认是最大范围和最小范围中间值-->
    体重:<input type="range" min="90" max="130" value="120"><br>
    颜色:<input type="color"><br>
     <!--时分  时刻-->
    时间:<input type="time"><br>
    <!--年月日-->
    日期: <input type="date"><br>

    <!--datetime safiri支持  其他浏览器不支持-->
    具体时间: <input type="datetime"><br>
    <!--其他浏览器支持  年月日 + 时刻-->
    具体时间: <input type="datetime-local"><br>

    月份:<input type="month">
    星期: <input type="week">


    <input type="submit" value="提交">


</form>
  </fieldset>
</form>

多媒体标签

FLASH 音频和视频 H5 audio video

audio：播放音频
HTML5通过标签来解决音频播放的问题。并且可以通过附加属性可以更友好控制音频的播放，

autoplay 自动播放谷歌高版本浏览器设置了不自动播放可以访问[chrome://flags/#autoplay-policy]此网址进行设置如下图(http://chrome//flags/#autoplay-policy)

controls 是否显示默认播放控件

loop 循环播放 loop 是否重复播放

muted 静音作用

由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考