推荐使用工具：HBuilder
HTML文件是一个十分普通的ASCII文件，扩展名一般是.htm或.html。
一、HTML中的常用标签
1.HTML最基本的四个标签
①<html> </html>所有的HTML文件都是以<html>标记开头，以</html>标记作为结尾。网页中所有的内容都必须包含在和之间。
②<head></head>一个HTML文件分为文档头和文档体两部分。其中head标记为文档头部分，用来标明文档的有关信息。如网页的标题、搜索引擎的关键字等。
附加内容：
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件
③<title></title>在HEAD之间出现最多的就是TITLE标记，该标记向浏览者提示网页的内容，即网页的标题，这个标题将显示在浏览器窗口的标题栏中。TITLE标记不能包含其他标记，一个网页也只能有一个标题，所以在HTML文件中，TITLE标记只能出现一次。
④<body></body>BODY标记是HTML文件的主体部分，也是网页的重点工作之一。Body标记以<body>开头，以</body>结束。所有需要在网页中显示给浏览都看的内容都必须放在和<body>和</body>之间。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画堂春·一生一代一双人</title>
</head>
<body>
一生一代一双人，争教两处销魂。
相思相望不相亲，天为谁春。
浆向蓝桥易乞，药成碧海难奔。
若容相访饮牛津，相对忘贫。
</body>
</html>
2.<br>换行标签<br>单个使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画堂春·一生一代一双人</title>
</head>
<body>
一生一代一双人，争教两处销魂。
<br>
相思相望不相亲，天为谁春。
<br>
浆向蓝桥易乞，药成碧海难奔。
<br>
若容相访饮牛津，相对忘贫。
</body>
</html>
3.<p></p>定义一个段落，使得段前和段后空一行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画堂春·一生一代一双人</title>
</head>
<body>
一生一代一双人，争教两处销魂。
<p>
相思相望不相亲，天为谁春。
浆向蓝桥易乞，药成碧海难奔。
</p>
若容相访饮牛津，相对忘贫。
</body>
</html>
4.<h1>——<h6>定义六级标题，标题大小依次减小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
5.<a href="链接地址"></a>定义链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
我的母校是人民兵工第一校<a href="http://www.nuc.edu.cn/index.htm">中北大学</a>
</body>
</html>
附加内容：
<a href="链接的页面" target="_blank">新窗口打开</a><br />
<a href="链接的页面" target="_parent">原窗口打开</a>
<a href="链接的页面" target="_self" >自身窗口打开</a>
<a href="链接的页面" target="_aa" >name="aa"的框架页面打开</a>
<a href="链接的页面" target="_top" >在最上层窗口中打开</a>
6.<img src="/地址/图片名称" width="长" height="高" />倘若想要放大或者缩小图片，但是不改变图片原本的比例，长或者高只设置一个就可以
附加内容：
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
<img src="1.gif" alt="111111">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。
此时，浏览器将显示这个替代性的文本而不是图像。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
我喜欢的动物是龙猫
<img src="1.jpg" width="258" />
</body>
</html>
7.<!--这里存放注释-->：快捷输入方式Ctrl + /，注释只在代码中显示，在网页中运行时不显示
8.文本格式化：
<b></b>加粗文字
<em></em>着重文字
<i></i> 斜体文字
<small></small>小号文字
<strong></strong>加重语气
<sub></sub>下标文字
<sup></sup>上标文字
<ins></ins>插入文字
<del></del>删除文字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<b>加粗文字</b><br />
<em>着重文字</em><br />
<i>斜体文字</i><br />
<small>小号文字</small><br />
<strong>加重语气</strong><br />
我是下标<sub>下标文字</sub><br />
我是上标<sup>上标文字</sup><br />
<ins>插入文字</ins><br />
<del>删除文字</del><br />
</body>
</html>
补充：
<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预文本格式（可以对空格和空行进行控制）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<pre>
这里有好多的空格 一个 两个 三个
这里还有好几条空行
</pre>
</body>
</html>
<abbr>定义缩写
<address>定义地址
<bdo>定义文字方向（可以反向读取）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
一生一代一双人，争教两处销魂<br />
<bdo dir="rtl">一生一代一双人，争教两处销魂</bdo>
</body>
</html>
<blockquote>定义长的引用语
<q>定义短的引用语
<cite>定义引用，引证
<dfn>定义一个定义项目
9.<center></center>将这个文本居中对齐。
10.
<div> 定义了文档的区域，块级 (block-level)
<span> 用来组合文档中的行内元素， 内联元素(inline)
<div></div> 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<div id="" style="color:#00FF00;">
这是一个有颜色的标签，可以通过div单独设置一块内容。
</div>
</body>
</html>
附加内容：颜色问题
<p style="background-color:rgb(255,255,0)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.25)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.5)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.75)">
通过 rbg 值设置背景颜色
</p>
二、HTML中的表格类
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<table border="2" cellpadding="10">
<!--border是定义表格边框的粗细，不设置的话将没有边框-->
<!--本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。-->
<caption>水平表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th colspan="2">年龄</th>
<!--colspan的作用是水平合并单元格-->
</tr>
<tr>
<td>1913</td>
<td>张三</td>
<td>66</td>
<td>66</td>
</tr>
</table>
<table border="3" cellspacing="10">
<!--Cell spacing 增加单元格之间的距离-->
<caption>垂直表</caption>
<tr>
<th>学号</th>
<td>1913</td>
</tr>
<tr>
<th>姓名</th>
<td>张三</td>
</tr>
<tr>
<th rowspan="2">年龄</th>
<!--rowspan的作用是垂直合并单元格-->
<td>66</td>
</tr>
<tr>
<td>77</td>
</tr>
</table>
</body>
</html>
三、HTML列表
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<ul>
<li>这是第一句</li>
<li>这是第二句</li>
<li>这是第三句</li>
</ul>
<br />
<ol>
<li>这是第一句</li>
<li>这是第二句</li>
<li>这是第三句</li>
</ol>
</body>
</html>
四、HTML表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 来设置:
<form>
.
input 元素
.
</form>
HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签（）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> 指定一个预先定义的输入控件选项列表
<keygen> 定义了表单的密钥对生成器字段
<output> 定义一个计算结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单</title>
</head>
<body>
<from action="01.html" method="get">
用户名<input type="text" placeholder="请输入用户名" id="username" name="username" />
<br />
密码<input type="password" id="upsw" name="upsw" />
<br />
性别<input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="female" />女
<br />
爱好<input type="checkbox" name="love" value="踢球" />踢球
<input type="checkbox" name="love" value="旅游" />旅游
<br />
籍贯<select id="nation">
<option>山西</option>
<option>福建</option>
<option>陕西</option>
<option>北京</option>
</select>
<br />
<input type="submit" value="注册" />
</from>
</body>
</html>
五、HTML框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
<iframe src="URL"></iframe>URL指向不同的网页
设置新页面的高度宽度
<iframe src="index.html" width="200" height="200"></iframe>
设置边框是否显示
<iframe src="index.html" frameborder="0"></iframe>
用iframe来显示一个目标链接的界面
<iframe src="index.html" name="hname"></iframe>
<p><a href="http://www.nuc.edu.cn/index.htm" target="hname">中北大学</a></p>
六、HTML脚本问题
<script> 定义了客户端脚本
<noscript> 定义了不支持脚本浏览器输出的文本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--用来实现脚本内容输出-->
<script>
document.write("这只是一个脚本的输出");
</script>
<!--定义一个用来操作的对象，通过id为它设定唯一值-->
<br />
<p id="demo">
JavaScript 可以触发事件，就像按钮点击。
</p>
<!--定义通过按钮改变内容的脚本功能-->
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>
<!--定义通过按钮改变颜色的脚本功能-->
<script>
function heFunction()
{
x=document.getElementById("demo")
x.style.color="#ff0000";
}
</script>
<br />
<button type="button" onclick="myFunction()">点我改变内容</button>
<br />
<button type="button" onclick="heFunction()">点我改变样式</button>
</body>
</html>
七、HTML的URL
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页，加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 您计算机上的文件
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
附录
实体字符
̀ a à à
́ a á á
̂ a â â
̃ a ã ã
̀ O Ò Ò
́ O Ó Ó
̂ O Ô Ô
̃ O Õ Õ
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' '
￠ 分 ¢ ¢
£ 镑 £ £
¥ 人民币/日元 ¥ ¥
€ 欧元 € €
§ 小节 § §
© 版权 © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷÷
标签列表
基础标签
<!DOCTYPE> 定义文档类型。
<html> 定义 HTML 文档。
<title> 定义文档的标题。
<body> 定义文档的主体。
<h1> to <h6> 定义 HTML 标题。
<p> 定义段落。
<br> 定义简单的折行。
<hr> 定义水平线。
<!--...--> 定义注释。
格式标签
<acronym> 定义只取首字母的缩写。
<abbr> 定义缩写。
<address> 定义文档作者或拥有者的联系信息。
<b> 定义粗体文本。
<bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo> 定义文字方向。
<big> 定义大号文本。
<blockquote> 定义长的引用。
<center> 不赞成使用。定义居中文本。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
<del> 定义被删除文本。
<dfn> 定义定义项目。
<em> 定义强调文本。
<font> 不赞成使用。定义文本的字体、尺寸和颜色
<i> 定义斜体文本。
<ins> 定义被插入文本。
<kbd> 定义键盘文本。
<mark> 定义有记号的文本。
<meter> 定义预定义范围内的度量。
<pre> 定义预格式文本。
<progress> 定义任何类型的任务的进度。
<q> 定义短的引用。
<rp> 定义若浏览器不支持 ruby 元素显示的内容。
<rt> 定义 ruby 注释的解释。
<ruby> 定义 ruby 注释。
<s> 不赞成使用。定义加删除线的文本。
<samp> 定义计算机代码样本。
<small> 定义小号文本。
<strike> 不赞成使用。定义加删除线文本。
<strong> 定义语气更为强烈的强调文本。
<sup> 定义上标文本。
<sub> 定义下标文本。
<time> 定义日期/时间。
<tt> 定义打字机文本。
<u> 不赞成使用。定义下划线文本。
<var> 定义文本的变量部分。
<wbr> 定义可能的换行符。
表单标签
<form> 定义供用户输入的 HTML 表单。
<input> 定义输入控件。
<textarea> 定义多行的文本输入控件。
<button> 定义按钮。
<select> 定义选择列表（下拉列表）。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<label> 定义 input 元素的标注。
<fieldset> 定义围绕表单中元素的边框。
<legend> 定义 fieldset 元素的标题。
<isindex> 不赞成使用。定义与文档相关的可搜索索引。
<datalist> 定义下拉列表。
<keygen> 定义生成密钥。
<output> 定义输出的一些类型。
框架标签
<frame> 定义框架集的窗口或框架。
<frameset> 定义框架集。
<noframes> 定义针对不支持框架的用户的替代内容。
<iframe> 定义内联框架。
图像标签
<img> 定义图像。
<map> 定义图像映射。
<area> 定义图像地图内部的区域。
<canvas> 定义图形。
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组，以及它们的标题。
音频标签
<audio> 定义声音内容。
<source> 定义媒介源。
<track> 定义用在媒体播放器中的文本轨道。
<video> 定义视频。
链接标签
<a> 定义锚。
<link> 定义文档与外部资源的关系。
<nav> 定义导航链接。
列表标签
<ul> 定义无序列表。
<ol> 定义有序列表。
<li> 定义列表的项目。
<dir> 不赞成使用。定义目录列表。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<dd> 定义定义列表中项目的描述。
<menu> 定义命令的菜单/列表。
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。
<command> 定义命令按钮
表格标签
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格中的表头单元格。
<tr> 定义表格中的行。
<td> 定义表格中的单元。
<thead> 定义表格中的表头内容。
<tbody> 定义表格中的主体内容。
<tfoot> 定义表格中的表注内容（脚注）。
<col> 定义表格中一个或多个列的属性值。
<colgroup> 定义表格中供格式化的列组。
样式标签
<style> 定义文档的样式信息。
<div> 定义文档中的节。
<span> 定义文档中的节。
<header> 定义 section 或 page 的页眉。
<footer> 定义 section 或 page 的页脚。
<section> 定义 section。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<details> 定义元素的细节。
<dialog> 定义对话框或窗口。
<summary> 为 <details> 元素定义可见的标题。
编程代码
<script> 定义客户端脚本。
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<applet> 不赞成使用。定义嵌入的 applet。
<embed> 为外部应用程序（非 HTML）定义容器。
<object> 定义嵌入的对象。
<param> 定义对象的参数。
属性列表
accesskey 规定激活元素的快捷键。
class 规定元素的一个或多个类名（引用样式表中的类）。
contenteditable 规定元素内容是否可编辑。
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
