“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”

笔记

引子

准备工作

慢一点，理解的越多，需要记忆的越少
动手做练习，记笔记
阅读每个部分，不随意跳过
睡前应该不阅读其它书籍，让大脑在睡眠中处理信息
多喝水
大声解释
注意大脑休息，如刚看的东西就忘记的时候
为图片添加自己的注解
将知识运用到工作中、项目中去

一、web语言认识HTML

1.从宏观角度观察web如何工作

将使用超文本标记语言（html）编写的文件放到服务器上
放到服务器后，用户能通过互联网进行访问
浏览器根据web页面的html信息，可以了解到显示页面的所需的全部信息。

2.web服务器能干什么

服务器就是一个连接到互联网的计算机，在等待这浏览器的请求
每个服务器会存储html、图像等资源文件
浏览器发送请求，服务器按照请求将资源（如果有）发送给浏览器

3.web浏览器能干什么

向服务器请求资源
通过html来将页面的内容和结构进行展示

浏览器会翻译文本中的标记，标记就是用尖括号括起来的词或字符

4.标记解剖

<h1>content</h1>

<h1>和</h1>分别为开始标记和结束标记，标识由标识名和两侧的尖括号组成
元素 = 开始标记＋内容 + 结束标记
要告诉浏览器“页面的结构”，要通过成对的标记包裹内容

匹配标记不需要在同一行上，只要保证有就行了

5.认识style元素

<html>
    <head>
        <title></title>
        <style type='text/css'>
            body{
                
            }
        </style>
    </head>
    <body>
    </body>
</html>

style 元素能够给页面添加样式
style 元素需要放在首部
style 还有属性 type，用于告诉浏览器使用什么样的样式
元素的属性，能够提供元素的附加信息，比如上面的例子，type就是说明了使用的样式是什么类型的。属性提供了元素额外信息
type属性不是必须的，设计者最初以为将来会有很多种类型来设置样式，事实证明只使用了css

body表示样式生效于body

二、认识html中的ml - 深入了解超文本

1.超链接跳转

<a href="hello.html">文本内容</a>

用 a 标签来创建超链接，链接到另外一个web页面
文本内容是显示在页面上的内容，点击能够跳转；这里可以放入img标签，这样可以实现点击图片进行跳转
href 属性用于告诉浏览器链接的目标文件

属性的最佳写法，其它属性也是一样的写法：

属性名 + 等号 + 双引号 + 属性值 + 双引号

注意：HTML5才支持定制数据属性，允许为新属性构造定制的属性名

2.href属性

属性用来定制元素，这里href用来元素的目标文件是什么
href的含义是超文本引用（hypertextreference）
超文本引用就是互联网或者你计算机上资源的别称，通常是一个web网页，也可以是pdf文档等

3.路径

当文件不在同一个文件夹时，href属性值需要对应路径

先搞清楚源文件到目标文件的路径
根据路径来上行到父文件夹或者下行到子文件夹
定了多少层文件夹就能下行多少层，上行文件夹最多到根目录（最顶层的文件夹）
上行使用 "../",下行使用 " /子文件夹名 "，
不管是什么操作系统，对于网页，只使用斜线（“/”），不使用反斜线（“\”）

三、web页面构建构建模块

1.网页设计

粗略的草图设计：将内容进行分析，哪些部分是标题、哪些是内容图片等
略图（蓝图）：确定草图内容区所对应的标签
网页：创建HTML，主要从<html>标记开始，并且包含<head>和<body>

2.q标签

q标签表示引用的含义，比如引入古人说的话就是一种引用。一般在浏览器中表现为给文件添加双引号（取决于浏览器，不同浏览器的表现不一样）

使用q标签而不手动添加双引号的好处

使页面的结构更加结构化、更加有意义
方便之后使用css设置引用的样式

3.blockquote标签

blockquote跟q功能类似但有区别，区别如下：

blockquoe	q
长引用	短引用
自成一段	位于段落中
块元素，会独立占据一行	内联元素，在行内出现

块元素还有 <h1>-<h6>、<p>等

内联元素还有 <q><em>等

<a>需要看它包裹的是什么，它即可以是内联也可以是块元素；<img>是内联元素；<br>介于两者之间，能够换行，但是不将内容分成两块

4.br标签

块元素能够实现换行，使用<br>元素也能实现换行的效果；可以发现<br>没有结束标记和内容，没有内容是因为不需要内容，没有结束标记是为了提高编写的效率，这类元素被称为void元素（之前被称为空元素），此类元素还有<img>

