HTML5学习笔记

橘颂_Wendy

已于 2022-08-01 19:16:35 修改

阅读量186

点赞数

分类专栏：前端开发学习笔记文章标签： html5 学习前端

于 2022-07-25 20:46:43 首次发布

本文链接：https://blog.csdn.net/weixin_46121269/article/details/125903008

版权

文章目录

一、HTML5简介
二、meta标签
三、表单属性
四、日期
五、正则表达式
六、语义标签
七、结构标签
八、表单标签
九、多媒体标签

一、HTML5简介

HTML5 是最新的 HTML 标准。

HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。

HTML5 拥有新的语义、图形以及多媒体元素。

HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。

HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

二、meta标签

属性	解释说明
charset	设置编码集
keywords	设置关键字，尽量简洁，明确提高SEO的优先级
description	设置网站简介
author	设置作者
refresh	设置网页几秒钟可以跳转

meta标签中的name属性表示这个mete标签信息名字，content属性表示这个标签信息的内容。

案例：

<html lang="en">
<head>
    <!-- charset 设置网页编码集 -->
    <meta charset="UTF-8">
    <!-- keyword 设置关键字  -->
    <meta name="keyword" content="前端学习网站  HTML  CSS  JavaScript">
    <!-- 设置作者 -->
    <meta name="author" content="张三">
    <!-- 设置网站简介 -->
    <meta name="description" content="这是一个刚刚随便写的网站。">
    <!-- 设置网站几秒后刷新和跳转 -->
    <!-- 如果content里面的值只有一个数字就是几秒后刷新页面  -->
    <meta http-equiv="refresh" content="5">
    <!-- 如果content里面的值是数字跟网址，就代表几秒后跳转到目标网址 -->
    <!-- <meta http-equiv="refresh" content="5;url=http://www.huya.com"> -->
    <meta http-equiv="refresh" content="5;http://www.huya.com">

    <meta http-equiv="refresh"  >
    <title>Document</title>
</head>
<body>
    
</body>
</html>

三、表单属性

属性	解释说明
email	邮箱
url	网址
number	数字
color	颜色
tel	电话
search	搜索框
range	数字滑动条

案例：

<!-- 数字滑动标尺 -->
    <input type="range" min="12" max="100" value="100" id="inp">
    <div style="font-size: 100px;">
        这是演示文字
    </div> 
    <!-- js效果 -->
    <script>
       var inp = document.getElementById("inp");
       var div = document.querySelector("div");
       inp.addEventListener("mousemove",function(){
     
        div.style.fontSize=inp.value+"px";
       })
    </script>

四、日期

属性	解释说明
data	日期: 属性 max【最大时间】min【最小时间】 step【间隔】
week	周
month	月
datetime-local	本地日期时间
time	时分
datetime	日期时间（了解）

五、正则表达式

符号	解释说明
[0-9]	只能匹配0-9的数字
[a-z]	只能匹配a-z的字母
[A-Z]	只能匹配A-Z的字母
{n}	只能匹配n的长度
{n,}	只能匹配n以上的长度
{n,m}	只能匹配n到m的长度
(e)	只能匹配()中的符号
\w	只匹配0-9a-zA-Z【数字字母大写字母】
\W	只匹配非0-9a-zA-Z
\d	只匹配0-9
\D	只匹配非0-9
^	反选。匹配出了这个以外的

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--自动获取焦点-->
<input type="text" autofocus  list="da" placeholder="请输入关键字">
<input type=