DAY 10 | 自学前端第十天

pangpangcm

已于 2022-04-26 22:03:23 修改

阅读量105

点赞数 1

分类专栏：前端自学笔记文章标签： html5 css3

于 2022-04-12 10:27:32 首次发布

本文链接：https://blog.csdn.net/weixin_39108774/article/details/124084391

版权

从今天开始，一天都不能断。

今天学HTML5和CSS提高。

目标：

能说出3-5个HTML5新增布局和表单标签；
能够说出CSS3的新增特性有哪些

一、HTML5的新特性

增加了新的标签，新的表单，新的表单属性等。

新特性都有兼容性问题，基本IE9以上版本的浏览器才支持；

1.1 HTML5新增的语义化标签

<header> 头部标签
<nav> 导航标签
<article> 内容标签
<section>定义文档某个区域
<aside>侧边栏标签
<footer>尾部标签

注意：

这种语义化标准主要针对搜索引擎的
这种新标签页面中可以使用多次
在IE9，需要把这些元素转换为块级元素（小米官网）
移动端更喜欢这些标签
HTML5还增加了很多其他标签

 <title>HTML5新增语义化标签</title>
    <style>
        header,
        nav,
        footer {
            height: 120px;
            width: 800px;
            background-color: green;
            border-radius: 15px;
            margin: 15px auto;
        }

        section,
        aside {
            width: 500px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>

<body>
    <header>头部标签</header>
    <nav>导航栏标签</nav>
    <section>某个区域</section>
    <aside>侧边栏</aside>
    <footer>尾部标签</footer>
</body>

1.2 HTML5新增的多媒体标签

音频：<audio> Mp3 WAV Ogg

<audio src="文件地址" controls="controls"></video>

视频： <video> MP4 Ogg WebM，尽量MP4 低版本不支持MP4，比如火狐

<video src="文件地址" controls="controls"></video>

1.3 HTML 5 新增的input类型

type=“email”
type=“url”
type=“data”
type=“time”
type=“month”
type=“week”
type=“number”
type=“tel”
type=“search”
type="color"

  <title>input</title>
</head>

<body>
    <!-- 我们验证的时候必须添加form表单域 -->
    <form action="">
        <ul>
            <li>邮箱：<input type="email"></li>
            <li>网址：<input type="url"></li>
            <li>日期：<input type="date"></li>
            <li>时间：<