HTML notebook 1: Components

入了HTML和JavaScript的坑，趁着年末事情没那么多 (假装不多)，学习一下，不知道能坚持多久，LOL… 参考的书有如下三本，

  1. Castro, E. and Hyslop, B. HTML and CSS Visual QuickStart Guide 8th Ed.
  2. Keith, J. and Sambells, J. DOM Scripting Web Design with JavaScript and Document OBject Model
  3. Zakas, N. Professional JavaScript for Web Developers 3rd Ed.

边看边手动记笔记，有空整理一下。

HTML的一个很好的理解，为网页内容打上能够描述它们的标签，但HTML元素描述的是内容是什么，而不是内容本身的特征，更像一个盒子。CSS用来控制内容的外观(如字体、颜色和阴影等)。访问者看到的内容位于主体body部分，即<body>和</body>之间的内容。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title> My page </title>
</head>
<body>
</body>
</html>

每个网页都包含DOCTYPE、html、head和body元素，它们是网页的基础。HTML使用<>包围标签，包含开始和结束标签，其中结束标签在<后增加/符号。

  • <body>开始标签以上的内容为浏览器和搜索引擎准备;
  • <!DOCTYPE html>表示这是一个html5页面，DOCTYPE应该始终位于页面第一行;
  • <title>和<\title>之间用于显示页面的标题;
  • h1是标题，a是链接，img是图像。
元素

元素有一个或多个属性、属性用来进一步描述元素 (考虑画图)。 元素由开始标签、内容和结束标签组成。习惯上，标签采用小写字母。还有一些元素是空元素 (不包含文本内容)，形如< \>，即开始标签和结束标签的结合，由左尖括号开头、元素的名称及包含的属性和右尖括号 (空格加”/“在HTML5中可选) 组成。

属性和值

属性包含了元素的额外信息，每个属性有各自的值。在HTML5中属性值两边的引号可选，但建议保留，形如attr="value"的形式。有的属性可以接受仍和值，有的则有限制，最常见的是仅接受预定义值 (枚举值) 的属性。例如，

1
<link rel="stylesheet" media="screen"(预定义值) href="style.css"(非预定义值) />

有许多属性的值设置为数字，主要为描述大小和长度的属性，其中图像和视频的宽度和高度是有单位的，默认为像素。有的属性 (如href和src) 用于引用其他文件，它们只能包含URL形式的值。还有一种属性为布尔型，本身出现就表示真。

父元素和子元素

如果一个元素包含另一个元素，该元素称为被包含元素的父元素，被包含元素称为子元素。这种结构是HTML的关键特性，有助于在元素上添加样式和应用JavaScript行为。例如，

1
2
3
4
<article>
<h1> Blablabla...</h1>
<p> ... xxxxx </p>
</article>

文本内容

文本是元素的基本成分，在HTML中，文本中的多个空格或制表符会被压缩成单个空格，回车和换行符号会被转换为单个空格，旧版本的HTML只能只用ASCII字符，受限于此，特殊字符需要类似于Latex的语法来引用。目前，可以采用UTF-8编码来缓解这一问题。而要采用Unicode，需要在之后进行定义，并指定`charset=”utf-8”，如下

1
2
3
<head>
	<meta charset="utf-8" />
</head>

链接、图像和其他文本内容

HTML5提供了audio和video元素，避免了无Flash等插件便无法播放音频和视频的问题。，当然目前的多数浏览器提供了内置的媒体播放器，仍然可以使用Flash播放器作为旧浏览器。

文件和文件名的规则

建议采用小写字母加短横线而不是首字母大写加下划线的形式，并用.html作为扩展名，有助于访问和搜索引擎的优化。注意，文件名称中也不要出现空格。

URL(Uniform Resource Locator)

包含关于文件存储位置和浏览器应如何处理它的信息，互联网上的每个文件都有唯一的URL。若URL路径不以文件名结尾，则对应一个目录中的默认文件，通常为index.html。URL分为绝对路径和相对路径，其中相对路径尽量使用根相对路径

语义？？

语义化HTML指的是那些使用最恰当的HTML元素进行标记的内容，在标记的过程中并不关心内容显示。

  • HTML提供六个标题级别，即h1-h6,用形如<h1> xxx </h1>实现;
  • 图像使用img,无元素;
  • 段落使用p，段落用<p>xxx</p>实现;
  • 段落中可以嵌套em和a元素，其中em表示强调，通常会用斜体体现，在CSS中也可以修改。
  • a表示anchor，用于定义链接，形如<a href="" rel="" title=""><xxx /a>

Tips

  • &copy表示版权符号，<p><small>&copy; Jason </small></p>, small表示法律声明等条纹细则;
  • 发送电子邮件mailto:xx@xxx.xxx