HTML5+CSS3 学习笔记1

最新推荐文章于 2024-08-06 18:58:51 发布

Lynx256

最新推荐文章于 2024-08-06 18:58:51 发布

阅读量497

点赞数

分类专栏： HTML5 文章标签： HTML5

HTML5 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

HTML5

概念

而是HTML语言的第五次重大修改——版本
支持所有主流浏览器(IE9以上有选择的支持，但是IE8及以下不支持)
改变了用户与文档的交互性：多媒体：vidio、audio、canvas
增加了其他的特性：语义特性，本地存储特性、网页多媒体、二维三维、特效（过渡、动画）
相对于h4：
- 进步：抛弃了一些不合理不常用的标记和属性。
- 新增了一些标记和属性——表单。
- 从代码角度而言，h5的网页结构代码更简洁。

新增语义标签

标签名	说明
nav	导航
header	页眉
main	文档主要内容
article	文章
aside	主题内容之外
footer	文档或页脚

结构如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
    <header>头部</header>
    <nav>导航</nav>
    <main>
        <article>左边</article>
        <aside>右边</aside>
    </main>
    <footer>底部</footer>
</body>
</html>

关于语义标签的兼容性

IE9:行级元素在设置宽度的时候是失效的（解决方法：设置display:block;）
IE8：完全不支持语义标签（不支持HTML5）–在IE8中，它不认识语义标签，所以无法解析这些标签，也就意味着缩写的样式无效。
解决方法：

手动创建标签；即document.createElement("标签名");–注意:默认的标签都是行级元素。
引入第三放插件html5shiv.min.js，即<script src="../html5shiv.min.js"></script> 在默认情况下，IE8及以下的IE版本不支持HTML5，引入这个文件就能兼容。

表单新增

参考代码：

        电子邮箱：<input type="email"><br>
        电话：<input type="tel"><br>
        网址：<input type="url"><br>
        数量：<input type="number" value="60" max="100" min="0"><br>
    	商品名称：<input type="search"><br>
        范围：<input type="range" max="100" min="0" value="50"><br>
    	颜色：<input type="color"><br>
        时间：<input type="time"><br>
        日期：<input type="date"><br>
        日期时间：<input type="datetime"><br>
        日期时间：<input type="datetime-local"><br>
        月份：<input type="month"><br>
        星期：<input type="week"><br>

新增type属性

邮箱email

格式：<input type="email">
作用：提供了默认电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称；如果不能满足验证，则会阻止当前的数据提交。

电话tel

格式：<input type="tel">
作用：为了能够在移动端打开数字键盘；意味着数字键盘限制了用户只能输入数字。
注意：不具备验证功能。验证功能参考表单新增其他属性。

网址url

格式：<input type="url">
作用：验证只能输入合法的网址：必须包含http://

数量number

格式：<input type="number" value="" max="" min="">
作用：只能输入数字（包含小数点），不能输入其他字符。value设置默认值；max设置最大值；敏设置最小值。

search

格式：<input type="search">
作用：可以提供更人性化的输入体验，在输入后含有清空按钮作用。

范围range

格式：<input type="range" max="" min="" value="50">
作用：设置进度条

颜色color

格式：<input type="color">
作用：颜色拾取器

时间time

