Head First HTML 与 CSS 笔记

摘抄了每章后面的知识点总结

  1. HTML 是超文本标记语言(HyperText Markup Language)的缩写,用来建立网页的结构。
  2. CSS 是层叠样式表(Cascading Style Sheets)的缩写,用来控制 HTML 的表现。
  3. 元素由 3 部分组成:一个开始标记、内容和一个结束标记。不过有些元素(比如<img>)有所例外。
  4. 所有页面都要有一个 <html> 元素,其中要有一个 <head> 元素和一个 <body> 元素。
  5. 可以在 <style> 元素中写 CSS 规则,为 HTML 网页增加 CSS。 <style> 元素总要放在 <head> 元素里
  1. <a>元素的内容是链接的标签。这个标签就是你在网页上看到的链接文本。默认这个标签会有下划线,指示这是可以点击的。
  2. 相对路径是相对于链接的源Web页面指向网站中其他文件的一个链接。就像在地图上一样,终点总是相对于起点。
  3. 使用”..”可以链接到源文件夹上一层文件夹的一个文件。
  4. “..”表示父文件夹。
  5. 用”/“(斜线)字符分隔路径中的各个部分。
  1. 要使用与内容含义最接近的元素。例如,如果需要一个列表,就不要使用段落元素。
  2. <p>、<blockquote>、<ol>、<ul><li>都是块元素。他们单独显示,在内容前后分别有一个换行(默认)。
  3. <q><em>是内联元素。这些元素中的内容与其包含元素的其余内容放在一起。
  4. 需要插入你自己的换行时,可以使用<br>元素,它是一个volid元素。
  5. volid元素没有空格,只有一个标记组成。
  6. 空元素没有内容。不过它有开始和结束标记。
  7. 嵌套元素是在完全包含在另一个元素中的元素。如果元素能正确地嵌套,所有标记都能正确匹配。
  8. 要结合两个元素建立一个HTML列表:使用<ol><li>建立有序列表,使用<ul><li>可以建立一个无序列表。
  9. 浏览器显示一个有序列表时,会为列表创建序号。
  1. 域名是一个唯一的名字,如amazon.com或starbuzzcoffee.com,用来唯一标识网站。
  2. 托管公司可能会为你的域创建一个或多个Web服务器。服务器通常命名为”www”。
  3. 文件传输协议(File Transfer Protocol, FTP)是向服务器传输Web页面和内容的常用方法。
  4. FTP应用提供了一个图形用户界面,是FTP的使用更为容易。
  5. URL是统一资源定位符或Web地址,可以用来标识Web上的任何资源。
  6. 典型的URL由一个协议、一个网站名和资源的绝对地址组成。
  7. HTTP是一个请求和响应协议,用来在Web服务器和浏览器之间传送Web页面。
  8. 浏览器使用file协议从你的计算机读取页面。
  9. 绝对路径是从根文件夹到一个文件的路径。
  10. “index.html”和”default.htm”都是默认页面。如果指定一个目录而没有指定文件名,则Web服务器会查找一个默认页面返回到服务器。
  11. <a>元素的href属性中可以使用相对路径或URL来链接到其他Web页面。对于你的网站中的其他页面,最好使用相对路径,对外部链接才使用URL。
  12. 可以用id属性在页面中创建一个目标。使用#后面加一个目标id,可以链接到页面中的那个位置。
  13. 为了便于访问,可以在<a>元素中使用title属性提供链接的一个描述。
  14. 使用target属性在浏览器窗口中打开链接。

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

  1. 浏览器对<img>元素的处理与其他HTML元素稍有不同。读取HTML页面之后,浏览器会从Web服务器获取各个图像并显示。
  2. <img>元素是一个内联元素,这说明浏览器不会在图像前后插入一个换行。
  3. 要利用src属性指定图像文件的位置。可以在src属性中使用相对路径包含你自己网站中的图像,或者可以使用URL包含其他网站的图像。
  4. JPEG、PNG和GIF是Web浏览器广泛支持的3种图像格式。
  5. JPEG格式最适合保存照片和其他复杂图像。
  6. GIF或PNG格式最适合保存logo和其他单色、线条或文本的简单图形。
  7. JPEG图像可以按不同质量压缩,所以可以很好地权衡图像质量和文件大小,来满足你的需要。
  8. GIF和PNG格式允许建立一个有透明背景的图像。
  9. GIF和PNG是无损格式,相比于JPEG文件,这些格式的文件往往更大。
  10. PNG可以提供比GIF更好的透明度控制,而且不像GIF只支持256种颜色,PNG可以支持更多颜色。
  11. PNG有三种不同的大小选择:PNG-24(支持数百万种颜色)、PNG-16(支持数千种颜色)、以及PNG-8(支持256种颜色),可以根据需要选择。
  12. 在Photoshop中,使用”Sava for Web”(保存为Web格式)对话框中的Matte(蒙版)颜色菜单来选择合适的颜色,柔化PNG或GIF颜色的边缘。
  13. 图像可以用作指向其他Web页面的链接。要由图像创建链接,可以使用<img>元素作为<a>元素的内容,将链接放在<a>元素的href属性中。

