HTMLCSS学习笔记（二十五）——HTML5基础补充

最新推荐文章于 2024-10-14 21:13:24 发布

粽子师兄

最新推荐文章于 2024-10-14 21:13:24 发布

阅读量185

点赞数

分类专栏： HTML\CSS 文章标签： html5 html css3 css

本文链接：https://blog.csdn.net/qq_45268602/article/details/108063019

版权

HTML\CSS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

HTML5语法

内容类型（ContentType）
- HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm"
DOTYPE声明
- <!DOCTYPE html>不区分大小写
指定字符集编码
- <meta charset="UTF-8">
可省略标记的元素
- 不允许写结束标记的元素：br、col、embed、hr、img、input、link、meta
  - 省略前<hr />省略后<hr>
- 可以省略结束标记的元素： li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
  - 省略前<li><li/>省略后<li>
- 可以省略全部标记的元素：html、head、body、colgroup、tbody

HTML5语义化标签

section元素表示页面中的一个区块
article元素表示一块与上下文无关的独立的内容
aside元素在article之外的，与article内容相关的辅助信息
header元素表示页面中一个内容区块或整个页面的标题
footer元素表示页面中一个内容区块或整个页面的脚注
nav元素表示页面中导航链接部分
figure元素表示一段独立的内容，
使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素表示页面中的主要的内容(ie9以下不兼容)
hgroup标题的一个分组
mark定义高亮显示的文本(span)
time时间
dialog标记定义一个对话框(会话框)类似微信
embed 标记定义外部的可交互的内容或插件比如flash

以上布局可以参考：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        h2{
            font-size: 60px;
            color: #fff;
        }
        nav,li{
            list-style: none;
        }
        header,footer{
            width: 100%;
            height: 150px;
            background: #F47D31;
            text-align: center;
            line-height: 150px;
        }
     
        .box{
            display: flex;
            width: 100%;
            height: 100%;
            justify-content: space-between;
        }
        .box section{
            width: 20%;
            height: 100%;
            background: #888;
        }
        
        .box section:nth-of-type(1) nav{
            display: flex;
            align-items: center;
            flex-direction: column;
        }
        .box section:nth-of-type(1) nav li{
            width: 90%;
            height: 50px;
            color: #F47D31;
            line-height: 50px;
            border-bottom: 2px solid #EEE;
        }
        .box section:nth-of-type(2){
            flex: 1;
            height: 100%;
            background: #888;
            display: flex;
            flex-direction: column;
        }
        .box section:nth-of-type(2) article{
            background: #EEE;
            margin: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .box section:nth-of-type(2) article header{
            background: #F47D31;
            width: 95%;        
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff; 
            margin: 5px 0;
        }
        .box section:nth-of-type(2) article footer{
            background: #F47D31;
            width: 95%;           
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff; 
            margin: 5px 0;
        }
        .box section:nth-of-type(2) aside{
            width: 95%;
        }
        .box section:nth-of-type(2) aside p{
            margin: 10px 0;
        }
        .box section:nth-of-type(3) .des_text{
            width: 90%;
            color: #fff;
            margin-left: 5%;
        }
        .nav_header,.des_header{
            width: 100%;
            height: 70px;
            line-height: 70px;
            color: #fff;
            background: #888;
        }
    </style>
</head>
<body>
    <header>
        <h2>Header</h2>
    </header>
        <section class="box">
            <section>
                <header class="nav_header">Nav</header>
                <nav>
                    <li>link1</li>
                    <li>link2</li>
                    <li>link3</li>
                </nav>
            </section>
            <section>
                <article>
                    <header>Article Header</header>
                    <aside>
                        <p>
                            塞纳河畔 左岸的咖啡 我手一杯 品尝你的美 留下唇印的嘴 
                            花店玫瑰 名字写错谁 告白气球 风吹到对街 微笑在天上飞 
                            你说你有点难追 想让我知难而退 礼物不需挑最贵 只要香榭的落叶 
                        </p>
                        <p>
                            塞纳河畔 左岸的咖啡 我手一杯 品尝你的美 留下唇印的嘴 
                            花店玫瑰 名字写错谁 告白气球 风吹到对街 微笑在天上飞 
                            你说你有点难追 想让我知难而退 礼物不需挑最贵 只要香榭的落叶 
                        </p>
                    </aside>
                   
                    <footer>Article Footer</footer>
                </article>
                <article>
                    <header>Article Header</header>
                    <aside>
                        <p>
                            塞纳河畔 左岸的咖啡 我手一杯 品尝你的美 留下唇印的嘴 
                            花店玫瑰 名字写错谁 告白气球 风吹到对街 微笑在天上飞 
                            你说你有点难追 想让我知难而退 礼物不需挑最贵 只要香榭的落叶 
                        </p>
                        <p>
                            塞纳河畔 左岸的咖啡 我手一杯 品尝你的美 留下唇印的嘴 
                            花店玫瑰 名字写错谁 告白气球 风吹到对街 微笑在天上飞 
                            你说你有点难追 想让我知难而退 礼物不需挑最贵 只要香榭的落叶 
                        </p>
                    </aside>
                    <footer>Article Footer</footer>
                </article>
            </section>
            <section>
                <header class="des_header">aside</header>
                <p class="des_text">
                    <mark>HTML5:</mark>
                    塞纳河畔 左岸的咖啡 我手一杯 品尝你的美 留下唇印的嘴 
                    花店玫瑰 名字写错谁 告白气球 风吹到对街 微笑在天上飞 
                    你说你有点难追 想让我知难而退 礼物不需挑最贵 只要香榭的落叶
                </p>
            </section>
        </section>
    <footer>
        <h2>Footer</h2>
    </footer>
</body>
</html>

HTML5多媒体标签

属性

controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay属性：如果出现该属性，则视频在就绪后马上播放。
loop属性：重复播放属性。
muted属性：静音属性。
poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。

source

标签为媒介元素（比如和）定义媒介资源。
标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

type常见属性值:
用于视频：video/ogg video/mp4 video/webm
用于音频：audio/ogg audio/mpeg

HTML5新增表单控件类型

type=“email” 限制用户必须输入email类型
type=“url” 限制用户必须输入url类型
type=“range” 产生一个滑动条表单
type=“number” 显示一个数字文本输入框
type=“search” 产生一个搜索意义的表单
type=“color” 生成一个颜色选择的表单
type=“time” 限制用户必须输入时间类型
type=“month” 限制用户必须输入月类型
type=“week” 限制用户必须输入周类型
type=“datetime-local” 选取本地时间
type=”date”

HTML5新增表单属性

required 监测是否为空。
min 最小
max 最大
step 步幅确定一个法定值。 -3 0 3 6 9
list 必须结合datalist标签，绑定datalist id名称。
autocomplete 是否自动提示信息属性值 on （默认值） off (关闭提示) 表单元素要必须有name属性
placeholder 文本框的提示信息
autofocus 自动聚焦。一个页面只能由一个。
pattern 后面的属性值是一个正则表达式。
novalidate 取消验证，写在form
multiple 选择（上传）多个

output 表示不同类型的输出，比如脚本的输出

for：定义输出域相关的一个或多个元素。
form：定义输入字段所属的一个或多个表单。
name：定义对象的唯一名称。（表单提交时使用）

<form action="" oninput="c.value=parseInt(a.value)+parseInt(b.value)">
        <input type="number" name="a" id=""> + 
        <input type="number" name="b" id=""> =
        <output name="c" for="a b"></output>
    </form>