# HTML 学习笔记

# HTML 概念先导

HTML 指的是超文本标记语言: HyperText Markup Language。准确来说，HTML 不是编程语言而是标记语言，由各种 HTML 元素（HTML 标签和 HTML 内容）组成。

	<!DOCTYPE html> //声明为HTML5文档
	<html> //HTML页面的根元素
	<head> //包含文档的元(meta)数据
	<meta charset="utf-8"> //定义网页编码格式为"utf-8",否则中文网页可能出现乱码
	<title>Tviak的普通观测站</title> //描述了文档的标题
	</head>

	<body> //包含了网页的可视内容
	<h1>我的第一个标题</h1> //大标题
	<p>我的第一个段落。</p> //段落
	</body>

	</html>

# HTML 元素

HTML 标签

HTML 标签一定要配套有开始标签和结束标签，虽然有些浏览器可以读取不闭合标签，但还是建议使用闭合标签。

值得注意的是，有些单标签 <br> 在 XHTML 后要求加入 / 来表示自行封闭。<br/> 等同于 < br>…< /br>

标签	描述
< hr/>	定义水平线
<!- - 内容 - ->	定义注释
< br/>	不产生新段落的情况下换行

更多标签见 HTML 标签参考手册。

HTML 属性

HTML 属性一般出现在开始标签中，HTML 属性以键值对的形式出现，属性值多被双引号包括，除非属性值本身带有双引号字符，这时需要用单引号包括属性值。

属性	描述
class	为 html 元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一 id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

更多属性值见 HTML 标准属性参考手册.

HTML 文本格式化标签

标签	描述
< b>	定义粗体文本
< em>	定义着重文字
< i>	定义斜体字
< small>	定义小号字
< strong>	定义加重语气
< sub>	定义下标字
< sup>	定义上标字
< ins>	定义插入字
< del>	定义删除字

	<p>
	<b>粗体<em>加重</em></b>,<i>斜体<small>小号</small></i>,<sup>上</sup><ins>插入字</ins><del>删除字</del><sub>下</sub>
	</p>

粗体加重,斜体小号,^上插入字~~删除字~~_下

HTML 代码

标签	描述
< code>	定义计算机代码
< kbd>	定义键盘码
< smap>	定义计算机代码样本
< var>	定义变量
< pre>	定义预格式文本

<code>printf("HELLO WORLD");<var>int i;</var></code>

printf(“HELLO WORLD”);int i;

HTML 引文

标签	描述
< abbr>	定义缩写
< address>	定义地址
< bdo>	定义文字方向
< blockquote>	定义长的引用
< q>	定义短的引用语
< cite>	定义引用、引证
< dfn>	定义一个定义项目。

	<p>
	<abbr title="Tviak/vktia">TV</abbr>住在<address>China</address>;<bdo dir="rtl">从右到左读</bdo>
	</p>

TV住在

China

;从右到左读

HTML 头部

标签	描述
< head>	定义了文档的信息
< title>	定义了文档的标题
< base>	定义了页面链接标签的默认链接地址
< link>	定义了一个文档和外部资源之间的关系
< meta>	定义了 HTML 文档中的元数据
< script>	定义了客户端的脚本文件
< style>	定义了 HTML 文档的样式文件

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Tviak的普通观测站</title>
	<base href="https://TV233.github.io/" target="_blank">
	</head>
	<body>

	<p><img src="images/avatar.jpg" ></p>
	<!-- 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "https://TV233.github.io/images/avatar.jpg"-->
	<p><a href="about">Tviak's Observatory</a></p>
	<!-- 注意这个链接会在新窗口打开（但是博客使用的 Shoka 主题使得实际是在原窗口打开），即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。-->
	</body>
	</html>

Tviak的普通观测站

Tviak's Observatory

# HTML 表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes) 等等。

# 文本域

	<form>
	First name: <input type="text" name="firstname"><br>
	Last name: <input type="text" name="lastname">
	</form>

First name:
Last name:

表单中需要输入明文文本时需要用到文本域，通常浏览器中表单长度为 20 个字符

# 密码字段

	<form>
	Password:<input type="password" name="password">
	</form>

表单需要输入暗文文本时需要用到密码字段

# 单选按钮

	<form>
	<input type="radio" name="sex" value="male">Male<br>
	<input type="radio" name="sex" value="female">Female
	</form>

# 复选框

	<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>

用户需要从若干给定的选择中选取一个或若干选项。

# 提交按钮

	<form name="input" action="html_form_action.php" method="get">
	Username: <input type="text" name="user">
	<input type="submit" value="Submit">
	</form>

提交按钮中的 value 指的是按钮上的文本，而其他 HTML 表单中的 value 与 name 组成提交的数据，如 name:value
<form ...> 参数： name 指明提交的数据包名， action 指明数据包传送的地点， method 指明了数据包传送时遵守的 HTTP 方法.
action 的值可以是绝对路径，指向其他站点；也可以是相对路径，指向本站的其他文件。

# HTML 表格

# 表格内容

这里的元素用于创建和处理表格数据。

元素	描述
< caption>	指定表格的标题。
< col>	定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于 <colgroup> 元素内。
< colgroup>	定义表中的一组列表。
< table>	表示表格数据 —— 即通过二维（由行和列组成）数据表表示的信息。
< tbody>	封装了一系列表格的行（<tr> 元素），代表了它们是表格（< table>）主要内容的组成部分。
< td>	定义了一个包含数据的表格单元格。它是表格模型（table model）的一部分。
< tfoot>	定义了一组表格中各列的汇总行。
< th>	定义表格内的表头单元格。这部分特征是由 `scope` 和 `headers` 属性准确定义的。
< thead>	定义了一组定义表格的列头的行。
< tr>	定义表格中的行。同一行可同时出现 <td>（数据单元格）和 < th>（列头单元格）元素。

前端