学习链接:点我
一、简介
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML5 建立的一些规则:
- 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
- 减少对外部插件的需求(比如 Flash)
- 更优秀的错误处理
- 更多取代脚本的标记
- HTML5 应该独立于设备
- 开发进程应对公众透明
HTML5 中的一些有趣的新特性:
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素,比如 article、footer、header、nav、section
- 新的表单控件,比如 calendar、date、time、email、url、search
浏览器支持:
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
二、html基础
html文档类型
<!DOCTYPE>
声明帮助浏览器正确地显示网页<html>
元素
定义整个 HTML 文档:
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
<head>
元素
<head>
元素是所有头部元素的容器
以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。
<title>
元素
定义文档的标题:
<head>
<title>Title of the document</title>
</head>
<body>
元素
定义 HTML 文档的主体:
<body>
<p>This is my first paragraph.</p>
</body>
块元素
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>, <p>, <div>,<span>,<ul>, <table>
内联元素
内联元素在显示时通常不会以新行开始。
例子:<b>, <td>, <a>, <img>
标题:
<h1>This is a heading</h1>
<hr />
<h2>This is a heading</h2>
<hr />
<h3>This is a heading</h3>
使用水平线 (<hr>
标签) 来分隔文章中的小节
- 段落:
<p>This is a paragraph.</p>
<br/>
<p>This is another paragraph.</p>
<p>
元素定义;<br/>
是没有关闭标签的空元素,定义换行。
- 表格:
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下:
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
- 列表
无序列表:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
浏览器显示如下:
- Coffee
- Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
有序列表:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
浏览器显示如下:
- Coffee
- Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
- 表单:
<form>
元素定义 HTML 表单
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
在浏览器中看起来是这样的:
注释:表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。
More:表单传送门
- 链接:
<a href="http://www.w3school.com.cn" target="_blank">
This is a link</a>
链接的地址在 href 属性中指定;Target 属性可以定义被链接的文档在何处显示
- 图像:
<img src="boat.gif" alt="Big Boat" width="104" height="142" />
- 视频:
<video>
元素
<video width="320" height="240" controls="controls">
<source src="/movie.ogg" type="video/ogg">
<source src="/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video>
元素拥有方法、属性和事件。其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。control 属性供添加播放、暂停和音量控件,也可以包含宽度和高度属性。
- 音频:
<audio>
元素
<audio controls="controls">
<source src="/i/song.ogg" type="audio/ogg">
<source src="/i/song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
- html属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现,比如:name=”value”。
属性总是在 HTML 元素的开始标签中规定。
对齐方式:
<h1 align="center">
居中排列标题
背景颜色:
<body backgroundcolor="yellow">
表格边框:
<table border="1">
style 属性:提供了一种改变所有 HTML 元素的样式的通用方法
<html>
<body style="background-color:yellow">
<h2 style="text-align:center">This is a heading</h2>
<p style="font-family:arial; color:red; font-size:20px;">
This is a paragraph.</p>
</body>
</html>
- 类
对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式,或者为不同的类设置不同的样式。
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
</div>
</body>
</html>
- 脚本
<script>
标签用于定义客户端脚本,比如 JavaScript。
script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出“Hello World!”:
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>
<noscript>
标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。
- 引用
标签 | 描述 |
---|---|
<abbr> | 定义缩写或首字母缩略语 |
<address> | 定义文档作者或拥有者的联系信息 |
<bdo> | 定义文本方向 |
<blockquote> | 定义从其他来源引用的节 |
<dfn> | 定义项目或缩略词的定义 |
<q> | 定义短的行内引用 |
<cite> | 定义著作的标题 |
- HTML 字符实体
我是传送门
三、画布( canvas 元素)
什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<script type="text/javascript">
var c=document.getElementById("myCanvas");//JavaScript 使用 id 来寻找 canvas 元素
var cxt=c.getContext("2d");//然后,创建 context 对象
//绘制一个红色的矩形,fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
实例:把一幅图像放置到画布上
<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");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);
</script>
More:实例传送门