HTML的新增结构标签、认识css、使用CSS样式表的方式
一、
figure标签
<figture></figture>
作用:用于对元素组合,多用于图片与图片的描述
<figure>
<img src="images/guangtouqiang.jpg" alt="图片加载失败" title="光头强图片" width="200px" >
<figcaption>光头强系列</figcaption>
</figure>
details标签
<details></details>
作用:用于描述文档或文档某个部分的细节(文章,其可收缩文章)
用法:
<details>
<sammary>新闻</sammary>
</details>
mark标签
<mark></mark>
作用:定义有记号的文本,它会给你要突出显示的文本下加一个背景色
你是<mark>大长腿</mark>吗?
meter标签
<meter></meter>
作用:度量衡,仅用于已知最大值和最小值度量(手机电量的显示)
属性值:
min 最小值
max 最大值
value 初始值
low 最低临界点(会有不同的展示)
high 最高临界点
<meter value="60" min="0" max="100" low="20" high="100"></meter><br/>
progress标签
<progress ></progress>
作用:进行中的进度(进程)
属性:
max 定义完成值
value 定义当前值
<progress value="60" max="100" ></progress>
datalist标签
<datalist ></datalist>
作用:选项列表,与input元素配合使用,来定义input的值(一般不显示)
如果想要显示的话,就可以使用input元素的list属性来绑定details
<input type="text" list="start">
<datalist id="start">
<option>李小璐</option>
<option>李易峰</option>
<option>李荣浩</option>
<option>蔡依林</option>
<option>易烊千玺</option>
<option>李现</option>
<option>杨紫</option>
</datalist>
video标签
<video ></video>
作用:定义视频,如电影片段或其他的视频流
属性:
src 必须属性
autoplay 播放视频(控件)
controls 播放按钮
loop 循环播放
muted 被静音
URL 点击播放按钮前显示的图像
url 要播放的视频的URL
注意:
video的视频格式有3种
mp4
ogg(移动端)
webm(高清)
<video src=" " ></video>
audio标签
<audio></audio>
作用:定义声音,音乐流或音频流
属性:
src 必须属性
autoplay 播放音频(控件)
controls 播放按钮
loop 循环播放
muted 被静音
url 要播放的音频的URL
注意:
audio支持的三种格式
ogg
mp3
wav
注意:loop 属性值 正数(代表播放次数) 负数或者不加任何属性值(代表无限播放)
<audio src="images/1.mp3" controls autoplay muted loop></audio>
<source/> 单标签 为媒介元素(用于转换格式)
<video><audio> 为媒介资源
<audio controls >
<source src="images/1.mp3"/>//转换格式
<source src="images/1.ogg"/>
您的浏览器不支持音频播放
</audio>
embed标签
<embed src=" "></embed>
作用:定义嵌入的内容,比如插件,也可以用来嵌入声音
必须有src属性
<embed src="1.mp4"></embed>
canvas标签(实用)
<canvas></canvas>
作用:其是 一个容器,可以通过控制坐标在canvas上绘制图像,一般配合js使用,能实现复杂的动画效果 (其本身没有绘画功能,就是提供了一个画布)
注意:
1.canvas 必须配合js在网页上绘制图像
2.画布是一个矩形区域,可以控制每一个像素
3.canvas拥有多种绘制路径、矩形、圆形…
颜色的表示方式:
1.直接用颜色名称:“red” “green”
2.十六进制颜色值:"#eeeeff"
3.rge(1-255,1-255,1-255)
属性:
fillStyle 填充绘画的颜色、渐变或模式
strokeStyle 用于笔触的颜色、渐变或模式
shadowColor 用于阴影的颜色
shadowOffsetX 水平距离偏移量
shadowOffsetY 垂直距离偏移量
shadowBlur
createLinearGradient 矩形
createRadialGradient 圆形
方法:
getcontext();返回一个对象,这个方法封装了很多的绘图方法和属性,但是现在只提供了"2d"的绘图环境
rect:创建矩形
fillrect:绘制填充矩形
<style type="text/css">
canvas{
background-color:gray;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="400px" height="400px">
您的浏览器版本太低
</canvas>
<script type="text/javascript">
//代码块
var canvas=document.getElementById("mycanvas");
var obj=canvas.getContext("2d");
//obj.rect(0,0,100,100);
//阴影:
obj.shadowColor="rgb(11,25,9)";
obj.shadowOffsetX=3;
obj.shadowOffsetY=3;
obj.shadowBlur=3;
//渐变:
//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.fillStyle=colorobj;
//obj.fillStyle="red";
obj.strokeStyle="green";
obj.fillRect(0,0,100,100);
obj.strokeRect(100,100,100,100);
</script>
矩形式渐变
圆形式渐变:
二、认识css
css(caslading style sheets)层叠样式表(级联样式表)
1.用于HTML文档中元素样式的定义
实现了将内容与表现分离
提高了代码的可重用性和可维护性
2.文件的后缀是.css
css和html之间的关系:
1.HTML用于构建网页的结构
2.CSS用于构建HTML元素的样式
3.HTML是页面的内容的构成,CSS是页面的表现
HTML 页面结构(结构层)
CSS 页面美容(动画效果) 样式(表示层)
JavaScript(行为层)
三、使用CSS样式表的方式(样式表的引入)
1.内联方式(行内样式)简单时使用
直接把css代码用style属性添加到开始标签中
例如:
<p style="color: red;font-size: 50px">我要努力学好前端</p>
2.内部样式表(属性多时使用)
直接把css代码添加到头部的style标签中
例如:
<head>
<style>
p{
color: black;
font-size: 50px;
}
</style>
</head>
3.外部样式表(当css多时使用)
要先在建立一个后缀为css的文件描述属性
stylesheet:样式调用
例子:
<link rel="stylesheet" href="css.css"/>
4.导入式样式表
<head>
<style>
@import url(css.css);;
</style>
</head>
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的引入方式</title>
<!-- <style>
p{
color: black;
font-size: 50px;
}
</style>-->
<style>
@import url(css.css);;
</style>
</head>
<body>
<!--<p style="color: red;font-size: 50px">我要努力学好前端</p>-->
<p>我要努力学好前端</p>
<!--<link rel="stylesheet" href="css.css"/>-->
</body>
</html>
css.css文件:
p{
color: black;
font-size: 50px;
}