1.html5+css3 新布局

最新推荐文章于 2024-07-25 08:14:42 发布

sun 马胖

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量103

点赞数

分类专栏： css3 文章标签： css3 html5 css

本文链接：https://blog.csdn.net/m0_66349719/article/details/128472310

版权

css3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一.HTML5 新增属性:

一. 新增语义化标签:

<header>：头部标签:

<nav>：导航标签:

<article>：内容标签:

<section>：定义文档某个区域:

<aside>：侧边栏标签:

<footer>：尾部标签:

布局展示:

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新布局</title>
    <style>
        header,nav{
            height: 120px;
            background-color: pink;
            border-radius: 15px;
            margin: 15px auto;
        }
        section {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <header> 头部标签 </header>
    <nav>导航栏标签</nav>
    <section>某个区域</section>
</body>
</html>

注意:

这种语义化标准主要是针对搜索引擎的
这些新标签页面中可以使用多次
在 IE9 中，需要把这些元素转换为块级元素 (IE已经淘汰了)
其实，我们移动端更喜欢使用这些标签
HTML5 还增加了很多其他标签，我们后面再慢慢学

二. 新增多媒体标签:

音频：<audio>

视频：<video>

1. 视频格式:

当前 <video> 元素支持三种视频格式：尽量使用 mp4格式:

在这里插入图片描述

```html
<video src="文件地址" controls="controls">  <video>
<!--照顾低版本的浏览器写法-->
        <video controls>
        <source src="mov.MP4" type="video/mp4">
        <source src="mov.ogg" type="video/ogg">
           你的浏览器不支持 video 标签.
    </video>
    

```

<video>的属性:

在这里插入图片描述

2. 音频格式:

当前 <audio> 元素支持三种音频格式：

在这里插入图片描述

<audio> 语法:

<audio> </audio>
<!--照顾低版本的写法-->
<video controls="controls" width="300">
    <source src="move.ogg" type="video/ogg" > 
    <source src="move.mp4" type="video/mp4" > 
    您的浏览器暂不支持 
    <video> 标签播放视频 
        
   </ video >

<audio> 可选属性:

在这里插入图片描述

三. 新增语义化表单:

新增表单:

在这里插入图片描述

语法:

    <!-- 我们验证的时候必须用form表单域进行包裹 -->
    <form action="">
        <ul>
         <li><input type="email"></li>
         <li><input type="url"></li>
         <li><input type="date"></li>
         <li><input type="time"></li>
         <li><input type="number"></li>
         <li><input type="tel"></li>
         <li><input type="search"></li>
         <li><input type="color"></li>
         <!-- 当我们点击提交按钮就可以验证表单了 -->
         <li><input type="submit" value="提交"></li>
        </ul>
    </form>

新增表单属性:

在这里插入图片描述

/*可以通过以下设置方式修改placeholder里面的字体颜色：*/
input::placeholder {
color: pink;  /*颜色值*/
}

sun 马胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
1.html5+css3 新布局

1.html5+css3 新布局
复制链接

扫一扫

专栏目录