格式：<input type="time">
作用：时分秒`

日期date

格式：<input type="date">
作用：年月日

日期时间1 datetime

格式：<input type="datetime">
作用：年月日时分秒

注意：大多数浏览器不能支持，只能Safari支持

日期时间2 datetime-local

格式：<input type="datetime-local">
作用：年月日时分秒

月份month

格式：<input type="month">
作用：月份

星期week

格式：<input type="week">
作用：星期

表单新增其他属性

参考代码：

<form action="" id="myForm">
    	电子邮箱：<input type="email"><br>
        电话：<input type="tel"><br>
        网址：<input type="url"><br>
        数量：<input type="number" value="60" max="100" min="0"><br>
    	商品名称：<input type="search"><br>
        范围：<input type="range" max="100" min="0" value="50"><br>
    	颜色：<input type="color"><br>
        时间：<input type="time"><br>
        日期：<input type="date"><br>
        日期时间：<input type="datetime"><br>
        日期时间：<input type="datetime-local"><br>
        月份：<input type="month"><br>
        星期：<input type="week"><br>
        
        用户名：<input type="text" placeholder="请输入用户名" autofocus autocomplete="on"><br>
        电话：<input type="tel" required pattern="^(\+86)?1\d{10}$"><br>
        文件：<input type="file" name="photo" multiple><br>
        电子邮箱：<input type="email" name="email" multiple><br>
        <input type="submit"><br>
    </form>
    地址：<input type="text" name="address" form="myForm">

placeholder

作用：提示文本，提示占位。

autofocus

作用：自动获取焦点。

autocomplete

取值：on打开、``off`关闭
作用：自动完成。
使用前提：

必须成功提交过
当前元素必须有name属性

required

作用：必须输入；如果没有输入则会阻止当前数据提交。

pattern

作用：添加验证——正则表达式
补充：

*：表示任意个
?：表示0个或1个
+：表示1个或多个

multiple

作用：

可以选择多个文件
可以允许输入多个邮箱地址–以逗号,分隔

form

作用：指定表单id，可以实现将表单外的元素提交到指定表单。

注意：指定表单form需要有id属性值

表单新增元素

参考代码：

<form action="">
        专业：<input type="text" list="subjects"><br>
        <datalist id="subjects">
        	<option value="前端与移动开发" label="前景非常好"></option>
            <option value="java" label="使用人数多"></option>
            <option value="JavaScript" label="做特效"></option>
            <option value="C" label="不知道" />
            <!--注意：option可以是单标签，也可以是双标签-->
        </datalist>

    	用户名：<input type="text" name="userName"><br>
        密码：<input type="text" name="userPwd"><br>
        加密：<keygen></keygen><br>
        <input type="submit">
    </form>
    <output>总金额：￥100.00</output>

datalist

作用：不仅可以输入，还可以进行选择。
使用：给input元素指定list属性的值–为datalist的id属性值

注意：如果input输入框的type类型是url，那么value值必须添加http://

格式：

<input type="" list="指定列表">
<datalist id="指定列表">
    <!--注意：option可以是单标签，也可以是双标签-->
    <option value="选项内容" label="提示文本"></option>
        或
    <option value="选项内容" label="提示文本" />
        ...
</datalist>

keygen

作用：密钥对生成器–生成公钥、私钥。
说明：当提交表单时，会生成两个键，一个是私钥，一个是公钥。私钥存储于客户端，公钥则会被发送到服务器。公钥可用于之后验证用户的客户端证书，即实现非对称加密目前，浏览器支持率极低。
格式：<keygen></keygen>

output

作用：显示输出信息（只能显示不能修改）
说明：

语义性更强
值需要设置，不能自动计算。
格式：<output></output>

新增表单事件

参考代码：

    <form action="">
    	用户名：<input type="text" name="userName" id="userName"><br>
        电话：<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
        <input type="submit">
    </form>
    <script>
    	document.getElementById("userName").function(){
			console.log("oninput:"+this.value);
		}
		document.getElementById("userName").function(){
			console.log("onkeyup:"+this.value);
		}
		document.getElementById("userPhone").oninvalid=function(){
			this.setCustomValidity("请输入合法的11位手机号");
		}
    </script>

oninput 当内容改变时

作用：监听当前指定元素内容的改变（添加、删除内容）。

onkeyup 当键盘弹起时

作用：每一个键弹起都会触发该事件。

oninvalid 当验证不通过时

应用：当验证不通过时，设置默认的提示信息。——调用this.setCustomValidity("")

注意：要存在验证——pattern属性

