zoukankan      html  css  js  c++  java
  • H5C301

    标题H5C301

    1、html5
    h5最新版本。所有主流浏览器都支持h5。但仅ie9及以上支持h5
    改变了用户与文档的交互方式:多媒体
    新增了其他的特性:语义,本地存储,网页多媒体
    抛弃了不合理的标签
    html:xt +tab键生成过渡html4文档
    html:4s 严格的html4文档

    2、语义化标签
    1)语义特性
    新增的标签可在w3c网站上查看
    2)语义标签:div来说,语义性不强,在h5当中:
    在这里插入图片描述
    相当于有语义的div标签 。但要注意,在ie9中会将这所有的语义标签解析为行内元素。若要兼容ie更低的版本,则:
    解决方式有:自行创建相关标签,但也要注意创建的都是行内元素
    在这里插入图片描述
    引入第三方js插件:html5shiv.min.js
    3)表单新增的type属性:
    除了既有的text,checkbox等属性,又新增的许多新属性
    w3c网址也有。
    在这里插入图片描述

    1)邮箱:type="email"
    用户提交时将验证邮箱格式
    2)电话:type="tel"
    并不会实现电话的校验,为了能在移动端自动打开数字键盘,只能在移动端查看效果
    3)网址:type="url"
    会进行网址格式校验,网址必须合法
    必须包含http://
    4) 数量:number,附加使用min和max属性可以设定范围
    将出现上下箭头 
    5)商品名:search,会进行搜索并在文本框右侧将出现删除按钮
    6)范围:range,同样有max和Min属性
    将形成拖动条
    7)颜色拾取 color
    可以选择颜色 
    8)时间:time
    将出现上下箭头设定时间
    9)日期:date/datetime/datetime-local 
    大多数浏览器都不支持datetime,仅safari支持
     
    
    

    4)表单新增的其他属性

    以下属性均设置在input标签内
    1)输入提示占位:placeholder="文本"
    2)自动获取焦点:autofocus
    3)输入记忆:autocomplete on打开 off关闭
    前提是相关信息必须成功提交过并且当前Input有name属性才行
    4)必须输入:required
    5)正则验证:pattern="正则表达式"
    6)multiple:选择上传 多个文件或者允许键入多个文本,如邮箱,默认以逗号分隔
    7)form属性:form="id"; id是给某一form标签设定的Id属性值,这样在表外设置该form标签时,该Input标签内容将一并被提交
    

    5)表单新增元素之datalist
    既可以通过箭头选择,又可以自己输入
    可通过datalist创建选项列表
    在这里插入图片描述
    注意图中阐述的步骤,其中option可以变为单标签
    若用到了网址,必须加http://
    6)表单新增元素值keygen和output
    在这里插入图片描述
    在这里插入图片描述

    7)新增表单事件
    ①oninput:监听当前指定元素内容的改变,一旦改变,将触发该事件
    与onkeyup较为相似,但onkeyup不会对鼠标粘贴操作进行响应
    ,以及对快捷键的响应也不尽相同
    ②oninvalid:当验证不通过时触发,如pattern属性的正则匹配
    可修改提示信息:
    在这里插入图片描述
    8)进度条

    <progress></progress>
    有两个属性。max:最大值 value:当前进度值
    <meter></meter>
    度量器
    

    在这里插入图片描述
    fieldset legend 标签
    设置border时浏览器默认给予内浮雕的样式,此时只需要设置border:none之后再设置border属性即可
    在这里插入图片描述

    3、音频与视频

    <audio>音频标签,利用controls属性调出面板
    背景音乐:autoplay属性 loop:循环播放
    <audio src="">
    <video>视频标签 
    也要上述audio的相关属性。除此之外还有
    width:宽度
    height:高度
    poster:当视频没有完全下载,或者用户还未对待你家播放时,显示的画面,默认显示第一帧
    值为图片的路径
    设置宽高时,一般情况下时等比缩放,若同时设置宽高,视频并不会设置为给定值
    支持视频格式问题:不是所有视频格式浏览器都支持
    使用属性source,我们将准备多个格式的视频文件,让浏览器自行选择
    

    在这里插入图片描述

    4、html5获取dom元素
    新增的两个方法:
    获取第一个li标签:
    之前我们可以通过document.getElementsByTagName()返回数组
    来做
    document.querySelector(“选择器名”)
    如果获取的元素不止一个,将返回满足条件
    在这里插入图片描述
    document.querySelectorAll()
    获取满足条件的所有元素

    5、HTML5操作元素类样式
    1)classList:当前元素所有的样式列表/数组
    2)add():为元素添加指定名称的样式,但一次只能添加一个样式
    参数是样式名
    3)remove(‘样式名’);移除指定的样式名,不是移除class属性
    4)toggle:切换元素的样式
    在这里插入图片描述
    在这里插入图片描述
    className 属性设置或返回元素的 class 属性。
    classList.item也可以获取元素的样式

    6、自定义属性
    在这里插入图片描述

  • 相关阅读:
    取得窗口大小和窗口位置兼容所有浏览器的js代码
    一个简单易用的导出Excel类
    如何快速启动chrome插件
    网页表单设计案例
    Ubuntu下的打包解包
    The source file is different from when the module was built. Would you like the debugger to use it anyway?
    FFisher分布
    kalman filter
    Group delay Matlab simulate
    24位位图格式解析
  • 原文地址:https://www.cnblogs.com/Tanqurey/p/10485271.html
Copyright © 2011-2022 走看看