HTML 笔记
基本语法
结构
下面是一个简单的 HTML 例子：
<!DOCTYPE html>
<!--我是注释-->
<html>
<head>
<meta charset='utf-8'>
<!--meta 包含元数据-->
<title>
test
</title>
<!--title 描述文档标题-->
</head>
<body>
<h1>
标题
</h1>
<p>
第一段
</p>
<p>
第二段
</p>
<p>
第三段
</p>
</body>
<!--body 描述可见页面信息-->
</html>元素
HTML 文档由 元素 定义，其基本格式为：
<标签>
内容
</标签>或着写为一行也可以，例如：
<标签>内容</标签>开始标签称为 起始标签，结束标签称为 闭合标签。 其实标签和闭合标签的唯一区别在于斜杠 /。
由于大小于号被拿去作标签标识符，所以 HTML 中的大小于号分别为 < 和 >。
没有任何内容的元素叫做空元素，其格式为：
<标签 />例如:
<br />属性
元素可以具有属性，例如 HTML 链接：
<a href="www.bing.com">必应</a>属性的值应该被包括在双引号内（单引号也可以，但建议使用双引号）。属性的顺序没有强制要求。
| 属性 | 描述 |
|---|---|
class |
定义类名（用于 CSS） |
id |
定义元素编号 |
style |
规定行内样式 |
title |
描述额外信息 |
基本元素
标题
标题通过 <h1> 到 <h6> 标签定义。例如：
<h1>我是标题</h1>
<h6>我是最小的标题</h6>分割线
<hr />
<!--horizontal rule-->换行符
<br />
<!--blank rule-->格式化
<b>粗体字</b>
<i>斜体字</i>
<em>着重文字</em>
<small>小号字</small>
<strong>加重语气</strong>
<sub>下标</sub>
<sup>上标</sup>
<ins>插入字（下划线）</ins>
<del>删除字</del>
<code>代码</code>
<var>公式字</var>链接
<a href="url">链接文本</a>ID 属性可以实现书签的功能，例如：
<a id="begin">开始</a>
<a href="#begin">跳转到开始</a>点击链接就会跳转到“开始”元素所在的地方。
头部
<head> 元素包含了所有头部标签元素，定义了整个 HTML 文档的行为。一般 <head> 元素的内容不会显示在页面中。
| 头部子元素 | 描述 |
|---|---|
<title> |
文档的标题 |
<base> |
所有 url 的默认地址 |
<meta> |
文档元数据 |
<link> |
文档与外部资源间的关系 |
<style> |
样式文件引用地址 |
<script> |
脚本文件 |
<title> 元素：
<title> 元素不仅可以显示文本，也可以显示图片。
显示时，还要在 <head> 中添加 <link> 标签。例如：
<link rel="shortcut icon" href="图片url">
<title>这是一个带图片的标签</title><base> 元素：描述了基本的链接地址或链接目标，该标签作为 HTML 文档中所有的链接标签的默认链接。例如：
<base href="//somewhere.com/" target="_blank">如果在下面添加一个图片和一个链接：
<img src="pic.jpg" />
<br />
<a href="//somewhere.com">链接地址</a>则 HTML 会自动将图片的地址补全为 //somewhere.com/pic.jpg，且点击地址会自动在新窗口打开，因为 base
元素已经作出了定义。
<link> 元素：<link> 用于定义文档与外部资源之间的关系，通常用于链接到样式表，例如：
<link rel="stylesheet" type="text/css" href="mystyle.css"><meta> 元素：<meta> 元素提供了元数据。元数据会被浏览器解析，用于搜索引擎、浏览器行为等等。
例如：
<meta name="keywords" content="几何, 代数">
<!--为搜索引擎定义关键词-->
<meta name="description" content="数学知识">
<!--为网页添加描述-->
<meta name="author" content="ncc79601">
<!--定义作者-->
<meta http-equiv="refresh" content="30">
<!--每 30 秒自动刷新-->图片
定义图片的格式为：
<img src="url" alt="图片无法加载">src 属性定义了图片的 url，alt 属性定义了图片加载不出来的时候应该显示的替换信息。
同时，图片的高度和宽度也可以自定义，例如：
<img src="url" alt="picture" height="1920" width="1080">图片所处的位置可以自定义，例如：
<img src="url" alt="picture" style="float:right">这个图片会悬浮在文本右侧。
同时，利用 <map> 标签可以创建图像映射（可点击区域），例如：
<img src="planets.gif" width="150" height="100" 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>可以看出，<map> 中的 <area> 标签定义了图片可供点击的区域，以及点击后的行为。<area> 元素的属性定义如下：
| 形状 | 代码 |
|---|---|
| 矩形 | shape="rect" coords="x1, y1, x2, y2" |
| 圆形 | shape="circle" coords="x, y, r" |
| 多边形 | shape="poly" coords="x1, y1, x2, y2..." |
border 属性可以为图片添加边框，例如：
<img src="url" alt="picture" border="5" style="float:right">图片也可以创建链接，只需要把图片放到 <a> 标签里就可以了。
表格
表格以 <tabel> 标签开头，后可以跟以下属性：
| 属性 | 描述 |
|---|---|
border |
边框线宽 |
cellspacing |
单元格间距 |
cellpadding |
单元格边距 |
<caption> 标签描述标题，每一行以 <tr> 标签开头，每一单元格以 <td> 标签开头，表头以 <th> 标签开头。每个单元格也可以添加 colspan 属性，代表跨几个单元格。例如：
<table border="1">
<!--此处可添加标题-->
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>显示效果为：
| 1 | 2 |
|---|---|
| A | B |
| C | D |
当然，此处无法把边框显示出来。
列表
HTML 支持有序、无序和定义列表。列表支持相互嵌套。
有序列表：使用 <ul>（unordered list）标签，列表的每一项用 <li> 标签（list item）。例如：
<ul>
<li>max</li>
<li>annie</li>
</ul>显示为：
- max
- annie
有序列表：使用 <ol>（ordered list）标签。例如：
<ol>
<li>max</li>
<li>annie</li>
</ol>显示为：
- max
- annie
自定义列表：使用 <dl>（defined list）标签；每个列表项用 <dt> 开始，每个定义以 <dd> 开始。例如：
<dl>
<dt>max</dt>
<dd>- a boy</dd>
<dt>annie</dt>
<dd>- a girl</dd>
</dl>显示为：
max
- a boy
annie
- a girl
内联与区块
块级元素：对于块级元素，浏览器显示时会以新行开始，例如 <h1> 元素。
<div> 元素是块级元素；而 <span> 元素是内联元素。两者皆无特定含义，但可用于组合其他元素（分组），方便 CSS 设置样式属性。
表单和输入
表单是一个包含表单元素的区域，用户可以在表单元素中输入内容。格式为：
<form>
<!--表单元素-->
</form>一般表单元素的格式为：
<input type="type" name="name" value="val">表单元素的属性不会直接显示。
文本域：最简单的输入框。type 属性为 "text"，value 属性为默认文本（提示用户输入内容）。例如：
First name:<input type="text" name="firstname">密码域：输入时不会明文显示，而是用星号或者原点替代。type 属性为 password，value 属性为默认文本。例如：
Password:<input type="passwrod" name="pwd">单选按钮：顾名思义。type 属性为 radio，value 属性为选项值。例如：
<input type="radio" name="sex" value="boy">boy
<br />
<input type="radio" name="sex" value="girl">girl复选框：顾名思义。type 属性为 checkbox，value 属性为选项值。例如：
<input type="checkbox" name="phone" value="nokia"> Nokia
<br />
<input type="checkbox" name="phone" value="xperia"> Xperia提交按钮：顾名思义。type 属性为 submit，value 属性为提交按钮上的文字。
按下提交按钮后，表单的内容会被传送到另一个文件以作后续处理。在 <form> 标签添加属性可以定义提交按钮按下后的行为。例如：
<form name="survey" action="html_form_action.php" method="get">
Username:<input type="text" name="user">
<br />
Password:<input type="password" name="pws">
<br />
<input type="submit" Value="Login">
</form>重置按钮：顾名思义。type 属性为 reset，value 属性为重置按钮上的文字。
按钮：顾名思义。type 属性为 button，value 属性为按钮上的文字。
和提交按钮一样，其行为也被 <form> 标签的属性定义。例如：
<form action="">
<input type="botton" value="OK">
</form>当然还有很多其他的表单元素，需要用到时可以查询。
框架
框架元素支持在 HTML 中显示另外一个页面。标签为 <iframe>。例如：
<iframe src="//www.bing.com" frameborder="0" height="200" width="300"></iframe>这里 不能用 <iframe ... /> 的写法，我也不知道为什么。
同时，还可以让一个超链接显示在 iframe 中，例如：
<iframe src="//www.bing.com" name="iframe_1"></iframe>
</br>
<a href="//www.bilibili.com" target="iframe_1">点击一下跳转到 Bilibili</a>脚本
涉及到 JavaScript 相关内容。脚本以 <script> 标签开始，<noscript> 定义无法运行脚本时显示的信息。JavaScript 常用于动态内容更新等。
没学 CSS 和 JavaScript 的前提下，HTML 的基础内容就已经学完了。搭建一个上世纪的页面应该还是能做到的吧。