新增标签——进度条

1. progress

格式：<progress max="" value=""></progress>
属性：
1. max：最大值
2. value：当前进度值

2. meter

作用：度量器，衡量当前进度值（体现出来）。
格式：<meter max="" min="" high="" low="" value=""></meter>
属性：
1. max：最大值
2. min：最小值
3. high：规定的较高的值
4. low：规定的较低的值
5. value：当前度量值
实现效果参考代码：

    <meter max="100" min="0" high="80" low="40" value="30"></meter>
    <meter max="100" min="0" high="80" low="40" value="60"></meter>
    <meter max="100" min="0" high="80" low="40" value="90"></meter>

新增标签——多媒体

audio 音频

格式：<audio src="" controls autoplay loop></audio>
属性：
1. src：音频文件路径；取值路径
2. controls：播放器控制面板
3. autoplay：自动播放
4. loop：循环播放

video 视频

格式：<video src="" controls autoplay loop width="" height="" poster="" ></video>
属性：
1. src：视频文件路径；取值路径
2. controls：播放器控制面板
3. autoplay：自动播放
4. loop：循环播放
5. width：宽度；取值长度单位
6. height：高度；取值长度单位（注意：一般情况下只会设置宽度或高度，自动等比缩放；如果同时设置宽高，那么视频并不会真正调整到设置的宽高，除非设置的值刚好是等比例的。）
7. poster：当视频还没有完全下载或者用户还没有点击播放时默认显示的封面；默认显示当前视频文件的第一幅画面；取值图片的路径

source的设置

说明：不同浏览器支持的视频文件格式不一。在对网页进行添加视频时，需要考虑到浏览器是否支持；可以采用source准备多个格式的视频文件，让浏览器自动选择。
格式例子：

<video>
    	<source src="" type="vidio/flv">
        <source src="" type="vidio/mp4">
        您的浏览器不支持当前的视频播放
    </video>

新增DOM元素

querySelector()

作用：获取单个元素，如果获取的元素不止一个，则返回满足条件的第一个元素。
比较：getElementsByTagName———获取到的是指定标签名称的数组。
格式：document.querySelector("选择器");
说明：
1. query查询 Selector选择器
2. 参数要求：如果是类选择器必须添加.；如果是id选择器，就必须添加#;否则当成标签处理。

querySelectorAll()

作用：获取所有满足条件的元素。
格式：document.querySelectorAll("选择器");

新增类样式操作—— classList

作用：获取当前元素的所有class样式列表 ——数组
比较：className —— 获取/赋值到当前元素的class样式
格式：元素.classList;
例子：document.querySelector("选择器").classList;

add()

作用：为元素添加指定名称的class样式。

一次只能添加一个样式
格式：元素.classList.add(class样式名称);

remove()

作用：为元素移除指定名称的样式(不是移除class属性)。

一次只能让移除一个样式
格式：元素.classList.remove(class样式名称);

toggle()

作用：切换元素的样式——如果元素之前没有指定名称的样式则添加；如果有则移除。
格式：元素.classList.toggle(class样式名称);

contains()

作用：判断元素是否包含指定名称样式；返回bool类型
格式：元素.classList.contains(class样式名称);

自定义属性

应用：通过自定义属性值，获取当前标签。

例子如下：

<p data-school-name="itcast">例子</p>
<script>
	var p=document.querySelector("p");
	var value=p.dataset["schoolName"];
	console.log(value);
</script>

定义

规范：
1. 规范:data-开头，多个单词使用-连接
2. data-后必须至少有一个字符
建议：
1. 名称应该都是用小写，不包含任何大写
2. 名称不要有任何特殊符号
3. 名称不要使用纯数字

取值dataset

格式：var变量=元素.dataset["驼峰命名名称"];
步骤

获取自定义属性值
将date-后的单词使用驼峰命名法连接
使用dataset获取属性值

Lynx256

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录