【HTML】初识HTML

什么是HTML？

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言:HyperTextMarkupLanguage
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签(markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML标签及文本内容
HTML文档也叫做web 页面

HTML版本

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 标签参考手册 | HTML 标准属性参考手册.

语义化

标签语义化可以给我们带来什么样的好处呢？

更容易被搜索引擎收录。
更容易让屏幕阅读器读出网页内容。

HTML头部

使用 <title> 标签定义HTML文档的标题

使用 <base> 定义页面中所有链接默认的链接目标地址。

    <base href="http://www.runoob.com/images/" target="_blank">

使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。

    <link rel="stylesheet" type="text/css" href="mystyle.css">

<style> 标签定义了HTML文档的样式文件引用地址.

   <style type="text/css"></style>

<meta>标签描述了一些基本的元数据。

为搜索引擎定义关键词:

<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 图像标签

HTML表格标签

HTML列表标签

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。
内联元素在显示时通常不会以新行开始。

HTML分组标签

HTML表单标签（HTML5）

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 颜色名
 HTML 颜色值

HTML实体

HTML 实体参考手册

HTML URL

scheme://host.domain:port/path/filename

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称