HTML5笔记

ROSELE写前端

已于 2023-05-06 15:49:58 修改

阅读量772

点赞数

分类专栏： HTML 文章标签： html5 前端

于 2022-11-08 22:57:02 首次发布

本文链接：https://blog.csdn.net/m0_54642787/article/details/127760560

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.HTML5提高

HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签，新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本都是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性

HTML5有更大的技术集，允许更多样化和强大的网站和应用程序。增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性。这个集合有时称为HTML5和朋友，通常缩写为HTML5

1.新增语义化标签

以前布局，我们基本用div 来做。 div 对于搜索引擎来说，是没有语义的。

新增语义化标签如下

标签	描述
<header>	规定文档或节的页眉。
<footer>	定义文档或节的页脚。
<main>	规定文档的主内容。
<section>	定义文档的节。
<article>	定义文档的文章。
<aside>	定义页面的侧边栏内容（侧边栏）
<nav>	定义导航链接。
<mark>	定义重要的或强调的文本。
<figure>	规定自包含内容，比如图示、图表、照片、代码清单等。
<datalist>	包含了一组<option>元素，这些元素表示其它表单控件可选值。
<figcaption>	定义 <figure> 元素的标题。
<details>	定义用户能够查看或隐藏的额外细节。
<summary>	定义 <details> 元素的可见标题。
<dialog>	定义对话框，比如提示框
<progress>	定义任何类型的任务的进度
<time>	定义日期/时间。
<output>	表示计算或用户操作的结果
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置
<ruby>	定义ruby注释（中文注音或字符）。
<rp>	在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容。
<wbr>	规定在文本中的何处适合添加换行符

–注意：

这种语义化标准主要是针对搜索引擎的
这些新标签页面中可以使用多次
在IE9中，需要把这些元素转换为块级元素
其实，移动端更喜欢使用这些标签

<style> 
	header, nav { 
		height: 120px; 
		background-color: pink; 
		border-radius: 15px; 
		width: 800px; 
		margin: 15px auto; 
	} 
	section { 
		width: 500px; 
		height: 300px; 
		background-color: skyblue;
	} 
</style> 
</head> 
<body> 
	<header>头部标签</header> 
	<nav>导航栏标签</nav> 
	<section>某个区域</section> 
</body>

本质上新语义标签与<div>、<span>没有区别，只是其具有语义性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成<div class="nav">相当于<nav>。不要好奇，它只是一个标签！

尽量避免全局使用header、footer、aside等语义标签

2、HTML5 浏览器支持

到了Internet Explorer 9，IE才开始支持HTML5，对于之前的旧版本，我们就需要考虑到兼容性问题。

1、将 HTML5 元素定义为块元素

HTML5 新增了几个具有语义化的标签，这些标签都是块级元素，在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要在初始化的时候将其转换成块元素(block)即可使用。

header, section, footer, aside, nav, main, article, figure {
	display: block; 
}

2、通过 js 动态创建标签

在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了。

<style>
    header,section,nav...{
        display:block;
    }
</style>

<script type="text/javascript">
      document.createElement("header");
      document.createElement("section");
      document.createElement("nav");
                 .
                 .
                 .
</script>

注意：通过document.createElement创建出来的标签时行内元素，所以同样的需要将它们转换成块级元素。

3、Shiv 解决方案

在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载第三方的一个JS库来解决兼容问题，这个库文件会帮自动通过document.createElement('tagName')创建所有HTML5的新标签。针对IE浏览器html5shiv是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式的问题。

引入本地html5shiv.min.js文件：

<!--[if lte IE 8]>
     <script type="text/javascript" src="html5shiv.min.js"></script>
<![endif]-->

lte：表示小于等于；当浏览器版本小于等于IE8的时候，引用html5shiv.min.js文件。

引入远程静态资源库：

<!--[if lte IE 8]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

以上的注释代码只有在IE浏览器下次才会识别里面的内容，其他浏览器直接当注释识别。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兼容性处理</title>
<!--[if lte IE 8]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
 
<body>
 
<h1>我正在处理兼容性</h1>
 
<article>我在IE下也能显示</article>
 
</body>
</html>

注意：html5shiv.js引用代码必须放在<head>元素中，因为IE浏览器在解析HTML5新元素时需要先加载该文件。

2. 表单

2.1、新增input类型

属性值	说明
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type="number"	限制用户输入必须为数字类型
type="tel"	手机号码
type="search"	搜索框
type=“color”	生成一个颜色选择表单

重点记住： number tel search 这三个

<body> 
	<!-- 我们验证的时候必须添加form表单域 --> 
	<form action=""> 
		<ul> 
			<li>邮箱: <input type="email" /></li> 
			<li>网址: <input type="url" /></li> 
			<li>日期: <input type="date" /></li>
			<li>时间: <input type="time" /></li> 
			<li>数量: <input type="number" /></li> 
			<li>手机号码: <input type="tel" /></li> 
			<li>搜索: <input type="search" /></li> 
			<li>颜色: <input type="color" /></li> 
			<!-- 当我们点击提交按钮就可以验证表单了 --> 
			<li><input type="submit" value="提交"></li>
		</ul> 
	</form> 
</body>

2.2、新增表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项，默认已经打开。如autocomplete=“on” ,关闭autocomplete=“off”，需要放在表单内，同时加上name属性，同时成功提交
multiple	multiple	可以多选文件提示
form	id	它的值绑定form标签的id名，可以在form标签外提交改元素的值
list	id	它的值绑定datalist标签的id名，使input获取datalist的列表值

