您的位置：首页 > Web前端 > CSS

Head First HTML 与 CSS 笔记

2016-12-24 19:09 721 查看

其实html基本的语法已经差不多掌握了，再看《First head html and css》,虽然确实前面觉得讲得啰嗦了一些，不过感觉讲得还是挺有趣的，作为初学还是极佳的，所以觉得还是看一遍为好，这里只暂且将书中的一些要点提示记录下来，以作备忘。

“..”表示父文件夹，可以用来链接到源文件上一层文件夹中的一个文件。且在web上，我们选用”/”作为通用分隔符，用来分割路径。

为网站选择的文件名和文件夹名中不要使用空格。

使用字符实体的简单缩写来指定一些特殊字符，假如我们要在页面中提到<html>直接输入<html>可能会把嵌套弄乱，所以我们要查找相应的缩写来输入。例如：>字符的缩写是

,<字符的缩写是

。所以，假如我们要在页面中输入“The <html> element rocks.”。通过字符实体，我们可以这样输入：

The <html> element rocks.

下面是w3school上更多的字符实体说明：

ps:实体名和实体编号的作用都是一样的，我们既可以使用实体编号，也可以使用实体名。

更详尽的字符实体清单，可以访问：http://www.w3school.com.cn/tags/html_ref_entities.html

我们使用相对路径来链接同一网站内的页面，而URL通常用来链接其他网站。原因在于，URL很长，不便于管理编辑，而且当移动这个网站或改变它的名字时，就必须修改所有这些URL来反映新的网站的位置。

可以为任何元素增加title属性用作工具提示。

不一定要把target属性指定为”_blank”,这会使每个链接都在一个新的空窗口打开，如果指定同一个名字，如”blue”,那么具有相同目标名”blue”的所有链接都会在同一个窗口打开。为target指定一个特定的名字时，如”blue”,实际上就是在对显示链接页面的新窗口命名，”_blank”则是一种特殊情况，让浏览器总是使用一个新窗口。

1.任何时候都要以<!doctype html>开头，除非你确实在写HTML4.01或XHTML。

通过告诉浏览器你在使用的HTML版本，浏览器可以更好地处理错误。HTML5是HTML的活标准，它会根据需要继续发展变化，不过不再有固定的版本号，所以从HTML5之后HTML就只是HTML了。可以继续向HTML增加新的内容，浏览器（最终）会支持这个新内容，不过它还会继续支持原来的内容。

2.记得要为web页面指定编码。

要在<head>的元素内最上方添加<meta charset=”utf-8”>。

“meta”表示我们要告诉浏览器关于页面的一些信息……；”utf-8”是unicode系列中的一个编码。web页面中使用的就是”utf-8”。Unicode是常用软件应用和操作系统都支持的一个字符集，这也是Web选择的编码，因为它支持所有语言和多语种文档（即多种语言的文档）。它还与ASCII兼容。

<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8”>是HTML4.01和更早版本中标记的格式，在HTML5中已经不需要那么麻烦了。

3. 同样也一定要在<head>内包含<title>元素。如果没有做到，则会得到不符合标准的HTML。

4. 共有5个字体系列：sans-serif、serif、monospace、cursive和fantasy。

- sans-serif字体系列包括没有衬线的字体。与serif字体相比，通常认为sans-serif字体在计算机屏幕上更容易识读。
- serif字体系列包括有衬线的字体。很多人一看到这种字体就会想到新闻报纸的文字排版。
- monospace字体系列中的字体包含固定宽度的字符。例如，一个“i”在水平方向所占的宽度与一个“m"所占的宽度是相同的。这些字体主要用于显示软件代码示例。
- cursive字体系列包括看似手写的字体。有时会看到标题中使用这些字体。
- fantasy字体系列包含有某种风格的装饰性字体。

5. font-size用%指定一个字体大小时，会相对于父元素的字体大小指出这个字体有多大。

6. 指定字体大小的秘诀：

1选择一个关键字（推荐small或medium），指定它作为body规则中的字体大小。这相当于页面的默认字体大小。
2 使用em或百分数，相对于body字体大小指定其他元素的字体大小（选择em还是百分数由你决定，因为实际上这两种方法的作用是一样的。

这样子安排的话，改变web页面的字体大小就会很容易，只需要改变body字体大小就可以了。对于用户想调整页面上字体的大小，利用这个，页面上的字体都会自动调整大小。

7. #cb0表示#ccbb00。只有每一组分量中两位数字都相同，才可以使用简写。

8. 媒体查询：

针对将要显示页面的设备类型（桌面PC、笔记本电脑、平板电脑、手机或者甚至页面的印刷版本）来调整页面的样式，利用media属性，在<link>元素中增加这个属性，只使用适用于指定设备的样式文件。如下：

<link href="one-mobile.css" rel="stylesheet" media="screen and (max-device-width:480px)">

media属性允许指定应用这个样式表的设备类型。上面指定了有屏幕的设备而且屏幕宽度不超过480像素。

类似地，我们可以创建一个查询来匹配打印机设备。

<link href="one-print.css" rel="stylesheet" media="print">

one-print.css只有当媒体类型为print时才会使用，这说明我们要通过打印机查看页面。

查询中还有很多属性可以使用，如min-device-width、max-device-width,以及显示方向[orientation,说明是横向(landscape)还是纵向(portrait)]…

除了在link标记中使用媒体查询，还可以直接写在CSS中。

@media screen and (min-device-width:481px){
#guarantee{
margin-right:250px;
}
}
@media screen and (max-device-width:480px){
#guarantee{
magin-right:30px;
}
}

9.text-align

text-align会对块元素中的所有内联内容对齐。text-align属性只能在块元素上设置，如果直接在内联元素上使用，则不起作用。同时，它对块元素中的内容也起作用。如果对<h1>设置text-align:center;，h1中的内容就会居中显示。

任何不是块级元素的可见元素都是内联元素，其表现的特性是“行布局”形式。

——《CSS权威指南》

“内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度”。

10.子孙选择器

#one h2

表示选择的<h2>元素可以是id为one的所有子孙，如果要选择直接的孩子，就使用

#one>h2

。

11.流

浏览器并排放置两个内联元素时，而且这些元素都有外边距，那么这两个外边距都会单独显示，不会被折叠。但浏览器上下放置两个块元素时，它会把它们共同的外边距折叠在一起，它们之间的外边距就会是两者之中较大的那一个，

只要两个垂直外边距碰到一起，它们就会折叠，即使是一个元素嵌套在另一个元素中也不例外。注意：如果外面的元素有一个边框，那么两个元素的外边距就不会碰到一起，这样也就不会折叠。

1.凝胶布局

内容宽度固定，不会随着浏览器窗口扩展或收缩。

通常会把内容放在中央。

#allcontent{
width:...;
margin-left:auto;
9cb7
margin-right:auto;
}

2.表格显示布局

<div id="tableContainer">
<div id="tableRow">
<div id="main">
...
</div>
<div id="sidebar">
...
</div>
</div>
</div>

div#tableContainer{
display:table;
}
div#tableRow{
display:table-row;
}
#main{
display:table-cell;
width:70%;
}
#sidebar{
display:table-cell;
width:30%;
}

断断续续用了两周终于把这本书看完了，对于初学真的很推荐，大家一起加油吧！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html css web

相关文章推荐

新的分享

章节导航