目录
HTML5新特性
前言
本系列博客是对入门专栏的HTML知识的补充,并伴随一些补充案例。
这一期主要介绍HTML5在HTML基础上新增的一些内容。
不是专业的科普博主,文笔不好,多多包涵(嘿嘿)。
准备工作
软件:【参考版本】Visual Studio Code
插件(扩展包):Open in browser, Live Preview, Live Server
浏览器版本:Chrome
系统版本: Win10/11/其他非Windows版本
*我的电脑是Win10的版本,仅供参考*
语义化标签
概念
HTML5新增的语义化标签,实质上就是使用合理、正确的标签来展示内容。
有利于搜索引擎优化(SEO),爬虫会依据不同的标签赋予相应的权重。
新内容
新增的语义化标签如下:
<!-- 主题标签 -->
<main></main>
<!-- 头部标签 -->
<header></header>
<!-- 导航栏 -->
<nav></nav>
<!-- 侧边栏 -->
<aside></aside>
<!-- 内容 -->
<article></article>
<!-- 块标签(相当于div) -->
<section></section>
<!-- 底部 -->
<footer></footer>
案例
一个典型的移动端网页布局如下:
<header></header>
<nav></nav>
<main>
<aside></aside>
<article></article>
</main>
<footer></footer>
这里在布局时有一个技巧 ,如果需要左右布局宽度占满整个窗口,比如aside和article,则只需要给aside设置宽度,然后为section的CSS样式设置flex:1即可(不要忘记让article的布局方式设置为弹性盒模型)。
而article的高度则由calc(100vh - 其他区域的高度)来决定。
多媒体标签
HTML5新增了多媒体标签,分别为音频标签audio和视频标签video。
音频标签audio
audio常见的属性和对应的含义如下:
属性 | 含义 |
---|---|
src | 需要使用的音频文件的地址 |
controls | 多媒体元素的控制组件 |
autoplay | 自动播放音频(需要配合其他属性使用) |
loop | 循环播放多媒体文件 |
视频标签 video
video常见的属性和对应的含义如下:
其中,preload属性的值如下:
属性值 | 作用 |
---|---|
auto | 一边加载一边播放 |
metadata | 加载完之后再播放 |
none | 页面加载完之后不加载视频 |
新增部分input表单属性
HTML5新增了一些表单的属性,常见的有以下5种:
属性 | 含义 |
---|---|
required |
表单的内容是必填项 , 不能为空 |
placeholder |
表单的提示信息 |
multiple |
表单的提示信息 |
autofocus |
进入表单界面时,自动聚焦至该元素 |
autocomplete |
属性值为 off / on , 浏览器会记录之前输入的值,默认值是 on , 自动补全默认是打开的 ; 使用自动补全 , 需要满足以下两个条件 :为表单添加 name 属性,自动补全的内容需要之前提交成功过 |
预告和回顾
对网页布局和制作感兴趣的朋友,可以看下面的HTML进阶专栏,里面有很多讲解详尽的案例,当前为第二期:
专栏 | HTML进阶https://blog.csdn.net/zc13786305863/category_12779892.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12779892&sharerefer=PC&sharesource=ZC13786305863&sharefrom=from_link
当然,也欢迎对全栈项目感兴趣的朋友查看我的其他专栏。
后话
在全栈领域,博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历,然后把自己领悟到的一些东西总结一下,分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的,一些定义性的文字加入了笔者自己的很多理解在里面,所以仅供参考。如果有说的不对的地方,还请谅解。
==期待与你在下一期博客中再次相遇==
——浓度骤降的【H2O2】