编程笔记

编程笔记

二、HTML5
2025-01-29

一、HTML5简介

        1、什么是HTML5

        HTML5 是新一代的 HTML 标准,2014年10月由万维网联盟(W3C)完成标准制定。
        官网地址:
                W3C 提供: https://www.w3.org/TR/html/index.html
                
WHATWG 提供:https://whatwg-cn.github.io/html/multipage

        HTML5在侠义上是指新一代的HTML标准,在广义上是指:整个前端

        2、HTML5 优势

        1、针对JavaScript,新增了很多可操作的接口。
        2、新增了一些语义化标签、全局属性
        3、新增了多媒体标签,可以很好的替代 flash。
        4、更加侧重语义化,对于SEO 更友好。
        5、可移植性好,可以大量应用在移动设备上。

        3、HTML5兼容性

        支持:Chrome、Safari、Opera、Firefox 等主流浏览器。
        IE浏览器必须是9及以上版本才支持HTML5,IE9仅支持部分HTML5新特性。

        

二、新增语义化标签

        1、新增布局标签
标签名语义单/双标签
header整个页面,或部分区域的头部
footer整个页面,或部分区域的底部
nav导航
article文章、帖子、杂志、新闻、博客、评论等。
section页面中的某段文字,或者文章中的某段文字(里面文字通常里面会包含标题)
aside侧边栏
main文档的主要内容(WHATWG没有语义,IE不支持),几乎不用
hgroup包裹连续的标题,如文章主标题、如文章主标题、副标题的组合(W3C将其删除)

         上面的标签其实没有什么实际的效果,可以理解为有了语义的div。

        关于 article 和 section :

  1、artical 里面可以有多个section。
  2、section 强调的是分段或分块,如果你想将一块内容分成几段的时候,可使用section元素。
  3、article 比 section 更强调独立性,一块内容如果比较独立、比较完整,应该使用 article 元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>尚品</h1>
    </header>
    <hr>
    <!-- 主导航区 -->
    <nav>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
    </nav>
    <!-- 主要内容 -->
     <div class="page-content">
                 <!-- 侧边栏导航 -->
                 <aside style="float: right;">
                    <nav>
                        <ul>
                            <li><a href="#">秒杀专区</a></li>
                            <li><a href="#">会员专区</a></li>
                            <li><a href="#">领取优惠卷专区</a></li>
                            <li><a href="#">品牌专区</a></li>
                        </ul>
                    </nav>
                  </aside>
        <!-- 文章 -->
         <article>
            <h2>《如何一夜暴富》</h2>
            <section>
                <h3>第一种方式:通过做梦</h3>
                <p>你要这么做梦:XXXXXXXXXXXXX</p>
            </section>
            <section>
                <h3>第二种方式:通过彩票</h3>
                <p>你要这么买彩票:XXXXXXXXXXXXX</p>
            </section>
         </article>
         <hr>
         <!-- 页脚 -->
          <footer>
            <nav>
                <a href="#">友情链接1</a>
                <a href="#">友情链接2</a>
                <a href="#">友情链接3</a>
            </nav>
          </footer>
     </div>
</body>
</html>

        2、新增状态标签
        2.1 meter 标签

        语义:定义已知范围内的标量测量。也被称为 gauge 尺度,双标签,例如:电量、磁盘用量等。
        常用属性如下:

属性描述
high数值规定高值
low数值规定低值
max数值规定最大值
min数值规定最小值
optimum数值规定最优值
value数值规定当前值
        2.2 progress标签

        语义:显示某个任务完成得进度的指示器,一般用于标识进度条,双标签,例如:工作完成进度等。
        常用属性如下:

属性描述
max数值规定目标值
value数值规定当前值
    <span>手机电量</span>
    <meter max="100" min="0" value="10" low="20" high="80" optimum="90"></meter><br>
    <span>当前进度:</span>
    <progress max="100" value="20"></progress>

                                        

        3、新增列表标签
