Ability Stack
本文档的核心目的在于使得读者能够写出一个基础的原生HTML4.0 document. 其中最重要的是理解链接、图像、表格、列表、框架, 以及表单这几个重要的HTML要素的使用.
具体而言, 本文档的完整阅读者将具备以下能力:
理解HTML的基本概念, 包括什么是HTML、元素和标签的意义, 以及能够配置HTML开发环境.
理解HTML文档的基础结构性标签: html, head, body, doctype, title,style, script的结构意义, 以及注释的语法.
理解重要的内容标签title, h1~h6, p, 理解重要的格式化标签br, hr
理解块级元素和内联元素的概念, 以及与此相关的div和span的使用.
[!] 理解链接a、图像与映射img, map、表格table, th, td, th, caption、列表ul, ol, li、框架frameset, iframe等非常重要的HTML要素的使用方法.
理解表单form, input的使用, 由于这方面涉及到与服务器端的交互, 建议与PHP方面的内容结合理解.
理解首部元素中的base.
理解首部元素中的meta, 其“name content”键值对和“http-equiv content”在应用情景上的差异, 以及常见的键值.
理解传统的通用样式类属性bgcolor, background, align, width, height, 和一些样式类标签. 这些样式类属性在现在大多数都已经被CSS取代因而不再推荐了, 而大部分样式类标签甚至在新的HTML5标准中被废弃, 但是通过原生HTML的写法仍然不失为一种有趣的实现方式.
理解短语元素的使用.
理解防止语义冲突的字符实体技术.
充分理解本文档内容的读者应当能够独立完成后面的第一部分练习题, 而第二部分的练习题则和其他文档的内容有关, 或者需要查找相应的参考资料才能够完成.
Reference
本文档使用了来自以下书籍/web站点的参考资料:
http://www.w3school.com.cn/ HTML教程部分
超文本标记语言(HyperText Markup Language, HTML)是用来描述网页1的一种标记语言. 注意它的属性是一种标记语言(markup language)而不是编程语言(programming language). 标记语言的特点是使用一套标记标签(markup tag)来描述它所想要表达的内容, 如HTML, XML, 以及Markdown等等.
浏览器的任务就是根据HTML内容来解释网页, 渲染出多样的网页效果.
一个HTML页面由各种元素(element)嵌套组合而成. 元素由标签(tag)及其内容构成. 为了明确一个元素的边界, HTML中的绝大部分标签成对出现, 分别称为开始标签(start tag)和结束标签(end tag), 或者称为开放标签(opening tag)和闭合标签(closing tag), 结束标签是对应的开始标签在标签名称前加上反斜杠/. 开始标签和结束标签之间的部分就是这个元素的内容.
有一些元素没有内容, 称为空内容(empty content), 这时候就不需要结束标签, 但是根据严格的XHTML规范, 任何标签都必须关闭, 这时我们需要在开始标签的最后加上/强调闭合的语义.
<br />
<img src="picture.jpg" />元素的属性规定了该元素的一些性质, 例如表现形式(也就是样式)2、所指向URL等等, 属性写在开始标签内, 例如.
<p id="p1" font-color="red"></p>注意严格意义上属性值都要由引号予以括起. 标签名、属性、属性值都是不区分大小写的. 建议均采用小写.
尽管元素是包含标签在内的广义概念, 但是由于其抽象性, 实际上在叙述具体标签使用的时候, 往往并不会用到“元素”这个词, 而是直接叙述更为实在的“标签”. 应予以注意.
HTML元素根据样式的不同可以划分为块级元素(block-level element)和内联元素(inline element), 块级元素通常占据单独的一“块”, 每一块级元素都至少占据一行, 并且在其内容前后都有一空行与其他元素分隔开(不需要手动添加<br />); 而内联元素则嵌在块级元素中. 因此: 块级元素可以包含块级元素或内联元素, 内联元素只能包含内联元素.
块级元素<div>和内联元素<span>没有特殊的语义, 它们一般用于标志HTML文档中的不同区域, 以便于统一进行样式管理.
HTML语义化视角认为, 标签标志着一种语义, 我们应当依据标签蕴含的语义而不是表观样式来构建HTML页面. 尽管浏览器会赋予内容标签一个样式, 但浏览器的默认样式不应该成为选择这个标签的理由, 因为你永远都可以用CSS把内容规定为任何你希望的样式. 标签和样式并没有直接的关联. 语义化有两个优势:
<h1>的重要程度比<h2>高, 则搜索引擎在分配权重时(关键词检索)将更重视<h1>里的内容.一个常规的HTML页面以<html>作为最外层标签, 表示整个HTML页面. 只有<!DOCTYPE>标签位于html标签对之前, 其他内容均位于html标签对之间. <head>标签标志页面头部. <body>标签标志页面的主体, 在浏览器上显示的内容都包含在该标签对内.
<!DOCTYPE>用于声明文档类型, 必须写在第一行. 声明紧跟在标签名后面. <!DOCTYPE>虽然格式类似于开始标签, 但并不是一个真正的标签, 因此没有结束标签.
<!DOCTYPE html>
<html>
<head>
<!-- head goes here... -->
</head>
<body>
<!-- body goes here... -->
</body>
</html><title>用于设定当前页面的标题, 这会在三个地方显示: 浏览器的标签页上、页面被收藏到收藏夹中的默认标题, 以及显示在搜索引擎结果中的标题. 由于和SEO紧密相关, 因此标题的设置是非常重要的.
<base>的href属性用于确定页面全局URL基准地址.
<base href="http://www.bilibili.com/">
<a href="video/av5686929/">
<!-- equivalent to
<a href="http://www.bilibili.com/video/av5686929/">
--><base>的taget属性确定页面全局链接跳转的页面开启模式
<base target="_blank">也可以将target设置成某个框架.
<link>和<style>用于样式导入和配置.
元信息标签<meta>同样位于<head>中, 用于声明该页面的有关信息. 其内容为空, 且没有闭合标签. 声明的内容在开始标签以键-值对方式体现. 格式为:
<meta name=[key] content=[value] />
<meta http-equiv=[key] content=[value] />第一种格式用于告知搜索引擎该页面的内容, 多用于搜索引擎优化, 其中常用的key有keywords(声明这个网页的关键词)和description(对这个网页进行描述), 当搜索引擎对页面进行检索时, 会主动寻找<meta>中的这两个key, 利用它们来了解这个网页的特点, 为结果排序提供参考. 搜索引擎通常会将网页的description显示在搜索结果中.
第二种格式则用于告知浏览器页面的基本信息, 例如声明该页面所用的字符集, 常用的key有content-type声明页面的MIME类型及所用字符集, content-language声明页面语言等.
不同的键值对必须放在不同的<meta>标签之中, 不允许在一个标签内放多个键值对.
注意, 如果在首部没有用content-type显式声明页面的MIME类型, 则默认被解释为html, 即default状态下的meta是
<meta http-equiv="content-type" content="text/html">但是我们会发现这两种方式意义的分界并不是那么严格, 例如name格式可以使用一种名为renderer的key, 这个key是用来建议双核浏览器默认情况下用哪一种方式来渲染页面的, 可选的content有三项, 分别指定webkit内核、IE兼容模式和IE标准模式(奇特的是, 许多银行网站似乎都没有令renderer=ie-stand, 看来双核浏览器实现银行网站的自动切换似乎并不是靠这个renderer).
所以说其实也不必机械地看待name和http-equiv的区分, 毕竟协议都是server同搜索引擎/浏览器之间可以自行商定的, 只是一般来说它们分别使用name和http-equiv作为公认标识而已.
默认情况下浏览器一般会将刚浏览过的页面缓存在本地, 以避免短时间内重复加载所造成的资源浪费. 但如果页面因具有时效性等原因希望建议3浏览器每次访问时都重新加载页面, 则需要在meta标签中进行以下声明:
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />由于不同浏览器的性格不同, 可接受建议不同, 因此在必要时应当尽量写全.
<h1>~<h6>分别表示1~6级的标题, <p>则标志一个段落.
<!-- This is a comment -->Notice that there is an exclamation point ! in the start tag, but not in the end tag. As in other programming languages, we can use the comment tag to temporary disable some codes for debugging.
浏览器在渲染HTML时会自动忽略其中多余的空格和换行, 所有的换行和空格不论在HTML原始文档中出现了多少次都当做一个空格来处理. 因此在源代码中进行的排版不会显示在前端, 这时如果我们需要换行就需要特殊的标签<br />, 注意到由于其是空标签因此在开始时应予以闭合, 另外<hr />用于插入水平线, 用于插入空格.
事实上这里的 是一种用于代替空格的字符实体(entity).
链接是万维网的精髓之所在, 它使得一个资源可以包含指向其他资源的内容, 使得万维网称为一个超文本系统, 便于用户访问.
HTML利用标签<a>来创建一个链接, 其href属性指明链接的URL(严格地说是URI, 关于URI和URL的语法参见Computer Network - HTTP potocol部分), 例如, 我们可以创建一个指向google首页的链接:
<a href="http://www.google.com">Click me to enter Google!</a>在没有指定特殊CSS的情况下, 浏览器会将作为超链接的文字(在尚未被点击的情况下)以蓝色+下划线显示, 以突出这是一个链接.
现在我们假设有一个非常长的HTML页面, 用户如果要迅速找到他所需要的资源就不太方便, 一个自然的想法是在建立一个目录, 并且将其放在页首, 用户点击目录中的某一个内容时就可以自动跳转到相应的部分(这也就是大部分百科词条的通用做法, 例如wikipedia和百度百科), 那么这要如何实现呢? 首先我们必须对跳转的位点建立一个锚(anchor). Anchor同样也是以<a>标签来创建的, 本质上锚就是一个设定了name属性的<a>标签:
<a name="history">这样我们就建立了一个名为history的锚, 之后就可以在页面的其他地方创建链接来跳转到这个anchor的位置上(同样也是使用href属性, 但锚的名称前必须加上#, 以告知浏览器这是一个anchor).
<a href="#history">页面间跳转和页面内跳转可以结合起来使用, 即跳转到另外一个页面的某个anchor上.
如果从页面外部引用了一个不存在的锚, 不会发生错误, 只是停留在页面开头; 而如果从内部引用了一个不存在的锚则什么也不做.
最后<a>标签还有一个target属性, 默认情况下点击链接将会直接在本页面上打开新页面, 而设定target="_blank"以后则可以使页面在新的选项卡中打开.
图像由<img>标签标志, 该标签没有内容. src属性指定图像在服务器上的位置. 图片的宽度和高度分别由width属性和height属性指定, 如果只指定了其中一个而没有指明另外一个的话, 则原图像将按比例缩小显示.
alt属性用于浏览器加载图片失败时的文字提示, 有些浏览器将鼠标移到图片上也会显示alt属性所定义的提示文字.
<img>标签也可以作为<a>的内容, 则当用户点击图片时会跳转到指定的href, 例如, 以下标签使得用户点击时直接访问图片的源地址:
<a href="picture.jpg"><img src="picture.jpg" /></a>值得注意的是, img标签中的src不受同源策略的限制, 也就是说允许对其他服务器上的资源发起访问请求, 浏览器不会对其进行检查. 这也就意味着我们可以首先通过JS获取用户的某些信息(尤其是cookie)并且通过将其嵌入到img标签的src属性中的方式对自己原先已经部署好的服务器发起GET请求, 从而得到用户的信息.
<map>标签建立了一个映射, 规定图像中某些像素行使相当于<a>的功能. 当img使用mapname属性引用<map>标签时, 就会按照标签中指定的法则形成图像中相应的可点击区域. 图像的不同区域可以指向不同的链接, 每一个区域由一个子标签<area>规定.
需要注意的是, <map>的两个属性name和id都表示其名称, 但不同的浏览器在执行<img>的mapname属性引用时所依据的<map>属性是不一样的, 可能是name/id二者之一, 因此要两个都写上(当然是写一样的, 除非你想让不同浏览器进行不同的映射, 这是很破坏客户端透明性的一个行为).
<area>标签是<map>的子标签, 具体规定单个区域的映射. area标签的属性主要是shape, coords, href.
shape和coords协同作用, 前者规定映射区域的形状, 后者则规定具体的参数, 参数的个数由shape的值确定:
shape="circle"时, coords有3个参数: 圆心x坐标, 圆心y坐标, 半径.shape="rect"时, coords有4个参数: x1, y1, x2, y2 , 指名了矩形对角线两端的坐标.shape="poly"时, coords有2n个参数: x1, y1, x2, y2, ..., xn, yn, 指明了多边形各个顶点的坐标, 多边形会自动封闭, 最后不需要重复起点坐标.实例https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap展示了area的应用.4
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
表格由<table>标签定义, 其子标签<tr>标签定义表格的一行, 而<tr>的子标签<td>定义行内的一个单元格. 显然, 对于一个所有单元格都一样的表格, 所有<tr>中的<td>个数都应当相等. 注意到有一些浏览器无法正常显示空的<td></td>对, 此时需要加空格占位符.
我们可以把第一个<tr>中的<td>换成<th>来定义某一列的表头.
在所有<tr>之前还可以加上<caption>来定义表格的标题. 标题可以有多个, 不同的标题将按顺序占据不同的行.
定义某个单元格所占的列数可以通过其colspan属性指定, 而所占行数则通过rowspan属性指定, 在这种情况下为了保持表格的规范性, 每个<tr>中的<td>/<th>可能会不相等. 示例代码请参见http://www.w3school.com.cn/tiy/t.asp?f=html_table_span.
HTML中的列表分为无序列表<ul>和有序列表<ol>两类, 显然, 无序列表的语义是一个无序的集合, 在默认样式上表现为每一项前面的标志都是一样的, 默认情况下是小圆点·, 而有序列表的语义则是一个有序序列, 在默认样式上表现为某种有序排列, 默认情况下是1, 2, 3...
<ul>/<ol>中的项均以<li>表示. 列表可以嵌套, 在编写嵌套列表时要注意标签的顺序和完整性.
还有一类有特殊语义的列表称为定义列表, 由一组名词及其解释构成, 一个定义列表由<dl>标志, 其中需要被解释的名词由<dt>标志, 在一对<dt>标签后紧跟的<dd>标签表示对上一个<dt>的名词解释.
<dl>
<dt>Computer</dt>
<dd>A machine used to compute</dd>
<dt>Monitor</dt>
<dd>Showing information via visual form</dd>
</dl>由于例如某些符号在HTML代码中有特殊的含义(例如“<”,“>”用于标记标签的开始和结束), 如果要在浏览器中显示出它们就不能用原来的符号, 否则文档在加载时就已经被错误地解析. 这时候要用另一些符号来代替这些特殊字符. 这些符号被称为字符实体.
字符实体格式为&entity_name或$#entity_number.
例如, 空格的实体名称是nbsp, 编号是160, 则一个空格应当写作 或$#160;.
采用实体名称能够帮助开发者更好地记忆和维护文档, 但并不是所有的浏览器都支持最新的实体名称.
常用的特殊符号对应的实体名称及编号如下
| Symbol | Identity Name | Code |
|---|---|---|
| < | lt | 60 |
| > | gt | 62 |
| space | nbsp | 160 |
| & | amp | 38 |
| " | quot | 34 |
表单用于数据提交, 整个表单由<form>标签标记. <from>标签的action属性规定了表单数据提交的目标URL. form的众多的子标签以及<input>标签的众多type属性类型实现了不同的数据输入模式.
<input>input标签是表单最重要的一个子标签, 根据其type属性的不同可以变化为不同的形式. 常用的type有
type of <input> |
Rendering Output |
|---|---|
text |
single line textbox |
radio |
single selection |
submit |
submit button |
input常用属性除type外还有name和value, 前者规定了该标签的名称, 以便于在PHP中使用关联数组对其进行处理, 不同的input不允许具有相同的name, 当然submit标签没有必要设定name. 而value属性则规定了input在页面上显示的(默认)值.5
<frameset> and <frame>