【web前端阶段一】HTML巩固学习（持续更新）（下）
三.HTML5
1.html5新增类型
电子邮件类型
功能描述：输入E-mail地址的文本框
语法：input type="email"/>
注意：输入的内容中必须包含"@"，"@"后面必须具有内容
搜索类型
功能描述：输入搜索关键字的文本框
语法：input type="search"/>
URL类型
功能描述：输入WEB站点的文本框
语法：input type="url"/>
注意：输入的内容中必须包含"http://"，后面必须有内容
颜色类型
功能描述：预定义的颜色拾取控件
语法：input type="color"/>
数字类型
功能描述：只能接受数字
语法：
属性：min：当前域能接受的最小值
max：当前域能接受的最大值
step：决定了域所接受值递增或递减的步长，默认为1
日期类型
功能描述：创建一个日期输入域
语法：input type="date" />
周类型
功能描述：与date类型相似，但只能选择周
语法：input type="week" />
月份类型
功能描述：与date类型相似，但只能选择月份
语法：input type="month" />
2.html5新增属性：div标签和span标签
placeholder
作用：默认提示
语法：input type="text" placeholder="请输入用户名"/>
multiple
作用：支持在一个域中输入多个值，逗号隔开，一般配合邮箱和URL使用
语法：input type="email" multiple/>
autofocus
作用：自动获取焦点
语法：input type="text" autofocus/>
required
作用：防止域为空提交表单时
语法：input type="text" required/>
minlength和 maxlength
作用：定制元素允许的最小字符数和最大字符数
语法：input type="text" minlength="6" maxlength="18"/>
min和max
作用：定制元素允许的最小数字和最大数字
语法：input type="number" min=”0” max=”100”/>
3.html5新增结构标签
常见的html5新增语义化标签
- header 页面头部
- footer 页脚
- article 定义页面独立的内容区域
- aside 定义页面的侧边栏内容
- details 文档某个部分的细节
- summary 是details中的标题
- figure 规定独立的流内容
- figcaption 是figure的标题
- mark 标记
- nav 导航链接
- meter 用来表示范围已知且可度量的内容。
- ruby 加注释
HTML5新增的结构标签
header>
.../header>
头部
nav>
.../nav>
导航
section>
.../section>
定义文档中的节。比如章节、页眉、页脚或文档中的其它部分
aside>
.../aside>
侧边栏
footer>
.../footer>
页脚
article>
.../article>
代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等
4.datalist标签
details>
标签用于描述文档或文档某个部分的细节
IE不支持 details>
标签
details>
summary>
details中的标题/summary>
p>
详细的内容/p>
/details>
5.视频和音频
视频
video>
/video>
标签
video>
标签定义视频，比如电影片段或其他视频流
video src="movie.mp4" controls>
您的浏览器不支持 video 标签。
/video>
支持的3种格式：
- mp4
- ogg 移动端
- webM 高清
音频
audio>
/audio>
标签
audio>
标签定义声音，比如音乐或其他音频流
audio src="someaudio.mp3">
您的浏览器不支持 audio 标签。
/audio>
6.embed标签
embed/>
标签
embed>
标签定义嵌入的内容，比如插件，当然也可以用来嵌入声音
embed>
标签必须有 src 属性
embed src="helloworld.mp4" />
7.canvas标签
canvas>
/canvas>
标签
canvas只是个容器，你可以通过控制坐标在canvas上绘制图形。
一般canvas配合js使用能实现非常复杂的动画效果
!DOCTYPE html>
html>
head lang="en">
meta charset="UTF-8">
title>
画布/title>
style type="text/css">
canvas{
background-color: gray;
}
/style>
/head>
body>
!--
canvas标签：
1.canvas必须配合js在网页上绘制图像
2.画布是一个矩形区域，我们可以控制其每一个像素
3.canvas拥有多种绘制路径、矩形、圆形...
颜色的表示方式：
1.直接用颜色名称:"red" "green"
2.十六进制颜色值："#eeeeff"
3.rgb(1-255,1-255,1-255)
属性：
fillStyle 填充绘画的颜色、渐变或模式
strokeStyle 用于笔触的颜色、渐变或模式
shadowColor 用于阴影颜色
shadowOffsetX 水平距离偏移量
shadowOffsetY 垂直距离偏移量
shadowBlur 模糊级别
方法：
getContext():返回一个对象，这个方法封装了很多的绘图方法和属性。
但是现在只能提供2d的绘画环境。
rect():创建矩形。
fillRect():绘制填充的矩形
createLinearGradient()：创建线性渐变
addColorStop(): 渐变对象中颜色和停止位置
-->
canvas id="mycanvas" width="400px" height="400px">
您的浏览器版本太低
/canvas>
script type="text/javascript">
//js代码块
var canvas=document.getElementById("mycanvas");
var obj=canvas.getContext("2d");
// var colorobj= obj.createLinearGradient(0,0,100,0);
var colorobj=obj.createRadialGradient(50,50,10,50,50,50);
colorobj.addColorStop(0,"red");
colorobj.addColorStop(0.5,"blue");
colorobj.addColorStop(1,"green");
//obj.rect(0,0,100,100);
obj.shadowColor="rgb(11,25,9)";
obj.shadowOffsetX=3;
obj.shadowOffsetY=3;
obj.shadowBlur=5;
obj.fillStyle=colorobj;
obj.strokeStyle="green";
obj.fillRect(0,0,100,100);
obj.strokeRect(100,100,100,100);
/script>
/body>
/html>
四.个人小练
1.div布局（1）
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>
布局练习2/title>
style>
.c1{
background: #a8c8df;
height: 150px;
line-height: 75px;
}
.c2{
background: #e6e8f4;
height: 50px;
line-height: 25px;
}
p {
text-align:center;
font-size: 30px;
}
.c3{
background:#1c56a0;
height: 300px;
clear: both;
line-height: 150px;
}
.left,.zhong,.right{
width: 33.333%;
height: 400px;
float: left;
line-height: 400px;
text-align: center;
}
.left{
background: #a8bdda;
}
.zhong{
background: #b5d6e5;
}
.right{
background: #276da8;
}
/style>
/head>
body>
!------------------------------>
div class="c1">
p >
头部/p>
/div>
!------------------------------>
div class="c2" >
p>
导航/p>
/div>
!------------------------------>
div class="left">
p>
左边/p>
/div>
div class="zhong">
p>
中间/p>
/div>
div class="right">
p>
右边/p>
/div>
!------------------------------>
div class="c3">
p>
足部/p>
/div>
!------------------------------>
/body>
/html>
2.div布局 (2)
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>
布局练习3/title>
style>
.c1{
background: #a8c8df;
height: 400px;
line-height: 200px;
}
.c2{
background: #e6e8f4;
height: 200px;
line-height: 100px;
}
.c3,.c4{
height: 200px;
line-height: 100px;
width: 50%;
float: left;
text-align: center;
}
.c3{
background:#1c56a0;
}
.c4{
background: #a8bdda;
}
p{
text-align:center;
font-size: 30px;
}
.t1,.t2{
width: 50%;
float: left;
}
/style>
/head>
body>
div class="t1">
div class="c1">
p>
左/p>
/div>
/div>
div class="t2">
div class="c2">
p>
上/p>
/div>
div class="c3">
p>
左下/p>
/div>
div class="c4">
p>
右下/p>
/div>
/div>
/body>
/html>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 【web前端阶段一】HTML巩固学习（持续更新）（下）
本文地址： https://pptw.com/jishu/309288.html