《HTML5开发手册》学习笔记（一）

最新推荐文章于 2022-04-27 21:14:32 发布

丨小确幸丨

最新推荐文章于 2022-04-27 21:14:32 发布

阅读量727

点赞数

分类专栏：前端 html5+css3 文章标签： html5

本文链接：https://blog.csdn.net/Small_Wchen/article/details/75223419

版权

1. 简单的HTML5初始页面

<!DOCTYPE html>
<!--  文档类型声明，告诉浏览器如何处理文档。 -->
<!--  若不放在第一行或是在其前面添加其他代码，浏览器将进入怪异模式。 -->
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <!--  字符集声明，告诉浏览器如何解释这个文件，比HTML4中的更简洁 -->
    <!--  HTML4版本声明如下  -->
    <!--<meta http-equiv="content-type" content="text/html; charset=utf-8" />-->
    <title>page title</title>
    <script src="my-javascript-file.js"></script>
    <link rel="stylesheet" href="my-css-file.css" />
    <!--  HTML5版本中，link标签和script标签无需再声明type属性  -->
</head>

<body>
<!--  new HTML5 elements are going to go here  -->
</body>
</html>

2. 使用figure和figcaption插入图片和图注

在figure中添加图片，注意添加图片的alt属性。一个figure中可以包含多张图片，但是只能包含一个figcaption。

3. 使用details元素创建可伸缩控件

利用details元素能够在无需任何JavaScript和/或CSS的情况下，创建交互式展开/收缩的开关效果，其中还可以使用summary元素创建内容的概述信息。
details有一个可选属性：open。若真则默认展开，summary元素用于控制内容的展开与收缩。

<article>
    <h1>A massive document with lots of juicy content</h1>
    <details>
        <summary>Table of contents</summary>
        <nav>
            <ul>
                <li><a href=#chapter1>Chapter 1</a></li>
                <li>