HTML5新增内容

最新推荐文章于 2024-09-22 06:22:46 发布

超人不会飞/

最新推荐文章于 2024-09-22 06:22:46 发布

阅读量232

点赞数

分类专栏： HTML学习文章标签： css html

本文链接：https://blog.csdn.net/ChristWTF/article/details/103737184

版权

HTML学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE>声明必须在html文档第一行，在<html>标签之前，它不是html标签，而是指示浏览器页面是用哪个html版本进行编写的指令
DTD是用XML语法构建的模块，可以定义合法的XML文档，使用一系列合法的元素来定义文档的结构，在HTML中DTD规定了标记语言的规则，这样浏览器才能正确呈现内容，而html5不是基于SGML，所以不需要引用DTD

html5新增标签

新区块标签 section article nav aside（一般不在大纲中）
表单增强日期时间搜索表单验证 placeholder 自动聚焦

结构标签（块元素）–有意义的div

header/footer 一个区域的头部/底部（可放在div等里面）
section/article (区域，div最宽泛，当不知道用什么时可以用div；当知道是一块文章/导航等可以用section；当知道是一篇文章时可以用article）
nav 导航
aside 侧边栏
em/strong 强调
i 图标
hgroup 定义文件中一个区块的相关信息（放一系列标题）
figure 定义一组媒体内容以及他们的标题
figcaption figure的标题
dialog 定义一个对话框

header/section/footer > aside/article/figure/hgroup/nav > div/figcaption

<header>
    <nav>
        <a href="#">首页</a>
        <a href="#">介绍</a>
        <a href="#">相关</a>
    </nav>
</header>
<section>
    <hgroup>
        <h1>猫</h1>
        <h4>作者</h4>
    </hgroup>
    <aside>
        <a href="#s1">one</a>
        <a href="#s2">two</a>
        <a href="#s3">three</a>
    </aside>
    <article>一篇文章</article>
</section>
<section>
    <figure>
        <figcaption>视频标题</figcaption>
        <div>视频</div>
    </figure>
</section>
<section>
    <dialog>对话框</dialog>
</section>
<footer>Copyright</footer>

多媒体标签

audio 音频

<audio src="mp.mp3" autoplay="autoplay" loop="-1" controls="controls">播放器</audio>

<audio autoplay="autoplay">
        <source src="mp.mp3" type="audio/mpeg"/>
</audio>

video

   <video src="mp.mp4" controls="controls" width="1024" height="768"></video>
    <video controls="controls" width="1024" height="768">
        <source src="mp.mp4" type="video/mp4"/>
    </video>

canvas
embed 定义外部的可交互的内容或插件，如flash

<embed src="/flash.swf" width="1024px" height="768px" ></enbed>

web应用标签

状态标签

meter（实时状态显示气压气温）

    <meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter>
    <meter value="0.75">75%</meter>

progress （进度条）

    <progress value="30" max="100"></progress>
    <progress max="100"></progress>

列表标签

datalist 为input定义一个下拉列表，配合option

<input list="phone" placeholder="请输入。。。" list="phone"/>
<datalist id="phone">
    <option value="iphone">iphone</option>
    <option value="huawei">huawei</option>
    <option value="meizu">meizu</option>
</datalist>

 - 悬浮显示下拉箭头 搜索功能 输入功能

details

<details open="open">
    <summary>显示的标题</summary>
    <p>一大段文字</p>
</details>

 - summary是显示的标题
 - 默认为点击箭头显示内容，加入open="open"后默认是显示的

注释标签

<p><ruby>看<rp>(</rp><rt>kan</rt><rp>)</rp></ruby>一眼</p>

 - ruby 声明注释或音标
 - rt 注释的内容
 - rp 告诉不支持ruby的浏览器如何显示

标记<p>我看一下<mark>哦</mark></p>

计算器

<form οninput=" total.value = parseInt(price.value) * parseInt(number.value)">
    <input type="number" id="price" value="5000">
    *<input type="number" id="number" value="2">
    =<output name="total" ></output>
</form>

html5属性变化

input新增type
1. <input type="email" name="email">在电脑端没区别，在移动端体现在键盘的灵活性上
2. <input type="url" name="url">只在iphone手机键盘上有体现
3. <input type="tel" name="tel">在电脑端没区别，在移动端体现在键盘的灵活性上
4. <input type="number" name="number">只能输入数字和±等符号，PC端有箭头点击用来加减，移动端体现在键盘灵活性
input新增type datepickers（PC和移动端均有其样式）
1. date <input type="date" name="date">年月日
2. month <input type="month" name="month"> 年月
3. week <input type="week" name="week">
4. time <input type="time" name="time">一天时间
5. datetime 渐渐不兼容
6. datetime-local <input type="datetime-local" name="datetime-local">年月日+一天时间
input新增type range search
1. range <input type="range" name="range" min="1" max="10">样式改变为“拉选框”，min和max没值时默认为0 ~ 100
2. search <input type="search" name="search">输入时右边有个X标记
3. color <input type="color" name="color">颜色选择框

input新增属性 multiple（适用于email file 用于选择多个值）

<input type="file" name="file" multiple="multiple">
<input type="email" name="email" multiple="multiple">

 - file可以选择多个文件
 - email可以输入多个邮箱，邮箱间用逗号隔开

form新增属性 autocomplete autofocus

<form action="lesson.html" autocomplete="on">
	<input type="text" name="text" autofocus="autofocus">
	<input type="email" name="email" autocomplete="off">
</form>

 - 防止意外刷新后所填内容丢失
 - form中autocomplete="on" 表单中的所有内容会有记录
 - input中也可以使用 autocomplete="off"来取消记录
 - autofocus使光标自动在输入框内，适用于所有input

input新增属性 required

<input type="text" required="required"/>

 - 使input内容在提交前不能为空
 - 适用 text search url telephone email password datepickers number checkbox radio file

script

<script defer="defer" type="text/javascript" src="defer.js"></script>
<script async="async" type="text/javascript" src="async.js"></script>

defer 后面内容全都加载完后再加载
async 边加载本文件边加载后面的内容

<ol start="2" reversed="reversed">
	<li>html</li>
	<li>css</li>
</ol>

 - start 序号从几开始
 - reversed 倒叙 2 1 0 -1 -2

<html mainifest = "index.manifest">缓存该页面的html css js到本地，使得离线也能访问
<style scoped></style>使得在html中任意地方都能嵌入css

超人不会飞/

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录