Head First Html and CSS学习笔记之HTML

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

初学前端开发，记录下自己的学习笔记。

第一章认识HTML

1:关于HTML

HTML是超文本标记语言（HyperText Markup Language）的缩写，用来建立网页的结构。

它只会根据标记来确定在哪里换行或者分段。所以浏览器会忽略HTML文档中的制表符、回车和空格。

共有六级标题，从<h1>到<h6>，字体由大到小。

HTML注释放在之间，浏览器会把它们完全忽略，可以有多行。

<em>元素表示强调。

<head>的HTML页面的头部，它包含了web页面的相关信息。

2、关于CSS

CSS是层叠样式表（cascading style sheets）的缩写。它提供了一种方法来告诉浏览器页面中的元素如何显示。

想要增加样式，要在页面中增加<style>元素。它放在HTML的首部里。

它有一个可选的属性type，告诉浏览器在使用什么类型的样式。使用CSS，对应的类型是"text/css"。

第二章深入了解超文本

<a>元素创建一个超文本链接，元素的内容会成为web页面上可以点击的文本，href属性会告诉流浪器链接目标。

文本和图像都可以当做链接的标签。

第三章构建模块

<q> 短引用：作为现有段落的一部分，大部分浏览器会加上引号，是quotation的缩写。

<blockquote> 长引用：这是一个块元素，创建了一个单独的文本块，还会将文字稍微缩进，看起来更像一个引用。若果想引用一段或者多段文字，可以使用这个元素。

在<blockquote>中使用<q>这是引用的引用，使用<p>的话可以形成多个段落。

块(block)元素,前后都有一个换行, 如 <h1> ~ <h6>, <p> , <blockquote> ,<ol>,<ul>,<li>等，特点是: 特立独行

内联(inline)元素,总在“行内”出现, 如 <q>, <a>, <em> ,特点是: 随波逐流

void元素,这个元素没有实际内容，会用简写来表示，如 <img>, <br> ,这样能提高效率。

如果想插入自己的换行是，使用<br>元素。

<ol> order list 有序列表

<ul> unorder list 无序列表

<li> list item

字符实体：如果想输出 The < html > element，通过使用字符实体可以这样写 The < html > element ，更多的字符实体可以访问http://www.unicode.org/charts/

第四章连接起来

www.starbuzzcoffee.com 中 starbuzzcoffee.com 是域名， www是域中特定服务器的名字。

www.starbuzzcoffee.com只是 starbuzzcoffee.com这个域上的一个网站。

URL(Uniform Resource Locateor)统一资源定位符，是一个全局地址，可以定位web上任意资源，包括html页面，音频，视频以及其他形式的web内容。

web服务器默认文件名为"index.html"或"default.htm",所以如果浏览器请求目录，服务器会在该目录下寻找"index.html"或"default.htm"，如果找到则返回。如果末尾没有正斜杠，如果该目录确实存在，那么浏览器会自动帮你加上末尾的斜线。

文件URL有3个斜线而不是2个，http url中删去网站名也会有3个斜线

web服务器默认端口为80

<a href="index.html#chai">See Chai Tea</a>或者href = "http://wickedlysmart.com/buzz/#Teas_and_other_infusions, 点击这个链接就会跳转到index.html中id为chai或者Teas_and_other_infusions的部分显示，否则默认是链接到top位置。

<a target="_target" href="http://www.google.com">Google</a> 在一个新的窗口打开这个链接

第五章为页面增加图像

照片和复杂图像使用 jpeg（jpeg有损、不支持透明度、比较小、不支持动画）

单色图像、logo和几何图像使用png或gif（png可包含上百万中颜色、无损、可透明、图像下面的东西可以显示出来、相对于jpeg而言png更大；Gif类似png、256种颜色、无损、支持透明度，不过只允许一种颜色设置为透明、比jpeg更大、支持动画）