html5

头像
Winnie
    阅读 5 分钟

    **html5
    新增标签**
    doctype并不是html的标签，它只是说明是html第几个版本

    为什么HTML5不引用DTD？
    DTD（文档类型定义）：
    DTD规定了标记语言的规则，这样浏览器才可以正确的呈现内容
    HTML5不基于SGML所以不需要引用DTD

    新增加的标签：
    1.结构标签
    块状元素－有意义的div
    －<article>标记定义一篇文章
    -<header>标记定义一个页面或一个区域的头部
    -<nav>标记定义导航链接
    -<section>标记定义一个区域
    -<aside>标记定义页面内容部分的侧边栏
    比如淘宝的左边的分类就是aside右边的扩展出来的文章就是article
    -<hgroup>标记定义文件中一个区块的相关信息
    -<figure>标记定义一组多媒体内容以及它们的标题
    -<figcaption>标记定义figure元素的标签
    -<footer>标记定义一个页面或者一个区域的底部
    －<diglog>标记定义一个对话框（会话框）类似微信

    header/section/aside/article/footer不要嵌套在里面
    header/section/footer级别是最高的，才可以写aside/article/figuare/hgroup/nav,然后 div figcaption

    2.多媒体标签
    <video>
    标记定义一个视频
    video可以加宽度和高度，改变视频的大小，但是audio只是音频，不存在高度和宽度

    <audio>