<form action="">
	<input type="search" name="sear" id="" required="required" placeholder="提示" autofocus="autofocus" autocommplete="off"> 
	<input type="submit" value="提交"> 
</form>

可以通过以下设置方式修改placeholder里面的字体颜色

input::placeholder { 
	color: pink; 
}
火狐： input::-moz-placeholder{}
谷歌： input::-webkit-input-placeholder {}

在HTML5中， <form>和<input>标签添加了几个新属性。其中<form>标签的autocomplete、novalidate属性，我们在上面都讲过了，现在我们来看看<input>提供了哪些新的属性。

1、autocomplete 自动完成

autocomplete属性规定form或input域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示：autocomplete属性有可能在form元素中默认是开启的，而在input元素中是关闭的。需要手动添加"on"。

示例代码：

2、placeholder 占位符

placeholder属性提供一种提示（hint），描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。

示例代码：

用户名：<input type="text" placeholder="请输入用户名">

效果图：

3、autofocus 自动获得焦点

autofocus属性是一个boolean属性。autofocus属性规定在页面加载时，域自动地获得焦点。

示例代码：

用户名：<input type="text" name="username" autofocus>

4、multiple 多文件上传

multiple属性是一个boolean属性。multiple属性规定<input>元素中可选择多个值。

示例代码：

<form action="xxx.php"> 
    选择图片: <input type="file" name="img" multiple>
     <input type="submit"> 
</form>

此时上传文件时就可以同时上传多个文件了。

5、form 绑定输入域

当一个输入表单input，不在一个表单域form中的时候。通过form属性和表单域的id可以将输入表单绑定到表单域中。

示例代码：

<form action="xxx.php" id="form1"> 
    用户名: <input type="text" name="username"><br> 
    <input type="submit" value="提交"> 
</form> 
密码: <input type="text" name="pwd" form="form1">

点击提交按钮，表单域外部的“密码”输入框内容也会提交。

6、required 必填项

required属性是一个boolean属性。required属性规定必须在提交之前填写输入域（不能为空）。

示例代码：

用户名: <input type="text" name="usrname" required>

7、pattern 自定义验证

pattern属性描述了自定义一个正则表达式用于验证<input>元素的值。

示例代码：

<form action=""> 
    用户名: <input type="text" name="username" pattern="[A-Za-z]{3}" title="三位英文字母"> 
    <input type="submit"> 
</form>

效果图：

2.3、表单事件

两个表单事件oninput：用户输入的时候触发的事件；oninvalid：表单验证无法通过时候触发的事件

<form action="">
    用户名：<input type="text" name="username" id="user">
    <!-- 限定密码格式只能是数字 -->
    密 码： <input type="text" name="pwd" id="pwd" pattern="\d+">
    <input type="submit">
</form>

<script type="text/javascript">
    var user = document.getElementById('user');
    var pwd = document.getElementById('pwd');
    
    // 用户输入的时候触发
    user.oninput = function(){
        alert(1);
    }
    // 验证无法通过的时候触发
    pwd.oninvalid = function(){
        alert(2);
    }
</script>

当验证无法通过的时候，可以通过setCustomValidity方法添加或修改提示内容：

pwd.oninvalid = function(){
    this.setCustomValidity("密码格式错误"); 
}

3.新增视频标签

2.1 video视频/audio音频

<video src="文件地址" controls="controls"></video> 
<style> 
	video {
		width: 100%;
	}
</style>
</head> 
<body> 
	<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video> 
</body>

处理兼容性

在<audio>与</audio>之间你需要插入浏览器不支持的<audio>元素的提示文本。<audio>元素允许使用多个 <source>元素。<source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

<audio>
    <!-- 通过source标签指定多格式音频文件 -->
    <source src="xxx.ogg" type="audio/ogg">
    <source src="xxx.mp3" type="audio/mpeg">
    <source src="xxx.wav" type="audio/wav">
    您的浏览器不支持 audio 元素。
</audio>

preload

auto(预先加载视频)none(不应加载视频)

规定是否预加载视频(如果有了autoplay 就忽略该属性)

属性	描述
autoplay	资源加载完成后自动播放视频或音频
buffered	返回表示音频/视频已缓冲部分的TimeRanges对象
controls	是否显示控制条
currentSrc	返回当前音频/视频的URL
currentTime	设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted	设置或返回音频/视频默认是否静音
defaultPlaybackRate	设置或返回音频/视频的默认播放速度
duration	返回当前音频/视频的长度（以秒计）
ended	返回音频/视频的播放是否已结束
error	返回表示音频/视频错误状态的MediaError对象
loop	设置或返回音频/视频是否应在结束时重新播放
mediaGroup	设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
muted	设置或返回音频/视频是否静音
networkState	返回音频/视频的当前网络状态
paused	设置或返回音频/视频是否暂停
playbackRate	设置或返回音频/视频播放的速度
played	返回表示音频/视频已播放部分的TimeRanges对象
preload	设置或返回音频/视频是否应该在页面加载后进行加载
readyState	返回音频/视频当前的就绪状态
seekable	返回表示音频/视频可寻址部分的TimeRanges对象
seeking	返回用户是否正在音频/视频中进行查找
src	设置或返回音频/视频元素的当前来源
startDate	返回表示当前时间偏移的Date对象
textTracks	返回表示可用文本轨道的TextTrackList对象
videoTracks	返回表示可用视频轨道的VideoTrackList对象
volume	设置或返回音频/视频的音量

ROSELE写前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5笔记

HTML5 新增了几个具有语义化的标签，这些标签都是块级元素，在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要在初始化的时候将其转换成块元素(block)即可使用。}
复制链接

扫一扫