推荐使用工具: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 规定是否应该翻译元素内容。