void这个词来自于计算机科学，原意为“无值”

<br>和<br/>是一样的，处理XHTML文件的时候，后者的语法更加严格

5.创建HTML列表

创建html列表需要两个元素结合使用，第一个元素用于标记每个列表项，第二个元素用于说明是什么类型的列表（是有序列表还是无序列表）

除了有序列表和无序列表，还有定义列表

先使用<li></li>将列表项进行包裹，每个列表项都需要单独包裹
使用<ol>或<ul>来包裹列表项（<li>也要包括进去），前者表示有序列表，后者表示无序列表

<ol>和<li>都是块元素

ul = unordered list; ol = ordered list; li = list item

li 需要和 ol 或者 ul进行搭配使用，li用于表示每个元素，ol或者ul用于表示分组

列表能够进行嵌套（将ul或者ol的列表组当做列表项进行嵌套）
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <ul>
        <li>4.1</li>
        <li>4.2</li>
        <li>4.3</li>
    </ul>
</ol>

6.小要点

嵌套元素需要注意将元素完全包裹起来
可以通过字符实体的简单缩写来使用特殊字符，比如“<或者>”等，直接使用这些字符会打乱html的结构

">"字符的缩写为 &lt；"<"字符的缩写为 &gt

&也是特殊字符，其字符实体为&amp；需要注意的是&是特殊字符的原因是它可以实现字符实体，字符实体的&不需要再进行替换，&需要替换的情况是单独使用的时候，替换与不替换的情况如下：

&lt 不用将&进行替换

& 单独使用，需要将其进行替换

每个字符实体都有一个字符实体编号，但是每个字符实体编号不一定都有字符实体名

其它部分元素
1. <code>用来显示计算机程序代码
  1. <time>告诉浏览器这是一个时间
    1. <strong>用于特别强调的文本
      1. <pre>原样输出文本

四、web镇之旅连接起来

1.如何将网页发布到网络上

找一家托管公司
选择网站名（网址）
将本地的文件托管到服务器上

托管指南：

技术支持：能够帮助处理技术问题

数据传输：能够支持的用户量等

备份：定期对网页和数据备份，使能够在故障的时候快速恢复

域名：是否包括域名

可靠性：在99%时间里能够正常运行

赠品：脚本语言支持等

2.域名

google.com、facebook.com等都是域名，域名就是一个唯一的名字，用来定位网站

www.baidu.com 是一个网站名，www是域中指定服务器的名字，后面的部分就是域名，其中不同的结尾可以表示不用的用途或者国家

域名就像是一块土地，买下之后只属于你，你可以在上面搭配不同的服务器名字来组成不同的网站，域名可以用于多个网站，这些不同的网站使用的都是同一个域名

3.搬家

将本地电脑的根文件全部复制到服务器的根文件上
根文件就是页面的最顶级文件夹，在web服务器上，根文件的内容可以从网上访问到

本地文件主要通过FTP来传输到服务器上，FTP表示文件传输协议（file transfer protocol），传输之后，文件就“存留”在web（网络）中了

4.FTP

ftp工作过程：

使用ftp连接服务器，这需要托管公司提供的用户名和口令
使用cd命令切换到目标目录（也可以叫做文件夹）
使用put命令将文件上传到服务器
使用mkdir可以在服务器上创建一个新目录
使用get可以从服务器获取文件

dir：得到当前目录的文件列表

cd：切换目录，结合”../“可以回到上一级

pwd：显示当前目录

put ：将指定文件传送到服务器

get ：从服务器获取指定的文件，传回计算机

SFTP（secure file transfer protocol）是安全文件传输协议，是FTP的更加安全的版本，需要注意的是使用的时候要确保FTP应用支持；windows的FTP应用有：Smart FTP、WS_FTP等

5.URL

我们登录网站的时候输入的web网址就是URL，URL也可以叫做统一资源定位符（Uniform Resource Locators）；

url是一个全局地址，用来定位web上的任意资源（可以是html页面、音频、视频等）
url除了指定资源的位置还能指定用来获取资源的协议

www.ceshi.com/index.html

上方就是个URl，第一部分http是指定的用来获取资源的协议，第二部分是网站名，第三部分是根目录到资源的绝对路径*（/ 表示的是根目录）

通俗的说，第一部分告诉浏览器应该使用什么方法来获取资源，第二部分告诉浏览器要去哪个计算机去获取页面，第三部分告诉服务器要获取哪个页面

有些url会是这样的形式www.ceshi.com:80/index.html，这里的80是端口的意思，网站名相当于公寓，端口就是邮箱，一般没有写出来都是使用的默认端口

