HTML 指的是超文本标记语言: HyperText Markup Language
HTML 网页结构
下面是一个可视化的HTML页面结构：
<html>
<head>
<title>页面标题</title>
</head>
<body>
</html>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
</body>
 |
只有 <body> 区域 (白色部分) 才会在浏览器中显示。 |
|---|
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>. - <title> 元素描述了文档的标题
- <title>文档标题</title>
- <style> 标签定义了HTML文档的样式文件引用地址.
- <style type="text/css">
body {background-color:yellow}
p {color:blue}
</style> - <meta charset="utf-8"> 常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。如设置文本为UTF-8。
- <link> 标签定义了文档与外部资源之间的关系。
- <link rel="stylesheet" type="text/css" href="mystyle.css">
- <script>标签用于加载脚本文件，如： JavaScript。
- <noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
- <base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
- <base href="http://www.runoob.com/images/" target="_blank">
- <body> 元素包含了可见的页面内容
- <h1> - <h6> 元素定义一个大标题
- <p> 元素定义一个段落
- <a> 元素定义一个链接
- <img> 来定义一个图片
- <br> 换行
- <hr >标签定义水平线
- <div> 定义了文档的区域，块级 (block-level)
- <span> 用来组合文档中的行内元素， 内联元素(inline)
- <iframe> 定义一个内联的iframe框架。frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框。
- <!-- 这是一个注释 -->
- ----------------------文字格式标签------------------------------
- <b> 定义粗体文本
- <em> 定义着重文字
- <i> 定义斜体字
- <small> 定义小号字
- <strong> 定义加重语气
- <sub> 定义下标字
- <sup> 定义上标字
- <ins> 定义插入字
- <del> 定义删除字
- ----------------HTML 引文, 引用, 及标签定义-------------
- <abbr> 定义缩写
- <address> 定义地址
- <bdo> 定义文字方向
- <blockquote> 定义长的引用
- <q> 定义短的引用语
- <cite> 定义引用、引证
- <dfn> 定义一个定义项目。
- ---------------------HTML "计算机输出" 标签-------------
- 标签 描述
- <code> 定义计算机代码
- <kbd> 定义键盘码
- <samp> 定义计算机代码样本
- <var> 定义变量
- <pre> 定义预格式文本
- ---------------<table>表格标签----------------
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
| <colgroup> | 定义表格列的组 |
| <col> | 定义用于表格列的属性 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
HTML 列表标签
| 标签 | 描述 |
|---|---|
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
| <dl> | 定义列表 |
| <dt> | 自定义列表项目 |
| <dd> | 定义自定列表项的描述 |
HTML 表单标签
New : HTML5新标签
| 标签 | 描述 |
|---|---|
| <form> | 定义供用户输入的表单 |
| <input> | 定义输入域 |
| <textarea> | 定义文本域 (一个多行的输入控件) |
| <label> | 定义了 <input> 元素的标签，一般为输入标题 |
| <fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
| <legend> | 定义了 <fieldset> 元素的标题 |
| <select> | 定义了下拉选项列表 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
| <button> | 定义一个点击按钮 |
| <datalist>New | 指定一个预先定义的输入控件选项列表 |
| <keygen>New | 定义了表单的密钥对生成器字段 |
| <output>New | 定义一个计算结果 |
块级元素(block)特性：
- 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
- 和相邻的内联元素在同一行;
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
- address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：
- a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
- applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用：
利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
- display:block -- 显示为块级元素
- display:inline -- 显示为内联元素
- display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
标签常用属性：
class属性：为html元素定义一个或多个类名（classname）(类名从样式文件引入 )id 属性： 定义元素的唯一id
style 属性： 规定元素的行内样式（inline style）
title属性：描述了元素的额外信息 (作为工具条使用)
--------------<a>内属性-------------
href 属性：<a> 元素中地址链接。也可使用邮箱链接，发送邮件。
| 参数 | 描述 |
|---|---|
| mailto:[email protected] | 邮件接收地址 |
| cc=[email protected] | 抄送地址 |
| bcc=[email protected] | 密件抄送地址 |
| subject=subject text | 邮件主题 |
| body=body text | 邮件内容 |
| ? | 第一个参数分隔符 |
| & | 其他参数分隔符 |
target 属性:<a> 元素中设置链接文件在何处显示。如target="_blank"表示链接文本在新的页面显示。
---------------------<img>内属性-----------------
src源属性：源属性的值是图像的 URL 地址。<img src="url" alt="some_text">
alt属性：alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。
height（高度） 与 width（宽度）属性：用于设置图像的高度与宽度。
CSS使用：
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性（对于局部样式设定）
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用 - 使用外部 CSS 文件（最优）
HTML 字符实体
HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。
HTML颜色值
HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。