HTML5基础-新增标签+新增属性+布局案例

最新推荐文章于 2021-06-10 13:24:53 发布

编程世界-云

最新推荐文章于 2021-06-10 13:24:53 发布

阅读量265

点赞数

本文链接：https://blog.csdn.net/weixin_45761317/article/details/103811546

版权

本文介绍了HTML5中的新结构标签，如article、header、nav等，并提供了布局案例。讨论了embed、meter、progress、datalist、details、ruby等元素的使用，以及与前端开发相关的优化技巧，如defer、async属性。同时，提到了兼容性问题和日期时间输入类型的考量。

摘要由CSDN通过智能技术生成

html5中常用的结构标签

article 文章

header 头部

nav 导航

section 区域

aside 侧边栏

hgroup 区块的相关信息

figure 定义一组内容及标题

figcaption 定义figure元素的标题

footer 底部

dialog 对话框

使用习惯：

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

embed可插入flash文件，但flash已经逐渐被淘汰，不建议使用

meter状态标签，可以定义电压

optimum是标准状态

low与high之间呈现绿色，其余呈现黄色

<meter value=”220” min=”20” max=”380” low=”200” high=”240” optimum=”220”></meter>

自动计算百分比


<meter value="0.75">75%</meter>

有步长的进度条

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

不断加载的进度条

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

datalist为input定义下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<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="oppo">oppo</option>
        <option value="htc">htc</option>
    </datalist>
</body>
</html>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

details定义元素的详细内容，配合summary

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <details>
        <summary>HTML5</summary>
        <p>HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。 [1-2] </p>
    </details>
</body>
</html>

ruby和rt进行拼音的注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body> 我们来<ruby>夼<rt>kuang</rt></ruby>一个话题 </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-60awMi2o-1577971509443)(https://upload-images.jianshu.io/upload_images/20062408-448f440fdab0ba1c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

兼容浏览器的写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body> 我们来<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一个话题 </body>
</html>

mark黄色选中效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <p>妈妈叫我回家的时候顺路买一盒<mark>牛奶</mark>，需要很新鲜的那种。</p>
</body>
</html>

output表单计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <form oninput="sum.value=parseInt(num1.value)*parseInt(num2.value)">
        <input type="number" id="num1">* <input type="number" id="num2">= <output name="sum" for="num1 num2"></output>
    </form>
</body>
</html>

date pickers在移动端效果比较好

week兼容性不好

datetime兼容性不好，推荐用datetime-local

time用来设置时间（小时和分钟）；

month用来设置年和月；

date用来设置年月日；

datetime用来设置年月日和时间；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body> email:<input type="email" name="email"><br> url: