[笔记]HeadFirst HTML With CSS And XHTML

1 认识 HTML

1.1 工作原理

宏观角度

服务器工作流程

浏览器

1.2 元素和匹配标记

要告诉浏览器页面的结构,需要用成对的标记保卫页面内容。

要记住: 元素 = 开始标记 + 内容 + 结束标记

1.3 要点

  • HTML 和 CSS 是我们用来创建网页的语言
  • Web 服务器存储并提供由 HTML 和 CSS 创建的网页。浏览器获取页面,并根据 HTML 和 CSS 显示网页的内容。
  • HTML 是超文本标记语言的缩写,用来建立网页的结构
  • CSS 是层叠样式表的缩写,用来控制 HTML 的表现
  • 通过 HTML,我们利用标记来标志内容提供结构。我们把匹配标记以及她们包围的内容称为元素
  • 元素由 3 部分组成:一个开始标记,内容和一个结束标记。不过有些元素(如 <img> )有所例外
  • 开始标记可以有属性。
  • 结束标记在左尖括号后面,标记名前面有一个“/”,以明确这是结束标记。
  • 所有页面都要有一个 <html> 元素,其中要有一个 <head> 元素和一个 <body> 元素。
  • 网页的信息放在 <head> 元素里
  • <body> 元素里的内容就是你将在浏览器里看到的东西。
  • 大多数空白符(制表符、回车、空格)都会被浏览器忽略,不过可以通过空白符让你的 HTML(对你)更有可读性。
  • 可以在 <style> 元素中写 CSS 规则,为 HTML 网页增加 CSS。 <style> 元素总要放在 <head> 元素里。
  • 可以使用 CSS 在 HTML 中指定元素的特性。

2 认识 HTML 中的“HT”

使用 <a> 元素创建一个超文本链接,链接到另一个 Web 页面。 <a> 元素的内容会成为 Web 页面中可单击的文本。 href 属性告诉浏览器链接的目标文件。

属性的写法都是一样的:首先是属性名,后面是一个等于号,然后是用双引号起来的属性值。

2.1 要点

  • 想要一个页面链接到另一个页面是,要使用 <a> 元素。
  • <a> 元素的 href 属性指定了链接的目标文件。
  • <a> 元素的内容是链接的标签。这个标签解释你在网页上看到的链接文本。默认地,这个标签会有下划线,指示这是可以单击的。
  • 文字或图像都可以用作链接的标签。
  • 单击一个链接时,浏览器会加载 href 属性中指定的 Web 页面。
  • 可以链接到相同文件夹的文件,也可以链接到其他文件夹中的文件。
  • 相对路径是相对于链接的源 Web 页面指向网站中其他文件的一个链接。就像在地图上一样,终点总是相对于起点。
  • 使用 .. 可以链接到源文件上一层文件夹中的一个文件。
  • .. 表示“父文件夹”。
  • 记住要用 / (斜线)字符分割路径中的各个部分。
  • 指向一个图像的路径不正确时,会在 Web 页面上看到一个损坏的图像。
  • 为网站选择的文件名和文件夹中不要使用空格。
  • 最好在构建网页初期组织网站文件,这样就不用在网站升级时修改一大堆的路径。
  • 组织网站有很多方法,具体如何组织由你决定。

3 Web 页面建设

<q> 元素 有利于页面更结构化,更有意义。

<q> 用于短引用, <blockquote> 用于长引用。

块元素和内联元素的区别:

块元素通常用作 Web 页面中的主要构建模块,而内联元素往往用来标记小段内容。

设计为没有内容的元素称为 void 元素。需要使用 void 元素时,如 <br><img> 只需使用一个开始标记。这是一种方便的简写形式,可以减少 HTML 中的标记数量。

<ul> 无序列表, <ol> 有序列表, <dt> 定义列表。

把一个元素放在另一个元素中称为“嵌套”。

3.1 要点

  • 开始输入内容之前要规划好 Web 页面的结构。首先画出一个草图,然后创建一个略图,最后再写 HTML。
  • 规划页面是,首先设计大的块元素,然后用内联元素完善。
  • 记住,要尽可能使用元素来告诉留恋器你的内容的含义。
  • 一定要使用与内容含义 最接近 的元素。例如,如果需要一个列表,就不要使用段落元素。
  • <p>, <blockquote>, <ol>, <ul>, <li> 都是块元素。他们单独显示,在内容前后分别由一个换行(默认地)。
  • <q><em> 是内联元素。这些元素中的内容与其包含元素的其余内容放在一起。
  • 需要插入你的换行时,可以使用 <br> 元素。
  • <br> 是一个“void”元素。
  • void 元素没有内容。
  • void 元素只有一个标记组成。
  • “空”元素没有内容。不过它由开始和结束标记。
  • 嵌套元素是指完全包含在另一个元素中的元素。如果元素能正确地嵌套,所有标记都能正确匹配。
  • 要结合两个元素建立一个 HTML 列表:使用 <ol><li> 建立有序列表,使用 <ul><li> 可以建立一个无需列表。
  • 浏览器显示一个 z 有序列表时,它会为列表创建序号,所以无需你费心。
  • 可以在列表中建立嵌套列表,将 <ol><ul> 元素放在 <li> 元素中。
  • 要对 HTML 内容的特殊字符使用字符实体。

4 连接起来——Web 镇之旅

统一资源定位符是一个 全局地址 ,可以用来定位 Web 上的任意资源,包括 HTML 页面、音频、视频和很多其他形式的 Web 内容。 除了指定资源的位置,URL 还可以指定用来获取资源的 协议

默认页面的工作原理

4.1 完善链接的 Head First 指南

进一步完善链接时要记住以下技巧:

  • 保持链接标签很简洁。不要把整个句子或打断文字放在链接里。一般来讲,要保证只有几个单词。可以在 title 属性中提供额外的信息。
  • 保证链接标签是有意义的。不要使用类似“单击这个”或“这一页”之类的链接标签。用户往往会首先粗略扫一眼页面,看看有没有链接,然后才会通读页面。所以,通过提供有意义的链接,可以改善页面的可用性。可以这样测试以下你的页面,只读页面上的链接,能理解吗?或者是不是还需要度他们周围的文字?
  • 不要把链接放在一起,用户会很难区分放在一起的链接。

4.2 要点

  • 要把网站发布到 Web 上,通常最好的办法就是找一个托管公司来托管你的 Web 页面
  • 域名是一个唯一的名字,如 amazon.com,用来唯一标识网站。
  • 托管公司可能会为你的域创建一个或多个 Web 服务器,服务器同城命名为“www”。
  • 文件传输协议是向服务器传输 Web 页面和内容的创勇方法。
  • FTP 应用提供了一个图形用户界面,使 FTP 的使用更为容易。
  • URL 是统一资源定位符或 Web 地址,可以顺送来标识 Web 上的任何资源。
  • 典型的 URL 由一个协议,一个网站名和资源的一个绝对地址组成。
  • HTTP 是一个请求和响应协议,用来在 Web 服务器和浏览器之间传送 Web 页面。
  • 浏览器使用 file 协议从你的计算机读取页面。
  • 绝对路径是从根文件夹到一个文件的路径
  • "index.html"和"default.htm"都是默认页面。如果指定一个目录而没有指定文件名,则 Web 服务器会查找一个默认页面返回到浏览器。
  • <a> 元素的 href 属性中可以使用相对路径或 URL 来链接其他 Web 页面。对于你的网站中的某个页面,最好使用相对路径,对外部连接才使用 URL。
  • 可以用 id 属性在页面中创建一个目标。使用 # 后面价一个目标 id,可以链接到页面中的那个位置。
  • 为了便于访问,可以在 <a> 元素中使用 title 属性提供链接的一个描述。
  • 使用 target 属性在另一个浏览器窗口中打开链接。不要忘了,对于使用各种不同设备和浏览器的用户, target 属性可能会有问题。

5 为你的页面增加图像——认识媒体

JPEG, PNG 和 GIF 的不同

<img> 元素是 内联 元素。

如果把一个透明的图像放在 Web 页面中,则要确保这个图像的蒙版颜色与 Web 页面的背景色一致。 透明图像可以使用 PNG 或 GIF 格式。

5.1 要点

  • 使用 <img> 元素在 Web 页面中放置图像。
  • 浏览器对 <img> 元素的处理与其他 HTML 元素稍有不同。读取 HTML 页面之后,浏览器会从 Web 服务器获取各个图像并显示。
  • 如果 Web 页面上由多个大图像,则可以通过创建图像的缩略图使你的 Web 页面更可用,下载也更快,缩略图是一些小图像(大图像的缩小版本),用户丹迪这些缩略图时可以看到原来的大图像。
  • <img> 元素是一个内联元素,这、说明浏览器不会在图像前后插入一个换行。
  • 要利用 src 属性指定图像文件的位置。可以在 src 属性中使用相对路径包含你自己的网站中的图像,v 活儿可以使用 URL 包含其他网站的图像。
  • <img> 元素的 alt 属性是对图像的一个有意义的描述。在一些浏览器中,如果无法找到图像,就会显示这个描述,另外屏幕阅读器会使用这个属性为有视力障碍的人描述图像。
  • 图像宽度要小于 800 像素,这个 Web 页面中关于照片大小的一个好经验。数码相机拍摄的大多数照片都太大,不能很好地放在 Web 页面中,所以需要调整它们的大小。
  • 对于浏览器来说太大的图像会使 Web 页面很难使用,而且下载和显示都很慢。
  • JPEG, PNG, GIF 是 Web 浏览器广泛支持的 3 中图像格式。
  • JPEG 格式最适合保存照片和其他复杂图像。
  • GIF 或 PNG 格式最适合保存 logo 和自他包含单色、线条或文本的简单图形。
  • JPEG 图像可以按不同质量压缩,所以可以很好地权衡图像质量和文件大小,来满足你的需要。
  • GIF 和 PNG 图像格式允许建立一个有透明背景的图像。如果把一个有透明背景的图像放在一个 Web 页面中,图像后面的东西(如页面的背景色)就会透过图像的透明不分显示出来。
  • GIF 和 PNG 是无损格式,这说明相比于 JPEG 文件,这些格式的文件往往更大。
  • PNG 可以提供比 GIF 更好的透明度控制,而且不像 GIF 只支持 256 种颜色,PNG 可以支持更多颜色。
  • PNG 由 3 中不同的大小选择:PNG-24(支持数百万种颜色)、PNG-16(支持数千种颜色)以及 PNG-8(支持 256 中颜色),可以根据需要来选择。
  • 图像可以用作指向其他 Web 页面的链接。要由图像创建一个链接,可以使用 <img> 元素作为 <a>=元素的内容,将链接放在 =<a> 元素的 href 属性中。

6 标准及其他——严肃的 HTML

W3C 验证工具: http://validator.w3.org

6.1 要点

  • HTML5 是当前的 HTML 标准。
  • 万维网协会是定义 HTML 标准的标准组织。
  • 文档类型定义(doctype)用来告诉浏览器你使用的 HTML 版本。
  • HTML 标准现在是一个“活的标准”,这说明这个标准会不断改变,加入新的特性和更新。
  • <head> 元素中的 <meta> 标记告诉浏览器关于一个 Web 页面的额外信息,如内容类型和字符编码。
  • <meta> 标记的 charset 属性告诉浏览器 Web 页面使用的字符编码。
  • 大多数 Web 页面的 HTML 文件都使用 utf-8 编码,另外 <meta> 标记的 charset 属性值通常也是 utf-8.
  • alt 属性是 <img> 元素的必要属性。
  • W3C 验证工具是一个免费的在线服务,可以检查页面是否符合标准。
  • 可以使用这个验证工具确保你的 HTML 合法,而且元素和属性符合标准。
  • 如果遵循标准,则你的页面会更快地显示,而且在不同浏览器中显示时差异会更小,CSS 也能更好地工作。

7 CSS 入门——加一点样式

<link>

验证工具: http://jigsaw.w3.org/css-validator/

7.1 关于应用样式的世界上最剪短最快捷的指南

  • 首先,有没有某个选择器选择你的元素?
  • 继承情况?
  • 都没有?那就使用默认值
  • 如果多个选择器选择一个元素?——更特定的会胜出
  • 如果仍然没有一个明确的赢家?——最后的胜出

7.2 要点

  • CSS 包含一些简单语句,称为规则。
  • 每个规则为选择的一些 HTML 元素提供样式。
  • 典型的规则包括一个选择器,以及一个或多个属性和值。
  • 选择器指定规则将应用到哪个元素。
  • 每个属性声明以一个分号结束。
  • 规则中的所有属性和值都放在 {} 大括号之间。
  • 可以使用元素名作为选择器,来选择任意元素。
  • 通过用都好分割元素名,可以一次选择多个元素。
  • 要在 HTML 中包含一个样式,最容易的办法就是使用 <style> 标记。
  • 对于 HTML 以及相当复杂的网站,可能要联街道一个外部样式表。
  • <link> 元素用于包含一个外部样式表。
  • 很多属性都能继承。
  • 通过为你向改变的元素创建一个更特定的规则,能覆盖该元素继承的属性。
  • 可以使用 class 属性将元素增加到一个类。
  • 通过在元素名和类名之间加一个 . ,可以选择该类中的一个特定元素。
  • 使用 .classname 可以选择属性这个类的所有元素。
  • 通过在 class 属性中放入多个类名,可以指定一个元素属于多个类,k 类名之间用空格分隔。

8 增加字体和颜色样式——扩大你的词汇量

8.1 字体

  • font-family 属性定制页面中使用的字体。
  • font-size 属性控制字体大小。
  • color 属性为文本设置颜色。
  • font-weight 属性影响字体的粗细。
  • text-decoration 属性为文本增加更多风格。

字体:

8.1.1 为页面添加 Web 字体

  1. 找到一个字体
  2. 确保有所需字体的所有格式
  3. 把你的字体文件放到 Web 上
  4. 在 CSS 中添加 @font-face 属性
  5. 在 CSS 中使用 font-family
  6. 加载页面!

8.1.2 指定字体的大小

  1. 选择一个关键字(推荐 smallmedium ),指定它作为 body 规则中的字体大小。这相当与页面的默认字体大小。
  2. 使用 em 或百分数,相对于 body 字体大小指定其他元素的字体大小。

8.1.3 一些默认规则

  • 默认的 body 字体大小都为 16 像素
  • <h1> 默认体文本字体大小的 200%, <h2> 150%, <h3> 120%, <h4> 100%, <h5> 90, <h6> 60%。

8.2 要点

  • CSS 提供了很多属性对字体的外观加以控制,包括 font-family, font-weight, font-size 和 =font-sytle=。
  • font-family 是一组由共同特性的字体。
  • 用于 Web 字体系列包括 serif,sans-serif,monospace,cursive 和 fantasy。serif 和 sansserif 字体最为常用。
  • 访问者在你的 Web 页面上看到的字体取决于他们自己的计算机上安装了哪些字体,除非你使用 Web 字体。
  • font-family CSS 属性中指定候选字体是一个好主意,以防用户没有安装你的首选字体。
  • 最后一个字体要制定为一个通用字体,如 serif 或 sans-serif,这样一来,如果找不到其他字体,浏览器可以替换适当的字体。
  • 如果你要使用某种字体,而默认情况下用户可能没有安装这种字体,可以在 CSS 中使用 @font-face 规则。
  • 字体大小通常使用像素、em、百分数或关键字指定。
  • 如果使用像素( px )来指定字体大小,就是在告诉浏览器字母高度是多少像素。
  • em% 是相对字体大小,所以使用 em% 指定字体大小时,就意味着字体大小要相对于其富元素的字体大小指定。
  • body 规则中使用字体大小关键字来设置基本字体大小,这样如果用户希望文本更大或更小,所有浏览器就能按笔记缩放字体大小。
  • 可以使用 font-weight CSS 属性设置文本为粗体。
  • font-family 属性用于创建斜体或倾斜文本。斜体或倾斜文本是倾斜的。
  • Web 颜色是很棒而不同数量的红、绿、蓝色得到的。
  • 如果混合红色 100%,绿色 100%和蓝色 100%,可以得到白色。
  • 如果混合红色 0%,绿色 0%和蓝色 0%,可以得到黑色。
  • CSS 由 16 隔基本颜色,包括黑色、白色、红色、蓝色和绿色,以及 150 种扩展颜色。
  • 可以使用红、绿、蓝百分数指定你想要的颜色,也可以使用红、绿、蓝数值(0-255)指定,或者使用颜色的十六进制码来指定颜色。
  • 要找到你想要的一个颜色的十六进制码,有一种很容易的方法,可以使用一个照片编辑应用的颜色选择工具,或者某个在线 Web 工具,这样的工具由很多。
  • 表示颜色的十六进制码有 6 位,每一位取值为 0~F,前两位表示红色数量,接下来两位表示绿色数量,最后两位表示蓝色数量。
  • 可以使用 text-decoration 属性为文本创建一个下划线。有下划线的文档通常会被用户误以为是链接文本,所以要谨慎使用这个属性。

9 盒模型——与元素亲密接触

9.1 盒模型

9.2 指定媒体类型

媒体查询是目前标准组织在积极发展的一个领域,所以要密切关注指定设备的最佳实践,这方面还在不断演进发展。

9.3 要点

  • CSS 使用一个盒模型来控制元素如何显示。
  • 盒子由内容区和可选的内边距、边框和外边距组成。
  • 内容区包含元素的内容。
  • 内边距用来在内容区周围创建可见的空间。
  • 边框包围内边距和内容,它提供了从视觉上分离内容的一种手段。
  • 外边距包围边框、内边框和内容,允许在元素和其他元素之间增加空间。
  • 元素的背景会在内容和内边距下显示,但不会延伸到外边距下面。
  • 内边距和外边距大小可以用像素或百分数设置。
  • 边框宽度可以用像素设置,也可以使用关键字 thin, mediumthick 来指定。
  • 有 8 种不同的边框样式,包括实线、破折线、虚线和脊线。
  • 对于外边距、内边距或边框,CSS 提供了相应的属性,可以一次对所有四个边(上下左右)完成设置,也可以单独设置任意一边。
  • 使用 border-radius 属性可以对有边框的元素创建圆角。
  • 使用 line-height 属性可以增加文本行之间的间距。
  • 可以用 background-image 属性在元素的背景上放置图像。
  • 使用 background-positionbackground-repeat 属性可以设置背景图像的位置和平铺行为。
  • 对于希望成组指定样式的元素要使用 class 属性。
  • 使用 id 属性为元素指定一个唯一的名字。还可以使用 id 属性为元素提供唯一的样式。
  • 一个页面上有给定 id 的元素只能有一个。
  • 可以使用 idz 选择器按 id 选择元素。
  • 一个元素只能有一个 id,不过它可以属于多个类。
  • 在 HTML 中可以使用多个样式表。
  • 如果两个样式表包含冲突的属性定义,HTML 文件中最后链接的样式表最优先。
  • 可以在 <link> 元素中使用媒体查询或者使用 CSS 中的 @media 规则来指定设备。

10 div 与 span——高级 Web 建设

在页面中要使用 <div> ,但不要滥用。如果这样做有助于你将页面分解为逻辑区,从而保证结构清晰并便于指定样式,那么可以增加更多的结构。如果只是为了在页面中创建大量结构而增加 <div> ,就只会让页面复杂,而没有任何实际好处。

width 属性只指定内容区的宽度

总宽度=(外边距宽度+边框宽度+内边距宽度)× 2 + 宽度

text-align 适用于任何类型的内联元素对齐。

10.1 层叠

  1. 收集所有样式表。
  2. 找到所有匹配的声明。
  3. 现在对所有匹配的规则排序。
  4. 现在按特定性对所有声明排序。
  5. 最后,对于冲突的规则,按照它们在各自样式表中出现的顺序进行排序。

10.2 要点

  • <div> 元素用于将相关的元素归组在一起,放在逻辑区中。
  • 创建逻辑区有助于标识主内容以及页面的页眉和页脚。
  • 可以使用 <div> 元素将需要共同样式的元素归组在一起。
  • 使用嵌套 <div> 元素为文件增加更多结构,这有利于保证结构清晰或者方便增加样式。不过除非确实需要,否则不要过多地增加结构。
  • 一旦用 <div> 元素将内容区归组在一起,类似于其他块元素,可以对这些 <div> 增加样式。
  • width 属性设置一个元素内容区的宽度。
  • 一个元素的总宽度是内容区宽度,加上所增加的内边距、边框和外边距的宽度。
  • 一旦设置一个元素的宽度,它不会延伸来占满浏览器窗口的整个宽度。
  • text-align 是块元素的一个属性,用来将这个块元素中的所有内容对齐,可以居中,左对齐或右对齐。这个属性可以由所有嵌套的块元素继承。
  • 可以使用子孙选择器来选择嵌套在其他元素中的元素。
  • 可以对相关的属性选择快捷方式。
  • 内边距、外边距、边框、背景和字体属性都可以用快捷方式指定。
  • <span> 内联元素与 <div> 元素类似,它用于将相关的内联元素和文本归组在一起。
  • 类似于 <div> ,可以将 <span> 元素增加到类(或者为 <span> 元素指定唯一的 id),对他们增加样式。
  • 有些元素有不同的状态。
  • 可以用伪类单独地为各个状态指定样式。

11 布局与定位——摆放元素

11.1 如何浮动元素?

  1. 指定一个标识。
  2. 指定一个宽度。
  3. 让它浮动。

解决重叠问题:在不想被重叠的层加上 clear 属性。

11.2 右紧左松

  1. 从边栏开始。
  2. 处理主内容区。
  3. 处理页脚。

11.3 流体与冻结设计

设置整个页面宽度

11.4 凝胶状态

在最外层加入

margin-left: auto;
margin-right: auto;

使页面最外层自动居中

11.5 表格

11.5.1 为表格显示增加 HTML 结构

  1. 创建一个 <div> 表示整个表格,行和列要嵌套在这个 <div> 中。
  2. 对于表格中的每一行,要创建一个 <div> ,其中包含行内容
  3. 对于每一列,只需要一个块元素作为该列内容。
<div id="tableContainer">
<div id="tableRow">
<div id="main">...</div>
<div id="sidebar">...</div>
</div>
</div>

11.5.2 使用 CSS 创建表格显示

  1. 为表格增加一个 <div> ,id 为 tableContainer ,这个 <div> 包含行和列。
    div#tableContainer {
    display: table;
    }

  2. 为行增加一个 <div> ,id 为 tableRow
    div#tableRow {
    display: table-row;
    }

  3. 使用现有的“main”和“sidebar” <div>作为单元格,对应于行中的各列。
    #main {
    dispaly: table-cell;
    }


    #sidebar {
    display: table-cell;
    }

11.6 fixed 与 absolute

区别:

fixed: 距离浏览器 absolute: 距离页面边界

11.7 要点

  • 浏览器使用流在页面中放置元素。
  • 块元素从上向下流,各元素之间有一个换行。默认的,每个块元素会占浏览器窗口的整个宽度。
  • 内联元素在块元素内部从左上方流向右下方。如果需要多行,浏览器会换行,在垂直方向上扩展外围块元素,来包含这些内联元素。
  • 正常页面流中两个块元素上下相邻的外边距会折叠为最大外边距的大小,或者如果两个外边距大小相同,则会折叠为一个外边距。
  • 浮动元素会从正常流中取出,浮动到左边或右边。
  • 浮动元素放在块元素之上,不会影响正常的页面流。不过,内联内容会考虑浮动元素的边界,围绕着这个浮动元素。
  • clear 属性用来指定一个块元素左边或右边(或者左右两边)不能有浮动元素。设置了 clear 属性的块元素会下移,知道它旁边没有块元素。
  • 流体布局必须有特定的宽度,不能设置为 auto
  • 流体布局是指,扩展浏览器窗口时,页面中的内容会扩展以适应页面。
  • 冻结布局是指,其中内容的宽度是固定的,不会随着浏览器窗口扩展或收缩。还有一个好处,可以对设计提供更多控制,不过也会付出代价,这样就不能有效地使用浏览器宽度了。
  • 凝胶布局是指,其中内容的宽度是固定的,但是外边距会随着浏览器窗口扩展或收缩。凝胶布局通常会把内容放在中央。这与冻结布局由同样的好处,不过通常会更美观。
  • position 属性可以设置为 4 个值: static (静态)、 absolute (绝对)、 fixed (固定)和 relative (相对)。
  • 静态定位是默认方式,将元素放在页面的正常流中。
  • 绝对定位允许将元素放在页面上的任何位置。默认地,绝对定位元素会相对于页面边界来设置。
  • 如果一个绝对定位元素嵌套在另一个定位元素中,这个元素就会相对于外包含元素定位。
  • 使用绝对、固定和相对定位时,属性 top, right, bottomleft 可以用来指定元素的位置。
  • 绝对定位元素可以使用 z-index 属性分别放置,使一个元素在另一个元素上面。 z-index 值越大,说明它层次越高(在屏幕上离你越近)。
  • 固定定位元素总是相对于浏览器窗口定位,页面滚动时,固定定位的元素不会移动。页面中的其他内容会在这些固定定位元素下面正常移动。
  • 相对定位元素首先正常流入页面,然后按指定的量偏移,从而留出他们原先所在的空间。
  • 使用相对定位时, left, right, topbottom 是指距正常流中该元素位置的偏移量。
  • CSS 表格显示允许按一种表格布局来摆放元素。
  • 要创建 CSS 表格显示,需要使用对应表格的一个块元素,对应行的块元素,以及对应单元格的块元素。通常,这些块元素都是 <div> 元素。
  • 如果需要建立多栏布局,而且内容栏是均匀的,表格显示就是一个很好的布局策略。

12 HTML5 标记——现代 HTML

12.1 考虑 HTML 结构

元素 说明
<article> 表示页面中一个独立的组成部分,如一个博客帖子,用户论坛帖子或新闻报道。
<nav> 所包含的内容将作为页面的导航链接。
<header> 放在页面顶部的内容,或者放在页面某个区块的顶部,用于将标题,logo 和署名等通常方泽页面或区域最上方的内容组织在一起。
<footer> 放在页面底部的内容,或者放在页面某个区块的底部,用于将诸如文档信息、法律措施和版权说明等通常放在页面或区块最下方的内容组织在一起。
<time> 可能包含一个日期或时间,也可能同时包含日期和时间。
<aside> 包含的页面是对页面内容的补充,如插图或边栏。
<section> 一个主题性内容分组,通常包含一个首部,可能还有一个底部,用于对相关的内容分组。
<video> 用来为页面增加视频媒体。

<article><section> 的区别:

使用 <section> 可以把相关的内容分组在一起, <article> 包含独立的内容,如一个新闻报道、一个博客帖子或者一个简短的报告。

12.2 <video> 的属性

HTML5 规范允许采用任何视频格式。具体支持 n 安歇格式由浏览器实现来确定。

12.2.1 兼容

12.3 要点

  • HTML5 为 HTML 增加了很多新元素。
  • <section>, <article>, <aside>, <nav>, <header><footer> 都是帮助你建立页面结构的新元素,与使用 <div> 相比,它们可以提供更多含义。
  • <div> 仍然用于建立结构。它同床将元素组织在一起来指定样式,或者有些内容可能不适合放在 HTML5 中那些与结构相关的新元素中,这些内容就可以使用 <div> 创建结构。
  • 较早的浏览器不支持新的 HTML5 元素,所以一定要知道主要用户使用那些浏览器访问你的 Web 页面,除非能够确保新元素对你的用户适用,否则不要贸然使用这些新元素。
  • 容器是用来包装视频、音频和元数据信息的文件格式。常用的容器格式包括:MP4、WebM、Ogg 和 Flash Video。
  • 编解码器是用来对一种特定视频或音频编码完成编码和解码的软件。流行的 Web 编解码器包括:H.264、VP8、Theora、AAC 和 Vorbis。
  • 要由浏览器决定可以对哪种格式的视频解码,不过并不是所有浏览器制造商都达到一致,所以如果你想支持所有视频,就需要多种解码。

13 表格与更多列表——建立表格

表格提供了一种在 HTML 中指定表格数据的方法。

表格由航中的数据单元格组成,列隐含地定义在行中。

表格中的列数就是行中数距单元格的个数。

一般来讲,表格不用来提供表现,那是 CSS 的工作。

nth-child 伪类:

rowspan : 跨行; colspan : 跨列

