文章

Head First HTML与CSS(第二版)学习笔记(HTML+CSS)

发表于
作者 30 分钟阅读

前面对HTML基础知识做了了解，之后会结合CSS来构建，点此查看示例页面，因为HTML和CSS更多只是用来描述网页，涉及到需要理解的东西比较少，这里更多的只是读书笔记，会在示例页面中使用这里接触到的内容

加一点样式：开始学习CSS

  • CSS包含一些简单语句，称为规则。
  • 每个规则为选择的一些HTML元素提供样式。
  • 典型的规则包括一个选择器，以及一个或多个属性和值。
  • 选择器指定规则将应用到哪些元素。
  • 每个属性声明以一个分号结束。
  • 规则中的所有属性和值都放在{ }大括号之间。
  • 可以使用元素名作为选择器，来选择任意元素。
  • 通过用逗号分割元素名，可以一次选择多个元素。
  • 要在HTML中包含一个样式，最容易的办法就是使用<style>标记。
  • 对于HTML以及相当复杂的网站，可能要链接到一个外部样式表。
  • <link>元素用于包含一个外部样式表。
  • 很多属性都能继承。例如，如果为<body>元素设置了一个可继承的属性，那么<body>的所有子元素都会继承这个属性。
  • 通过为你想改变的元素创建一个更特定的规则，能覆盖该元素继承的属性。
  • 可以使用class属性将元素增加到一个类。
  • 通过在元素名和类名之间加一个“.”，可以选择该类中的一个特定元素。
  • 使用“.classname”可以选择属性这个类的所有元素。
  • 通过在class属性中放入多个类名，可以指定一个元素属于多个类，类名之间用空格分割。
  • 可以使用W3C验证工具验证CSS（https://jigsaw.w3.org/css-validator/）。

扩大你的词汇量：字体和颜色样式

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

与元素亲密接触：盒模型

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

高级Web建设：div与span

  • <div>元素用于将相关的元素归组在一起，放在逻辑区中。
  • 创建逻辑区有助于标识主内容区以及页面的页眉和页脚。
  • 可以使用<div>元素将需要共同样式的元素归组在一起。
  • 使用嵌套<div>元素为文件增加更多结构，这有利于保证结构清晰或者方便增加样式。不过除非确实需要，否则不要过多地增加结构。
  • 一旦用<div>元素将内容区归组在一起，类似于其他块元素，可以对这些<div>增加样式。例如，对包含在<div>中的一组元素，可以使用嵌入这些元素的<div>边框属性，对这组元素增加一个边框。
  • width属性设置一个元素内容区的宽度。
  • 一个元素的总宽度是内容区宽度，加上所增加的内边距、边框和外边距的宽度。
  • 一旦设置一个元素的宽度，它不会延伸来占满浏览器窗口的整个宽度。
  • text-align是块元素的一个属性，用来将这个块元素中的所有内容对齐，可以居中，左对齐或右对齐。这个属性可以由所有嵌套的块元素继承。
  • 可以使用子孙选择器来选择嵌套在其他元素中的元素，例如，子孙选择器 div h2 {…}
  • 会选择嵌套在<div>元素中的所有<h2>（包括子元素、孙子元素等）。
  • 可以对相关的属性使用快捷方式。例如，padding-top、padding-right、padding-bottom和padding-left都与内边距有关，可以用一个快捷规则来指定：padding。
  • 内边距、外边距、边框、背景和字体属性都可以用快捷方法指定。
  • <span>内联元素与<div>元素类似；它用于将相关的内联元素和文本归组在一起。
  • 类似于<div>，可以将<span>元素增加到类（或者为<span>元素指定唯一的id），对它们增加样式。
  • 有些元素有不同的状态，<a>元素就是这样一个例子。<a>元素的主要状态包括未访问、已访问和悬停。
  • 可以用伪类单独地为各个状态指定样式。伪类最常用于<a>元素，:link对应未访问的链接，:visited对应已访问的链接，:hover对应悬停状态。
  • 伪类还可以用于其他元素，而不仅限于<a>。
  • 另外一些伪类包括:hover，:active，:focus，:first-child和last-child伪类等。

摆放元素：布局与定位

这一章有一些东西需要辅助记忆，这里开一篇

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

现代HTML：HTML5标记

  • HTML5为HTML增加了很多新元素。

  • <section>、<article>、<aside>、<nav>、<header>和<footer>都是帮助你建立页面结构的新元素，与使用<div>相比，它们可以提供更多含义。

  • 用于对相关的内容分组。

  • <article>用于类似博客帖子、论坛帖子和新闻报道等独立的内容。

  • <aside>用于表示不作为页面主内容的次要内容，如插图和边栏。

  • <nav>用于组织网站导航链接。

  • <header>将标题、logo和署名等通常放在页面或区块最上方的内容组织在一起。

  • <footer>将诸如文档信息、法律措辞和版权说明等通常放在页面或区块最下方的内容组织在一起。

  • <time>也是HTML5中的一个新元素。这个元素用来标记时间和日期。

  • <div>仍然用于建立结构。它通常将元素组织在一起来指定样式，或者有些内容可能不适合放在HTML5中那些与结构相关的新元素中，这些内容就可以使用<div>创建结构。

  • 较早的浏览器不支持新的HTML5元素，所以一定要知道主要用户使用哪些浏览器访问你的Web页面，除非能确保新元素对你的用户适用，否则不要贸然使用这些新元素。

  • <video>是一个新的HTML元素，用于为页面增加视频。

  • 视频编码是用来创建视频文件的编码，常用的视频编码包括h.264、Vp8和Theora。

  • 视频容器文件包括视频、音频和元数据。流行的容器格式包括MP4、OGG和WebM。

  • 要提供多个视频源文件，确保你的用户可以在他们的浏览器中观看你的视频文件。

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

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

实现交互：HTML表单

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