6.HTTP

HTTP也称为超文本传输协议（hyperText Transfer Protocol），是web上传输超文本文档公认的方法（协议）

超文本文档通常被认为是html页面，但是这个协议传输图像等web页面可能需要的文件
http是简单的请求和响应协议，工作过程如下：
- 客户端（浏览器）向服务端请求文件
- 服务端根据请求寻找文件，如果有就返回文件，没有则返回404错误
每次在地址栏输入url的时候，浏览器就向服务器端请求资源

除了http协议还有其它的协议，比如file协议，浏览器在计算机本地读取文件的时候就会使用该协议，开头写法是filt:/// ，想比较于http多了一个“/”，可以这样理解，当http协议的网站名去掉之后也是三个斜杠

7.绝对路径

绝对路径：从根目录到目标文件的路径
” / “表示的是根目录，文件夹名 （文件夹和文件夹、文件夹和文件名） 之间也要使用 ”/ “隔开
之前使用的href使用的是相对路径，但是在点击的时候浏览器会通过相对路径和所点击页面的路径创建绝对路径，所以web服务器看到的都是绝对路径

href也可以直接使用绝对路径，使用绝对路径的情况一般是跳转到其它网站，相对路径一般用于同一个网站的其它页面

同一个网站也能够使用绝对路径来进行跳转，但那是不合理的，因为很难管理、不容易编辑并且影响html的可读性

8.默认页面工作

当输入的url请求是一个目录的话，页面会返回默认文件页面（如果有的话），有以下两种情况

ceshi.com/ ：服务器发现结尾是个目录，查询该目录下的默认文件
ceshi.com：如果目录存在，服务器会补充上斜线，然后查询默认文件

默认文件一般是 index.html，这取决于使用的是哪种web服务器，还有的默认文件是 index.php、default.htm（microsoft web服务器的怪癖，通过不添加最后的“l” ）

9.链接完善

给<a>标签使用title属性，一般当鼠标悬停在上面的时候会显示内容；这里的title和<head>里面的title是相关的，一般建议两者一样，但是不严格要求

title属性不单单能给a标签使用，别的元素也能使用，效果大都也是工具提示的功能
链接的内容要有意义
链接的内容要简洁，多余的内容可以通过title属性来补充
不将多个链接放在一起，很难区分

10.id属性

id属性有很多特殊的特性，现在可以认为它是唯一标识元素的方法；带id的元素有特殊特性：能够直接链接这个元素

使用id属性为<a>创建目标
- 选择想要创建锚点（目标）的位置，可以是文本，但是通常为标题
- 为锚点添加“id”属性，并添加标识符名（“id”属性值）
<h2 id="content">内容</h2>

h2就是所找的目标锚点，“content”是标识符名；通过id属性，建立了一个目标指向该标题

注意：id的值在当前页面是唯一的
使用id链接元素

无论是绝对路径还是相对路径，在路径的最后添加“ # 和目标标识符”
<a href="index.html#chai">跳转到指定位置</a>

这个例子跳转的id为chai的指定元素

步骤如下：
1. 明确目标页面锚点的id值
2. 在源页面<a>标签添加“#目标标识符”
a标签的内容不一定是文本，img、块元素（q等）都是可以的

href的值只有“#chai”的时候，找该网页上的这个目标值
当省略了默认文件的时候，需要注意
1. http://baidu.com/buzz#cofe
  
  这种写法是错误的，浏览器会在url末尾添加“/”，可能会替代id引用
2. http://baidu.com/buzz/#cofe
  
  这种写法是对的，跟http://baidu.com/buzz/index.html/#cofe是一样的效果（如果默认文件是 index.html的话）
查找目标标题
- 在页面右击鼠标
- 点击查看源代码（view source）
- 在源码里查看目标元素id值

属性的顺序是无要求的，属性的前后顺序没任何区别

id属性可以给任意的元素添加

id的属性名要以字母开头（大写或者小写都行），后面可以是字母、数字、下划线、短横线、冒号、点号，不能够有空格

11.使用target打开新窗口

想要在新窗口打开网页，告诉浏览器要打开的窗口名，没有告诉则会在同一个窗口中打开，将原来的内容给覆盖掉

<a href="(省略)" target="(窗口目标名)">content</a>

窗口目标名指定为“_blank”的时候就算有多个<a>的target都是它，仍旧都会在新窗口中打开
如果窗口目标名不是“_blank”，则后面点击的链接会覆盖掉同名链接

