HTML5基础

最新推荐文章于 2024-04-24 18:49:11 发布

jiangnan_001

最新推荐文章于 2024-04-24 18:49:11 发布

阅读量157

点赞数

分类专栏： h5基础文章标签： H5

本文链接：https://blog.csdn.net/jiangnan_001/article/details/79485415

版权

h5基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

 
 1、文档声明 <!DOCTYPE html>2、字符编码设置 <meta charset="UTF-8">3、验证 (http://validator.w3.org/) 

 
 HTML5新增的语义化标签 

 
 1、语义化标签：说明页面内容，便于搜索引擎寻找该内容；优点：根据内容的结构化，选择合适的标签便于开发者阅读和写出更优雅的代码，同时让浏览器的搜索引擎更好的解析和收录。 <article></article> 定义文章 <header></header> 头部 <nav></nav> 导航 <main></main> 主要区域 <section></section> 文档中的段落，某一区块 <aside></aside> 和section类似 <footer></footer> 底部，页脚 tips:section和aside可以归属为main的子标签 <mark></mark> 标记（很少用） <progress></progress> 进度条（很少用） 该标签具有属性：max,min,value； <figure> 表示单元（没见过，很少用） <figcaption></figcaption> 表示单元的标题 </figure>2、ie8以下的浏览器不识别H5标签解决方法：引入一个js插件，放在head标签中； <!--[if It IE 8]--> <script src="html5shiv.js"></script> <!--[endif]--> tips:该段代码这样设置只有在IE8内才会识别，其余版本会解析成注释； 

 
 表单输入类型 

 
 1、效果如下图所示<fieldset> <legend>标题</legend> //下面写表单元素input等 </fieldset> 

 
 2、input系列新属性<input type="email"> 邮箱输入框，会对输入的内容进行自动验证； type="url" 网址输入框，需要加http或https协议名； type="search" 输入框，带有清空内容的按钮； type="tel" 电话号码，在移动端将会自动弹出数字键盘； type="number" 很少用，表示数字，有加减按钮，有max，min，value，step属性； type="range" 很少用，表示滑块，有min，max，step； type="time" 时间，显示时与分，有上下按钮，如下图；  

 
  type="datetime-local" 本地时间，可以调整年月日时分； type="date" 带有年月日，带有日历选择框，value：xxxx-xx-xx； type="color" value="#666666"，必须是六位十六进制； type="file" 上传文件，加入了multiple属性则可以多文件上传；3、datalist数据列表 <input type="text" list="course"> <datalist id="course"> <option value=""></option> <option value=""></option> <option value=""></option> </datalist>tips:input中用list，datalist用id，二者名称相同即进行关联； option中存放了关联字，当在input中输入数据时，将会显示关联字；4、input属性 placeholder=""，作为初始显示值； autofocus 自动获取焦点，没有值； autocomplete="on" 自动完成，值为on或off，默认为on； pattern="[a-z]{3}" 指定了输入框的验证方式，其值为正则表达式； required 拥有该属性的input内容不能为空，否则无法提交；5、新事件 oninput 用户输入内容时触发 oninvalid 验证不通过时触发6、新方法 this.setCustomValidity 修改验证提示； 

 
 多媒体 

 
  <audio controls="controls" autoplay="autoplay" loop="loop"> <source src="xxx.mp3"> <source src="xxx.ogg"> <source src="xxx.wmv"> </audio>tips:在source中提供多种格式的资源，多种资源便于兼容不同浏览器。<video></video>标签与之类似。 

 
 DOM新增属性 

 
 获取元素： document.querySelector(); document.querySelectorAll();类名操作： node.classList.add(); node.classList.remove(); node.classList.contains(); node.classList.toggle() 

 
 自定义属性 

 
 data-*；data-*-*;node.dataset.*; eg:document.querySelector("a").dataset.cont="world";tips:data-*的属性形式在一些插件使用较多，例如bootstrap； 

 
 Review_正则表达式 

 
 1、元字符 . 除以\n之外的所有单个字符； \ 转义字符； | 左右表达式出现一次即true，为了避免歧义需要加()； eg：1a||b32，写成1(a||b)32; () 优先级，分组2、量词 ？ 某个字符出现0-1次； + 一次或多次； * 0-n次； {n} n为正整数，出现n次； {n, } {n,m} 3、范围 [0-9] [a-z] [A-Z] (支持连写) \d 数字，digital; \D 非数字; \s 空白字符，space; \S 非空白字符; \w 单词，word; \W 非单词； ^ 开头; $ 结尾; 