Head First HTML与CSS 阅读笔记

Head First HTML与CSS 阅读笔记
Head First HTML与CSS

该文章整理于书籍《Head First HTML与CSS》第2版

 HTML

浏览器显示无缩进和空格？

浏览器会忽略HTML文档中的制表符、回车和大部分空格。随着HTML文档变得越来越复杂，你会发现，在某些地方加一些空格、回车和制表符，这会对提高HTML可读性很有帮助。

为什么需要标记？这肯定是一个html文档，不是很明显么？

标记告诉浏览器你的文档确实是一个HTML文件，如果没有加这个标记，有些浏览器可以接受，有一些不允许。

html5和html的关系？

实际上HTML5是HTML的最新版本，HTML5让我们编写HTML的很多做法大大简化，而且还提供了一些新的功能。

匹配标记不需要在同一行？

标记可以在同一行的任何位置开始和结束，或者也可以在不同行上开始和结束。只要确保必须一个标记开始，一个标记结束。

img标记怎么没有结束标记？

有些元素会使用一种简写记法，只有一个标记。如果一个元素设计为没有任何实际的内容，我们会简写，例如

为什么css规则前面有一个body？

css中的"body"表示“{”，“}”之间的所有css要应用于HTML 元素中的内容

页面上还可以单击图像而不只是文本，能用元素来实现吗

可以，如果把一个元素放在标记之间，这个图像就会像文本一样可单击。
我能向下经过很多个文件夹没有限制吗？

创建了多少层文件夹就能下行多少层，不过不推荐，因为网站组织太过复杂，有些浏览器对于路径中的字符个数会做出限制。

我的操作系统使用"\“作分隔符，是不是路径应该用“\”而不是”/"？

不是这样的，对于网页，只能用"/"
- 网站选择的文件名和文件夹名中不要使用空格
- 是在HTML中加段简短的引用，人们之所以在文本中使用双引号，原因可能有很多，不过如果使用，这就意味着这是某种特定的内容，它表示引用一段文字。既然浏览器知道这是一个引用，它就能用最合适的方式来显示。有些浏览器会在文本两边显示双引号，有些不会。页面中增加结构和含义绝对是有意义的。同时，你可以对引用设置样式，使它的外观如你所愿。
- 创建了一个单独的文本块，另外还把文字稍稍缩进。
能在
中使用?

如果你引用了某个人的话，而他又引用了另外某个人的言论，可能就需要这样嵌套使用。

块元素显示好像前后各有一个换行，通常用于WEB页面中的主要构建模块，而内联元素在页面文本流中总在“行内”出现，往往用来标记小段内容。

和
总要一起使用，这些元素离开彼此就没有任何意义了。

不能把文本或者其他元素放在
和
元素里

浏览器中要用<和>来开始和结束标记，如果是在HTML内容中使用这两个字符，就会有问题。不过HTML提供了一种简便的方法，可以使用一钟称为字符实体的简单缩写来指定这样一些特殊字符。

a标记看起来像是一个内联元素，但是还可以包围块元素，而不只是文本。所以根据具体的上下文，既可以是内联元素也可以是块元素。

为什么把它叫做“域名”而不是“网站名”？

因为他们完全是两码事，如果你看到w w w.starbuzzcoffee.com，这就是一个网站名，不过如果只有starbuzzcoffee.com部分，就是域名。还可以创建使用相同域名的其他网站，比如corporate.starbuzzcoffee.com或employees.starbuzzcoffee.com，所以域名可以用于多个网站。

FTP：file transfer protocol，文件传输协议。

SFTP：safe file transfer protocol，安全文件传输协议

URL：uniform resource locator 统一资源定位符

HTTP：hypertext transfer protocol 超文本传输协议，尽管”超文本文档“通常只是指HTML页面，但这个协议实际上还可以用来传输图像或Web页面可能需要的任何其他文件。

绝对路径告诉服务器如何从你的根文件夹到达某个特定的页面或文件

我们学过可以在标签的href属性中放入相对路径，既然他们不是绝对路径，服务器是怎么找到的呢？

单击一个相对链接时，在后台浏览器会根据这个相对路径和所单击页面的路径创建一个绝对路径，所以所有的Web服务器看到的都是绝对路径，这要归功于浏览器。

如果浏览器向Web服务器请求一个目录而不是文件时会发生什么？

它会尝试查找这个目录中的一个默认文件，如果服务器接收到一个末尾没有"/"的请求，而且这个目录确实存在，服务器就会帮你加上末尾的斜线，这回让服务器查找一个默认文件。

这么说默认文件都是index.html吗？

不一定，也可能时default.htm，这取决于你的托管公司使用哪种web服务器

所以我告诉别人我的url时，加上index.html不是更好？

不，最好不要加，如果将来你改变了web服务器，而它使用了另一个默认文件名，则原来的url就不再有效了

看来现在链接页面有两种方法：相对路径和url，相对路径只用来链接同一站内的页面，而url通常用来链接其他网站。

如果我对网站内部页面和外部页面使用统一的url那不是更容易吗？

url很长不容易编辑，而且也会影响HTML的可读性。另外，移动这个网站或者改变它的名字时，就必须修改所有这些url来反映新的网站位置。

元素有一个title属性，就是用来提供链接信息的，但是和head中的title不同。可以给任何元素增加title属性。
链接到一个页面（创建锚点）：元素可以带一个id属性，允许访问页面中的一个特定点

 see chai tee

111

如果一个元素中有两个属性，属性的前后顺序不重要

通常会在页面最上面（比如页面的顶部）定义一个目标top，并在页面的最下面定义一个目标"back to top"

使用target打开新窗口：如果没有target，浏览器就会在同一个窗口打开这个链接，如果目标为"_blank"，浏览器就会在一个新窗口中打开链接

总得使用文字作为元素内容吗？

不是的，其可以由文字和图像创建链接，HTML5还可以从块元素如
和
创建链接

我得到一个新的标签页而不是新窗口？

大多是浏览器现在都有一个默认设置，会在一个标签页中打开新窗口，而不是一个全新的浏览器窗口。如果想强制打开一个全新的窗口，则大多数浏览器可以通过首选项设置来实现。

如果多个元素都有target呢？如果已经打开了一个"_blank"新窗口，那么会在已经打开的这个新窗口中打开页面？还是会在另一个新的”_blank"窗口打开？

如果所有的元素中的target都指定为"_blank"则每个链接都会在一个新空窗口打开。不过，由此引出一个重点：不一定要把target设置为"_blank"，如果指定为另一个名字，如"coffee"，则那么有相同目标名"coffee"的所有链接都会在同一个窗口打开。这是因为，为target指定一个特定的名字的时候，如"coffee"实际上是对显示的链接页面的新窗口命名，"_blank"是一种特殊情况，告诉浏览器总是使用一个新窗口。例：

<a href="http://www.baidu.com" target="coffee">www.baidu.coma> <a href="http://www.moontang.xyz" target="coffee">www.moontang.xyza> <a href="http://www.hao123.com" target="_blank">hao123.coma>
1
2
3

jpeg、png和gif有什么不同？

加载一个有图像的页面并没有看到图像一个接一个地加载，为什么？

浏览器通常会同时获取图像，按照现有地计算机和网络速度，这一切发生的太快

为什么jpeg照片要比gif或png照片好，或者为什么gif或png logo要优于jpeg logo？

优于通常是结合图像质量和文件大小而言的。

img的属性alt有什么作用？

web上有一点可以肯定，你永远无法准确知道人们会用什么浏览器和设备来查看你的页面，访问者很有可能在使用移动设备，有视力障碍的人可能还要用屏幕阅读器，另外一些浏览器可能在网速极慢的环境下允许。可以使用imh元素的alt属性为访问者提高一些指示。

img图像调整大小

宽度和高度都使用像素数指定，如果图像在浏览器窗口刚好能放下，说明你的浏览器可能打开了"auto image resize"自动调整图像大小选项。

1

为什么不能直接使用width属性和height属性来调整页面上图像的大小？

因为浏览器在缩放图像使之适应页面大小之前，仍然需要获取整个大图像，如果使用这两个属性，则它们应当与图像的实际宽度和高度一致，可以用PS等工具去对图片的大小进行调整。

缩略图

如果web页面上有多个大图像，则可以通过创建图像的缩略图使你的web页面更可用，下载也更快，缩略图是一些小突袭，用户单击这些缩略图时可以看到原来的大图像。要让页面更可用，把每个照片替换为一个更小的图像，然后创建从这个缩略图到各个更大照片的链接。

用a元素包围文本时，会有一个下划线。为什么图像没有相应的标志呢？

鼠标经过图像时，光标会改变，指示你可以单击这个链接图像。大多数情况下，用户都可以通过上下文和鼠标光标了解到一个图像是链接。

能不能直接链接到jpeg图像，而不是那些html页面？

可以，在a标签的src里写jpg的地址就好了，如果这样做，单击链接时，浏览器就会在一个空页面显示这个图像。不过一般认为直接链接到一个图像并不是一个好的做法，因为通常你需要为所显示的图像提供一些上下文。

html活标准

html不再会有版本6、7、8，指定标准的人已经把这个规范变成了一个活的标准，它会随着技术的发展形成相应文档。向后兼容性表示我们可以继续向HTML增加新的内容，浏览器会支持这个新内容，不过它们还会继续支持原来的内容。html5增加了一些新元素和新属性。对于新元素和新属性，一定要物尽其用，使用最合适的元素完成它最擅长的工作。

字符编码

