HTML5

小咖啦咪 發表於 2020-2-29 21:39:00

兼容HTML5的浏览器 IE9+（trident）、谷歌（chrome-blink）、火狐（firefox-gecko）、欧朋（opera-presto）、苹果（safari-webkit）
HTML5特点 增加了新特性：语义特性√，本地存储特性，设备兼容特性，连接特性，网页多媒体特性√，三维、图形及特效特性√，性能与集成特性，CSS3特性√
新标签
1、header 双 <header>标签定义文档的页眉，通常是一些引导和导航信息。 <header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部 它不局限于写在网页头部，也可以写在网页内容里面。
2、nav 双 导航栏标签
3、main 双 在一个文档中，不能出现一个以上的 <main> 元素。 <main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。 4、article 双 比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用 article可以嵌套article
5、section 双 <section> 标签定义了文档的章节，本意是区块
6、aside 双 用来装载非正文的内容，可以删除，例如广告，成组的链接，侧边栏等等
7、footer 双 眉脚一般会包含作者姓名、文档版权信息、使用条款链接、联系信息等，可以写在内容里
8、hgroup 双 <hgroup>标签用于对网页或区段（section）的标题进行组合
9、figure>figcaption 双 <figure>用于对元素进行组合。一般用于图片，文字组合 <figcaption>是 figure的子元素，用于对figure的内容进行说明 例如图文组合 <figure> <img src="路径" alt="" > <figcaption>这是一个图片</figcaption> </figure> 
10、time 双 属性 datetime=“时间” 例如我每天都是<time>6点</time>起床 <time datetime="2018-11-11">光棍节</time>，我发了很多红包
11、datalist 双 与<input>配合,实现类似于拥有输入功能的下拉列表。<input> 元素的 list 属性来绑定 <datalist> 元素的id 例如 <input type="text" list="名字"> <datalist id="名字"> <option>
12、detalis 双 属性 open=“open”（打开） 用于描述文档或文档某个部分的细节 <summary> 可以为<details>定义标题。标题可见，用户点击标题时，会显示出 details中的内容。任何形式的内容都能被放在 <details> 标签里边。 open属性,规定 details中内容是否默认可见。<details open="open"> 例如 <details > <summary>望庐山瀑布 --Laotian</summary> 飞流直下三千尺，疑是银河落九天。 </details>
13、mark 双（给文字涂色） 定义带有记号的文本，在需要突出显示文本时使用 标签
14、progress 双 属性 max=“最大值” value=“当前值” 定义进度条
15、meter 双 度量尺 属性 max=“最大值” value=“当前值”
16、ruby 双 注释标签配合 rt 双使用 例如 <ruby>嫑<rt>biao</rt></ruby>
17、output 双 <output> 标记定义一些输出类型,计算表单结果配合oninput事件 例如自定义公式 <form oninput="res.value=no1.value*no2.value"> <input type="text" name="no1"> <input type="text" name="no2"> <output name="res"></output> </form> 注意加法不行（加号在js里是字符串拼接）
18、语义化标签兼容IE8-6 可以引用一个js插件解决HTML5语义化标签在IE6-8不兼容问题 <script src="路径"></script>
表单新输入类型（type）
1、color（颜色选择器） 语法 <input type="color"> 打开一个调色板
2、email 语法 <input type="email"> email 输入类型用于应该包含电邮地址的输入字段。当提交表单时，会自动地对 email 字段的值进行验证（正则表达式）
3、number 语法 <input type="number"> 只能输入数字（ios不弹出数字键盘，与Android不同）
4、tel 语法 <input type="tel"> 输入电话号码（ios与Android都弹出数字键盘）
5、url 语法 <input type="url"> 只能输入网址
6、results 语法 <input type="results"> 搜索
7、range 语法 <input type="range"> 特定范围内的数值选择器，属性 min、max、step( 步数 )、value
8、日期和时间 date 日、月、年 month 月、年 week 周、年 time 时间（时、分） datetime 时间、日、月、年（UTC时间） datetime-local 时间、日、月、年（本地时间）
表单新属性
1、placeholder（占位符）
2、autofocus（获取焦点）
3、required（验证条件，必填项）
4、pattern（正则表达式） 输入的内容必须匹配到指定正则 例如： pattern="\d{3}"（三位数字）html写法
网页中的视频
一、插入视频两种方式 1、<video src="路径"></video> 2、<video> <source src="路径" type="video/ogg" > </video>(type必加属性)
二、video属性 1、宽高 width height 2、自动播放 autoplay +静音 muted 3、播放控件 controls 4、播放前的图片poster="路径" 5、重复播放 loop
三、支持的视频格式 ogg、webM、MP4
网页中的音频 语法 <audio src="路径"></audio> 以上属性通用 
来源：https://www.cnblogs.com/imbacool/p/12386349.html

頁: [1]

琼殿技术论坛's Archiver

HTML5