[HTML5]新标签与特性

最新推荐文章于 2024-07-10 07:15:00 发布

.ByeBye

最新推荐文章于 2024-07-10 07:15:00 发布

阅读量234

点赞数

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

本文链接：https://blog.csdn.net/weixin_43843847/article/details/89457707

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文档类型设定

document
- HTML: sublime 输入 html:4s
- XHTML: sublime 输入 html:xt
- HTML5 sublime 输入 html:5 -> <!DOCTYPE html>

字符设定

<meta http-equiv=“charset” content=“utf-8”>：HTML与XHTML中建议这样去写
<meta charset=“utf-8”>：HTML5的标签中建议这样去写

常用新标签

w3c 手册中文官网 : http://w3school.com.cn/

header：定义文档的页眉
nav：定义导航链接的部分
footer：定义文档或节的页脚
article：标签规定独立的自包含内容
section：定义文档中的节（section、区段）

aside：定义其所处内容之外的内容

<header> 语义 :定义页面的头部  页眉</header>
<nav>  语义 :定义导航栏 </nav> 
<footer> 语义: 定义 页面底部 页脚</footer>
<article> 语义:  定义文章</article>
<section> 语义： 定义区域</section>
<aside> 语义： 定义其所处内容之外的内容 侧边</aside>

datalist 标签定义选项列表。请与 input 元素配合使用该元素

<input type="text" value="输入明星" list="star"/> <!--  input里面用 list -->
<datalist id="star">   <!-- datalist 里面用 id  来实现和 input 链接 -->  
    		<option>刘诗诗</option>
    		<option>赵薇</option>
    		<option>刘晓庆</option>
    		<option>郭富城</option>
    		<option>张学友</option>
    		<option>周杰伦</option>
</datalist>

fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

<fieldset>
    		<legend>用户登录</legend>  标题
    		用户名: <input type="text"><br /><br />
    		密　码: <input type="password">
</fieldset>

常用新属性

属性****	用法****	含义****
placeholder****	`<input type="text" placeholder="请输入用户名">`	占位符提供可描述输入字段预期值的提示信息
autofocus****	`<input type="text" autofocus>`	规定当页面加载时 input 元素应该自动获得焦点
multiple****	`<input type="file" multiple>`	多文件上传
autocomplete****	`<input type="text" autocomplete="off">`	规定表单是否应该启用自动完成功能
required****	`<input type="text" required>`	必填项
accesskey****	`<input type="text" accesskey="s">`	规定激活（使元素获得焦点）元素的快捷键

新增的input type属性值：

类型****	使用示例****	含义****
email****	`<input type="email">`	输入邮箱格式
tel****	`<input type="tel">`	输入手机号码格式
url****	`<input type="url">`	输入url格式
number****	`<input type="number">`	输入数字格式
search****	`<input type="search">`	搜索框（体现语义化）
range****	`<input type="range">`	自由拖动滑块
time****	`<input type="time">`	小时分钟
date****	`<input type="date">`	年月日
datetime****	`<input type="datetime">`	时间
month****	`<input type="month">`	月年
week****	`<input type="week">`	星期年

综合案例

<form action="">
  <fieldset>
    <legend>学生档案</legend>
    <label for="userName">姓名:</label>
    <input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
    <label for="userPhone">手机号码:</label>
    <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
    <label for="email">邮箱地址:</label>
    <input type="email" required name="email" id="email"><br>
    <label for="collage">所属学院:</label>
    <input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
    <datalist id="cList">
      <option value="前端与移动开发学院"></option>
      <option value="java学院"></option>
      <option value="c++学院"></option>
    </datalist><br>
    <label for="score">入学成绩:</label>
    <input type="number" max="100" min="0" value="0" id="score"><br>
    <label for="level">基础水平:</label>
    <meter id="level" max="100" min="0" low="59" high="90"></meter><br>
    <label for="inTime">入学日期:</label>
    <input type="date" id="inTime" name="inTime"><br>
    <label for="leaveTime">毕业日期:</label>
    <input type="date" id="leaveTime" name="leaveTime"><br>
    <input type="submit">
  </fieldset>
</form>

多媒体标签

embed：标签定义嵌入的内容
audio：播放音频
video：播放视频

多媒体 embed（会使用）

embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

因为兼容性问题，我们这里只讲解插入网络视频，后面H5会讲解 audio 和video 视频多媒体。

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

多媒体 audio

HTML5通过标签来解决音频播放的问题。

使用相当简单，如下图所示
在这里插入图片描述
并且可以通过附加属性可以更友好控制音频的播放，如：

autoplay 自动播放

controls 是否显不默认播放控件

loop 循环播放

由于版权等原因，不同的浏览器可支持播放的格式是不一样

在这里插入图片描述
多浏览器支持的方案，如下图

多媒体 video

HTML5通过标签来解决音频播放的问题。

同音频播放一样，使用也相当简单，如下图在这里插入图片描述
同样，通过附加属性可以更友好的控制视频的播放

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度

由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考在这里插入图片描述

多浏览器支持的方案，如下图 在这里插入图片描述

.ByeBye

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[HTML5]新标签与特性

文档类型设定documentHTML:XHTML:HTML5字符设定<meta http-equiv=“charset” content=“utf-8”>：HTML与XHTML中建议这样去写<meta charset=“utf-8”>：HTML5的标签中建议这样去写常用新标签header：定义文档的页眉nav：定义导航链接的部分foot...
复制链接

扫一扫