严肃的 HTML:标准及其他

  1. HTML5 是当前的HTML 标准。
  2. 万维网协会(World Wild Web Consortium, W3C)是定义 HTML 标准的组织。
  3. 文档类型定义(doctype)告诉浏览器你使用的 HTML 版本。
  4. HTML 标准现在是一个“活的标准”,这说明这个标准会不断改变,加入新的特性和更新。
  5. <head>元素中的</meta>标记告诉浏览器关于一个 Web 页面的额外信息,如内容类型和字符编码。
  6. <meta>标记的 charset 属性告诉浏览器 Web 页面使用的字符编码。
  7. 大多数 Web 页面的 HTML 文件都使用 utf-8 编码,另外<meta>标记的 charset 属性值通常也是 utf-8。
  8. alt 属性是<img>元素中的必要属性。

加一点样式:CSS 入门

  1. CSS 包含一些简单语句,成为规则。
  2. 典型的规则包括一个选择器,以及一个或多个属性和值。
  3. 选择器指定规则将应用到哪些元素。
  4. 每个属性声明以一个分号结束。
  5. 规则中的所有属性和值都放在 { } 大括号之间。
  6. 可以使用元素名作为选择器,来选择任意元素。
  7. 通过逗号分隔元素名,可以一次选择多个元素。
  8. <link> 元素用于包含一个外部样式表。
  9. 很多属性都能继承。例如,如果为 <body> 元素设置了一个可继承的属性,那么 <body> 的所有子元素都会继承这个属性。
  10. 通过为你从改变的元素创建一个更特定的规则,能覆盖该元素的继承的属性。
  11. 可以使用 class 属性将元素增加到一个类。
  12. 通过在元素名和类名之间加一个”.”,可以选择该类中的一个特定元素。
  13. 使用 “.classname” 可以选择属性这个类的所有元素。
  14. 通过在class属性中放入多个类名,可以指定一个元素属于多个类,类名之间用空格分隔。
  15. 可以使用W3C验证工具验证 CSS(http://jigsaw.w3.org/css-validator)。

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

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

与元素亲密接触:盒模型

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

高级 Web 建设:div 与 span

  1. <div> 元素用于将相关的元素归组在一起,放在逻辑区中。
  2. 创建逻辑区有助于标识主内容区以及页面的页眉和页脚。
  3. 可以使用 <div> 元素将需要共同样式的元素归组在一起。
  4. 使用嵌套<div>元素为文件增加更多结构,这有利于保证结构清晰或者方便增加样式。不过除非确实需要,否则不要过多地增加结构。
  5. 一旦用<dvi>元素将内容区归组在一起,类似于其他块元素,可以对这些<div>增加样式。
  6. width属性设置一个元素的内容区的宽度。
  7. 一旦设置一个元素的宽度,它不会延伸来占满浏览器窗口的整个宽度。
  8. text-align 是块元素的一个属性,用来将块元素中的所有内容对齐,可以居中、左对齐或右对齐。这个属性可以由所有嵌套的块元素继承。
  9. 可以使用子孙选择器来选择嵌套在其他元素中的元素。例如子孙选择器

    1
    div h2 {...}

    会选择嵌套在<div>元素中的所有<h2>(包含子元素、孙元素等)。

  10. 可以对相关的属性使用快捷方式。例如padding-top, padding-right, padding-bottom和padding-left都与内边距有关,可以用一个快捷规则来指定: padding。
  11. 内边距、外边距、边框、背景和字体属性都可以用快捷方式指定。
  12. <span>内联元素与<div>元素类似;它用于将相关的内联元素和文本归组在一起。
  13. 类似于<div>,可以将<span>元素增加到类(或者为<span>元素指定唯一的id),对它们增加样式。
  14. 有些元素有不同的状态,比如<a>元素的主要状态包括未访问、已访问和悬停。
  15. 可以用伪类单独地为各个状态指定样式。伪类最常用与<a>元素,:link 对应未访问的链接,:visited 对应已访问的链接,:hover 对应悬停状态。
  16. 伪类还可用于其他元素,而不仅限于<a>
  17. 另外一些伪类包括:hover, :active, :focus, :first-child和last-child伪类等。

摆放元素:布局与定位

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

现代 HTML:HTML5标记

  1. HTML5为HTML增加了很多新元素。
  2. <section>, <article>, <aside>, <nav>, <header>和<footer>都是帮助你建立页面结构的新元素,与使用<div>相比,它们可以提供更多含义。
  3. <section>用于对相关的内容分组。
  4. <article>用于类似博客帖子,论坛帖子和新闻报道等独立的内容。
  5. <aside>用于表示不作为页面主内容的次要内容,如插图或边栏。
  6. <nav>用于组织网站导航链接。
  7. <header>将标题、logo和署名等通常放在页面或区块最上方的内容组织在一起。
  8. <footer>将诸如文档信息、法律措辞和版权说明等通常放在页面或区块最下方的内容组织在一起。
  9. <time>也是HTML5中的一个新元素。这个元素用来标记时间和日期。
  10. <div>仍然用于建立结构。它通常将元素组织在一起来指定样式,或者有些内容可能不适合放在HTML5中那些与结构相关的新元素中,这些内容就可以使用<div>创建结构。
  11. 较早的浏览器不支持新的HTML5元素,所以一定要知道不要用户使用哪些浏览器访问你的Web页面,除非能确保新元素对你的用户适用,否则不要贸然使用这些新元素。
  12. <video>是一个新的HTML元素,用于为页面增加视频。
  13. 视频编码是用来创建视频文件的编码。常用的编码包括 h.264, Vp8 和 Theora。
  14. 视频容器文件包含视频、音频和元数据。流行的容器格式包括 MP4, OGG 和 WebM。
  15. 要提供多个视频源文件,确保你的用户可以在他们的浏览器中观看你的视频文件。

建立表格:表格与更多列表

  1. HTML表格用来建立表格数据结构。
  2. HTML表格元素<table>, <tr>, <th>和<td>一起用来创建一个表格。
  3. <table>元素定义并包围整个表格。
  4. 表格使用<tr>元素按行定义。
  5. 每行包含一个或多个数据单元格,分别用<td>元素定义。
  6. 使用<th>元素表示作为行或列表头的数据单元格。
  7. 表格采用格状布局。每行对应 HTML 中的一个<tr>...</tr>行,每列对应行中的<td>...</td>内容。
  8. 可以用<caption>元素提供关于表格的额外信息。
  9. 表格有边框间距,也就是单元格之间的间距。
  10. 表格数据单元格还可以有内边距和边框。
  11. 就像能控制元素的内边距、边框和外边距一样,可以用 CSS 控制表格单元格的内边距、边框和外边距。
  12. border-collapse 是针对表格的一个特殊的 CSS 属性,允许将单元格边框合并为一个边框,让外观更简洁。
  13. 可以用 text-align 和 vertical-align CSS 属性改变表格单元格中数据的对齐方式。
  14. 可以用 background-color 属性为表格增加颜色。可以为整个表格、各行或者单个的数据单元格增加背景颜色。
  15. 使用 CSS nth-child伪类可以为表格隔行增加背景颜色。
  16. 如果一个数据单元格没有数据,<td>元素中不放置任何内容。不过,需要使用一个<td>...</td>元素维持表格的对齐。
  17. 如果你的数据单元格需要跨多行或多列,可以使用<td>元素的 rowspan 或 colspan 属性。
  18. 可以在表格中嵌套表格,将<table>元素及其内容放在一个数据单元格中。
  19. 表格应当用于表示表格数据,而不是建立页面布局。另一方面,可以像第11章所介绍的,使用CSS表格显示创建多栏页面布局。
  20. 与所有其他元素一样,可以用 CSS 指定列表的样式。有几个特定于列表的 CSS 属性,如 list-style-type 和 list-style-image。
  21. list-style-type 允许改变列表中使用列表标记类型。
  22. list-style-image 允许指定列表标记图像。

实现交互:HTML表单

  1. <form> 元素定义了表单,所有表单输入元素都嵌套在这个元素中。
  2. action 属性包含服务器脚本的URL。
  3. method 属性包含发送表单数据的方法,可以是POST或GET。
  4. POST 打包表单数据,并把它作为请求的一部分发到服务器。
  5. GET 打包表单数据,并把数据追加到URL。
  6. 如果表单数据应当是私有的,或者表单数据很多,如使用了一个<textarea>或者file <input>元素,就应当使用POST。
  7. 对于可以加书签的请求,要使用 GET。
  8. <input> 元素在Web页面上可以作为多种不同的输入控件,这取决于它的”type”属性值。
  9. type为”text” 时会创建一个单行文本输入框。
  10. type为”submit” 时会创建一个提交按钮。
  11. type为”radio” 时会创建一个单选按钮,所有同名的单选按钮构成一组互斥的按钮。
  12. type为”checkbox” 时会创建一个复选框控件。通过为多个复选框指定相同的名字,可以创建一组选择。
  13. type为”number” 时会创建一个只允许数字字符的单行文本输入控件。
  14. type为”range” 时会创建一个滑动条控件提供数字输入。
  15. “color” 类型会在支持这个类型的浏览器中创建一个颜色选择器(否则只会创建一个普通的文本输入控件)。
  16. “data” 类型会在支持这个类型的浏览器中创建一个日期选择器(否则只会创建一个普通的文本输入控件)。
  17. “email”, “url” 和 “tel” 类型会创建单行文本输入,在一些移动浏览器上会出现定制键盘来方便数据输入。
  18. <textarea>元素会创建一个多行文本输入区。
  19. <select>元素会创建一个菜单,包含一个或多个<option>元素。<option>元素定义了菜单中的菜单项。
  20. 如果将文本放在<textarea>元素的内容中,这会成为Web页面上文本区控件的默认文本。
  21. text <input>元素中的value属性可以用来为单行文本输入框提供一个初始值。
  22. 在提交按钮上设置value属性可以改变按钮显示的文本。
  23. 提交一个Web表单时,表单数据值与相应的数据名配对,所有名和值会发送到服务器。
  24. 由于表单有一个表格结构,通常会用CSS表格显示来建立表单布局。CSS还可以用来指定表单的颜色、字体风格、边框等样式。
  25. HTML允许使用<fieldset>元素组织表单元素。
  26. 可以用<label>元素以一种有助于提高可访问性的方式关联标签与表单元素。
  27. 使用 placeholder 属性可以为表单用户提供一个提示,指出在一个输入域中的内容。
  28. requires 属性显示一个输入域是必要的,要让表单成功提交,这个输入域中必须有值。
如果对您有帮助,可以赞助一杯可乐