标签名语义单\双 标签
datalist用于搜索框的关键字提示
details用于展示问题和答案,或对专有名词进行解释
summary写在 details 的里面,用于指定问题或专有名词

    <form action="#">

        <input type="text" list="mydata">

        <button>搜素</button>

    </form>

<input type = "text" list = "mydata" >
        <datalist id = "mydata" >
        <option value = " 周冬雨 " > 周冬雨 </option>
        <option value = " 周杰伦 " > 周杰伦 </option>
        <option value = " 温兆伦 " > 温兆伦 </option>
        <option value = " 马冬梅 " > 马冬梅 </option>

</datalist>

<details>
        <summary> 如何走上人生巅峰? </summary>
        <p> 一步一步走呗 </p>
</details>
        4、新增文本标签 
        4.1 文本注音
标签语义单\双 标签
ruby包裹需要注音的文字
rt写注音,rt标签写在ruby的里面

<ruby>

        <span> 魑魅魍魉 </span>
        <rt> chī mèi w ǎ ng li ǎ ng </rt>
</ruby>

可以找一下在线的网站,将汉字转成拼音先
        4.2 文本标记
标签名语义单\双 标签
mark标记

        注意:W3C 建议 mark 用于标记搜索结果中的关键字。 

    <p> Lorem ipsum <mark>dolor</mark>, sit amet consectetur adipisicing elit. Praesentium </p>

三、新增表单功能

        1、表单控件新增属性
属性名功能
placeholder提示文字(注意:不是默认值,value是默认值),适用于文字输入类的表单控件。
required表示该输入项必填,适用于 除按钮外 其他表单控件。
autofocus自动获取焦点,适用于所有表单控件。
autocomplete

自动完成,可以设置为 on 或 off ,适用于文字输入类的表单控件。

注意:密码输入框、多行输入框不可用。

pattern填写正则表达式,适用于文本输入类表单控件,
注意:多行输入不可用,且空的输入框不会验证,往往于required 配合。

    <form action="">

        账号:<input type="text" name="account" placeholder="请输入账号" required  autofocus  autocomplete="on" pattern="正则表达式"><br>

        密码:<input type="password" name="pwd" placeholder="请输入密码" required ><br>

        性别:

            <input type="radio" value="male" name="gender" required>男

            <input type="radio" value="female" name="gender">女

        <br>

        爱好:

        <input type="checkbox" value="smoke" name="hobby">抽烟

        <input type="checkbox" value="drink" name="hobby" required>喝酒

        <input type="checkbox" value="perm" name="hobby">烫头

        <br>

        其他:<textarea name="other" placeholder="请输入内容"></textarea><br>

        <button>提交</button>

    </form>

placeholder 效果:输入框中有提示字


required 效果,必填项,必选项:



需要注意的是:放在任意单选项上效果是一样的,只选一个就可以,但是如果放在多选项上,那就必须得选被放在得那个元素上。

autofocus:自动获取焦点,就是进入该页面,会自动选中该属性,一般放在第一个元素上。


autocomplete:可以自动联想出最近输入得内容,但是要打开浏览器得设置,且只能用在单行输入框中,密码输入框不行。
 

pattern:正则表达式,可以根据该表达式验证输入内容。空的时候不校验,一般与required 配合

        2、input 新增属性值
