什么是HTML？
HTML是指超文本标记语言。
HTML不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签。
HTML使用标记标签来描述网页。
HTML文档包含了HTML标签及文本内容。
HTML文档也叫作web页面
HTML标签
HTML标记标签通常称为HTML标签
HTML标签由尖括号保卫起来的关键字
HTML标签通常是成对出现的
标签对中的第一个标签是开始标签，第二个标签是结束标签。
开始标签和结束标签也被称为开放标签和闭合标签
格式 ：<标签>元素</标签>
HTML元素
“HTML标签”和“HTML元素”通常都是描述同样的意思
但严格来说，一个HTML元素包含了开始标签和结束标签。
HTML元素格式：<p>这是一个段落</p>
<!DOCTYPE html> <!--声明为html文件--> <html> <!--html页面的根元素--> <head> <!--包含了文档的元数据--> <meta charset="utf-8"> <!--直接输出中文可能会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8--> <title>菜鸟</title> <!--描述文档的标题，页面标题--> </head> <body> <!--定义包含了可见页面内容，只有标签body包裹的才能在页面中显示--> <h1>这是一个标题</h1> <!--定义一个大标题--> <p>这是一个段落</p> <!--定义一个段落--> </body> </html>
<!DOCTYPE>声明
<!DOCTYPE>有助于浏览器正确显示网页，声明不区分大小写，以下方式都可以：
<!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!Doctype Html>
标题
<!DOCTYPE html> <html> <head> <title>测试</title> </head> <h1>标题一</h1> <h2>标题二</h2> <h3>标题三</h3> <h4>标题四</h4> <h5>标题五</h5> <h6>标题六</h6> </html>
HTML段落
通过标签<p>来定义
<!DOCTYPE html> <html> <head> <title>测试</title> </head> <body> <p>第一个段落</p> <p>第二个段落</p> </body> </html>
HTML链接
HTML链接是通过标签<a>来定义的
<!DOCTYPE html> <html> <head> <title>测试</title> </head> <body> <!--注意：网址要http：//开头--> <a href="http://www.baidu.com">百度</a> </body> </html>
HTML图像
通过标签<img>来定义
<!DOCTYPE html> <html> <head> <title>测试</title> </head> <body> <img src="d://0.jpg" width="258" height="200" /> </body> </html>
HTML元素
元素语法
HTML元素以开始标签起始
HTML元素以结束标签终止
元素的内容是开始标签和结束标签之间的内容
某些HTML元素具有空内容
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数HTML元素可拥有属性
<body>元素定义了HTML文档的主体
HTML空元素
没有内容的HTML元素被称为空元素。空元素在开始标签中关闭
<br>就是没有关闭标签的空元素（<br>标签定义换行）
在XHTML、XML以及未来版本的HTML中，所有元素都必须被关闭
在开始标签中添加斜杠，比如<br/>，是关闭空元素的正确方法
HTML标签对大小写不敏感。
HTML属性
HTML元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现
<!--链接的地址在 href 属性中指定--> <a href="http://www.baidu.com">百度</a>
HTML属性常用引用属性值
属性值应该始终被包括在引号内
双引号是最常用的，不过使用单引号也没关系
在个别情况下，比如属性值本身含有双引号，这个时候就必须使用单引号了
HTML提示：使用小写属性
属性和属性值对大小写不敏感
<!--常用属性--> class 为html元素定义一个或多个类名(类名从样式文件中引入) id 定义元素唯一id style 规定元素的行内样式 title 描述元素的额外信息(作为工具条使用)
HTML标题
标题通过<h1>-<h6>标签进行定义的
<h1>定义最大的标题，<h6>定义最小的标题
浏览器会自动在标题的前后添加空行
HTML水平线
<hr>标签在HTML页面中创建水平线
HTML注释
<!--注释内容-->
<hr />
HTML段落
段落通过<p>标签定义
标签会自动换行
HTML折行
如果你希望在不产生一个新的段落的情况下进行换行(新行),使用<br />标签
<!DOCTYPE html> <html> <head> <title>测试</title> </head> <body> <p>虽说必须死，但什么时候死，怎样死，死后牵扯到什么人， <!--注意：使用<br/>换行，不会在开头有空两格，换行不是新建一个段落--> <br />都要讲究火候的。死得太早了，未免有欲盖弥彰之嫌， <br />等到李泰和长孙无忌对冯渡动手， <br />便意味着一切主动权已抓在他们手里， <br />那时无论冯渡的结局如何，李治终免不了去并州的命运。</p> </body> </html>
对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
HTML文本格式化
HTML使用<b>("bold")与<i>("italic")对输出的文本进行格式
这些HTML标签被称为格式化标签
通常标签<strong>替换加粗标签<b>来使用，<em>替换<i>标签使用
<b>与<i>定义粗体或斜体文本
<strong>或者<em>意味着你要呈现的文本是重要的，所以要突出显示
<!-- <b> 定义粗体文本 <em> 定义着重文字 <i> 定义斜体字 <small> 定义小号字 <strong> 定义加重语气 <sub> 定义下标字 <sup> 定义上标字 <ins> 定义插入字 <del> 定义删除字 <code> 定义计算机代码 <kbd> 定义键盘码 <samp> 定义计算机代码样本 <var> 定义变量 <pre> 定义预格式文本 <abbr> 定义缩写 <address> 定义地址 <bdo> 定义文字方向 <blockquote> 定义长的引用 <q> 定义短的引用语 <cite> 定义引用、引证 <dfn> 定义一个定义项目。 -->
HTML链接
HTML使用超级链接与网络上的另一个文档相连。
HTML使用标签<a>来设置超文本链接
HTML链接——target属性
使用target属性，可以定义被链接的文档在何处显示
<!DOCTYPE html> <html> <head> <title>测试</title> </head> <body> <!--添加target="_blank"，网页会在新的标签中打开--> <a href="http://www.baidu.com" target="_blank">baidu</a> </body> </html>
HTML链接——id属性
id属性可用于创建一个HTML文档书签标记
书签是不以任何特殊的方式显示，在HTML文档中是不显示的。
在HTML文档中插入ID: <a id="tips">有用的提示部分</a> 在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"： <a href="#tips">访问有用的提示部分</a> 或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"： <a href="http://www.runoob.com/html/html-links.html#tips"> 访问有用的提示部分</a>
<!DOCTYPE html> <html> <head> <title>测试</title> </head> <body> <!--href的值为id值钱加#号并用引号引起来--> <a href="#c1">查看c1</a> <br/> <a href="#c2">查看c2</a> <br/> <a href="#c3">查看c3</a> <br/> <a href="#c4">查看c4</a> <br/> <p id="c1">c1:白日衣衫尽</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p id="c2">c2:白日衣衫尽</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p id="c3">c3:白日衣衫尽</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p id="c4">c4:白日衣衫尽</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> <p>空白</p> </body> </html>
在其他页面打开到制定页面指定位置(id位置)
<!DOCTYPE html> <html> <head> <title>测试</title> </head> <a href="D:/Html/new.html#c4" target="_blank">测试链接id</a> </html>
HTML <head>元素
<head>元素包含了所有的头部标签元素，在<head>元素中你可以插入脚本(scripts)，样式文件(css)，以及各种meta信息
可以添加在头部区域的元素标签为：<title>,<style>,<meta>,<link>,<script>,<noscript>,<base>
HTMl <title>元素
<title>标签定义了不同文档的标题
<title>在HTML/XHTML文档中必须的
<title>元素：
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹的标题
显示搜索引擎结果页面的标题
HTML <base>元素
<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有链接标签的默认标签
<!DOCTYPE html> <html> <head> <title>测试</title> <base href="http://www.baidu.com" target="_blank"> </head> </html>
HTML <link>元素
<link>标签定义了文档与外部资源之间的关系
<link>标签通常用于链接到样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
HTML <style>元素
<style>标签定义了HTML文档的样式文件引用地址
在<style>元素中你也可以直接添加样式来渲染HTML文档
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
HTML <meta>元素
<meta>标签描述了一些基本的元数据
<meta>标签提供了元数据，元数据不显示在页面上，但会被浏览器解析
META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者和其他元数据
<meta>一般放置于<head>区域
<meta>标签-使用实例
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒中刷新当前页面:
<meta http-equiv="refresh" content="30">
HTML <script>元素
<script>标签用于加载脚本文件，如：JavaScript
HTML样式-CSS
如何使用CSS
CSS可以通过一下方式添加到HTML中
内联样式-在HTML元素中使用style属性
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
<body style="background-color:yellow;"> <h2 style="background-color:red;">这是一个标题</h2> <p style="background-color:green;">这是一个段落。</p>
<h1 style="text-align:center;">居中对齐的标题</h1> </body>
内部样式表-在HTML文档头部<head>区域使用<style>元素来包含CSS
<head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>
外部引用-使用外部CSS文件
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
HTML图像
图像标签<img> 源属性<src>
在HTML中，图像由<img>标签定义
<img>是空标签，只包含属性，没有闭合标签
<!DOCTYPE html> <html> <head> <title>测试</title> </head> <img src="d://0.jpg" /> </html>
HTML图像-Alt属性
Alt属性用来为图像定义一串预备的可替换的文本
替换文本属性的值是用户定义的
<!--当浏览器无法载入图像时，显示替换文本--> <img src="d://0.jpg" alt="打不开">
设置图像高宽
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
创建图片链接
<!DOCTYPE html> <html> <head> <title>测试</title> </head> <a href="http://www.baidu.com"><img src="d://0.jpg" /></a> </html>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>
HTML表格
表格由<table>标签来定义，每个表格均有若干行(由<tr>标签定义)，每行被分割为若干单元格(<td>)
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
<table border="1"> <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>
HTML表格表头
表格的表头使用<th>标签进行定义
<table border="1"> <tr> <th>Header 1</th> <th>Header 2</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>
不设置border属性或者border属性设置为0，都代表没有边框表格。
<table> 定义表格 <th> 定义表格的表头 <tr> 定义表格的行 <td> 定义表格单元 <caption> 定义表格标题 <colgroup> 定义表格列的组 <col> 定义用于表格列的属性 <thead> 定义表格的页眉 <tbody> 定义表格的主体 <tfoot> 定义表格的页脚
HTML列表
无序列表
无序列表是一个项目的列表，此列表使用粗体远点进行标记
<ul> <li>Coffee</li> <li>Milk</li> </ul>
HTMl有序列表
有序列表使用数字进行标记
<ol> <li>Coffee</li> <li>Milk</li> </ol>
HTML自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合
自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
<h4>大写字母列表：</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>小写字母列表：</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>罗马数字列表：</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
HTML区块
大部分HTML元素被定义为块级元素或内联元素
块级元素在浏览器显示时，通常以新行开始（和结束）
实例：<h1>,<p>,<ul>,<table>
HTML内联元素
内联元素通常显示时不会以新行开始
实例：<b>,<td>,<a>,<img>
HTML <div>元素
HTML <div>元素是块级元素，可用于组合其他HTML元素的容器
<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
与CSS一同使用，<div>元素可用于对大的内容块设置样式属性
<div>元素的另一个常见用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。
HTML <span>元素
<span>元素是内联元素。可用作文本的容器
<span>元素没有特定的含义
当与CSS一同使用时，<span>元素可用于部分文本设置样式属性。
<meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <div id="container" style="500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">主要的网页标题</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;100px;float:left;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;400px;float:left;"> 内容在这里</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 版权 © runoob.com</div> </div> </body> </html>
使用<table>标签实现上面效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>主要的网页标题</h1> </td> </tr> <tr> <td style="background-color:#FFD700;100px;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;400px;"> 内容在这里</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> 版权 © runoob.com</td> </tr> </table> </body> </html>
HTML表单
表单是一个包含表单元素的区域
表单元素允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框、复选框等。
表单使用表单标签<form>来设置
<form> . input 元素 . </form>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> </head> <body> <form action=""> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> <p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p> </body> </html>
密码字段
密码字段通过<input type="password">
<form> Password: <input type="password" name="pwd"> </form>
注意:密码字段字符不会明文显示，而是以星号或圆点替代。
单选按钮
<input type="radio">标签定义了表单单选框选项
<form> <input type="radio" name="sex" value="male">Male <br /> <input type="radio" name="sex" value="female">Female </form>
复选框
<input type="checkbox">定义了复选框，用户需要从若干给定的选择中选取一个或多个选项
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike <br /> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
提交按钮
<input type="submit">定义了提交按钮
当用户单机确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目标文件的文件名。由动作属性定义的这个文件通常会对接收到的传入数据进行相关的处理。
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> <!--点击确认按钮，输入数据会传送到 "html_form_action.php" 的页面-->
下拉按钮
<form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form>
预选下拉按钮
<form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> </form>
文本框
<textarea rows="10" cols="30"> 我是一个文本框。 </textarea>
创建按钮
<form action=""> <input type="button" value="Hello world!"> </form>
<form> 定义供用户输入的表单 <input> 定义输入域 <textarea> 定义文本域 (一个多行的输入控件) <label> 定义了 <input> 元素的标签，一般为输入标题 <fieldset> 定义了一组相关的表单元素，并使用外框包含起来 <legend> 定义了 <fieldset> 元素的标题 <select> 定义了下拉选项列表 <optgroup> 定义选项组 <option> 定义下拉列表中的选项 <button> 定义一个点击按钮 <datalist>New 指定一个预先定义的输入控件选项列表 <keygen>New 定义了表单的密钥对生成器字段 <output>New 定义一个计算结果
HTML框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
iframe语法：
<iframe src="URL"></iframe>
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Iframe - 移除边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
<!--显示百度页面--> <iframe src="http://www.baidu.com" name="iframe_a"></iframe> <!--点击a标签中的文本，iframe标签会转到a标签中的链接，target指定链接在哪里打开--> <p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
HTML脚本
<script>标签用户定义客户端脚本，比如：JavaScript
<script>元素既可包含脚本语句，也可通过src属性指向外部脚本文件
JavaScript最常用语图片操作、表单验证以及内容动态更新
<script> document.write("Hello World!"); </script>
<noscript>标签
<noscript>标签提供无法使用脚本时替代内容
<noscript>元素可包含普通HTML页面的body元素中能够找到的所有元素
只有浏览器不支持脚本或禁用脚本时，才会显示<noscript>元素中的内容
<script> document.write("Hello World!") </script> <noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
HTML字符实体
HTML中的预留字符必须被替换为字符实体
注意：实体字符对大小写敏感。
空格   < 小于号 < < > 大于号 > > & 和号 & & " 引号 " " ' 撇号 ' (IE不支持) ' ￠ 分 ¢ ¢ £ 镑 £ £ ¥ 人民币/日元 ¥ ¥ € 欧元 € € § 小节 § § © 版权 © © ® 注册商标 ® ® ™ 商标 ™ ™ × 乘号 × × ÷ 除号 ÷ ÷
HTML URL
scheme://host.domain:port/path/filename
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页，加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 您计算机上的文件。