学习web前端历程（七）

最新推荐文章于 2022-05-30 07:30:00 发布

l123zmj

最新推荐文章于 2022-05-30 07:30:00 发布

阅读量127

点赞数

文章标签： HEML5新增结构标签 css的引入使用css样式表的方式

本文链接：https://blog.csdn.net/l123zmj/article/details/97781622

版权

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;
    }

l123zmj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
学习web前端历程（七）

HTML的新增结构标签、认识css、使用CSS样式表的方式一、figure标签<figture></figture> 作用：用于对元素组合，多用于图片与图片的描述<figure> <img src="images/guangtouqiang.jpg" alt="图片加载失败" title="光头强图片" width="200px" &...
复制链接

扫一扫