属性名功能
email邮箱类型的输入框,表单提交时会验证格式,输入为空则不验证格式。
urlurl 类型的输入框,表单提交时会验证格式,输入为空则不验证格式。
number数字类型的输入框,表单提交时会验证格式,输入为空则不验证格式。
search搜索类型的输入框,表单提交时不会验证格式。
tel电话类型的输入框,表单提交时不会验证格式,在移动端使用时,会唤起数字键盘。
range范围选择框,默认值为50,表单提交时不会验证格式。
color颜色选择框,默认值为黑色,扁担提交时不会验证格式。
date日期选择框,默认值为空,表单提交时不会验证格式。
month月份选择框,默认值为空,表单提交时不会验证格式。
week周选择框,默认值为空,表单提交时不会验证格式
time时间选择框,默认值为空,表单提交时不会验证格式
datetime-local日期+时间 选择框,默认值为空,表单提交时不会验证格式。

       1、email : <input type="email" name="email">  
        

        
        2、url:<input type="url" name="url">
          

   3、number:<input type="number" name="number" step="2" max="80" min="20">
                <!-- max最大值 min最小值 step 每次增加得步数 -->
        

    4、search : 
        搜索:<input type="search " name="keyword">

        没什么特殊功能,重在语义。
 

    5、tel: <input type="tel" name="tel">
        没有校验功能,但是在手机端能够唤起键盘输入。


    6、range:<input type="range" name="range" max="80" min="20" value="50">
        


    7、color:<input type="color" name="color">


    8、date:<input type="date" name="date">


   9、month:<input type="month" name="month">


   10、week:<input type="week" name="week">


     11、time:<input type="time" name="time">


   12、datetime-local:<input type="datetime-local" name="datetime">

        3、form标签新增属性
属性名功能
novalidate如果给form标签设置了该属性,表单提交的时候不用再进行验证。

        

四、新增多媒体标签

        1、视频标签

        <video> 标签用来定义视频,它是双标签。

属性描述
src

URL地址

视频地址
width像素值设置视频播放器得宽度
height像素值设置视频播放器得高度
controls-向用户显示视频控件(比如播放、暂停按钮)
muted-视频静音
autoplay-视频自动播放(必须设置静音才能自动播放)
loop-循环播放
posterURL地址视频封面
preloadauto / metadata / none视频预加载,如果使用 autoplay ,则忽略该属性。
none:不预加载视频
metadata:仅预先获取视频得元数据(例如长度)。
auto:可以下载整个视频文件,即使用户不希望使用它。
    <video src="./小电影.mp4" width="600" controls muted  loop poster="./封面.png" preload="auto"></video>
        2、音频标签

        <audio> 标签用来定义音频,它是双标签。

属性描述
src

URL地址

音频地址
controls-

向用户显示音频控件(比如播放/暂定按钮)

autoplay-音频自动播放
muted-音频经营
loop-循环播放
preloadauto / metadata / none音频预加载,如果使用 autoplay ,则忽略该属性。
none:不预加载音频。
metadata:仅预先获取音频得元数据(例如长度)。
auto:可以下载整个音频文件,即使用户不希望使用它。
    <audio src="./小曲.mp3" controls  autoplay loop preload="auto"></audio>

        五、新增全局属性(了解)

属性名功能
contenteditable表示元素是否可被用户编辑,可选值如下:
true:可编辑
false:不可编辑
draggable

表示元素可以被拖动,可选值如下:

true:可拖动
false:不可拖动

hidden隐藏元素
spellcheck规定是否对元素进行拼写和语法检查,可选值如下:
true:检查
false:不检查
contextmenu规定元素得上下文菜单,在用户鼠标右键点击元素时显示。
data-*用于存储页面得私有定制数据

六、HTML5兼容性处理

        添加元信息,让浏览器处于最优渲染模式。

<!-- 设置 IE 总是使用最新的文档模式进行渲染 -->
<meta http-equiv = "X-UA-Compatible" content = "IE=Edge" >
 
<!-- 优先使用 webkit ( Chromium ) 内核进行渲染 , 针对 360 等壳浏览器 -->
<meta name = "renderer" content = "webkit" > 

        使用 html5shiv 让低版本浏览器认识 H5语义化标签。

<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->

        扩展

 lt 小于

lte 小于等于
gt 大于
gte 大于等于
! 逻辑非

        示例:

 <!--[if IE 8]>仅IE8可见<![endif]-->

<!--[if gt IE 8]> IE8 以上可见 <![endif]—>
<!--[if lt IE 8]> IE8 以下可见 <![endif]—>
<!--[if gte IE 8]>IE8 及以上可见 <![endif]—>
<!--[if lte IE 8]>IE8 及以下可见 <![endif]—>
<!--[if !IE 8]> IE8 IE 可见 <![endif]-->