html5新增标签
标签名 | 描述 |
---|---|
header | 头部 |
nav | 导航 |
section | 区分大模块 |
aside | 侧边栏 |
article | 文章 |
figure | 图片标记文档中的图像 |
figcaption | 配图说明 |
footer | 底部 |
main | 页面主体 |
canvas | 绘制图形 |
audio | 音频 |
vidio | 视频 |
audio音频属性
- controls:控制面板
- autoplay:自动播放
- loop:循环播放
- muted:静音
- src:音频的路径地址
单个音频时:
<audio src="horse.ogg" controls loop></audio>
多个音频时:
<audio loop controls autoplay >
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/ogg">
<!-- 前提:有着两种版本的音频。当第一种出不来是会显示第二种,如果都不合适就会出现以下文字 -->
您的浏览器不支持audio元素
</audio>
####视频播放
- width:设置视频播放区的宽度
- height:设置视频播放区的高度
- controls:控制面板
- autoplay:自动播放
- loop:循环播放
- muted:静音播放
- src:视频的路径地址
html5表单输入类型
- type="number"用于输入数字,移动端可弹出数字软键盘
- type=“number”
- type="range"滑轮效果
- type="color"用于颜色拾取器
- type="date"选择日期,显示的是年月日
- type="time"选择时间,小时和分钟
- type="week"选择年份和周数
- type="month"选择年份和月份
- type="email"用于包含email地址的输框,验证是否email格式
- type="url"用于包含url地址的输入,如果验证不合格不允许提交
- type="tel"用于输入电话号码,弹出数字软键盘
- type="search"用于搜索框,在移动端可以弹出搜索软键盘
- type="file"用于上传文件
- 下拉框:
<!-- 下拉框 而且可以搜索,IE9以下,苹果不兼容 -->
<input list="course">
<datalist id="course">
<option value="html5">
<option value="html4">
<option value="html3">
<option value="html3">
<option value="html1">
</datalist>
[外链图片转存失败(img-MuqAYgR0-1567153330889)(./1560747901053.png)]
产品形态
- pc端和·移动端公用一套代码,公用一个域名,比如摩拜、苹果官网、华为
- pc端和移动端分开。PC端单独一套,移动端单独一套,比如淘宝,京东
什么时候共用一套代码,什么时候单独一套代码
当页面结果、内容比较简单的时候我们可以共用一套代码,如果页面的内容比较复杂,共用一套代码会写大量的代码用于适配各种的手机屏幕,也不利于维护,会影响页面的加载速度,所以我们此时应该使用两套代码来写移动端和pc端
PC端和移动端的区别
- pc端鼠标相关的事件比如点击、滑过、在移动端没有,移动端有触屏和滑屏事件
- pc端需要兼容ie浏览器,移动端不需要考虑,它基本上都是webkit内核,移动端需要考虑屏幕的适配问题
视口 viewport
- 写移动端页面时。如果我们不写视口,html默认的宽度是980像素,把一个980像素的页面放入一个375像素的容器里,页面会缩小,而且显示不清楚,因此我们写移动端页面时必须加上视口
- name=“viewport”
- width=device-width设置宽度等于设备的宽度
- initial-scale=1.0 代表初始化缩放倍数为1
- maximum-scale=1.0 最大的缩放值
- minimum-scale=1.0 最小的缩放值
- user-scalable 定义是否允许用户手动缩放页面,默认值是yes,如果不允许用户手动缩放可以将值设置为no
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
兼容IE低版:
<meta http-equiv="X-UA-Compatible" content="ie=edge">
meta标签
- charset 文档编码utf-8
- name=“keywords” 关键字” content=“关键字内容”
- name=“description” content=“描述网站的一句话”
<!-- 写关键字,搜索这些字时可以搜索到 -->
<meta name="keywords" content="关键字的内容">
<meta name="description" content="描述网站的一句话">