HTML基础教程（二）

于 2018-05-14 21:56:50 发布
阅读量223 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kikyo1/article/details/80309710
版权
1、HTML5实例 ： 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
Content of the document......
</body>

</html>
2、把CSS display 属性设置为block，以确保老式浏览器中正确的行为： 
header, section, footer, aside, nav, main, article, figure {
    display: block; 
}
3、向HTML添加一个名为<myHero>的新元素，并为其定义display样式: 
<!DOCTYPE html>
<html>

<head>
  <title>Creating an HTML Element</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<myHero>My First Hero</myHero>

</body>
</html>

已添加的JavaScript语句document.creatElement("myHero"),仅适用于IE.

4、Internet Explorer 8 以及更早的版本，不允许对未知元素添加样式。幸运的是，Sjoerd Visscher 创造了“HTML5 Enabling JavaScript”,"the shiv"(IE9的早期版本会自动读取并理解它):

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

引用shiv代码的链接必须位于<head>元素中，因为IE需要在读取前认识所有新元素。

5、通过HTML5，图片和标题能够被组合在<figure>元素中： 
<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>
6、<article><section><div>之间的差异
在HTML5标准中，<section>元素被定位为相关元素的块；<article>元素被定义为相关元素的完整的自包含块；<div>元素被定义为子元素的块。

即可以是<section>中的<article>、<article>中的<article>、<article>中的<div>、<article>中的<section>中的<div>。

7、canvas元素用于在网页上绘制图形。

<canvas id="myCanvas" width="200" height="100"></canvas>

canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript使用id来寻找canvas元素：

var c=document.getElementById("myCanvas");
然后创建context对象： 
var cxt=c.getContext("2d");

getContext（“2d”）对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

实例-线条：

JavaScript代码：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

canvas元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

实例— 圆形


<!DOCTYPE HTML>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">

Your browser does not support the canvas element.

<canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

</script>

</body>

</html>

实例- 渐变


JavaScript代码：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>

canvas元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

实例- 图像


JavaScript代码：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

</script>

canvas元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

8、HTML5 内联 SVG

什么是SVG？

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准

SVG 的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大

在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

结果：


9、HTML5 Canvas vs SVG

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较

Canvas

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

10、HTML 多媒体

视频格式：


声音格式：


WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。如果您需要未经压缩的声音（音乐或演讲），那么您应该使用 WAVE 格式。

MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。如果您的网址从事录制音乐，那么 MP3 是一个选项。

11、HTML <object>的作用是支持HTML助手（插件）。

辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 <object> 标签来加载的。

使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。

大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。

使用QuickTime来播放Wave音频

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="bird.wav" />
<param name="controller" value="true" />
</object>

使用QuickTime来播放MP4音频

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4" />
<param name="controller" value="true" />
</object>

使用Flash来播放SWF视频

<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40"></embed>
</object>

使用Windows Media Player 来播放WMV影片

<object width="100%" height="100%"
type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full" />
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100%"
 height="100%" autostart="true" showcontrols="true" 
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>

12、HTML音频


kikyos
关注
html基础教程
07-22
资源名称：html基础教程内容简介：HTML基础-第一讲HTML基础-第二讲HTML基础第三讲---字体HTML基础第四讲---图像HTML基础第五讲---控制表格及其表项的对齐方式HTML基础第六讲---表格HTML基础第七讲---框架HTML基础第...
HTML 5基础教程第二章
03-20
HTML5 是最新的 HTML 标准。 HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。 HTML5 拥有新的语义、图形以及多媒体元素。 HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。 HTML5 是...
HTML基础教程
03-19
### HTML基础教程知识点详解 #### 一、HTML文档的基本结构 HTML文档是一种使用特定标签编写的文本文件，用于描述网页的结构与内容。一个典型的HTML文档由以下几个部分组成： 1. **`<html>`标签**：标志着HTML文档...
HTML基础教程PPT
01-31
HTML基础教程PPT旨在帮助初学者理解并掌握HTML的基本概念、语法结构以及如何构建一个基本的网页。 一、HTML结构与元素 HTML文档由一系列元素组成，每个元素都通过标签来定义。标签分为起始标签（例如`<p>`）和结束...
Amazon S3：S3静态网站托管教程.docx
11-12
Amazon S3：S3静态网站托管教程.docx
基于支持向量机SVM-Adaboost的风电场预测研究附Matlab代码.rar
11-12
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
基于花朵授粉优化算法FPA优化TCN-BiGRU-Attention实现光伏数据回归预测附Matlab代码.rar
11-12
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
【粗糙面】基于matlab一维介质粗糙面双站散射系数计算【含Matlab源码 9130期】.mp4
11-12
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
CPPC++_半透明效果，大多数的win32飞出.zip
11-12
CPPC++_半透明效果，大多数的win32飞出
mondo rescue离线安装及系统恢复并且问题解决参考
11-12
mondo离线包
VID_20241112_234319.mp4
最新发布
11-12
VID_20241112_234319.mp4
【SCI2区】基于凌日优化算法TSOA优化TCN锂电池健康寿命预测算法研究Matlab实现.rar
11-12
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
基于C/C++实现根据人类手写汉字图片-使用机械臂复写汉字+源码+项目文档（毕业设计&课程设计&项目开发）
11-12
基于C/C++实现根据人类手写汉字图片-使用机械臂复写汉字+源码+项目文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档~ 基于C/C++实现根据人类手写汉字图片-使用机械臂复写汉字+源码+项目文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档~ 基于C/C++实现根据人类手写汉字图片-使用机械臂复写汉字+源码+项目文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档~ 项目简介： 实现根据人类手写汉字，使用机械臂复写汉字 项目目的 完成将相机拍摄的人类手写汉字图像； 通过halcon处理为骨架图片； 再将其剪枝、转换为矢量图； 最后使用UR3机械臂抓握笔将其复写出。
mysql5.7 win版本压缩包
11-12
mysql5.7 win版本压缩包
CatBoost使用示例
11-12
CatBoost使用的一个小例子，包含代码和数据。 代码解释的博文为：https://blog.csdn.net/u013172930/article/details/143723670
CPPC++_一个现代C库的集合包括coro_rpc struct_pack struct_json struct_x.zip
11-12
cppc++
CPPC++_基于ImGui和OpenGL的桌面GUI开发框架 很遗憾项目已荒废.zip
11-12
CPPC++_基于ImGui和OpenGL的桌面GUI开发框架 很遗憾项目已荒废
Python小项目之皮卡丘
11-12
Python小项目之皮卡丘
使用springboot搭建的音乐，电影，书栈，视频教程app的后台项目.zip
11-12
使用springboot搭建的音乐，电影，书栈，视频教程app的后台项目，所有数据来自互联网，使用python爬虫抓取，涉及，负载
HTML网页制作基础教程
"这篇教程详细介绍了HTML的基础知识，包括HTML的概念、文档编写方法、网页文件命名规则、HTML文件结构以及HTML元素属性。" 在互联网世界中，HTML（HyperText Markup Language）是创建网页内容的标准语言，它允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值