Head Fisrt Html读书笔记
（一）html
1. 元素=开始标记+内容+结束标记；
<h1>HELLO HTML</h1>
2. 网页上的图像点击：把<img>元素放进<a>标记之间。
3. ..符号，上溯到父目录。
4. 在文字段中少量引用的话用<q>,如果需要另开一段来进行引用则用<blockquote>
<q>是内联元素，<blockquote>是块元素。
：块元素特立独行，内联元素随波逐流。
5. <br> <img>空元素。
6. <ol>和<li>创建有序列表，<ul>和<li>创建无序列表。
7. www.zkk.com.
www该部分是域中的特定服务名，zkk.com是域名。
8. 可以在<a>元素的href属性中使用相对路径（从根目录到文件的路径）或者URL连接到其他网页。要连接到起重机的网站和其他页面，最好还是使用相对路径，对外部链接最好还是使用URL。
9. 使用id属性在页面中创建目标锚。在”#”后面跟目标锚id，用以连接到页面的特定位置。
<h3><a id=”coffee’></a></h3>
<a href=”……..”#coffee title=”hello”>(*^__^*) 嘻嘻……</a>
另外<a>元素的target属性为_blank，浏览器会在新的窗口中打开链接；如果没有target则浏览器会在痛一个窗口中打开连接。
10. 用户使用滚动条来看图像的问题？
大图像要从服务器传送更多的数据到浏览器，消耗许多时间并导致网页显示速度很慢。
11. 为什么不能使用width和height来调整网页上的图像的尺寸？
因为浏览器在缩小大图像来配合网页之前要先下载真个大图像。
12. 为什么不能将背景颜色设为纯色来配合网页的颜色？
如果这样做，一个缺点：如果你的网页上还有其他能透过透明层显示的东西，它们在纯色版本下无法显示。
13. <img>元素，不同与其他html元素，浏览器从网络服务器上接收每张图像并显示。
<img>是内联元素，意味着浏览器不会在图像前边或者后边插入行。
<img>的alt属性是对图像意义的描述。
14. <head>
<meta content="text/html" charset="utf-8" http-equiv="Content-Type" />
</head>
Meta的意思是我们告诉浏览器关于网页的一些信息。
过渡版本的html4.01:loose.dtd
严格类型的html4.01:strict.dtd
（所有的内联元素和文本必须在块元素中才能运行，块元素在任何情况下都不允许包含在内联元素；
块元素禁止包含在<p>元素之中；
<blockquote>元素重要有一个或者多个块元素，文本直接包含于块引用很常见，但是在严格类型的html4.01标准中，要先把文本或者内联元素放于块元素之内，在一起添加到<blockquote>。
内联元素相互嵌套小心：可以将任意内联元素嵌入到一个内联元素之中，2个情况例外。
<a>元素不能自我嵌套；空元素中不能嵌套其他内联元素。
XHTML1.0：
空元素：如<br/>
<html xmlns="http://www.w3.org/1999/xhtml" xml:>
Xmlns属性用来指定”html”属于哪一种xml语言； xml:2个属性最好一起使用。。
内联元素可以直接放在body之中；
（二）CSS
1.<head>
<link type="text/css" rel="stylesheet" href="..."/>
</head>
2.类
<p class=”greentea”>……</p>
在.css中：
p.greentea{
color: green;
}
如果有多个选择符选择一个元素？
<p class="greentea raspberry blueberry"></p>
在.css中：
P {color: black;} 选择所有段落元素的规则。
. greentea {color: green;}选择了所有绿茶类的成员，此规则比上一条更具体
p.greentea{color: green;} 只选择绿茶类的端来，此规则比上一条更具体
p. raspberry {color: blue;}
p. blueberry {color: purple;}
p. blueberry排在了最后，所以选择了p. blueberry规则。
3.字体
注意：如果字体名字中间有空格，应该加引号。
body { font-size:14px;}
h1{ font-size:150%} 相对父元素的字体的大小
h2{ font-size:1.2em} 按比例放大。
字体定义技巧：
a:选择一种关键字（推荐用法small或medium）定义body字体大小，也就是网页的默认字体大小。
b:用em或%把别的元素的字体大小指定为相对于body字体大小的字体尺寸。
好处：调整页面中的字体尺寸方便。
特别注意：用像素指定字体大小时,IE不支持比例缩放。
在CSS属性font-family中定义多个字体以防用户未安装首选字体。
4.background-imge：url(….)
可以被设置为url，也可以是相对路径
Background-repeat：repeat，水平垂直上都重复，默认的格式
no-repeat 图像只显示一次，不重复
repeat-x,repeat-y 图像只在水平或者垂直方向上重复
inherit ：继承父元素的值
5.id属性
<p id=”footer”>hello</p>
每个元素只那个有一个id,id名称必须以字母开头后跟数字或者字母，不允许有空格或特殊字符。
在CSS中使用id:
#footer{ color: red;} 选择id为”footer”的 任意元素
p#footer{ color: red;} 选择一个id为”footer”的<p>元素
6. 样式表的顺序很重要
它们从上到下排列，最下面的样式表优先权最高。所以加入在公司和部门的样式表中，<body>元素都有一个font-family属性，则部门的样式表就有较高的优先权，因为它是最后一个连接到网页的。(面向对象无处不在)
（三）建筑世界的DIV
1.<div>用来把页面分成逻辑部分或者组，好处：
更深一层次的暂时页面的基本逻辑结构，有助于别人理解网页，也方便维护。
可能经常需要用结构把样式应用到某一部分。
提醒：如果添加<div>只是想使页面中有更多的结构，那么这样做出了使页面变得复杂之外没有任何真正的好处。
2.Width属性地雷区
例如：#zkk{ border-width:thin width:200px}
Width属性只用来定义内容区的宽度
整个宽度=左边界宽度(margin)+边框宽度+左侧补白宽度（padding）
+width
+右边界宽度(margin)+边框宽度+右侧补白宽度（padding）
你不能定义整个元素的宽度。你只能定义内容区.补白.边框和边界的宽度，把这些全加起来就是整个元素的宽度。
块元素的默认宽度是”auto”，也就是说会延伸到所有的空间。记得”auto”使内容充满所有的空间（除了补白.边框.边界）。
如果没有边界.补白或者边框了？
若内容区的宽度为300像素，没有边界.补白或者边框，真个盒子的宽度就是300。
3.选择特定元素的子元素的方法
<body>
<div id=”zkk”>
<h1>O(∩_∩)O哈哈~</h1>
<h2>(*^__^*) 嘻嘻……</h2></div></body>
div h2 {color: black;} 如果另外一个文件中也有div，他们的h2文本也是黑色的，不想这样
的话，就更具体指定
#zkk h2 { color: black;}
4.<span>作用于内联元素
什么时候该用<span>而不用别的内联元素（如<em>或<strong>）？
通常，要用跟内容的意思最匹配的元素来标记内容。所以，如果想强调某些单词，就用<em>
;如果想重点强调，就用<strong>。但是，如果你真正的目的只是改变某些文字的样式，就应该用<span>并且把<span>元素放进适当的类中组成一组，一起设计样式。
5.伪类，例如
#zkk a:link { color: green;} 未被访问的链接用绿色
#zkk a:visited { color: gray;} 已访问的链接用灰色
#zkk a:hover { color: red;} 鼠标停留在链接上红色
6.text-align是一个作用于块的属性，可以使块元素中的所有内联内容居中，它可以被任何嵌套的块元素继承。
（四）布局
Folat：
浏览器用流来布置页面上的XHTML元素。浏览器从XHTML文件的开头开始，从头到尾跟着元素的流显示它遇到的每个元素。比如先显示文件中的第一个元素，接着显示换行，
在显示第二个元素，在换行等，从文件的开始一直到末尾。这就是流。
那么对于内联元素了？
内联元素在水平方向上一个接一个地流，从左上方到右上方。（只要右边可以有地方放）
注意：TEXT文本是内联元素的一个特殊例子，浏览器把他归为刚好适合与那个空间的内联元素。[text][em][text][a]
内联元素并排放置：2元素都有边界时，它们之间的空间就等于2个元素的边界之和。
并列放置：共同的边界重叠到一起，重叠边界的高度是最大边界的值。
Float属性让一个元素尽可能靠左或靠右（取决于float的值），然后让它后面的元素流到这个元素的周围。
Clear属性不允许漂移元素出现在这个元素的左边.右边或两边。
漂移元素必须是一个明确的宽度值，不能是默认的。
流动布局：当你扩大浏览器窗口时，页面内容也随之扩大来填满页面。
冻结布局：内容的宽度是固定的，不随浏览器窗口的变化而扩大或缩小。
凝胶物布局：内容区的宽度是固定的，但边界随着浏览器窗口的变化扩大而缩小。凝胶物布局通常用来把内容放在页面的中间。
Position: static 是默认布局，把元素放在页面的正常流中。
表格：
Border-collapse： collapse 上除边框间距。（或者把border-spacing：0px一样效果）
表单：
基本上是带有一块输入信息区域的网页，当表单提交时，表单中的信息被打包成一个数据包放松给WEB服务器，WEB应用程序对之进行处理。
浏览器给服务器发送数据的方式：
POST：把表单变量打包后隐藏在后台发送给服务器。
把所有的数据作为请求的一部分来发送，对用户来说是不可见的。
GET： 也把变量打包，不过在它向浏览器发送请求之前，附加在URL的末端部分。
表单数据直接添加给URL自身，用户能看到这些表单数据。
相关推荐
读书笔记--Head First Html与Css 目录
1、
时间：2024-04-18 02:51