字符编码告诉浏览器页面中使用了哪一种字符。例如页面可以使用英语、中文、阿拉伯语以及很多其他字符的编码来编写。浏览器只能读取数据，它可能会猜测要使用哪种字符编码，如果猜错了可能不仅导致页面显示错误还会带来潜在的漏洞让黑客有机可乘。有了字符编码就不需要浏览器瞎猜了。

meta

字符编码为我们提供了一种方法，可以在计算机上表示某种语言中所有的字母，数字和其他符号。可能知道一些编码例如ASCII，甚至莫尔斯码还有很多其他的编码。幸运的是如今标准已经统一为Unicode字符编码。采用Unicode，一种编码就可以表示所有语言。由于还存在其他编码，所以我们还需要告诉浏览器我们在使用Unicode。

<meta charset="utf-8">
1

没有title的head算什么？

只能在head元素中放置,<meta>,和<style>元素 <blockquote> 为什么要遵循标准？ </blockquote> 遵循标准则你的页面会更快地显示，而且在不同浏览器中显示时差异会更小，css也能更好地工作。 <h2><a name="t2"></a><a id="CSS_262"></a>CSS</h2> <blockquote> 如果一个元素有多个规则，这是怎么处理的？ </blockquote> 一个元素可以有多个规则，你可以根据需要来指定，每个规则会在现有的样式信息前面增加新的样式信息。 <blockquote> 这样有什么好处吗？单独地组织各个元素不是更好么？这样你就能清楚地知道每个元素地样式是什么？ </blockquote> 不见得。如果把共同地样式合并在一起，倘若它们有改变，你只需要在一个规则中修改，如果把它们分开，就必须修改多个规则，这很容易出错。 <blockquote> 为什么要使用一个下边框为文本加下划线？文本不是有一个underline地下划线样式么？ </blockquote> 如果使用border-bottom，这条线会延伸到页面边缘。而使用Underline时，下划线只出现在文本下面，不会继续延伸到页面边缘。设置文本下划线地属性名为text-decoration，值为underline。 <blockquote> 能对head中元素加样式吗？ </blockquote> 我们只能对body中地元素增加样式，head不能。 <blockquote> 如何链接外部样式表 </blockquote> <pre data-index="3" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><link type="text/css" rel="stylesheet" href="log.css"> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <blockquote> 字体sans-serif </blockquote> 这种字体没有衬线，看起来很清晰。默认是serif字体，这种字体有衬线，通常认为这种字体在计算机屏幕上阅读时会比较困难。 <blockquote> 继承 </blockquote> 元素可以从它们地父元素继承样式。但不是所有样式都能继承，只有一部分能继承，如font-family。只需要改变body规则中地font-family属性就能改变整个网站的字体。一般来讲，如果样式会影响你的文本外观，所有这些样式都能继承，如color，font-family以及所有与字体相关的属性。其他属性不能继承，如边框。 <blockquote> 我覆盖继承的值时，浏览器怎么知道应用哪个规则？ </blockquote> 对于CSS，总会使用最特定的那个规则。如果两个选择器有相同的特定性而无法解决冲突，就要利用样式表文件中规则的顺利来解决问题。 <blockquote> 如果我不希望继承，继承得到的属性是不是都能被覆盖？ </blockquote> 使得，总能使用一个更特定的选择器覆盖从父选择器继承的属性。 小知识： <ol><li>css包含一些简单的语句，称之为规则。</li><li>典型的规则包括一个选择器，以及一个活多个属性和值</li><li>每个属性声明以一个分号结束。</li><li>可以使用元素名作为选择器来选择任意元素。</li><li>通过用逗号分隔元素名，可以一次选择多个元素。</li><li>通过为你想改变的元素创建一个更特定的规则，能覆盖该元素继承的属性。</li><li>通过在元素名和类名之间加一个"."，可以选择该类中的一个特定元素。</li><li>使用".classname"可以选择属性这个类的所有元素。</li></ol> 用font-family属性定制页面中使用的字体，大多数计算机上通常只安装了部分字体，所以在选择字体时要特别当心。 <ol><li>serif字体系列包括有衬线的字体。适合新闻报纸排版。</li><li>sans-serif字体系列包括没有衬线的字体，适合在计算机上更容易识读。</li><li>monospace字体系列中的字体包含固定宽度的字符。适合显示软件代码示例。</li><li>cursive字体系列包括看似手写的字体。有时会看到标题中使用这些字体。</li></ol> 利用font-family属性，你可以创建一个首选字体列表。我们希望大多数浏览器都能有第一个选择，但是如果没有，至少可以确保浏览器能提供同一个字体系列中的一个通用字体。 另一种方法时使用Web字体向浏览器提供一种字体。为此，要用到CSS的一个比较新的特性：@font-face规则。这个规则允许你定义一种字体的名字和位置。 <blockquote> woff或者web开放字体格式到底是什么？ </blockquote> woff是作为web字体的标准字体格式出现的，如今所有现代浏览器都对woff提供了支持。如果要为可能不支持woff的浏览器提供web字体，就需要提供一个或多个格式作为候选。 <blockquote> 要使用一个web字体，我必须在一个服务器上托管字体文件，是吗？ </blockquote> 如果你想为web上的用户提供字体，就必须把这些文件放在一个服务器上，或利用一个托管服务。 <blockquote> 怎么使用@font-face？ </blockquote> <img src="https://1000bd.com/contentImg/2022/07/31/201200726.png" alt=""> <img src="https://1000bd.com/contentImg/2022/07/31/201200898.png" alt=""> <blockquote> @font-face规则不论看起来还是从表现上都不像一个css规则是吗？ </blockquote> 可以认为@font-face是一个内置的css规则，而不是一个选择器规则。利用此规则，可以获取一个web字体，并为它分配一个font-family名。 <blockquote> 还有其他需要了解的内置css规则吗？ </blockquote> @import允许导入其他CSS文件 @media允许创建特定于某些"媒体"类型的css规则。 <blockquote> web字体有什么缺点吗？ </blockquote> 首先，获取web字体需要花费一定时间，所以第一次获取web字体时，你的页面性能可能会受影响。另外，管理多个字体文件也是件痛苦的事情。 <blockquote> 如何调整字体大小？ </blockquote> px：用像素指定字体大小时，就是在告诉浏览器字母高度是多少像素。 %：用一个百分数指定字体大小时，会相对于另一个字体大小指出这个字体有多大。 em：类似于百分数，这也是一个相对度量单位。使用em时，不是指定一个百分数。而是要指定一个比例因子。 关键字：把一个字体大小指定为xx-small,x-small,small,medium,large,x-large或xx-large，浏览器会把这些关键字转换为像素值，它会使用浏览器中定义的默认值来完成这个转换。 <blockquote> 如何指定字体大小？ </blockquote> <ol><li>选择一个关键字，指定它作为body规则中的字体大小，这相当于页面的默认字体大小。</li><li>使用em或百分数，这相对于body字体大小指定其他元素的字体大小</li></ol> 如果相对于body字体大小定义其他元素的字体大小，那么改变web页面中的字体大小就会很容易，只需要改变body字体大小就可以了。 <blockquote> 通过在body元素中定义一个字体大小，实际上我是为页面定义一个默认大小，是吗？ </blockquote> 通过在body元素中设置一个字体大小，这样在设置其他元素的字体大小就可以相对于其父元素来设置。 <blockquote> 我们真的需要考虑用户调整浏览器字体大小吗？ </blockquote> 是的，几乎所有浏览器都允许用户将页面的文本变大或变小，如果你采用一种相对方式定义字体，用户调整页面字体大小时就没有任何问题。不顾偶要当心不要使用像素大小，因为有些浏览器在调整像素大小时会有麻烦。 <blockquote> 我还是喜欢像素来设置字体大小，因为这样一来，我的页面会严格按我指定的字体大小显示。 </blockquote> 如果每个元素的字体大小都使用像素指定，你会为每个元素准确选择你希望的字体大小，不过这样作要以为用户提供的灵活性为代价。这样创建的页面维护也更困难一些。 <blockquote> 那么在body规则中能不能不使用大小关键字而使用em或%，如果我使用90%作为body的字体大小，这到底是什么意思？ </blockquote> 如果在body规则中指定字体大小为90%，这将是默认字体大小的90%，如果你希望一个字体大小与关键字指定的大小稍有区别，就可以使用%或em <blockquote> font-weight使用 </blockquote> 允许你控制文本的粗细，可以设置为bold。如果一个元素默认地设置为bold，或者从父元素继承了粗体，则可以normal去掉粗体样式。还有两个相对font-weight属性：bolder和lighter。使用这两个属性值时，会相对于所继承地值使文本样式稍粗一些或稍细一些。还可以把属性设置为100-900之间地一个数。 <blockquote> 如果没有使用web安全颜色，我的页面在其他浏览器上就不会有正确地演示，为什么还不讨论web安全颜色呢？ </blockquote> 让我们回到web浏览器地早期阶段，那时候很少有人能拥有支持大量颜色地计算机屏幕，所以当时创建了web安全调色板，以确保页面在大多数显示屏上能有一致地显示。 <blockquote> 类似#cb0的十六进制码，这是什么意思？ </blockquote> 如果每一组分量中两位数字都相同，你可以使用简写。因此，，例如#ccbb00可以缩写为#cb0 文本装饰text-decoration line-through表示有一个从文本中间穿过的横线。 underline overline下划线和上划线 none表示没有任何装饰 如果em有两个不同的规则，一个指定了上划线，另一个指定了下划线，它们会累加吗？这两个装饰都能得到么？ 不能。你要把这两个值合并到一个规则中，才能同时得到这两个文本装饰。对于text-decoration只会选择一个规则，不同规则中的装饰不会累加在一起。所以要得到两个装饰，唯一的办法就是在同一个text-decoration声明中同时指定。 我喜欢删除线装饰，能不能在我编辑的文本上使用这个装饰，来指示需要删除的内容？ 当然可以，不过还有一种更好的办法。HTML提供了一个我们还没有谈到的元素<del>，它能把HTML中某些内容标记为要删除的内容。还有一个类似的元素，名为<ins>，这会标记要插入的内容。 <h2><a name="t3"></a><a id="_471"></a>盒子模型</h2> <blockquote> line-height属性 </blockquote> 增加文本的行高可以改善可读性，这样作还可以使得页面不同部分形成对比，产生反差。 <blockquote> 什么是盒子模型？ </blockquote> 每个元素就是一个盒子，每个盒子由一个内容区以及可选的内边距、边框和外边距组成。 内容区：每个元素都会有一些内容如文本和图像。在内容区，内容和盒子边缘之间没有空间 内边距：可选，不一定有。 边框：元素周围有一个可选的边框。这个边框会包围内边距。 外边距：利用外边距，可以在同一个页面上的不同元素之间增加空间。 盒子模型看起来可能很简单，只有内容、内边距、边框和外边距。不过如果把它们都结合到一起，对于一个可能有内部空间和外围空间（外边距）的元素，就会有无数种方法来设置这个元素的布局。 <blockquote> 内边距和外边距有什么区别？ </blockquote> 外边距提供元素之间的间距，而内边距是在内容周围增加额外的空间。如果有一个边框，内边距就在边框内部，而外边距在边框外部，可以把内边距看作是元素的一部分，而外边距包围你的元素，将它与其他元素隔开。 <blockquote> 如果要有边框或外边距，是不是得现有内边距？ </blockquote> 没必要，它们都是完全可选的，相互之间没有依赖关系。所以你可以有一个边框而没有内边距，或者可以有一个外边距而没有边框。 <blockquote> 除了大小，看来不能对内边距和外边距指定样式，是吗？ </blockquote> 基本正确，内边距和外边距都是用来提供更多可见的空间，不能对内边距和外边距指定颜色，也不能加任何装饰。不过，由于它们是透明的，所以他们会呈现背景颜色或背景图像。内边距和外边距之间有一个区别：元素的背景颜色会延伸到内边距下面，但不会延伸到外边距。 <blockquote> 增加一个背景图像background-image和img标签 </blockquote> background-image属性用途非常特定，它只要设置一个元素的背景图像，这个属性并不是用来在页面中放置图像，要放置图像肯定要得用img元素。可以这样来考虑：背景图像属于表现方面，使用background-image属性的唯一理由就是让元素更有喜羊羊了。另一方面，img元素则用来包含一个图像，它在页面中可能有更重要的作用，如照片或logo。我们也可以在段落中放置图像，不过保证其只是一个装饰，在页面中没有任何具体的意义，只会让元素看起来更漂亮一些，这时用background-image更合适。 PS：url两边不需要加银行 <pre data-index="4" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;">background-image:url(image/111.png); <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <blockquote> background-repeat属性和background-position属性 </blockquote> background-repeat可以设置为repeat,no-repeat,repeat-x,repeat-y,inherit background-position属性可以设置图像的位置，可以按像素指定，也可以指定为一个百分数，或者还可以使用关键字指定，如top,left,bottom和center <blockquote> 边框样式border-style </blockquote> <img src="https://1000bd.com/contentImg/2022/07/31/201201072.png" alt=""> <blockquote> 边框宽度border-width和边框颜色border-color和边框圆角border-radius </blockquote> 边框宽度border-width可以设置为thin ,medium,thick或者像素值 边框颜色border-color可以设置rgb也可以是十六进制 边框圆角border-radius可以设置像素值或者em <blockquote> 为什么仅仅为了证明在页面上的唯一性就需要一个id？使用类也完全可以做到这一点不是吗？ </blockquote> 假设你在与一个团队共同开发一个web项目，某个团队成员看到一个类时，他会认为其他元素可以重用这个类。另一方面，如果他看到的时一个id，就会知道这对应一个唯一的元素。id之所以很重要还有另外一些原因，例如要在一个页面上指定元素位置，你就需要每个要定位的元素都有唯一的id。要按id选择一个元素，需要在id前面使用一个#字符。class和id还有一点差别，id选择器只与页面中的一个元素匹配。 <blockquote> 为什么选择器要写为#guarantee而不是p#guarantee？ </blockquote> 有些页面将这个唯一的id指定给一个段落，而在另外一些页面上可能会把这个id分配给一个列表或块引用。所以你可能需要为这个id定义多个规则。 <blockquote> 为什么说样式表的顺序很重要？ </blockquote> 因为这些样式表从上到下排列，最下面的样式表最优先。 <blockquote> 如何根据不同的设备区调整样式表？ </blockquote> <ul><li>可以利用link中的media属性</li></ul> <pre data-index="5" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><link href="one.css" rel="stylesheet" media="screen and (max-device-width:480px)"> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <ul><li>还可以直接在css中添加媒体查询</li></ul> <pre data-index="6" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;">@media screen and (min-device-width:481px){ ... } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> @media规则中只包含特定于一种媒体类型的css规则，在css文件中，要把对所有媒体类型都通用的规则放在@media规则下面，这样以来就不会不必要的重复规则了。 <blockquote> 除了max-device-width和min-device-width，还有哪些媒体属性吗？ </blockquote> 还有很多，包括最大和最小宽度，最大和最小高度，方向，颜色，宽高比等。可以查看 <blockquote> 要为不同的媒体类型和特征指定不同的css规则，使用link还是@media，哪一个更好？ </blockquote> 这两个都行，不过要注意，如果把所有规则都放在一个文件中，再使用@media规则将他们分开，你的css会变得非常庞大，通过为不同的媒体类型使用不同的Link元素就能按照媒体类型再不同文件中组织css，所以如果你的css文件很大，我们就建议使用link元素指定不同的样式表。 <h2><a name="t4"></a><a id="div_599"></a>div</h2> <blockquote> 页面中除了用标题和段落等建立的结构以外，我还应该用div增加更高一层的结构，是吗？ </blockquote> 在页面中要使用div但不要滥用。如果这样做有助于你将页面分解为逻辑区，从而保证结构清晰并便于指定样式，那么可以增加更多的结构。如果只是为了在页面中创建大量结构而增加div，就只会让页面更复杂，从而没有任何实际好处。 <blockquote> 如何确定整个盒子的宽度？ </blockquote> 需要将内容区的宽度加上左和右内边距、左右外边距以及边框的宽度。边框宽度要加两次，因为左右都有边框。 <blockquote> 如果没有设置一个元素的宽度，从哪得到它的宽度呢？ </blockquote> 一个块元素的默认宽度是auto，这说明它会延伸沾满可用的空间。 <blockquote> 如果没有外边距、内边距或边框呢？ </blockquote> 那么内容的宽度就是盒子的整个宽度。 <blockquote> 高度呢？ </blockquote> 一般来讲，一个元素的高度是默认的，也就是auto，浏览器在垂直方向上会延伸内容区，使得所有内容都可见。也可以显式地设置一个高度，不过这会有风险，如果你指定地高度不够大，不足以放下内容，内容底部有可能“溢出”到其他元素中。一般的，不用指定元素地高度，就让它们默认为auto <blockquote> 为什么text-align属性会影响图像地对齐方式？它不是支队文本对齐吗？ </blockquote> text-align会对块元素中所有内联内容对齐。所以，我们对div块元素设置了这个属性后，它地所有内联内容都会居中。text-align只能在块元素上设置。如果直接在内联元素如img属性上使用，则不起作用。 <blockquote> 子孙选择器 </blockquote> <pre data-index="7" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;">div h2{ } #elixirs h2{ } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li></ul></pre> <blockquote> 有没有一种办法选择直接的孩子？ </blockquote> 可以使用#elixirs>h2，这样一来，只有当h2是一个id为elixirs的元素的直接孩子时，才会选择这个h2 <blockquote> line-height会继承，如何避免标题行高随继承改变？ </blockquote> 如果设置整个div的行高则div中所有元素都会继承这个属性，包括标题，这时很可能行高太小导致两行挤到一起。 我们希望，div中的元素行高不要基于elixirs中div的字体大小，而是要基于各个元素本身的字体大小。可以通过对line-height直接使用一个数，而不是一个相对度量（比如em或%）。如果使用数1，就表示elixirs中div中的各个元素行高是其自己字体大小的一倍，而不是elixirs中div字体大小的1倍。 <blockquote> 缩写？ </blockquote> 关于padding margin的缩写，一般是按照上右下左的顺序 关于border的缩写是thin solid color <blockquote> 为什么我要用span而不是另外一个内联元素em或strong？ </blockquote> 通常，总希望用与内容含义最相近的元素来标记内容，所以如果要强调某些文字，就可以使用em。如果想强调一个重点，可以使用strong。不过，如果你想要的只是改变某些文字的样式，就应该使用span，并把span元素放在适当的类中，对它们进行分组并指定样式。 <blockquote> 能不能对span元素设置类似width之类的属性？一般的内联元素能不能设置这些属性？ </blockquote> 可以设置内联元素的宽度，不过在对这些元素进行定位之前，你可能注意不到宽度改变的结果。另外还可以对这些元素增加外边距、内边距以及边框。内联元素上的外边距和内边距与块元素稍有不同，如果一个内联元素四周都增加外边距，只能看到左边和右边会增加空间。你也可以对内联元素的上边和下边增加内边距，不过这个内边距不会影响包围它的其他内联元素的间距，所以内边距会与其他内联元素重叠。图像和其他内联元素稍有不同，图像的宽度、内边距和外边距属性都表现得更像是块元素的相应属性。 <blockquote> 链接状态排序 </blockquote> link visited hover focus active <blockquote> 什么是伪类？ </blockquote> 伪通常表示一个东西看上去像是真的，不过其他它不是。a:link都允许你指定样式，就好像它们是类一样。所以这些就是伪类。换句话说，你可以对伪类指定样式，但是没有人在html中真正输入这些伪类。:first-child对应元素的第一个子元素。:last-child对应元素最后一个子元素。 <blockquote> 层叠 </blockquote> 1、收集所有样式表 2、找到所有匹配的声明 3、对所有匹配的规则排序（作者，读者，浏览器） 4、按特定性对所有声明排序：0【这个选择器包含id吗】0【这个选择器包含类或伪类吗，每个类或伪类加1分】0【这个选择器包含元素名吗，一个元素名加1分】 注意，我们只在作者、读者和浏览器类别范围内排序，并没有对整个列表重新排序。是在各个类别中按特定性排序，对于有相同特定性的元素，则根据样式表中的顺序再次进行排序。 5、对冲突的规则，按照它们在各自样式表中出现的顺序进行排序 <blockquote> 有关!imortant </blockquote> 读者可能会覆盖一个样式，在他的属性声明中最后放置一个!important这样会覆盖作者的样式 <blockquote> 读者真的会建立它们自己的样式表吗？ </blockquote> 总的来说不会，不过有些情况下，有视力障碍的人可能会这样做，当然总会有一些人追求完美。 <blockquote> 如果经过所有这些步骤，我还是没有找到包含特定属性声明的规则，来得到我想要确定的属性值，那该怎么办？ </blockquote> 如果在层叠的所有规则中都没有找到匹配的属性，就要使用继承了。并不是所有属性都能继承，不过对于能继承的属性浏览器会查看这个元素的祖先，从它的父元素开始，尝试找个这个属性的值。如果找到了，就是你要用的属性值。 <h2><a name="t5"></a><a id="_733"></a>布局</h2> <h3><a name="t6"></a><a id="_735"></a>流的概念</h3> 流实际上就是浏览器在页面上摆放HTML元素所用的方法。浏览器从HTML文件最上面开始，从上到下沿着元素流逐个显示所遇到的各个元素。先来考虑块元素，它会在每个块元素之间加一个换行。所以首先会显示文档中的第一个元素，然后是一个换行，然后是第二个元素，接下来又是一个换行，如此继续，从文件最上面一直到文件末尾逐个显示，这就是流。 内联元素在水平方向上会相互挨着，总体上会从左上方流向右下方。文本时内联元素的一种特殊情况，浏览器会把它分解为适当大小的内联元素，以适应给定的空间。如果让浏览器窗口稍稍窄一点呢，或者用width属性缩小内容区大小呢？这样以来，放置内联元素的空间会缩小。 <h3><a name="t7"></a><a id="_741"></a>外边距折叠</h3> 浏览器并排放置两个内联元素时，外边距不会折叠。 浏览器上下放置两个块元素时，它会把它们共同的外边距折叠在一起，折叠的外边距高度就是最大的外边距高度。如果两个外边距相同，它们就会折叠到一起。 <blockquote> 内联元素可以有外边距吗？ </blockquote> 可以。不够通常并不会设置内联元素的外边距。只有一个例外，这就是图像。 <blockquote> 如果一个元素嵌套在另一个元素中，它们都有外边距怎么办？会折叠吗？ </blockquote> 是的，确实会折叠。只要两个垂直外边距碰到一起，它们就会折叠，即使是一个元素嵌套在另一个元素中也不例外。注意，如果外面的元素有一个边框，那么两个元素的外边距就不会碰到一起，这样就不会这地额。但是如果把这个边框去掉，这两个外边距就会折叠。 <blockquote> 既然文本的内容不是元素，为什么文本会作为内联元素工作？ </blockquote> 即使是文本内容，浏览器也要让它流入页面。所以浏览器会确定一行能流入多少文本，然后把这行文本当作一个内联元素。浏览器甚至会在它周围创建一个小盒子。如果调整页面大小，文本会重新适应内容区，所有这些块也会随之改变。 <h3><a name="t8"></a><a id="float_759"></a>float</h3> float属性首先尽可能远地向左或向右浮动一个元素，然后它下面地所有内容会绕流这个元素（所谓绕流，就像是液体一样绕着这个元素流动）。浏览器遇到浮动元素时，会把它尽可能放在最右边。还会从流中删除这个段落，就好像它浮在页面上一样。 注意，这些块元素在浮动元素地下面。不过，对内联元素定位时，它们会考虑浮动元素地边界，因此会围绕着浮动元素。对于块元素中地内联元素，它们会围绕这个浮动元素。 浮动一个元素时，如果希望它在某个元素后面，就要移动浮动元素的HTML，让它紧挨着放在那个元素下面。 <blockquote> 我们是不是可以把主内容浮动到左边，而不是把边栏浮动到右边，这样不行吗？因为主内容已经在最上面，这样我们就不用到处移动HTML，也能得到同样的效果？ </blockquote> 唯一的问题是，这样并不能得到一个漂亮的页面。要记住，如果要浮动一个元素，必须为这个元素设置一个宽度，如果你对主内容区设置一个宽度，当页面的其余部分随着浏览器宽度的变化而调整大小时，主内容区的宽度却一直保持稳定。通常，边栏会设计得比主内容区窄，当边栏扩展得太宽时，页面看起来就会很糟糕。所以，在大多数设计中，都往往希望主内容区扩展，而不是边栏。同时可以利用float去修正页眉图像。 通过扩大主内容区得外边距，我们可以创造了一种两栏布局的假象。但是还会有小问题，如果调整浏览器，让它很宽，页脚会上移出现在边栏下面。边栏不在流中，所以页脚会将它忽略，内容太短时页脚就会上移。 <ol><li>如果使用外边距技巧，只能保证页脚在内容区下面而不是整个页面下面。</li><li>如果对内容区和边栏都设置宽度则这样不允许页面正确的扩展和收缩。</li></ol> <h4><a id="_778"></a>解决重叠问题</h4> clear属性。当元素流入页面时，在这个元素左右或两边都不允许有浮动内容。它会查看页脚有没有浮动元素，如果有，就会把页脚下移，直到它右边没有浮动内容为止。 <blockquote> 能不能浮动到中间？ </blockquote> 不行，CSS只允许将一个元素向左或向右浮动。不过，如果你仔细想想要想浮动到中间，那么这个浮动元素下面的内联内容就必须围绕这个元素的两边流动，这在浏览器中很难做到。 <blockquote> 浮动元素的外边距会折叠吗？ </blockquote> 不会，很容易看出为什么不会。这与流入页面的块元素不同，浮动元素只是浮在页面上。换句话说，浮动元素的外边距并不会碰到正常流中元素的外边距，所以它们不会折叠。 不过这引出一个很好的想法，可以找出布局的一个常见错误。如果有一个主内容区和一个边栏，通常会对它们分别设置一个上外边距。然后，如果浮动边栏，它仍然有一个外边距，但这个外边距不会再与它上面的空间折叠。这样一来，如果你不记得浮动元素不会折叠外边距，最后边栏和主内容很可能会有不同的外边距。 <blockquote> 可以浮动内联元素吗？ </blockquote> 可以，最好的例子就是浮动图像。将图像在段落中向左或向右浮动，你会看到文本会围绕在它周围。不要忘记增加内边距，给图像一点空间，可能还可以增加一个边框。 <blockquote> 能不能把浮动元素想成是被块元素忽略的元素，但内联元素知道它们在哪里？ </blockquote> 可以，这样考虑很好。嵌套在块元素中的内联内容总会围绕浮动元素，内联元素会留意浮动元素的边界，而块元素会正常流向页面。 <blockquote> 对于float设计在智能手机上查看这个web页面时，它居然把边栏内容放在主内容之上，这样我必须滚动页面才能看全内容？ </blockquote> 没错，出现这种情况是由于我们是按照这个顺序摆放div的。由于我们需要把边栏放在页眉下面，而且要在主内容之间，如果有人使用功能受限的浏览器，他们看到的页面就会采用我们写页面时使用的元素顺序，边栏在最前面。不过大多数人更希望先看到主内容，然后才是某种形式的边栏或导航。 <blockquote> 右紧左松VS右松左紧 从设计来讲，第一种会更好，从信息角度讲，第二种会更好。因为div的摆放顺序是正确的。有没有一种方法能够可以同时得到两种方法的好处：能不能让边栏有一个固定宽度，而且div仍然是HTML中的第一个元素。 </blockquote> ??? <blockquote> 为什么页眉图像下面的div不增加clear属性 </blockquote> 两个图像所占的垂直空间相同，所以页面中的其他元素都能稳定在它们自己的位置上。 <h3><a name="t9"></a><a id="_814"></a>流体与冻结设计</h3> 目前为止，我们采用的所有设计都称为流体布局。因为不论我们将浏览器调整到多大的宽度，布局都会扩展，填满整个浏览器。这些布局很有用，通过扩展它们会填充可用空间，使得用户能够充分利用它们的品目空间。不过有时让布局锁定可能更重要，这样一来当用户调整屏幕大小时，你的设计仍能保持原样。这称为冻结布局。 要把当前页面变成一个冻结页面，只需要在css中新增一个固定的宽度。这样即使浏览器大小调整了，这个宽度也不变。 这当然能解决边栏扩展的问题，不过浏览器很宽时右边会有留白，这时可以利用margin:0 auto来居中,这叫凝胶布局。 <h3><a name="t10"></a><a id="absolute_822"></a>absolute绝对定位</h3> 一个元素绝对定位时，浏览器首先要做的是将它从流中完全删除，然后浏览器将这个元素放置在top和right属性指定的位置上。流中的元素不会将其内联内容围绕在一个绝对定位元素周围，它们完全不知道页面上有这个绝对定位的元素。 这与浮动元素有所不同，因为流中的元素会调整它们的内容来适应浮动元素的边界，不过绝对定位元素对其他元素没有任何影响。 当绝对定位有重叠时，可以利用z-index数小时 <blockquote> position的属性的默认设置是什么？ </blockquote> position的默认值是“static”(静态）。如果是静态定位，元素就会放在正常的文档流中，而不是由你来指定位置，要由浏览器决定这些静态定位元素放在哪里。你可以使用float属性将一个元素从流中取出，可以让这向左或向右浮动，但是最终仍然是由浏览器来确定它放在哪里。与position属性的“absolute”值相比，使用绝对定位时，将由你来告诉浏览器究竟应该把元素放在什么位置。 <blockquote> 除了static和absolute，还有没有其他的position属性值？ </blockquote> 实际上，position属性有4个值: static， absolute， fixed和relative。你已经了解了static和absolute。固定(Fixed)定位是将元素放在相对于浏览器窗口的一个位置上(而不是相对于页面)，所以固定元素永远也不会移动。后面几页你会看到固定定位的一个例子。相对(Relative)定位会让元素正常地流入页面，不过在页面上显示之前要进行偏移。相对定位常用于更高级的定位和特殊效果。 <blockquote> 必须像对浮动元素一样为绝对定位元素指定宽度吗？ </blockquote> 不，绝对定位元素不用指定宽度。不过，如果没有指定宽度，默认的，块元素会占浏览器的整个宽度（当然要减去你指定的距左边或右边的偏移量)。这可能正是你想要的，也可能不是。所以如果你想改变这种默认行为，就要设置width属性值。 <blockquote> 指定位置时必须使用像素来指定吗？ </blockquote> 答;不，指定元素位置还有一种常用方法——可以使用百分数。如果使用百分数，改变浏览器宽度时，元素的位置可能会改变。例如，如果浏览器设置为800像素宽，元素的left位置设置为10% ，那么元素就会放在距浏览器窗口左边80像素的位置。不过，如果你的浏览器大小调整为400像素宽，宽度就会缩减为400像素的10%，也就是距浏览器窗口左边40像素。百分数还常用于指定宽度。如果不需要为元素或外边距指定特定的宽度，就可以使用百分数，让主内容区和边栏的大小更为灵活。在两栏和三栏布局中会经常看到这种用法。 但是这个时候因为流元素根本不知道绝对定位元素的存在，所以不能再使用clear了。 <h3><a name="t11"></a><a id="table_848"></a>table布局</h3> <pre data-index="8" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;">div#tableContainer{ display:table; border-spacing:10px; } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> 表示tableContainer元素要像表格一样摆放 border-spacing属性创建了一个10px的间距，这会在单元格之间增加10px的空间，另外在边界周围也会增加10px的空间。不过，border-spacing和外边距创建的空间不会折叠，所以最后页眉或页脚和两列直接的距离是二者外边距相加。要想修正只能修改页眉或页脚的上下边距。 <pre data-index="9" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;">div#tableRow{ display:table-row; } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> tableRow表示表格中的一行，我们的表格中只有一行，所以只需要这一个。如果你有多行，可以考虑使用一个类，这样就可以用一个规则指定所有行的样式。 <pre data-index="10" class="prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">div#sidebar{ display:table-cell; } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> table-cell表示单元格。 优势：浏览器变宽然后再变窄，两列的高度总是一样的，而且我们不会再遇到某一列与页脚重叠的问题。另外，对于移动用户，内容也会以正确的顺序显示。 <blockquote> display：table和HTML表格很类似？ </blockquote> 它们都是在HTML中创建一种结构，能够映射到表格的行和列，从这个意义上讲，它们确实是类似的。不过，与HTML表格不同，cSS表格显示只是使用一种类似表格的布局来表现这个结构中的内容。HMTL表格面向的是表格数据，也就是应当有表格结构的数据。所以，使用CSS表格显示只是创建某种表现布局的一种方法，而HTML表格则是建立数据的结构。HTML表格的内容将在第13章介绍。 <blockquote> 如果我的表格显示里需要不止一行，该怎么办呢？ </blockquote> 要想再增加一行，可以类似“tableRow” <div>，再增加一个<div>,嵌套在“tableContainer”<div>中，其中包含的列数要与第一行的列数相同。如果要增加多行，可以像这样增加更多<div>。 <blockquote> 为什么要在css中使用vertical-align:top为每个单元格增加垂直对齐？ </blockquote> 这是为了确保所有内容都与单元格上边对齐。如果每个单元格都按这种方式对齐，那么Starbuzz页面上每列中的内容就会在顶端对齐，看上去会更专业。如果没有增加垂直对齐方式，你会看到，浏览器中的默认对齐方式设置为中间对齐。当然，有些情况下，这可能正是你想要的!垂直对齐可以设置为top (顶端对齐), middle (中间对齐)或bottom(底端对齐)。 <blockquote> 一个单元格中放多少内容会有影响吗？ </blockquote> 答;没什么影响。你可能想确保各个列的内容数量不要过于参差不齐，比如说与其他列相比，某一列的内容过多，使页面看起来很不均衡。不过,总的说来，各列放多少内容要由你以及你希望的页面外观来决定。 <h3><a name="t12"></a><a id="_895"></a>各种布局比较</h3> 浮动布局 我们对休闲室页面使用了浮动布局，将elixirs <div>浮动到页面中主内容的右边。在这种情况下，float很合适，因为我们希望主内容围绕着elixirs<div>，它确实出色地完成了这种效果。float还有一种用法(不过我们还没有这样用过),它非常适合在一个文本段落中浮动图像，让文本围绕着这个图像。接下来我们使用float使sidebar <div>浮在Starbuzz页面中，并使用clear确保这个浮动边栏不会与页脚重叠。这种方法有一个很大的缺点，我们必须把需要浮动的整个<div>移到页面主内容之上，如果这种顺序并不反映页面中内容的相对重要性，这种做法往往不是最优的。另外还有一个潜在的缺点，使用float时，将无法创建两个高度相同的列,所以如果你想达到这个目标，就需要选择其他方案。 凝胶布局 接下来我们创建了一种冻结布局，由一个固定大小的<div>包围页面中的所有内容，然后利用auto属性值允许外边距扩展，把它调整为一种凝胶布局。这样可以得到一个很漂亮的布局，Web上很多页面就采用了这种设计。例如，你会看到很多博客都是采用这种方式建立的。这样也解决了内容顺序的问题。这种方法的缺点在于，内容不会扩展来填满整个浏览器窗口（不过很多人可能根本不认为这是一个缺点)。 绝对布局 然后我们使用绝对定位得到了一个流体布局，这也能保证内容的顺序正是我们希望的。通过将边栏设置为一个特定的宽度并将它定位在主内容右边，就有了一个可以随页面大小扩展和收缩的主内容区，而边栏会一直保持固定的大小，而且固定在浏览器窗口右侧。如果你希望页面的某一部分大小固定，而另外一部分可以扩展和收缩，这就是一个很好的布局选择，或者如果你需要精确地指定某个元素的位置（稍后会看到如何做到)，也很适合选择绝对定位。不过，对于Starbuzz页面来说，这种布局存在一个缺点:浏览器变宽时，边栏会再次覆盖页脚。所以我们继续探索如何完美地实现两栏，然后找到了….…. 表格显示布局 利用表格显示布局，我们终于成功地建立了Starbuzz的布局。确实，我们必须向HTML结构增加两个<div>，它才能正常工作,不过这样我们就能得到完美对齐的两列，而且可以随浏览器窗口的大小漂亮地扩展和收缩，所以这绝对是值得的。 在这种情况下，我们为页面增加的结构完全是为了支持这种布局，并没有为页面增加任何有含义的内容。你会发现，通常都会这样使用<div>（实际上，读到下一章时，你会发现如今更是这样，而几年前都没有这么普遍)。不过，不要滥用<div>，你希望根据需要选择最好的布局，要得到你想要的布局应当尽可能少增加<div>。 表格显示布局并不总是建立布局的最佳选择，不过对于Starbuzz，这种布局确实表现很完美，甚至允许我们轻松地扩展，还能为饮料单再增加一列。真是很棒! <blockquote> 听上去绝对定位比浮动要好，因为我可以对元素放在哪里有更多控制。是不是应该更倾向于绝对定位而不是浮动呢? </blockquote> 不一定。这要看你需要什么。如果确实需要一个元素出现在页面中某个精确的位置上，那就该选择绝对定位。不过，如果你有其他的需要，例如，希望文本围绕一个困像，利用绝对定位就不容易做到了。在这种情况下，你肯定希望使用浮动。你会发现这两种方法都经常用到。 <blockquote> 那么负的z-index值呢？能不能有负z-index值，比如说-1? </blockquote> 答;能，可以有负值!对于负值，之前的原则同样适用（也就是说,值越大，层次就高，在屏幕上离你就越近)。 <blockquote> 任何元素都有一个z-index吗? </blockquote> 不，只有使用CSS绝对定位、相对定位或固定定位的元素有z-index。接下来你会看到一个固定定位的例子! <h3><a name="t13"></a><a id="_927"></a>固定定位</h3> 固定定位也像绝对定位一样要为元素指定你希望的位置，不过这个位置是距浏览器窗口边界的一个偏移量，而不是距页面边界的距离、这就有一个有趣的效果。一旦采用固定定位方式放置内容，它就会一直留在你原先指定的位置，不再移动，即使你滚动页面也原地不动。 <pre data-index="11" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;">position:fixed <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 在设置固定定位后，还需要指定图像和链接的样式。否则图像上就会有边框，因为它是可单击的。所以，下面设置图像的边框为none，对链接也做同样的设置。对于这两种元素我们要同一个属性所以也可以把两个规则合并为一个。记住，css中有一条规则，要求关闭text-decoration，而使用边框来建立链接的下划线。 <blockquote> 固定优惠券确实很酷，不过有点烦人。有没有别的办法对它定位,而且不要与内容重叠，比如说放在饮料栏的下面? </blockquote> 当然有办法。可以使用相对定位指定优惠券的位置，把它放在饮料栏的下方。我们没有介绍这种定位，不过这与绝对定位很类似，只是元素仍然在页面流中(还在它原本的位置上)，然后按你指定的量偏移。可以使用top、left、bottom或right偏移元素，就像对元素绝对定位一样。所以,假设你希望优惠券出现在饮料栏的饮料下面，就要移动优惠券，让它嵌套在“drinks”<div>中，放在最下面，然后把position属性设置为relative。再由你将优惠券准确地放在你希望的位置上，可以用top:20px指定它在饮料下面20像素的位置，另外用left:-90px让它在页面的左边（就像使用固定定位一样)。 <blockquote> 这么说，有4种定位，分别是静态定位(static) 、绝对定位(absolute) 、固定定位( fixed）和相对定位(relative)，是吗? </blockquote> 没错。如果没有指定定位方式，会默认为静态定位。这会将所有内客正常地流入页面。绝对定位将元素完全从页面流中取出，允许你为它指定一个绝对位置，这是相对于离它最近的父元素指定的(这一般是<html>,除非你自行指定了另外一个父元素）。固定定位则是相对于浏览器窗口，把元素放在一个特定的固定位置上，而相对定位会相对于其外围包含元素来定位，元素仍在正常的页面流中，然后再按你指定的量偏移元素。还可以结合使用这些定位技术。例如,我们说过，绝对定位的元素要相对于位置最近的父元素来定位，还记得吧?完全可以将一个<div>放在另一个<div>中，对外围<div>使用相对定位(它仍在页面流中)，然后用绝对定位指定内部<div>的位置，这样你就能相对于父<div>对它定位了。可以看到，用CSS定位技术指定元素位置时，方法确实相当多。 <h2><a name="t14"></a><a id="HTML5_945"></a>HTML5</h2> <blockquote> 我们已经做了很多工作，为页面增加了不少元素，但看起来页面和以前还是一模一样的!请再解释一下，这对我来说到底有什么意义? </blockquote> 我们替换了一些元素，另外还增加了一些元素，在这个过程中，我们为页面增加了很多含义。对于浏览器、搜索引擎和构建Web页面的应用来说,只要它们愿意，利用这些含义，就能更明智地确定如何处理页面的不同部分。对于你和其他Web开发人员来说，你的页面也更容易理解。尽管看起来是一样的，但实际上页面已经有了更多的含义。 <blockquote> <section>和<article>有什么区别，能再说一遍吗?在我看来它们很相像。 </blockquote> 要确定该使用哪个元素，这确实容易让人糊涂，所以很高兴你能问这个问题。<section>元素比<article>更通用，不过它又不及<div>通用。例如,如果只是要增加一个元素以便为页面指定样式，那么可以使用<div>。如果要增加一个元素来标记一些内容，指示这是由相关内容构成的一个结构明确的区块，那就可以使用<section>。如果有些内容可以独立于页面上的其余内容进行重用和分发，那就使用<article>。 <blockquote> 是不是每个<section>和每个<article>都要有一个<header>? </blockquote> 大多数情况下，<section>和<article>都会有一个<header>，或者至少有一个标题（如<h1>)。可以这样来考虑:一个<article>元素中的内容可以在别处重用，所以这个内容很有可能需要一个首部来提供描述或介绍。类似地，<section>元素包含页面中一组相关的内容，所以通常要有某个首部来区分或介绍这部分内客。 <blockquote> 列表去建立导航 </blockquote> 列表非常适合建立导航 list-style-type：none删除列表项的符号 display:inline将各个列表项的显示从block改为inline，所以现在列表项的前后不再有回车，它们会像常规的内联元素一样在页面上流入一行。 ul的外边距在默认情况下，如果没有明确设置为0，会有一个外边距这会让ul稍稍偏离 <h3><a name="t15"></a><a id="vedio_969"></a>vedio</h3> 视频可能很复杂，特别是处理视频编码那一块，就是对一个视频片段中的视频和音频编码所用的格式。这是因为，浏览器制造商对于视频编码还没有达成一致，并没有一个通用的标准。 <blockquote> video属性 </blockquote> <ol><li>controls属性是一个布尔属性。可以有，也可以没有。如果有这个属性，浏览器就会为视频显示增加内置的控件。不同浏览器提供的控件有所不同，所以要查看各个浏览器，看看会有哪些控件。这是Safari上提供的控件。</li><li>src属性与<img>元素的src很类似,这是一个URL,告诉video元素在哪里查找源文件。在这里，源文件是“video/tweetsip.mp4”（如果下载了这一章相应的代码，可以在“video”目录中找到这个视频以及另外两个视频)。</li><li>属性preload通常用于细粒度地控制视频如何加载,来实现优化。大多数情况下，浏览器会根据是否设置autoplay以及用户的带宽来选择加载多少视频。可以覆盖这种设置，将preload设置为“none”(在用户真正“播放”视频之前不下载视频)，也可以设置为“metadata”(下载视频元数据，但不下载视频内容)，或者可以设置为“auto”，让浏览器来做决定。</li><li>autoplay布尔属性告诉浏览器:一旦有了足够的数据就开始播放视频。你可能会看到,我们的演示视频几乎立即开始播放。</li><li>浏览器通常会把视频的一帧显示为“海报”图像，来表示这个视频。如果你删除了autoplay属性，单击播放之前就会看到这个图像。要由浏览器来选择显示哪一帧。通常，浏览器会显示视频的第一帧……这往往是一个黑屏。如果你想显示某个特定的图像，要由你来创建想显示的图像,并使用poster属性来指定。</li><li>loop这也是一个布尔属性，如果有loop属性，视频结束播放之后会自动重新开始播放视频。</li><li>width和height属性会设置视频显示区（也称为“视窗”)的宽度和高度。如果指定了一个海报（poster)，海报图像会缩放到你指定的宽度和高度。视频也会缩放，不过会保持其宽高比(例如，4:3或16:9)，所以，如果两边或者上下边有多余的空间，视频会采用上下加黑边(letter-boxed)或左右加黑边( pillar-boxed)的模式来适应显示区大小。如果你想得到最佳的性能，就应该尽量采用视频原本的尺寸（这样浏览器就不用实时缩放视频了)。</li></ol> <blockquote> 处理所有视频格式 </blockquote> <ol><li>MP4容器,包含H.264视频和AAC音频H.264由MPEG-LA公司授权。 目前有多种H.264,每一种分别称为一个“profile”(等级或类)。 MP4/H.264得到了Safari和IE9+的支持。有些版本的Chrome也提供了支持。</li><li>WebM容器,包含VP8兹频和Vorbis音顿 WebM由Google设计,用来处理VP8编码视频。 WebM/VP8得到了Firefox、Chrome和Opera的支持。 WebM格式的视频扩展名为.webm。</li><li>0gg容器,包含 Theora舰顿和Vorbis音频Theora是一个开源编解码器。 采用Theora编码的视频通常包含在Ogg文件中,文件扩展名为.ogv。Ogg/Theora得到了Firefox、Chrome和Opera的支持。</li></ol> 以上都可以利用<video>元素来支持，在<video>元素中可以对应每种格式分别使用一个<source>元素（不要与src属性混淆)，这样就能提供一组视频，每个视频分别有自己的格式，可以让浏览器选择它支持的第一种格式。如下: <pre data-index="12" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><video controls autoplay width="512" height="288"src "videoltweetsi.mp4"> <source src="video/ tweetsip.mp4"> <source src="video/tweetsip.webm"> <source src="video/tweetsip.ogv"> <p>Sorry, your browser doesn't support the video element</p> </video> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <h3><a name="t16"></a><a id="_1008"></a>其他</h3> <ol><li> <article>用于类似博客帖子、论坛帖子和新闻报道等独立的内容。 </li><li> <aside>用于标记页面上的补充内容，如插图和边栏。现在假设有一个屏幕大小有限的移动手机，如果浏览器知道这个内容是一个<aside>，你可能会看到，这个内容会“塞”到页面的最下面，这样你就能首先看到最重要的内容。相反如果这个内容放在div钟，那就什么情况都有可能发生，要看这个内容在HTML文件中的具体位置。 </li><li> <nav>用于组织网站导航链接。在页面或区块最上方的内容组织在—起。 </li><li> <footer>将诸如文档信恳、佳售年版权说明等通常放任贝驭一大取的内容组织在一起。 </li><li> <time>也是HTML5中的一个新元素。这个元素用来标记时间和日期。如果元素内容没有用官方【日期/时间】格式来写，就必须有datetime属性。如果使用datetime属性来指定一个日期或时间就可以写你希望的任何元素内容，这可能是某个与日期或时间相关的文本 </li><li> <div>仍然用于建立结构。它通常将元素组织在一起来指定样式，或者有些内容可能不适合放在HTML5中那些与结构相关的新元素中,这内容就可以使用<div>创建结构。 </li><li> <section>可以把相关的内容分组在一起 </li></ol> <h2><a name="t17"></a><a id="_1024"></a>表格</h2> <ul><li>使用table标记开始这个表格</li><li>每个tr元素构成表格中的一行</li><li>每个th元素分别是某一列的表头</li><li>每个td元素包含表格中的一个单元格，每个单元格分别构成一个单独的列</li></ul> <blockquote> 为什么没有一个表列元素?感觉好像很重要。 </blockquote> HTML的设计者决定按行指定表格，而不是按列来指定。不过，要注意，指定每一行的元素时，隐含地就是在指定各列。 <blockquote> 如果有一行没有足够的元素，会出现什么情况?换句话说，如果实际的元素数小于表格中的列数，会有什么结果? </blockquote> 要处理这种情况，最容易的办法就是将数据单元格的内容留空。也就是说，要写为<td></td>。如果省去了这个数据单元格，表格就不能正确地排列对齐，所以要列出所有数据单元格，即使它们的内客为空。 <blockquote> 如果我希望表格表头放在表格的左侧，而不是放在上方，能行吗?怎么做到呢? </blockquote> 嗯，当然可以做到。只需要把表格表头元素放在各行中，而不是都放在第一行中。如果你的元素是各行中的第一项，那么第一列就会包含所有表格表头。 <blockquote> 我朋友给我展示了一个很酷的技巧，他利用一个表格就能建立所有页面布局，甚至没有使用CSS! </blockquote> 还是要用CSS，别走捷径，别贪小利。在HTML时代，使用表格来建立布局确实很常见，但那是在CSS出现之前，坦率地讲，那时要建立复杂的布局没有更好的办法了。不过，时至今日，利用表格建立布局实在是一种糟糕的方法。如果采用这种方法，不仅很难建立正确的布局，而且还很难维护。实际上，使用CSS表格显示会好得多，不仅可以得到表格布局，而且不必真正创建一个HTML表格(第11章中我们就是利用CSS表格显示为Starbuzz页面建立了样式)。请告诉你的朋友，他的这种技术太老套了，他要赶快学习建立布局的正确方法，也就是要结合使用CSS和HTML。 <blockquote> 表格不就是关于表现的吗?表现与结构有什么关系? </blockquote> 不是这样的。利用表格，可以指定表格数据项之间的关系。另一方面，我们会用CSS来改变表格的外观表现。 <blockquote> HTML表格与CSS表格显示有什么关系? </blockquote> HTML表格允许你使用HTML标记指定表格的结构，而CSS表格显示则提供了一种方法，可以用一种类似表格的表现方式显示块级元素。可以这样来考虑，确实需要在页面中创建表格数据时，就使用HTML表格(稍后我们会介绍如何为表格指定样式)。不过，如果只需要对其他类型的内容使用一种类似表格的表现方式，就可以使用CSS表格显示布局。 <blockquote> 可以使用CSS表格显示为HTML表格指定样式吗? </blockquote> 嗯，没必要。为什么?因为你已 经用HTML创建了一个表格结构，所以，可以看到，只需要使用简单的Css就能为表格指定你喜欢的任何样式。 <blockquote> 标题在浏览器中显示，默认将标题显示在表格上方，怎么移动？ </blockquote> 设置css caption-side：bottom <blockquote> 如何设置单元格间隙距离 </blockquote> 单元格之间的空间叫border-spacing边距，不用外边距。还可以使用一个名为border-collapse的CSS属性来折叠边框，使单元格之间根本没有边框间距。这样一来，浏览器会忽略表格上使用的所有边框间距，另外还会把紧挨的两个边框合并成一个边框。在table中设置border-collapse:collapse; <blockquote> 如何给表格的每行交替设置颜色？ </blockquote> 可以通过设置类（在html在添加）也可以通过伪类的:nth-child(even/odd/2n/2n+1)设置 <blockquote> 如何让单元格跨多行？ </blockquote> 使用rowspan属性指定一个表格数据单元格占多少行，然后从这个单元格所跨越的其他行中删除相应的表格数据元素。 <pre data-index="13" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><td rowspan="2">111</td> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <blockquote> 你说过表格数据还可以跨多列，是吗? </blockquote> 没错。只需要为<td>元素增加一个colspan属性，然后指定列数就可以了。与rowspan不同，跨多列时，需要删除同一行中的表格数据元素（因为现在所占的是多列，而不是多行)。 <blockquote> 同一个<td>中能不能同时有colspan和rowspan? </blockquote> 当然可以。只是需要调整表格中的其他<td>，考虑到同时有跨行和跨列。换句话说，你需要从同一行和同一列上删除相应数目的<td>。 <blockquote> 你真的认为这些跨行看起来更好吗? </blockquote> 嗯，它们可以减少表格中的信息量，这通常是件好事。另外，如果看看现实世界中的表格，你会发现跨行和跨列相当常见，所以能够在HTML中做到跨行和跨列确实很棒。不过,如果你更喜欢以前的表格，当然也可以修改你的HTML，改回为原先的版本。 <blockquote> 可以表格嵌套表格吗？ </blockquote> 可以，只需要在td里再嵌套<table>即可 <blockquote> 我使用了一个类来解决脑力挑战中的那个问题。我创建了一个名为“nestedtable”的类，并把各个表头指定为这个类。然后创建了下面这样一个规则: .nestedtable { background-color: white; ) 这个方案也是可行的吧? </blockquote> 使用CSS解决问题时会有很多不同的方法，你的方案当然也是一种使用CSS的有效方法，而且是完全合法的。不过需要指出，如果使用子孙选择器，我们就不用对HTML做任何修改。倘若Tony和Tess不断增加用餐评论呢?如果采用你的方案，对于每个评论，就必须为每个增加这个类。而利用我们的方案，样式调整会自动进行。 <blockquote> 如何修改列表的项目符号样式 </blockquote> 设置list-style-type为disc/circle/square/none 或者如果定制标记可以使用list-style-image:url(无引号) 还可以通过增加一些外边距，使列表项左边多一些空间，另外还要增加一些上内边距，让每个列表项上面有更多空间。 <blockquote> 有序列表呢？3我能改变有序列表的样式吗? </blockquote> 不论是有序列表还是无序列表，指定样式的方法都是一样的。当然，有序列表会用一个数字或字母序列作为列表标记，而不是使用项目符号。利用CSS，你可以用1ist-style-type属性控制一个有序列表的标记是十进制数字、罗马数字还是字母表字符(如a、b、c)。常用的值包括decimal (十进制数)、upper-alpha(大写字母)、lower-alpha (小写字母)、upper-roman(大写罗马数字)和lower-roman (小写罗马数字)。 <blockquote> 怎么控制列表上的文本回绕?换句话说如信轻生制一术在标记下回绕还是只在立水下后绕? </blockquote> 有一个名为list-style-position的属性。如果将这个属性设置为“inside”，文本就会在标记下回绕。如果设置为“outside”，就只在文本下回绕。 <blockquote> 你确定没错吗？好像反了吧。 </blockquote> 没错， inside和outside的具体含义是:如果把line-style-position设置为“inside”，标记就在你的列表项里面，所以文本会在它下面回绕。如果这个属性设置为“outside”，说明标记在列表项外面，因此只是文本本身回绕。这里所说的“在列表项里面”是指在列表项盒子的边框里面。 <h2><a name="t18"></a><a id="_1125"></a>表单</h2> 表单实际上就是一个包含输入域的web页面，允许你输入信息。提交表单时，这些信息会打包并发送到一个web服务器，由一个服务器脚本处理。web服务器接收到表单数据，然后再把数据传给一个服务器脚本进行处理。服务器脚本处理表单中的数据，然后创建一个全新的HTML页面作为响应，再将这个页面传回web服务器。 使用form元素创建表单。现在几乎所有块级元素都可以放在form元素里。这些表单元素可以提供输入信息的不同方法：文本框、复选框、选项菜单等。 <h3><a name="t19"></a><a id="form_1131"></a>form元素如何工作</h3> action属性包含web服务器的url method属性确定表单数据如何发送到服务器 <h3><a name="t20"></a><a id="_1137"></a>表单元素</h3> <ul><li>文本输入 type=“text”</li><li>提交输入 type=“submit”【点击这个按钮时，浏览器会把表单发送到服务器脚本进行处理】 value值可以修改按钮文本</li><li>单选按钮输入 type=“radio” value=“服务器提交的值” 每一组name必须相同浏览器重新加载会使单选按钮都未选中</li><li>复选框输入 type=“checkbox” value=“服务器提交的值” 每一组name必须相同</li><li>文本区 textarea创建一个多行文本区 rows文本去高度字符 cols宽度多少字符开始结束标记的所有文本会成为初始文本</li><li>select 菜单空间 name设置唯一名字里面的option就不必设置name了，但需要设置value 如果设置了multiple就会把单选菜单变多选</li><li>数字输入 type=“number” min max</li><li>范围输入 type=“range” min max step</li><li>颜色输入 type=“color”</li><li>日期输入 type=“date”</li><li>email输入 type=“email”</li><li>tel输入 type=“tel”</li><li>url输入 type=“url”</li><li>password输入 type=“password” 输入的文本会打码</li><li>file输入 type=“file” 向服务器发送整个文件，使用这个元素的前提是POST方法</li><li>placeholder属性，会为填写表单的人提供一个提示</li><li>required这个属性可以用于任何表单控件，它指示一个域是必要的。如果没有为这些控件指定一个值，就无法正常提交表单</li></ul> name属性相当于用户输入数据的一个标识符，注意每个name属性要设置为一个不同的值。提交表单时，浏览器会使用这些唯一的名字打包所有数据，浏览器用唯一的name属性值作为这些数据的标签，然后浏览器把这些名字和值发送到服务器。服务器脚本要求这些表单数据由相应的标签，这样它才能分清谁是谁。 同时input是内联元素，所以如果希望input元素之间有换行，就必须增加 如果表单没有包含全部元素，怎么能履行订单呢？这取决于服务器脚本如何编写，即时一些元素没有随其余表单数据提交，脚本也能处理订单。 <blockquote> text <input>与<textarea>有什么区别? </blockquote> 如果输入只有一行的文本，你可能想使用一个text<input>，如姓名或邮政编码。对于更长的多行文本，就要使用<textarea>。 <blockquote> 提交按钮上能不能不显示“Submit”，可以显示别的名字吗? </blockquote> 可以，只需要为元素指定一个value属性,比如指定为“Order Now”。另外，还可以使用文本输入元素的value属性为这个输入域提供默认文本。 <blockquote> 在text<input>或<textarea>中可以输入多少文本，有没有限制 </blockquote> 对于在text<input>或<textarea>中能够输入多少文本，浏览器确实有一个限制。不过，这个限制范围很大，通常你都不需要输入那么多内客，并不会超出这个限制。如果你希望限制用户在text <input>中输入的文本，可以使用maxlength属性，把它设置为一个特定的字符数。例如, maxlength= “100”，这会限制用户最多能输入100个字符。不过，对于<textarea>,HTML中没有办法限制用户健入多少文本。 <blockquote> “tel” 、 “email”和“url”看起来就像普通的文本输入元素一样。它们有什么区别吗? </blockquote> "tel” , “email”和“url”类型的输入元素都会向服务器脚本发送文本串，所以从这个意义上讲，它们与text类型的输入元素确实是一样的。不过也有区别，例如，由于浏览器知道输入类型是“tel”，所以在为用户提供用户界面时，它会更聪明。在一些移动浏览器上，可能会显示一个数字键盘。 <blockquote> 我还是不清楚这些名字怎么与表单数据对应起来。 </blockquote> oK，你知道每个表单元素都有一个的名字，而且还知道元素有一个相应的值。单击提交按钮时，浏苋器会拿到所有名字和相应的值，把它们发送到服务器。例如，如果在一个名为“zip”的text <input>元素中输入了邮政编码“90050"，表单提交时，浏览器会把“zip =90050”发送到服务器。 <blockquote> 服务器脚本怎么知道我要在表单中使用哪些名字?换句话说,我怎么为表单元素选择名字? </blockquote> 这个问题问得好。实际上应该反过来:你必须知道服务器脚本希望有哪些表单元素名，并相应地编写表单。如果你在使用别人编写的一个服务器脚本，他必须告诉你要使用哪些元素名、或者必须在脚本文档中提供有关信息。也可以寻求托管公司的帮助。 <blockquote> 为什么<option>元素没有一个name属性?所有其他表单元素都有名字。 </blockquote> 你真敏锐。所有<option>元素实际上是菜单的一部分，而莱单由<select>元素创建。所以，我们只需要为整个菜单提供一个名字，这已经在<select>元素中指定了。换句话说，<option>元素不需要name属性,因为<select>已经为整个菜单指定了名字。要记住，提交表单时，只会把当前选择的选项连同这个名字发送到服务器。 <blockquote> 你不是说每个表单元素的名字都必须唯一吗?但是radio <input>元素的名字怎么都是一样的? </blockquote> 没错，单选按钮是成组出现的。可以这样来考虑:如果按下一个按钮、其余的按钮就会“弹起”。所以，为了让浏览器知道这些单选钮属于同一组，你要使用同一个名字。假设有一组名为“color”的单选钮，值分别为“red” . “green”和“blue”。它们都是颜色，一次只能选择一个颜色，所以为这一组单选钮指定一个名字是有道理的。 <blockquote> 复选框呢?它们的工作与单选钮类似吗? </blockquote> 对，唯一的区别是，复选框允许你选择多个选项。浏览器将表单数据发送到服务器时，它会把所有复选框值合并为一个值，并将这个值连同复选框名发送到服务器。所以，假设你有一个“spice”复选框,值分别为“salt” . "pepper”和“garlic”，假如你把这些复选框都选中了，浏览器就会向服务器发送“spice = salt&pepper&garlic”。 <blockquote> 天呐，数据发送到服务器这么复杂，我必须了解所有这些细节吗? </blockquote> 你只需要知道服务器脚本期望得到的表单元素的名字和类型。除此以外，对这些细节有所了解有时会有帮助,不过,没错,你不需要知道向服务器发送数据的所有这些后台的细节。 <blockquote> “extras[]”怎么能用作表单的元素名即name值？ </blockquote> 不管你相不相信，“extras[”确实是一个完全合法的表单元素名。不过，尽管这是合法的，但看起来不太对劲，是不是?可以这样来考虑:从HTML的角度看，这只是一个普通的表单元素名，名字里有没有中括号对于浏览器没有任何影响。那么，为什么要使用这样的元素名呢?这是因为，编写“processorder.php”服务器脚本所用的脚本语言(PHP)希望得到一点提示，想知道一个表单变量可能包含多个值。提供这个提示的做法就是在名字后面增加一个“[ ]”。 <h3><a name="t21"></a><a id="POSTGET_1207"></a>POST和GET</h3> POST和GET完成的任务是一样的，都是将你的表单数据从浏览器发送到服务器，不过采用了两种不同的方式。 POST会打包你的表单变量，在后台把它们发送到服务器;利用POST。所有表单数据会作为请求的一部分发送，对用户是不可见的。 GET也会打包你的表单变量，但会把这些数据追加到URL的最后，然后向服务器发送一个请求。利用GET，表单数据会追加到URL，所以用户可以看到表单数据。 <blockquote> 既然我们在向服务器发送数据，为什么这种方法叫GET? </blockquote> 问得好。浏览器的主要任务是什么?就是从服务器得到Web页面。使用GET时，浏览器像以往一样用正常的方式得到Web页面，只不过，由于有一个表单，它会在URL的最后追加另外一些数据。除此以外，浏览器会把它当作一个普通请求来处理。另一方面，利用POST，浏览器实际上会创建一个小数据包，并把它发送到服务器。 <blockquote> 那么为什么我要使用POST而不是GET，或者反之，为什么有时要使用GET而不是POST? </blockquote> 它们确实有几个很大的差别。如果你希望用户能够对提交表单后的结果页面加书签,就必须便用GET，因为如果使用POST，返回的结果页面就无法加书签了。什么时候想要加书签呢?假设你有一个服务器脚本，它会返回一个搜索结果列表，你可能希望用户能够对这些结来加书签，这样他们就能直接查看这些结果，而不用再填写表单。另一方面。如果你有一处理订单的服务器脚本,可能不希望用户对这个页面加书签（否则，每次他们返回到这个书签时，都会重新提交这个订单)。还有一种情况你肯定不想使用GET，比如你的表单中的数据是私有的，如信用卡或一个口令。因为URL是明文可以看到，别人只要查看你的浏览器历史，就能看到这些信息。或者如果将GET结果设置了书签，别人也会很容易看到这些私有信息。最后，如果你使用了一个<textarea>,就应该使用POST，因为可能会发送大量数据。GET和POST请求对于发送的数据量都有一个限制，不过对POST请求的限制通常要宽松得多。 <h3><a name="t22"></a><a id="_1223"></a>表单表格布局</h3> 表单通常采用表格布局，通过使用表格显示布局，页面才会像一个真正的表单，而不是一组输入元素随便堆在一起，而且这样更容易阅读。 <img src="https://1000bd.com/contentImg/2022/07/31/201201416.png" alt=""> <h3><a name="t23"></a><a id="label_1229"></a>label绑定</h3> label元素可以提供页面结构更多信息，使得你能更容易地使用CSS对标签设置样式，另外对于有视力障碍的人，也有助于他们使用的屏幕阅读器更准确的标识表单元素 要使用<label>元素首先为表单元素增加一个id属性。默认的，标签与普通文本看上去没区别。不过，在可访问性方面，有很大不同。任何表单控件都可以使用<label>元素。 <pre data-index="14" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><label for="bags">number of bags:</label> <input type=:number" id="bags" name="bags" min="1" max="10"> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> 注意，标签可以放在与它关联的控件前面或后面，只要for属性的值与id匹配，标签放在哪里并不重要 <h3><a name="t24"></a><a id="fieldsetlegend_1242"></a>fieldset和legend</h3> 表单变得越来越大时，在视觉上对元素分组会有很大帮助。HTML提供了fieldset元素，可以用来将公共元素组织在一起。fieldset又使用了另一个元素，名为legend。 <img src="https://1000bd.com/contentImg/2022/07/31/201201608.jpeg" alt=""> </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/744709">【我的OpenGL学习进阶之旅】 C++ 长行字符串多行书写的方法以及如何书写正确的OpenGL Shader着色器代码</a> <a href="/Article/Index/1589366">keepalived双机热备超详细入门介绍</a> <a href="/Article/Index/911055">智能伪原创生成易语言代码</a> <a href="/Article/Index/654419">中级C++：哈希</a> <a href="/Article/Index/763791">虚拟内存与进程地址空间</a> <a href="/Article/Index/712366">codeblocks提示没有编译器，安装MinGW及运行heloword的方法</a> <a href="/Article/Index/867947">猿创征文｜测试前辈给测试小白的软件测试九条原则</a> <a href="/Article/Index/1477216">RT-Thread Hoist_Motor PID</a> <a href="/Article/Index/1501934">【wine】docker ubuntu 18:04 --with-mingw 编译wine</a> <a href="/Article/Index/940255">数据结构与算法之从前序与中序遍历序列构造二叉树</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/weixin_45860674/article/details/126037258 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

Head First HTML与CSS

HTML

111