什么是HTML？
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言:HyperTextMarkupLanguage
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签(markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML标签及文本内容
- HTML文档也叫做web 页面
HTML版本
<!DOCTYPE> 声明
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
常见的DOCTYPE声明
HTML 5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
中文编码
目前在大部分浏览器中，直接�输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。
<meta charset="UTF-8">
HTML常用编辑器
- Notepad++：https://notepad-plus-plus.org/
- Sublime Text：http://www.sublimetext.com/
- HBuilder：http://www.dcloud.io/
语义化
标签语义化可以给我们带来什么样的好处呢？
- 更容易被搜索引擎收录。
- 更容易让屏幕阅读器读出网页内容。
HTML头部
使用 <title> 标签定义HTML文档的标题
使用 <base> 定义页面中所有链接默认的链接目标地址。
<base href="http://www.runoob.com/images/" target="_blank">
使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。
<link> 标签定义了文档与外部资源之间的关系。<link> 标签通常用于链接到样式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style> 标签定义了HTML文档的样式文件引用地址.
<style type="text/css"></style>
<meta>标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta>一般放置于 <head>区域
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
定义网页作者:
<meta name="author" content="Hege Refsnes">
每30秒中刷新当前页面:
<meta http-equiv="refresh" content="30">
<script>标签用于加载脚本文件，如： JavaScript。
<javascript src="" type="text/javascripe"></javascript>
HTML CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style"属性
- 内部样式表 -在HTML文档头部 <head> 区域使用<style>元素来包含CSS
- 外部引用 - 使用外部 CSS文件
最好的方式是通过外部引用CSS文件.
已弃用的标签和属性
在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。
不建议使用的标签有: <font>, <center>, <strike/>；
不建议使用的属性: color 和 bgcolor.
大多数 HTML 元素被定义为块级元素或内联元素。
- 块级元素在浏览器显示时，通常会以新行来开始（和结束）。
- 内联元素在显示时通常不会以新行开始。
1. <strong>和<em>标签，加入强调语气
但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。
并且在浏览器中<em> 默认用 斜体 表示，<strong> 用 粗体 表示。
2. <blockquote> 标签，长文本引用。
作用也是引用别人的文本。但它是对 长文本 的引用，如在文章中引入大段某知名作家的文字，
这时需要这个标签。
3. <br> 标签分行显示文本
4.
为你的网页中添加一些空格
5. <hr> 标签，添加水平横线
6. <address> 标签，为网页加入地址信息
7. <code> 标签，加入一行代码
8. <pre> 标签，为你的网页加入大段代码
9. <a> 标签，在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开
<a href="目标网址"**target="_blank"**>click here!</a>
使用mailto在网页中链接Email地址
<a herf="mailto:yy@imooc.com?subject=观了不起的盖茨比有感&body=你好，对此评论有些想法。">对此影评有何感想，发送邮件给我</a>
10. 下拉列表框
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
11. form表单中的label标签
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，
就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
（就自动选中和该label标签相关连的表单控件上）。
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
HTML框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
HTML颜色
HTML实体
HTML URL
scheme://host.domain:port/path/filename
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 runoob.com
- port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
