一、HTML简介
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)。HTML并不是一种编程语言，而是一种标记语言 (markup language)，标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页。
二、基本标签
标记分为单标记和双标记两种
单标记可以独自使用，例如<br> <hr>
双标记则由首标记和尾标记构成，例如：<b></b>
1.文档结构
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.
This text is bold
</body>
</html>
在HTML文档中，第一个标签是。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是，这个标签告诉浏览器这是HTML文档的终止。
在和标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。
在和标签之间的文本是正文，会被显示在浏览器中。
body属性的常用标签
- <bgcolor> :设置背景颜色
- <text> :设置文本颜色
定时刷新或跳转：
表示一秒钟刷新一次页面
<meta http-equiv="refresh" content="1"/>
页面3秒后自动跳转到百度页面
<meta http-equiv="refresh" content="3;url=http:www.baidu.com"/>
2. 标题元素
标题元素由标签<h1>到<h6>定义。<h1>定义最大的标题元素，<h6>定义最小的。
常用属性：
<align>：设置对齐方式。
例如，
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
显示效果：
This is a heading
This is a heading
This is a heading
This is a heading
This is a heading
This is a heading
3.段落
段落是用
标签定义的。
常用属性：
<align>：设置对齐方式。
<p>This is another paragraph</p>
显示效果
This is another paragraph
HTML自动在一个段落前后各添加一个空行。
4.换行与分隔线
1.换行
当需要结束一行，并且不想开始新段落时，使<br>标签。<br>标签不管放在什么位置，都能够强制换行。
<p>This <br> is a para<br>graph with line breaks</p>
显示效果：
This
is a para
graph with line breaks
<br>标签是一个空标签，它没有结束标记。
2.分隔线
分隔线用<hr>来表示
常用属性：
- size:控制直线的粗细
- color：控制直线的颜色
- align：对齐方式
- width：控制直线的宽度（占页面的多少）
例如：
<hr color="blue" size="5px" align="center" width="50%">
5. 注释
注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。
<!-- This is a comment -->
注意：需要在左括号“<”后面跟一个感叹号，右括号不用。
6.文字标签
| 标签 | 功能 |
|---|---|
| <b></b> | 加粗文字 |
| <strong></strong> | 加粗+斜体文字 |
| <font></font> | 字体标记 |
其中<font>中有许多属性来控制字体样式，例如：
- color：设置字体颜色（取值颜色名字或颜色的对应16进制）
- size：设置字体大小（取值1-7）
- face：设置字体字形（宋体、楷体等）
注意： <font>标签现在并不常用，目前的主流是用css来控制文本格式，后面会学到。
7.字符实体
在HTML中，有些字符拥有特殊含义，比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话，必须在HTML代码中插入字符实体。
一个字符实体拥有三个部分：
- 一个and符号（&）
- 一个实体名或者一个实体号
- 最后是一个分号（;）
想要在HTML文档中显示一个小于号，必须这样写：<或者<
使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。
注意： 实体名是大小写敏感的。
在HTML中，最常见的字符实体就是不可拆分空格。
通常，HTML会合并你文档中的空格。假如在你的HTML文本中连续写了10个空格，其中9个会被去掉。想要在HTML中插入空格，可以使用实体：
常用的字符实体
| 显示结果 | 描述 | 实体名 | 实体号 |
|---|---|---|---|
| 不可拆分的空格 | |   | |
| < | 小于 | < | < |
| > | 大于 | > | > |
| & | and符号 | & | & |
| " | 引号 | " | " |
| ’ | 单引号 | ' | |
| ¢ | 分 | ¢ | ¢ |
| £ | 英镑 | £ | £ |
| ¥ | 人民币元 | ¥ | ¥ |
| § | 章节 | § | § |
| © | 版权 | © | © |
| ® | 注册 | ® | ® |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
8.图片标记
格式：
<img src=“url” alt="" height="" width="" >
属性：
- src ：src”属性的值是所要显示图像的URL。URL指向图像存储的地址。
- alt：用来给图像显示一个“交互文本”，值是由用户定义的。
- width：控制图片的宽度
- height：控制图片的高度
说明：
当浏览器在文档中遇到img标签时，就放置一个图像。如果把img标签放在两个段落之间，就会先显示一个段落，然后是这个图像，最后是另外一个段落。
alt属性在浏览器装载图像失败的时候告诉用户所丢失的信息，此时，浏览器显示这个交互文本来代替图像。
实例：
插入本地图像
<img src="image.gif" width="144" height="50">
插入非本地图像
<img src="http://www.baidu.com/images/ie.gif" width="73" height="68">
9.超链接
HTML使用超级链接来连接到网络上的其他页面。
格式：
<a href=“url”>超链接名称或图片</a>
例如：
以文字作为超链接
<a href="https://www.baidu.com/">百度</a>
以图片作为超链接
<a href="lastpage.htm"><img border="0" src=".\images\next.gif"></a>
target属性
在框架子窗口中如果含有超链接，当点击超链接时，目标网页显示的位置由target指定，默认是在子窗口打开。
<a href="目标网页地址" target="显示目标网页的子窗口名称">超链接文字</a>
10.列表
列表标签分为两类：有序标签和无序标签
1.有序列表
格式：
<ol type="序号类型">
<li></li>
<li></li>
</ol>
其中type属性指定列表项前的项目编号的样式，取值
- 1：阿拉伯数字（默认）
- a：小写英文
- A：大写英文
- i：小写罗马数字
- I：大写罗马数字
2.无序列表
格式：
<ul type="序号类型">
<li></li>
<li></li>
</ul>
type属性的取值：
- disc：实心圆点
- circle：空心圆点
- square：实心方块
例如：
有序列表
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
效果展示:
Numbered list:
- Apples
- Bananas
- Lemons
- Oranges
Letters list:
- Apples
- Bananas
- Lemons
- Oranges
Lowercase letters list:
- Apples
- Bananas
- Lemons
- Oranges
Roman numbers list:
- Apples
- Bananas
- Lemons
- Oranges
Lowercase Roman numbers list:
- Apples
- Bananas
- Lemons
- Oranges
无序列表：
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
11.表格
表格是用<table>标签定义的。表格被划分为行（使用<tr>标签），每行又被划分为数据单元格（使用<td>标签）,表格头使用<th>标签指定。数据单元格可以包含文本，图像，列表，段落，表单，水平线，表格等等。可以控制页面布局。
基本语法：
<table>
<caption>表格标题</caption>
<tr>
<th>列名1</th>
<th>列名2</th>
</tr>
<tr>
<td>数据一</td>
<td>数据二</td>
</tr>
......
</table>
table标签属性：
- width：表格宽度
- height：表格高度
- align：表格水平对齐方式
- border：表格边框厚度
- cellpadding：边距
- cellspacing：间距
- bgcolor：表格背景颜色
- background：表格背景图像
tr标签属性:
- align：单元格水平对齐方式
- valign：单元格中内容的垂直对齐方式
- bgcolor：背景颜色
td th的属性：
- align：水平对齐方式
- valign：垂直对齐方式
- background：背景图像
- bgcolor：背景颜色
- colspan：横向合并单元格
- rowspan：纵向和平单元格
- height：高度
- width：宽度
实例
1.单元格跨行（列）的表格：
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
显示效果：
Cell that spans two columns:
| Name | Telephone | |
|---|---|---|
| Bill Gates | 555 77 854 | 555 77 855 |
Cell that spans two rows:
| First Name: | Bill Gates |
|---|---|
| Telephone: | 555 77 854 |
| 555 77 855 |
2.有标题的表格：
<h4>
This table has a caption,and a thick border:
</h4>
<table border="6">
<caption>My Caption</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
显示效果：
This table has a caption,and a thick border:
| 100 | 200 | 300 |
| 400 | 500 | 600 |
12. 表单
表单是一个能够包含表单元素的区域。表单元素能够让用户在表单中输入信息的元素（比如文本框，密码框，下拉菜单，单选框，复选框等等）。
表单是用<form>元素定义的。
格式：
<form>
<input>
<input>
<select></select>
<textarea></textarea>
......
</form>
form标签属性：
- name：表单名称
- method：提交方法
- action：处理程序
配合form标签嵌套使用的，有<input> <select> <textarea>标签。下面分别来介绍
<input>标签
最常用的表单标签是<input>标签。<input>是单个标记，必须嵌套在表单内使用，用于定义一个输入项。主要属性有6个，即type name size value maxlength checked,其中name type属性是必选的。
格式：
<form>
<input name="输入域名称" type="域类型" value="输入域的值">
......
</form>
type属性的取值共有9种类型：
1. 文本域
<input type="text" name="自定义名称" maxlength="" size="" >
- size用来限制此区域显示的大小
- maxlength限制输入的最大字符数
2.密码域
<input type="password" name="自定义名称" maxlength="" size="" >
属性作用同上，密码域与文本域的区别是，当输入密码时区域内会显示*来代替输入的内容。
3.单选按钮
<input type="radio" name="自定义名称" value="值" checked/>
check属性设置该按钮在默认状况下是否被选中。
当需要设置多个互斥的按钮时，设置相同的name值即可。
4.复选框
<input type="checkbox" name="自定义名称" value="值" checked/>
check属性设置该按钮在默认状况下是否被选中。
当需要设置多个复选框时，可设置相同的name值。
5.提交按钮
<input type="submit" name="自定义名称" value="" />
将表单提交到服务器
6.取消按钮
<input type="reset" name="自定义名称" value="" />
将表单内的内容清除
7. 图像按钮
<input type="image" src="url"/>
使用图像代替submit按钮
8.文件域
<input type="file" name="" size="" maxlength="">
9.隐藏域
<input type="hidden" name="" size="" value="">
用户不能输入信息，用来预设某些要传递的信息
<select>标签
在表单中，通过<select>和<option>标记可设计一个下拉式的列表或带滚动条的列表。
<select name="" size="" multiple>
<option value="" selected>...</option>
<option value="">...</option>
...
</select>
select标签常用属性
- name:设定下拉表名字
- size：改变下拉框的大小
- multiple：允许用户选择多项
option标签常用属性
- selected：在初始时被选中
- value：需要提交的数据
<textarea>标签
格式
<textarea name="" rows="" cols="" wrap="">
初始值
</textarea>
rows设置输入域的行数，cols设置域的列数，wrap设置是否自动换行。
综合实例：
<h2 align="center">学生信息注册</h2>
<form action="" method="post">
姓名：<input type="text" name="name"><br>
性别：<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br>
出生日期：<input type="text" name="birth"><br>
学校：<input type="text" name="school"><br>
专业：<select name="zy">
<option selected="selected">计算机科学与技术</option>
<option>大数据</option>
<option>物联网</option>
</select><br>
体育特长：<input type="checkbox" name="tiyu" value="篮球">篮球
<input type="checkbox" name="tiyu" value="排球">排球
<input type="checkbox" name="tiyu" value="足球">足球
<input type="checkbox" name="tiyu" value="游泳">游泳<br>
上传照片：<input type="file"><br>
密码：<input type="password"><br>
个人介绍：<textarea name="jieshao" rows="5" cols="30"></textarea><br>
<input type="submit" value="提交">
<input type="reset" value="取消">
</form>
13.框架
使用框架，可以在一个浏览器窗口中显示不止一个HTML文档。这样的HTML文档被称为框架页面，它们是相互独立的。
frameset标签
<frameset>标签定义了如何将窗口拆分成框架。 每个frameset标签定义了一组行和列。 行/列的值指明了每个行/列在屏幕上所占的大小。 <frame>标签定义了每个框架中放入什么文件。
语法结构：
<frameset rows="高度1，高度2.." 或者 cols="宽度1，宽度2..">
<frame src="网页1">
<frame src="网页2">
</frameset>
说明：
- rows属性是水平分割，cols属性是垂直分割
- rows是从上往下分割，cols是从左往右分割
frame标签
语法
<frame src="html文件位置" name="子窗口名称" scrolling="">
常用属性
- name：指定子窗口的名称
- scrolling：用于控制窗口框架中是否显示滚动条
实例：
垂直分栏：
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
水平分栏：
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
三、结语
如果这篇文章对你有所帮助，动动小手点个赞吧！！
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
