blog
blog copied to clipboard
Published
20 hours ago •
Qingquan-Li
Qingquan-Li
HTML_1 HTML基础
HTML：Hyper Text Markup Language （超文本标记语言），超文本包括：文字、图片、音频、视频、动画等。
本博客主要介绍 HTML 的基础知识及相关标签的使用。
HTML发布的正式历史版本
- HTML2.0（1995年11月）
- HTML3.2（1997年1月）
- HTML4.0（1997年12月）
- HTML4.01（1999年12月）
- XHTML1.0（2000年1月）
- XHTML1.1（2001年5月）
- XHTML2.0 中途放弃，未完成
- HTML5（2014年10月28日）
在 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：
网页头部 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 优化：
[html] view plain copy
<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> 百度 Google |
| 大于号(>) | > （greater than） |
如果时间>晚上6点，就坐高铁去深圳 如果时间>晚上6点，就坐高铁去深圳 |
| 小于号(<) | < （less than） |
如果时间<早上7点，就开飞机去上学 如果时间<早上7点，就开飞机去上学 |
| 引号(") | " （quot） |
W3C 规范中，HTML 的属性值必须用成对的 " 引起来 |
| 版权符号© | © |
©2016-2017 FatliTalk 版权所有 ©2016-2017 FatliTalk 版权所有 |
图像标签
常见的图像格式：
| 图像类型 | 优点 | 缺点 |
|---|---|---|
| *.jpg | 体积小，较清晰.适合色彩丰富的图像 | 有损压缩，画面失真 |
| *.gif | 体积小、支持动画图片，较为常用的网页图片类型 | 支持有限的透明度,效果不如其他PNG图片 |
| *.bmp | 支持24位颜色深度，兼容性好 | 不支持压缩，容量大 |
| *.png | 最新的图片格式，兼有GIF和JPG的优势 | 部分浏览器（IE.6）不支持透明 |
<img> 标签：
语法：
<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标签的英文全称及简单功能描述
MDN HTML（全部）元素参考： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
| 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>~<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 /> |
水平分界线 分隔线的粗细 ＜hr size=点数 /＞ 分隔线的宽度 ＜hr size=点数或百分比 /＞ 分隔线对齐方向 ＜hr align="#" /＞ ， # 号可为 left：表向左对齐（预设值）； center：表向中对齐； right：表向右对齐 分隔线的颜色 ＜hr color=#rrggbb /＞ 实心分隔线 ＜hr noshade /＞ |
<sup> |
上标 |
<sub> |
下标 |
<b> |
粗体 |
<i> |
斜体 |
<strong> |
强调(粗体) |
<em> |
强调(斜体) |
<strong> 和 <em> |
是表达要素，表示强调的文本 |
<b> 和 <i> |
是视觉要素，仅表示这里应该用粗体 or 斜体显示 |
<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> 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