13.1 要点

  • HTML 表格用来建立表格数据结构。
  • HTML 表格元素 <table>, <tr>, <th><td> 一起用来创建一个表格。
  • <table> 元素定义并包围整个表格。
  • 表格使用 <tr> 元素按行定义。
  • 每行每含一个或多个数据单元格,分别用 <td> 元素定义。
  • 使用 <th> 元素表示作为行或列表头的数据单元格。
  • 表格采用格状布局。每行对应 HTML 中的一个 <tr>...</tr> 行,每列对应航中的 <td>...</td> 内容。
  • 可以用 <caption> 元素提供关于表格的额外信息。
  • 表格由边框间距,也就是单元格之间的间距。
  • 表格数据单元格还可以有内边距和边框。
  • 就像能够控制元素的内边距、边框和外边距一样,可以用 CSS 控制表格单元格的内边距、边框和边框间距。
  • border-collapse 是针对 表格的一个特殊的 CSS 属性,允许将单元格边框合并未一个边框,让外观更简洁。
  • 可以用 text-alignvertical-align CSS 属性改变表格单元格中数据的对齐方式。
  • 可以中 background-color 属性为表格增加颜色。可以为整个表格、各行或者单个的数据单元格增加背景颜色。
  • 如果一个数据单元格没有数据, <td> 元素中不放置任何内容。不过,需要使用一个 <td>...</td> 元素维持表格的对齐。
  • 如果你的数据单元格需要跨多行或多列,可以使用 <td> 元素的 rowspancolspan 属性。
  • 可以在表格中嵌套表格,将 <table> 元素及其所有内容放在一个数据单元格中。
  • 表格应当用于表示表格数据,而不是建立页面布局。另一方面,可以使用 CSS 表格显示创建多栏页面布局。
  • 与所以其他元素一样,可以用 CSS 指定列表的样式。有几个特定于列表的 CSS 属性,如 list-style-typelist-style-image
  • list-style-type 允许列表中使用的列表标记类型。
  • list-style-image 允许指定列表标记图像。

14 HTML 表单——实现交互

表单如何工作?

POST 和 GET

14.1 要点

  • <form> 元素定义了表单,所有表单输入元素都嵌套在这个元素中。
  • action 属性包含服务器脚本的 URL。
  • method 属性包含发送表单数据的方法,可以是 POST 或 GET。
  • POST 打包表单数据,并把它作为请求的一部分发送到服务器。
  • GET 打包表单数据,并把数据追加到 URL。
  • 如果表单数据应当是私有的,或者表单数据很多,如使用一个 <textarea> 或者 fiel <input> 元素,就应当使用 POST。
  • 对于可以加书签的请求,要使用 GET。
  • <input> 元素在 Web 页面上可以作为多种 不同的输入控件,这取决于它的 type 属性值。
    type 类型 说明
    text 单行文本输入框
    submit 提交按钮
    radio 单旋钮,所有同名的单选钮构成一组互斥的按钮
    checkbox 复选框控件,通过为多个复选框指定相同的名字,可以创建一组选择。
    number 只允许数字字符的单行文本输入控件
    range 滑动条控件提供数字输入
    color 支持这个类型的浏览器中创建一个颜色选择器(否则只会创建一个普通的文本输入控件
    date 支持这个类型的浏览器中创建一个日期选择器(否则只会创建一个普通的文本输入控件)
    email,url,tel 单行文本输入,在一些移动浏览器上会出现定制键盘方便输入
  • <textarea> 元素会创建一个多行文本输入区。
  • <select> 元素会创建一个菜单,包含一个或多个 <option> 元素。 <option> 元素定义了菜单中的菜单项。
  • 如果将文本放在 <textarea> 元素的内容中,这会成为 Web 页面上文本区控件中的默认文本。
  • text <input> 元素中的 value 属性可以用来为单行文本输入控件提供一个初始值。
  • 在提交按钮上设置 value 属性可以改变按钮上显示的文本。
  • 提交一个 Web 表单时,表单数据值与相应的数据名配对,所有名和值会发送到服务器。
  • 由于表单有一个表格结构,通常会用 CSS 表格显示来建立表格布局。CSS 还可以用来指定表单的颜色、字体风格、边框等样式。
  • HTML 允许用 <fieldset> 元素组织表单元素。
  • 可以用 <label> 元素以一种有助于提高可访问性的方式管理标签与表单元素。
  • 使用 placeholder 属性可以为表单用户提供一个指示,指出你希望在一个输入域中输入什么内容。
  • required 属性指示一个输入域是必要的,要让表单承购提交,这个输入域中必须有值。有些浏览器在你提交表单之前会强制要求在这些域中输入数据。

Date: <2016-03-16 Wed 16:50>

Author: cowlog

Created: 2016-03-23 Wed 21:30

Emacs 24.5.1 (Org mode 8.2.10)

Validate