html5源码笔记

最新推荐文章于 2024-08-19 16:20:42 发布

Icketang_

最新推荐文章于 2024-08-19 16:20:42 发布

阅读量536

点赞数

分类专栏：爱创课堂专业前端培训文章标签： html html5 web 前端 JavaScript

本文链接：https://blog.csdn.net/Icketang_/article/details/99746541

版权

这篇博客详细介绍了html5的新特性，包括简洁的骨架、语言特性、语义化标签、表单新功能和多媒体标签。同时，还探讨了css3的选择器、属性以及伪元素的应用，如响应式布局、过渡、动画和弹性盒布局。

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

一、html5基本骨架更简单

<!doctype html>

<meta charset="utf-8">

<title>document</title>

二、html5语言特性
单标签可以不使用 / 结束

<img src="./images/0.jpg" alt="">

<input type="text">

html属性值可以不再使用双引号进行包裹

标签名大小写都合法

我是大写的button 我们没有什么不同

所有的type都不用写了

<style>

    button{

        border: solid 4px red;

    }

</style>

<link rel="stylesheet" href="">

布尔型属性，可以不用写布尔值

三、html5中可以用来替换div的语义化新标签

<!-- 头部标签header  可以用来标识页面的头部或者是页面中某个区域的头部 -->

<header class="">header部分</header>



<!-- 导航标签nav 一般用来标识页面中的导航部分 -->

<nav class="">

    <!-- logo部分 -->

    <h1 class="logo"></h1>

    nav部分

</nav>



<!-- banner部分 -->

<div class="banner">banner部分</div>



<!-- 页面中主要内容区域部分section标识 -->

<section class="">

    section部分

    <!-- 设置边栏 aside -->

    <aside></aside>

    <!-- 文章，微博评论等等 artical -->

    <artical>

        <!-- 文章可能会有大标题 和 多个副标题 那么我们会将他们作为一个群组 hgroup -->

        <hgroup>

            <!-- 标题群组部分 -->

        </hgroup>

        <div class="content">

             内容区域

             图文结合

            <!-- 独立的流内容  设置图片 表格 表单等等 -->

            <figure>

                <img src="./images/1.jpg" alt="">

                <figcaption>给独立的流内容添加标题</figcaption>

            </figure>

        </div>

    </artical>

</section>



<!-- 脚部标签footer 可以用来标识页面的脚部或者是页面中某个区域的脚部 -->

<footer>

    <div class="ft-top"></div>

    <div class="ft-copy"></div>

</footer>

四、html5中其它语义化标签的介绍

time 修饰时间

mark 高亮显示

details和summary

标签用于描述文档或文档某个部分的细节。元素包含 details 元素的标题，元素用于描述有关文档或文档片段的更多详情。

<!-- 普通文本 -->

黄河之水天上来

<!-- 高亮显示 -->

<mark>疑是银河落九天</mark>

<!-- details 描述细节    summary类似与总结，details的标题 一般情况下两个配合使用-->

<details>

    <summary>静夜思</summary>

    <p>窗前明月光</p>

    <p>低头思故乡</p>

    <p>举杯邀明月</p>

    <p>对影成三人</p>

</details>

四、html5中的表单新特性
4.1 form与控件的关联在不包含控件的情况下，可以给控件form属性与表单id属性关联
4.2 label标签可以直接包裹控件