有的浏览器不会弹出新窗口，但是会打开标签页，这取决所使用的浏览器设置

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

1.浏览器如何处理图像

处理<img>元素和其他元素的处理不一样。处理其它元素的时候比如<h1>、<p>等，直接将它们显示出来就可以了，处理<img>的时候需要先向服务器获取

浏览器从服务器获取文件，获取了html页面（除了图片没显示）
浏览器向服务器发送请求获取第一张图片，展示图片
浏览器向服务器发送请求获取第二张图片（如果有的话，以此类推），展示图片

现在我们看到的图片都是同时出现的，因为通常浏览器会同时请求图片资源

2.图像格式的区别

图像的格式有很多，有着各自的优缺点，但是web上常用的有三种：jpeg（照片和复杂图像使用）、png（单色图像、logo、和几何图形使用）、gif（单色图像、logo、和几何图形使用），具体情况如下：

jpeg	png	gif
最适合连续色调图像（比如照片）	最适合单色图像和线条构成的图像（如logo、剪贴画和图像中的小文本）	类似于png
可以表示包含多达1600万种不同颜色的图像	包含上百万种不同颜色的图像。png有3种：PNG-8（256种颜色）、PNG-24（支持数千种颜色）、PNG-32（支持数百万种颜色）	最多256种不同颜色的图像
是一种”有损“格式，在缩小照片的时候会丢掉图像的信息	“无损格式”，png通过压缩文件来缩小文件大小，不会丢掉信息	也是一种无损格式
不支持透明度	允许设置为透明，将图像下面的信息显示出来	也支持透明度，但是只允许一种颜色设置为透明
文件比较小，以便web页面能够高效的显示	比相应jpeg大；比相应gif得看实际情况（png使用的颜色多就比gif大，反之小）	往往比相应的jpeg大
不支持动画		支持动画

3.img元素

<img src="images/drink.gif">

src指定了在web页面上显示的图像文件的位置
img是个内联元素，不会在前面或者后面添加换行
img是个void元素

void元素严格上来说是html页面中开始标记和结束标记直接没有任何内容的元素，img的图片内容是浏览器用图像将<img>替换的结构；而且html是纯文本

4.img也能够使用相对链接

图像和html页面一起储存在web服务器上，所以web上的每个图像都有自己的url

<img src="http://www.baidu.com/images/ceshi.gif">

要通过url包含一个图像，只要将整个url放入src即可
url是图像的路径，所以一定是以文件名结尾。这与默认web页面不同，图像没有默认图像的说法

同一个网站下的图片最好使用相对路径，不同网站的图片使用url

5.获取图片的url

鼠标右击图片选择复制图片地址
鼠标右击图片选择在窗口打开，查看地址栏链接。这个使用的是浏览器查看源代码菜单选项

找到的可能是图片的相对链接，需要进行处理

6.图片的候选格式

当图片无法显示的时候，我们应该使用<img>的alt属性来给访问者一些指示，告诉他们图像的信息是什么

<img src="(省略)" alt="这里是图像显示失败的时候显示的内容">

当图片无法正常显示的时候，alt的值会显示出来

7.调正图像大小

可以使用使用width和height属性来调正图像的宽度和高度

<img src="" width="48" height="100">

宽度和高度都是通过像素来指定的。如果没有设置图像的大小，则浏览器会自动调正图像的大小再进行显示

使用width和height属性能够是浏览器在显示图像之前就建立页面布局，否则的话浏览器会在下载图片得知图片大小之后，可能还会对已经完成页面进行调整（图片是最后显示的）

width和height还能实现缩放的功能，但是不建议这样使用

width和height能够单独使用

使用width和height使图片适合页面大小之前，仍旧会向服务器请求整个大图像，而图像越大，所消耗的资源就越多

综上所述，width与height主要的功能是来给布局预留空间的，而不是用来调正图像的大小，调正图片的大小应该提前对图片进行处理

有些浏览器会自动调正图像的大小，但是不能依赖这个特性

8.给网站使用缩略图

当页面的图像太大的时候，可以使用点击缩略图跳转的方式使页面更加美观，步骤如下：

创建文件夹用来存放缩略图
将每个图片使用图片处理工具将图片缩小，并保存到新创建的文件夹中
将img标签中的src设置为缩略图
增加各个缩略图到新页面的链接，新页面的内容是缩略图对应的原图
1. 为每个缩略图创建新页面，新页面是原图
2. 为每个缩略图创建链接（将img标签嵌套在a标签里边）

headfirst html与css第二版第一到五章

笔记

引子

一、web语言 认识HTML