——HTML：Hyper Text Markup Language （超文本标记语言），超文本包括：文字、图片、音频、视频、动画等。
HTML发布的正式历史版本
- HTML2.0
- HTML3.2
- HTML4.0
- HTML4.01
- XHTML1.0
- XHTML1.1
- XHTML2.0 中途放弃，未完成
- HTML5
在HTML 4.01之后，W3C提出了XHTML 1.0。XHTML 1.0与HTML 4.01其实是一样的。主要不同之处，就是XHTML 1.0要求使用XML语法：
- 所有属性都必须使用小写字母，所有元素也必须使用小写字母
- 所有属性值都必须加引号
- 使用结束标签，例如对img和br要使用自结束标签
W3C标准
W3C：World W ide Web Consortium （万维网联盟）
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
http://www.w3.org/ 和 http://www.chinaw3c.org/
W3C标准包括:
- 结构化标准语言（XHTML 、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript ）
HTML基本结构
网页头部 head（用于设置网页的一些属性）
主体部分 body（网页内容编辑区）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页标题</title>
</head>
<body>
网页内容
</body>
</html>
页面规范声明：
上面“DOCTYPE”文档类型的声明 （以 XHTML1.0 为例），它约束 HTML 文档结构，检验是否符合相关 Web 标准，同时告诉浏览器，使用哪种规范来解释这个文档中的代码。DOCTYPE 声明须写在第一行。
XHTML 1.0 规定了 3种级别的声明：Strict（严格类型）；Transitional（过渡类型）也称松散（loose）声明，最常用；Frameset（框架类型），Strict 声明中不允许使用框架，当页面中需要使用框架时，则使用该声明（H5 不再支持 frame框架：frameset、frame、noframes元素，但支持 iframe 内联框架）。
另外，HTML 5 的 DOCTYPE 声明和头部 head 更加简洁：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
网页内容
</body>
</html>
网页编码设置：
<meta>标签，提供有关网页的元信息（meta-information）。
使用该标签描述网页更具体的摘要信息，包括文档内容类型、字符编码信息（不设置可能导致乱码）、搜索关键字、网站提供的功能和服务的详细描述等。
可用于 SEO 优化：
<meta charset="utf-8">
<meta name="Keywords" content="FatliTalk，IT博客" />
<meta name="Description" content="FatliTalk by Fatli，关注人文与科技，讨论关于技术、关于世界。" />
注意：
- 常用字符编码：gb2312：简体中文，一般用于包含中文和英文的页面；utf-8：包含全世界所有国家需要用到的字符
- 页面编码应与页面文件保存时的编码一致
网页基本标签元素
| 标签 | 说明 |
| <h1>~<h6> | 标题标签（head） |
| <p> | 段落标签（paragraph） |
| <br /> | 换行标签（break row） |
| <hr /> | 水平线标签（horizontal row ） |
| <em> | 斜体标签 （emphasized） |
| <strong> | 加粗标签（stronger emphasis） |
注释和特殊符号
<!-- HTML注释内容 -->
| 特殊符号 | 字符实体 | 示例 |
| 空格 | （non-breaking space） | <a href="#">百度</a> <a href="#">Google</a> |
| 大于号(>) | > （greater than） | 如果时间>晚上6点，就坐高铁去深圳 |
| 小于号(<) | < （less than） | 如果时间<早上7点，就开飞机去上学 |
| 引号(") | " （quot） | W3C规范中，HTML的属性值必须用成对的"引起来 |
| 版权符号© | © | ©2016-2017 FatliTalk 版权所有 |
图像标签
常见的图像格式
| 图像类型 | 优点 | 缺点 |
| *.jpg | 体积小，较清晰.适合色彩丰富的图像 | 有损压缩，画面失真 |
| *.gif | 体积小、支持动画图片，较为常用的网页图片类型 | 支持有限的透明度,效果不如其他PNG图片 |
| *.bmp | 支持24位颜色深度，兼容性好 | 不支持压缩，容量大 |
| *.png | 最新的图片格式，兼有GIF和JPG的优势 | 部分浏览器（IE.6）不支持透明 |
图像标签
语法：
<img src="path" alt="text" title="text" width="x" height="y" />
alt="text"：图像的替代文字
title="text"：鼠标悬停提示文字
超链接标签
语法
<a href="path" target="目标窗口位置"> 链接文本或图像 </a>
href：链接地址的路径。Hypertext Reference，超文本引用。
target：指定链接在哪个窗口打开，常用取值：_self（默认值，自身窗口）、_blank（新建窗口）
示例：
<a href="studio.html" target="_blank">叁月壹科技工作室</a>
<a href="studio.html" target="_blank"><img src="image/marchOne.jpg" alt="叁月壹科技工作室 " title="叁月壹科技工作室 " /></a>
根据链接的地址指向站外文件还是站内文件，链接地址又分为绝对路径和相对路径。
- 绝对路径：指向目标地址的完整描述，一般指向站点外的文件。
例如，
<a href="http://www.sohu.com/index.html">搜狐</a>
- 相对路径：相对于当前页面的路径，一般指向本站点内的文件，所以一般不需要一个完整的 URL 地址的形式。
例如没，
<a href="user/login.html">登录</a>，表示链接地址为当前页面所在路径的“user”目录下的“login.html”页面。
另外，站内使用相对路径是常用的两个符号：“../”表示当前目录的上级目录，“././”表示当前目录的上上级目录。
URL（Uniform Resource Locator）：
统一资源定位符，唯一能识别 Internet 上具体的计算机、目录或文件夹位置的命名约定。
示例：
http://www.example.com/news/201701/newslist.jsp?page=3
协议部分+主机地址+目标资源地址+传递的参数
注意：当超链接 href 链接路径为“#”时，表示空链接，如<a href="#">首页</a>
锚链接：
- 从A页面的甲位置跳转到A页面中的乙位置(同一页面)
- 从A页面的甲位置跳转到B页面中的乙位置(两个页面)
创建步骤（甲→指向→乙）：
- 创建跳转标记
<a name="marker">乙位置</a>
- 创建跳转链接
<a href="#marker">甲位置</a>
同一页面锚链接跳转示例：
<a href="#register">用户注册帮助</a>
<a name="register">用户注册帮助文档</a>
A页面到B页面锚链接跳转示例：
<a href="help.html#register">用户注册帮助</a>
<a name="register">用户注册帮助文档</a>
附 常用HTML标签的英文全称及简单功能描述：
| HTML标签 | 英文全称 | 简单功能描述 |
| <a> | anchor | 定义锚 |
| <abbr> | abbreviation | 定义缩写 |
| <acronym> | 定义只取消首字母的缩写 | |
| <address> | 定义地址元素 | |
| <area> | 定义图像映射内部的区域 | |
| <b> | bold | 定义粗体字 |
| <base> | 定义页面当中的所有链接的基准链接 | |
| <bdo> | bidirectional override | 定义文字的显示方向 |
| <big> | 定义大号字 | |
| <blockquote> | 定义长的引用 | |
| <body> | 定义body元素 | |
| <br ／> | break | 插入一个回车 |
| <button> | 定义按钮 | |
| <caption> | 定义表格标题（ 通常这个标题会被居中于表格之上） | |
| <cite> | citation 定义引用 | |
| <code> | computer code | 定义计算机代码文本 |
| <col> | column | 定义用于表格列的属性 |
| <colgroup> | column group | 定义表格的列组 |
| <dd> | definition description | 定义描述列表中的术语/名称（定义内容）。 |
| <del> | delete | 定义被删除的文本 |
| <div> | division | 定义文档中的节 |
| <dfn> | defining instance | 定义定义的项目（实例） |
| <dl> | definition list | 定义一个描述列表【<dl><dt><dd>】 |
| <dt> | definition term | 定义描述列表的定义术语/名称（定义列表项）。 |
| <em> | emphasized | 定义强调文本 |
| <fieldset> | 定义域结构 | |
| <form> | 定义表单 | |
| <frame> | 定义框架的子窗口 | |
| <frameset> | 定义框架集 | |
| <h1>to<h6> | heading | 定义标题1到标题6 |
| <head> | 定义关于文档的信息 | |
| <hr ／> | horizontal | 定义水平线 |
| <html> | hypertext markup language | 定义html文档 |
| <i> | italic | 定义斜体字 |
| <iframe> | inline frame | 定义内联框架 |
| <img> | image | 定义图像 |
| <input> | 定义输入域 | |
| <ins> | inserted | 定义被插入的文本 |
| <kbd> | keyboard | 定义键盘文本 |
| <label> | 定义针对表单控件的标签 | |
| <legend> | 定义框架集的标题 | |
| <li> | list item | 定义列表的项目 |
| <link> | 定义资源引用 | |
| <map> | 定义图像映射 | |
| <meta> | 定义元信息 | |
| <noframe> | 定义无框架的节 | |
| <noscript> | 定义无脚本的节 | |
| <object> | 定义内嵌对象 | |
| <ol> | ordered list | 定义有序列表 |
| <optgroup> | option group | 定义选项组 |
| <option> | 定义下拉列表的选项 | |
| <p> | paragraph | 定义段落 |
| <param> | 定义对象的参数 | |
| <pre> | preformatted | 定义预格式文本。<pre> 标签的一个常见应用就是用来表示计算机的源代码。 |
| <q> | quotation | 定义短的引用 |
| <samp> | sample | 定义计算机代码样本 |
| <script> | 定义脚本 | |
| <select> | 定义选择列表 | |
| <small> | 定义小字体文本 | |
| <span> | 定义文档中的节 | |
| <strong> | stronger emphasis | 定义强调文本 |
| <style> | 定义样式的定义 | |
| <sub> | subscript | 定义下标文本（下标） |
| <sup> | superscript | 定义上标文本（上标 ） |
| <table> | 定义表格 | |
| <tbody> | table body | 定义表格的主体部分（用于表单语义化） |
| <td> | table data cell | 定义表格单元 |
| <textarea> | 定义文本区域 | |
| <tfoot> | table foot | 定义表格的脚注 |
| <th> | table header cell | 定义表格的表头单元格（类似<td>用于表单语义化） |
| <thead> | table head | 定义表格的标题 (<title>:定义文档的标题)（用于表单语义化） |
| <tr> | table row | 定义表格的行 |
| <tt> | teletype | 定义打字机文本（等宽字体(打印机字体)） |
| <ul> | unordered list | 定义无序列表 |
| <var> | variable | 定义变量 |
注意：
| head | 头信息 |
| title | 标题 |
| br | 换行 |
| hr |
水平分界线
|
| sup | 上标 |
| sub | 下标 |
| b | 粗体 |
| i | 斜体 |
| strong | 强调(粗体) |
| em | 强调(斜体) |
| <strong>和<em> | 是表达要素，表示强调的文本 |
| <b>和<i> | 是视觉要素，仅表示这里应该用粗体 ／ 斜体显示 |
| u | 下划线 |
| tt | 等宽字体(打印机字体) |
|
<ol>
<li></li>
<li></li>
</ol>
| 有序列表 |
|
<ul>
<li></li>
<li></li>
</ul>
| 无序列表 |
|
<dl>
<dt>
<dd></dd>
<dd></dd>
</dt>
</dl>
|
定义列表
<dl> definition list 定义一个列表
<dt> definition term 定义列表项
<dd> definition description 定义内容
|
|
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!--使用语义化的标签-->
<table width="270">
<caption>学生信息表</caption>
<thead>
<tr>
<th>姓名</th>
<th>职务</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">小明</td>
<td align="center">班长 </td>
</tr>
</tbody>
</table>
|
表格
<table> 定义表格
<tr> table row 定义表格的行
<td> table data cell 定义表格单元
<caption> 定义表格标题。通常这个标题会被居中于表格之上。
<thead> table head 定义表格的标题 （<title>:定义文档的标题）
<th> table header cell 定义表格的表头单元格
<tbody> table body 定义表格的主体部分
|
| <a href=#> | 超链接 Hypertext Reference，超文本引用 |
| <img src=#> | 图片链接 |
| form | 交互式表单 |
| input | 输入表单控件 |
======================================================优雅的分割线=================================
——END
扫一扫
2802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
