从23号开始用了4天时间看完了《Head First Html与CSS》这本书，本书讲解方式深入浅出，便于理解，结合习题，便于记忆，是一本不错的入门书。下面是本书的学习笔记：

 

一、认识HTML

HyperText Markup Language，超文本标记语言的缩写。标记文本来告诉浏览器文本的结构。

注释放在<!--和-->之间，浏览器会忽略其中内容。

1、在电脑上创建一个html文件

打开记事本，另存为后缀名为.html，编码为UTF-8。

本地测试，直接在浏览器中打开，可以直接将文件拖进去。

2、html文件基本结构

<html>
    <head>
    </head>
    <body>
    </body>
</html>

一个完整的元素：<h1> Starbuzz Coffee Beverages</h1> 开始标记+内容+结束标记

3、增加样式，<style>元素

放在头部里，制定类型，加属性type为css(也可不指定)，可以在头部标记里加属性。

<head>
        <style type="text/css">
        </style>
</head>
css是另一门语言是层叠样式表的缩写，cascading style sheets，语法结构跟html不同。html 负责页面结构(布局)，css负责页面样式（表现）。
css基本语法是：元素名 {属性1：值；
                                   属性2：值；
                                  }
例：body {
                    background-color: #d2b48c;
                    border: 2px dotted black;
                    margin-left: 20%;
                    margin-right: 20%;
                    padding: 10px;
                  }

二、深入了解超文本HT，hypertext

1、超链接，元素<a>

<a href="direction.html">detailed derections</a>

href属性来指定链接的目标文件，> <中间的内容是浏览器显示的文本（标签），通常带有一个下划线，代表可点击。href是缩写，hypertextreference，超文本引用。

2、引用路径

在本网站内容用相对地址，外网站内容用绝对地址url

如果相对本网页，要引用的内容是在下级子文件夹：images/coffee.jpg

如果相对本网页，要引用的内容是在兄弟文件夹，则要先返回上级父文件夹，在下行到该兄弟文件夹：../images/coffee.jpg，一个".."代表上行一级。如果要上行两级则用../..。

如果相对本网页，要引用的内容就在本级，则直接用coffee.jpg

注："/"只用做分隔。

 

三、构建模块 Web页面建设

首先根据草图建一个页面略图，就是用html元素标识出基本的框架，然后再把元素和内容补充完整，形成基本布局。

1、块元素block，内联元素inline

块元素：<p> <blockquote> <ol> <ul> <li>，单独显示，前后有换行。

内联元素：<q> <em> <img>，没有换行。

2、其他

<br>是换行符，没有任何内容，没有结束标记。是一个void元素。<img>也是void元素，有属性，但是没有内容和结束标记。

ul: unordered list 无序列表
ol: ordered list 有序列表
li: list item 列表项
ul 与 li ，ol 与 li , 必须成组使用，不能单独也不能搭配其他使用。

特殊字符要用字符实体来表示。&是所有实体的第一个字符，例如< 是&lt ，但是&不能单独使用，要用实体&amp。

3、元素杂烩

<a>建立链接

<q>短引用

<p>段落

<code>代码显示

<em>强调文本，一般是斜体

<time>告诉浏览器这是个时间

<ul>无序列表

<ol>有序列表

<li>列表项

<strong>强调文本，一般是加粗

<pre>希望浏览器原样显示文本，按照你输入的方式，如空格换行等

<br>换行

<img>插入图像

<blockquote>长引用