标记定义音频内容
<body>
<audio src=“../Source/passion.mp3” autoplay=“autoplay”></audio>
</body>
loop=“-1”
controls=“controls”(就会有一个控制器去播放，暂停）
可以在audio中间加一段文字，如果audio跑不出来就可以显示那个
    <source>
标记定义媒体资源
<audio autoplay=“autoplay”>
    <source src=“../Source/passion.mp3” type=“audio/mpeg”>
</audio>

    <canvas>标记定义图片

    <embed>标记定义外部的可交互的内容或者插件
    比如flash
    <embed src=“../Source/HappyBirthday.swf” width=“1024” height=“768”></embed>
    类似于flash这种带有插件的，可以使用它
    多媒体的标签的发展意味着支持不使用插件的情况下即可操作媒体文件，极大地提高了用户体验

    3.状态标签：
    <meter>状态标签（实时状态显示：气压，气温）
    <meter value=“220” min=“20” max=“380” low=“200” high=“240” optimum=“220”></meter>

    <progress>状态标签（任务过程：安装，加载）
    <progress value=“30” max=“100” >
    如果只有max的话会出现一个加载条的情况

    4.列表标签:
    <datalist>为input标记定义一个下拉表，配合option

    <body>
<input placeholder=“请选择您喜欢的手机品牌“ list=“phoneList” ／>
<datalist id=“phoneList”>
    <option value=“IPhone”>iPhone</option>
    <option value=“Samsung”>Samsung</option>
    <option value=“HuaWei”>Huawei</option>
    <option value=“HTC”>hTC</option>
    <option value=“Meizu”>Meizu</option>
</datalist>
</body>

    
<details>
    <summary>内容</summary>
    <p>lalalal</p>
</details>

    有一个属性是open＝“open”

    5.注释标签：
    <ruby>
    标记定义注释或者音标
    <body>
    <p>我们来<ruby>奋<rt>fen</rt></ruby>一个话题</p>
    读音放在字的上面

    <rt>
    <body>
    <p>我们来<ruby>奋<rp>(</rp><rt>fen</rt><rp>)</rp></ruby>一个话题</p>
    如果ruby不出现的或者不兼容
    rp不可以放在rt里面

    <rp>

    6.其他标签：
    <mark>
    <body>
    <p>妈妈叫我回家的时候顺路买一盒<mark>牛奶</mark>，需要很新鲜的那种。</p>
    相当于highlight

    <output>
    <oninput>：事件可以实时监听文本框的输入变化

    <body>
<form oninput=“totalPrice.value=parseInt(price.value)*parseInt(number.value)”></form>
    <input type=“text” id=“price” value=“5000”>
    <input type=“number” id=“number” value=“1”>=
    <output name=“totalPrice” for=“price number”></output>
</body>

    7.删除的标签：
    －纯表现的元素
    Basefont,big,center,font,s,strike,tt,u
    －对可用性产生负面影响的元素
    frame,frameset,noframes
    iframe
    －产生混淆的元素
    acronym,applet,isindex,dir

    8.重定义标签：

    <b>代表内联文本，通常是粗体，没有传递表示重要的意思
<i>代表内联文本，通常是斜体，没有传递重要的意思
<dd>可以同details和figure一同使用，定义包含文本，dialog也可以用
<dt>可以用details和figure一同使用，汇总细节，dialog也可以用
<hr>不仅仅表达水平线，还表达主题结束，显示效果相同
比如百度贴吧，论坛这种，一个主体完成之后一条横线，或者小说
<menu>重新定义用户界面的菜单，配合command或者menuitem使用
big标签已经被删除
<small>表示小字体，例如打印注释或者法律条款
<strong>表示重要性而不是强调符号

    属性变化：
    1.Input：

    <input type= “email” name= “email” >

<input type= “url” name= “url” >
只针对iphone手机
<input type= “tel” name= “tel” > 
<input type=“number” name=“number” >

    2.Date Pickers Input类型:
    Date
    <input type=“date” name =“date” >

    Month
    <input type=“month” name=“month”>

    Week
    iphone6以上，week是不兼容的

    Time

    Datetime

    Datetime-local

    3.其他Input

    • Range Input

    <input type=“range” name=“range” min=“1” max=“10”>
    如果没有输入的话默认100

    • Search Input

    <input type=“search” name=“search” >
    有值的时候后面多了一个叉叉

    • color input

    <input type=“color” name =“color” >
    默认黑色的颜色选择框
    可以做些在线文本编辑器调整字体

    4.表单属性

    1.autocomplete

    form或者input域都应该拥有自动完成功能
    <form autocomplete= “on”></form>
    autocomplete适用于<form>标签，以及以下类型的<input>标签：
    text,search,url,telephone,email,password,datapickers,range,color
    <form action=“lesson2_1 autocomplete.html” autocomplete=“on/off”></form>

    <input type=“text” name=“text”>
<input type=“submit”>

    2 .autofocus属性

    <input type=“text” name=“text”>
<input type=“email” name=“email” autofocus=“autofocus”／>
<input type=“submit”>

    适用于所有的
    规定在页面加载时，域自动地获得焦点

    3.multiple属性

    规定域中可以选择多个值
    multiple适用于以下类型的<input>标签：email和file
    <input type =“file” multiple= “multiple”/>

    4.placeholder属性

    提供一种暗示，描述输入区域所期待的值
    <input type=“search” placeholder= “Search Content”/>
    适用于：
    text,search,url,telephone,email,password

    5.required

    表单验证用js来判断
    规定必须在提交之前填写输入域（不能为空）
    <input type=“text” required=“required” />
    适用于：
    text,search,url,telephone,email,password,date picker,number,checkbox,radio,file

    5.其他属性:

    • script:

    defer:加载完脚本后并不执行，而是等整个页面加载完之后再执行
    <script defer src=“URL” ></script>

    async:加载完脚本后立即执行，不用等整个页面加载完，属于异步执行
    <script async src=“URL” ></script>

    • ol

    start:
    可以改变从几开始

    reversed:
    <ol start=“” reversed=“reversed” >倒叙

    • html

    manifest= “cache.manifest”(定义页面离线应用文件）
    <html manifest= “cache.manifest” >
    相当于不受断网的影响

    • style

    scoped;内嵌css
    <style scoped>
    </style>
    可以写在任意位置
    不建议使用

    html5html前端
    Winnie
    12 声望0 粉丝
    « 上一篇
    css position总结
    下一篇 »
    float

    引用和评论

    推荐阅读
    头像
    简单描述一下router－link

    Winnie阅读 2.4k

    头像
    Vue.js-Vue实例

    寒青赞 11阅读 6.7k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 5阅读 4k

    头像
    更强大、更灵活！ defineModel 重新定义双向绑定

    南玖赞 4阅读 4k

    头像
    使用CSS给标题添加书名号并超出省略

    XboxYan赞 3阅读 2.2k

    头像
    Base64编码的“暗坑”：解密失败？可能是这些原因！

    南玖赞 6阅读 3.5k评论 1

    头像
    手写一个动态海洋和天空效果的vue hooks

    夕水赞 4阅读 767

    0 条评论
    得票最新