HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
HTML元素
<html> 定义 HTML 文档。
<head> 定义关于文档的信息。
<title> 定义文档的标题。
<body> 定义文档的主体。
<h1> to <h6> 定义 HTML 标题。
<p> 定义段落。
<button> 定义按钮。
<label> 定义 input 元素的标注。
<input> 定义输入控件。
<img> 定义图像。
<canvas> 定义图形。
<svg> 定义 SVG 图形的容器。
<video> 定义视频。
<a> 定义锚。
<style> 定义文档的样式信息。
<script> 定义客户端脚本。HTML 属性
属性总是以名称/值对的形式出现，比如：name="value"。
id :规定元素的唯一 id。
style：规定元素的行内 CSS 样式。
lang:规定元素内容的语言。
事件属性
onload script 页面结束加载之后触发。
onerror script 在错误发生时运行的脚本
onclick script 元素上发生鼠标点击时触发。
HTML 文本格式化
HTML 可定义很多供格式化输出的元素，比如粗体和斜体字
定义粗体文本。 |
<b>This text is bold</b>
HTML 注释标签
注释标签 <!-- 与 --> 用于在 HTML 插入注释。
画布:动态绘制图形
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="40px Arial";
ctx.fillText("Hello World",10,50);
</script>
</body>
</html>音频或视频
HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件
字符集
HTML5 中的默认字符集为 UTF-8
HTML 文档类型
所有 HTML 文档必须以 <!DOCTYPE> 声明开头。
该声明并非一个 HTML 标签。它是一条“信息”，告知浏览器期望的文档类型。
在 HTML5 中，<!DOCTYPE> 声明非常简单：
<!DOCTYPE html>
HTML URL
URL - 统一资源定位器（Uniform Resource Locator）
Web 浏览器使用 URL 从 Web 服务器请求页面。
URL 是网页的地址，比如：https://www.w3school.com.cn。
Scheme | 访问 | 用于... |
http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
https | 安全超文本传输协议 | 安全网页。加密所有信息交换。 |
ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
file | 您计算机上的文件。 |
HTML 语言代码
HTML 的 lang 属性可用于网页或部分网页的语言
<html lang="en">
...
</html>
HTML ISO 国家/地区代码
在 HTML 中，国家/地区代码可以用作 lang 属性中语言代码的补充
<html lang="zh-CN">
...
</html>
HTML CSS
通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。
HTML 链接
HTML 使用超级链接与网络上的另一个文档相连。
通过使用 <a> 标签在 HTML 中创建链接，通过使用 href 属性 - 创建指向另一个文档的链接
<html>
<body>
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
</body>
</html>html图形
图像标签（<img>）和源属性（Src）
在 HTML 中，图像由 <img> 标签定义。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
<img src="url" />
<!DOCTYPE HTML>
<html>
<body>
<p>
一幅图像：
<img src="eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅动画图像：
<img src="eg_cute.gif" width="50" height="50" />
</p>
<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>
</body>
</html>在图片资源都在和html文件同一目录下。
div
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
html类
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式，或者为不同的类设置不同的样式。
HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。
设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类：
<!DOCTYPE html>
<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>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</body>
</html>HTML id 属性
HTML id 属性用于 为HTML 元素指定唯一的 id。
一个 HTML文档中不能存在多个有相同 id 的元素
id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。
同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：
JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素
<!DOCTYPE html>
<html>
<body>
<h1>在 JavaScript 中使用 id 属性</h1>
<p>JavaScript 可以使用 getElementById() 方法访问具有指定 ID 的元素：</p>
<h2 id="myHeader">Hello World!</h2>
<button onclick="displayResult()">改变文本</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>HTML JavaScript
JavaScript 使 HTML 页面更具动态性和交互性。
HTML <script> 标签用于定义客户端脚本（JavaScript）。
<script> 元素即可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。
如需选取 HTML 元素，JavaScript 最常用 document.getElementById() 方法。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">JavaScript 可以更改 HTML 元素的样式。</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>
<button type="button" onclick="myFunction()">点击我！</button>
</body>
</html>HTML <script> 标签的 type 属性
type 属性规定脚本的 Internet 媒体类型（以前称为 MIME 类型）.
媒体类型由两部分组成：媒体类型和子类型。对于 JavaScript，媒体类型是 "application/javascript"
如果您在使用 JavaScript，可以使用下面两种属性:
language = "JavaScript" 或者 type = "text/javascript"
HTML 文件路径
文件路径描述了网站文件夹结构中某个文件的位置。
文件路径会在链接外部文件时被用到：网页、图像、样式表、JavaScript
路径 | 描述 |
<img src="picture.jpg"> | picture.jpg 位于与当前网页相同的文件夹 |
<img src="images/picture.jpg"> | picture.jpg 位于当前文件夹的 images 文件夹中 |
<img src="/images/picture.jpg"> | picture.jpg 当前站点根目录的 images 文件夹中 |
<img src="../picture.jpg"> | picture.jpg 位于当前文件夹的上一级文件夹中 |
HTML 头部元素
HTML <head> 元素
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
html布局
<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<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>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright ? W3Schools.com
</div>
</body>
</html>HTML 背景
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。说明背景是在<body>中设置的。
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名
<body bgcolor="rgb(0,0,0)">
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制
<body background="clouds.gif">
HTML5 Canvas
canvas 元素用于在网页上绘制图形，HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
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 使用getElementById函数通过 id 来寻找 canvas 元素
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
html的svg
HTML5 支持内联 SVG
Canvas 与 SVG 的比较
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
写一个篇章
HTML 多媒体
Web 上的多媒体指的是音效、音乐、视频和动画。
插件（Plug-in）是扩展浏览器标准功能的计算机程序。
插件被设计用于许多不同的目的：
运行 Java 小程序
运行 ActiveX 控件
显示 Flash 电影
显示地图
扫描病毒
验证银行账号
<object> 元素
所有浏览器均支持 <object> 元素。
<object> 元素定义 HTML 文档中的嵌入式对象。
它旨在将插件（例如 Java applet、PDF 阅读器和 Flash 播放器）嵌入网页中，但也可以用于将 HTML 包含在 HTML 中。
<embed> 元素
所有主要浏览器均支持 <embed> 元素。
<embed> 元素也可定义了 HTML 文档中的嵌入式对象。
Web 浏览器长期以来一直支持 <embed> 元素。但是，它不属于 HTML5 之前的 HTML 规范的一部分
实例：
播放音频
<!DOCTYPE html>
<html>
<body>
<object height="100" width="100" data="src/2.mp3"></object>
<p><b>注释：</b>浏览器可能需要安装插件以后，才能播放该文件。</p>
</body>
</html>注意事项：
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。
如使用雅虎播放器是免费的。如需使用它，您需要把这段 JavaScript 插入网页底部
<script type="text/javascript" src="" target="_blank">http://mediaplayer.yahoo.com/js"></script>
<!DOCTYPE html>
<html>
<body>
<p><a href="src/2.mp3">播放 mp3</a></p>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</body>
</html>播放视频
<!DOCTYPE html>
<html>
<body>
<object width="320" height="240" data="src/01.mp4"></object>
</body>
</html>
HTML 状态消息
200 OK 请求成功（其后是对GET和POST请求的应答文档。）
404 Not Found 服务器无法找到被请求的页面。
500 Internal Server Error 请求未完成。服务器遇到不可预知的情况。
502 Bad Gateway 请求未完成。服务器从上游服务器收到一个无效的响应。HTML 请求方法
HTTP 充当客户端和服务器之间的请求-响应协议。
最常用的两种方法是：GET 和 POST。
GET 用于从指定资源请求数据。
/test/demo_form.php?name1=value1&name2=value2
POST 用于将数据发送到服务器来创建/更新资源。
POST /test/demo_form.php HTTP/1.1
Host: w3school.com.cn
name1=value1&name2=value2
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
