HTML5学习(一)-CSDN博客

本文链接：https://blog.csdn.net/m0_70791635/article/details/141033883

一、什么是H5C3?

我们在之前学习的html是什么？

网页开发： HTML结构 4.0

CSS 样式 2.0

JS 行为用户交互

那么我们现在学习的H5C3就是他们的升级版

HTML5是html4.0 升级版

结构 Html5 、样式 css3 、行为JS: API 都有所增强

从广义上来讲：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合。

H5范称是 HTML + CSS3 + JS

那么，她和我们之前学习的html有什么区别呢？

我们在上面已经说了它是html的升级版那么肯定会新增很多东西来让我们更加方便的使用

二、语义标签

2.1.语法规范

现在我们在写代码的时候双标签可以省略结束标签了（实际开发中要注意书写规范！不建议！）

<body>
    <div>我是div
        <h1>我是h1
</body>

2.2. 语义标签

语义标签对于我们并不陌生，如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。

先让我们来看一下传统的布局（样式省略）

<body>
    <div class="header"></div>
    <div class="nav"></div>
    <div class="section">
        <div class="aside"></div>
        <div class="articlr"></div>
    </div>
    <div class="footer"></div>
</body>

那么我们再来看一下H5的网页布局


<body>
    <header>头部</header>
    <nav>nav</nav>
    <section>
        <aside>侧边栏</aside>
        <article>文章</article>
    </section>
    <footer>页脚</footer>

</body>

传统的做法我们或许通过增加类名如class="header"、class="footer"，使HTML页面具有语义性，但是不具有通用性。

HTML5则是通过新增语义标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以使其具有通用性。

2.2（1）常用新语义标签

<nav> 表示导航
<header> 表示页眉
<footer> 表示页脚
<section> 表示区块
<article> 表示文章 如文章、评论、帖子、博客
<aside> 表示侧边栏 如文章的侧栏
<figure> 表示媒介内容分组 与 ul > li 做个比较
<mark> 表示标记 (文本有背景颜色,表示标记)
<progress> 表示进度
<time> 表示日期 ( 包裹时间 )

三、表单

3.1输入类型

伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，所以HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。

email 输入email格式
tel 手机号码   
url 只能输入url格式
number 只能输入数字
search 搜索框 
range 范围 滑动条 
color 拾色器 
time    时间 
date 日期 不是绝对的
datetime-local 时间日期
month 月份 
week 星期

我们想使用这些新的表单类型只需要把它写在type类型里就可以使用了

3.2表单元素

3.2（1）智能表单（输入指定文本提供备选）

数据列表与input 配合使用

    <input type="text" list="aaa">
    <datalist id="aaa">
        <option>basdkj1</option>
        <option>basdkj1</option>
        <option>basdkj1</option>
        <option>basdkj1</option>
        <option>basdkj1</option>
    </datalist>

3.2（2）进度条

 <!-- 进度条 -->
 <progress max="100" value="20"></progress>

进度条里面有两个参数

max表示完成的值 value表示进程的当前值

3.2（3）度量器（不建议用作进度条）

   <!-- 度量器 -->
   <meter value="50" min="0" max="100" low="60" high="80"></meter>

max和min规定范围的最大最小值

high和low规定被视为高和低的值的范围

value规定度量的当前值（必须要有！）

3.3 表单属性

placeholder 占位符
autofocus 获取焦点 (打开页面焦点自动锁定在当前目标)
multiple 文件上传多选或多个邮箱地址  
autocomplete 自动完成，用于表单元素，也可用于表单自身(on/off)
        需要放在表单内，同时加上name属性，同时成功提交，

        默认是autocomplete="on" 关闭autocomplete="off"

        (记录上次输入的信息,e-mail默认不会记录)

form 指定表单项属于哪个form，处理复杂表单时会需要

novalidate 关闭验证，可用于<form>标签 (写在form,不会对表单进行验证)

required 必填项 (不填写无法提交表单)

pattern 正则表达式 验证表单

手机号:<input type="tel" name="tel" required="required" pattern="^(\+86)?1[3,5,8](\d{9})$"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- novalidate   关闭验证 需要写在forml里 -->
    <form action="" novalidate id="aaa">
        <!-- placeholder   占位符 -->
        <!-- autofocus   自动获取焦点 -->
        <!-- autocomplete="off"   阻止搜索记忆(上次输入的信息)    默认开启 -->
        用户名:<input type="text" name="username" placeholder="请输入用户名" autofocus autocomplete="off">

        <br>
        <!-- pattern=""  正则验证 -->
        手机号: <input type="tel" pattern="正则验证" name="" id="">
        <br> 邮箱: <input type="email" name="" id="">
        <input type="submit" name="" id="">
        <!-- multiple   文件多选 -->
        <input type="file" multiple>
    </form>
    <!-- form作为属性 指定表单 -->
    <input type="text" form="aaa">
    <input type="text" placeholder="lalala" autofocus>
    <input type="file" multiple>
</body>

</html>

3.4表单事件

oninput 用户输入内容时触发，可用于移动端输入字数统计(js直接调用)

oninvalid 验证不通过时触发(js直接调用)

<body>
    <form action="">
        <input type="text" name="" id="inp1">
        <input type="email" name="" id="inp2">
        <input type="submit" name="" id="">
    </form>
    <script>
        var inp1 = document.getElementById('inp1')
        var inp2 = document.getElementById('inp2')
        var num = 0
        // oninput    用户输入内容时触发   可以用于计算输入字符
        inp1.oninput = function () {
            num++
            inp1.value = num
            console.log(num);
        }
        // oninvalid 验证不通过时触发 js调用
        inp2.oninvalid = function () {
            // setCustomValidity("")  修改提示语   自定义提示信息
            this.setCustomValidity('请输入正确的')
            console.log(1)
        }
    </script>
</body>