一、引入

css用来描述html，学习css前我们先来学习html的基础标签的用法，再进入css的学习。
本教程面向小白对象，不会讲细枝末节深入的东西。

二、列表

列表有3种

2.1 无序列表

无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。

ul就是英语unordered list，“无序列表”的意思。
li 就是英语list item ， “列表项”的意思。

你会发现，这是我们学习的第一个“组标签”，就是要么不写，要么就要写一组。

1       <ul>

2           <li>北京</li>

3           <li>上海</li>

4           <li>广州</li>

5           <li>铁岭</li>

6       </ul>

也就是说，所以的li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
下面的是错误的，因为必须用ul包裹：

7           <li>北京</li>

8           <li>上海</li>

9           <li>广州</li>

10          <li>铁岭</li>

下面的也是错误的，因为ul里面只能有li标签，而不能有别的：

1       <ul>

2           <h3>中国主要城市</h3>

3           <li>北京</li>

4           <li>上海</li>

5           <li>广州</li>

6           <li>铁岭</li>

7       </ul>

浏览器会默认的给无序列表小圆点的“先导符号”

ul标签实际应用场景：
导航条：

li里面放置的内容可能很多：

ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放，比如：

1   <ul>

2           <li>

3               <h4>习大大谈治国理政</h4>

4               <p>¥49.00</p>

5               <p>《习大大谈治国理政》谈中国、论世界，为各国读者开启了一扇观察和感知中国的窗口。阅读这本书，可以了解以习大大同志为总书记的党中央治国理念和执政方略，品味悠长醇厚的中国历史文化，感受当</p>

6           </li>

7           <li>

8               <h4>习大大用典</h4>

9               <p>¥23.60</p>

10              <p>人民日报社社长杨振武主持编写并作序，人民日报社副总编辑卢新宁组织撰写解读文字，旨在对习大大总书记重要讲话（文章）引用典故的现实意义进行解读，对典故的背景义</p>

11          </li>

12          <li>

13              <h4>摆脱贫困</h4>

14              <p>26.00</p>

15              <p>追本溯源 融会贯通    深入学习贯彻习大大总书记系列重要讲话精神    推动学习贯彻向广度深度拓展   习大大总书记**部个人专著   时隔22年后重印发行</p>

16          </li>

17      </ul>

甚至于可以再放一个ul：

1   <ul>

2           <li>

3               吃的

18              <ul>

19                  <li>饼干</li>

20                  <li>面包</li>

21                  <li>

22                      巧克力

23                      <ul>

24                          <li>德芙</li>

25                          <li>费列罗</li>

26                      </ul>

27                  </li>

28              </ul>

4           </li>

5           <li>

6               用的

7               <ul>

8                   <li>笔记本</li>

9                   <li>圆珠笔</li>

10              </ul>

11          </li>

12          <li>

13              喝的

14              <ul>

15                  <li>牛奶</li>

16                  <li>可乐</li>

17              </ul>

18          </li>

19      </ul>

2.2 有序列表

ordered list 有序列表，用ol表示

1       <ol>

2           <li>小苹果</li>

3           <li>月亮之上</li>

4           <li>最炫民族风</li>

5       </ol>

浏览器会自动增加阿拉伯序号：

也就是说，ol和ul就是语义不一样，怎么使用都是一样的。
ol里面只能有li，li必须被ol包裹。li是容器级。

ol这个东西用的不多，如果想表达顺序，大家一般也用ul：

1   <ul>

2       <li>1. 小苹果</li>

3       <li>2. 月亮之上</li>

4       <li>3. 最炫民族风</li>

5   </ul>

2.3 定义列表

定义列表也是一个组标签，不过比较复杂，出现了三个标签：

dl表示definition list 定义列表
dt表示definition title 定义标题
dd表示definition description 定义表述词儿

dt、dd只能在dl里面；dl里面只能有dt、dd

1       <dl>

2           <dt>北京</dt>

3           <dd>国家首都，政治文化中心</dd>

4           <dt>上海</dt>

5           <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>

6           <dt>广州</dt>

7           <dd>中国南大门，有珠江、小蛮腰</dd>

8       </dl>

表达的语义是两层：
1) 是一个列表，列出了北京、上海、广州三个项目
2）每一个词儿都有自己的描述项。
dd是描述dt的。

定义列表用法非常灵活，可以一个dt配很多dd：

1       <dl>

2           <dt>北京</dt>

3           <dd>国家首都，政治文化中心</dd>

4           <dd>污染很严重，PM2.0天天报表</dd>

5           <dt>上海</dt>

6           <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>

7           <dt>广州</dt>

8           <dd>中国南大门，有珠江、小蛮腰</dd>

9       </dl>

北京这个项目，用了两个dd来描述。
还可以拆开，让每一个dl里面只有一个dt和dd，这样子感觉清晰一些。

1       <dl>

2           <dt>北京</dt>

3           <dd>国家首都，政治文化中心</dd>

4           <dd>污染很严重，PM2.0天天报表</dd>

5       </dl>

6

7       <dl>

8           <dt>上海</dt>

9           <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>

10      </dl>

11

12      <dl>

13          <dt>广州</dt>

14          <dd>中国南大门，有珠江、小蛮腰</dd>

15      </dl>

真实案例：
京东最下方：

结构：

1   <dl>

2       <dt>购物指南</dt>

3       <dd>

4           <a href="#">购物流程</a>

5           <a href="#">会员介绍</a>

6           <a href="#">生活旅行/团购</a>

7           <a href="#">常见问题</a>

8           <a href="#">大家电</a>

9           <a href="#">联系客服</a>

10      </dd>

11  </dl>

dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：
用什么标签，不是根据样子来决定，而是语义。

三、div和span

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。
这两个东西，都是最最重要的“盒子”。

1       <div>

2           <h3>中国主要城市</h3>

3           <ul>

4               <li>北京</li>

5               <li>上海</li>

6               <li>广州</li>

7           </ul>

8       </div>

9

10      <div>

11          <h3>美国主要城市</h3>

12          <ul>

13              <li>纽约</li>

14              <li>洛杉矶</li>

15              <li>华盛顿</li>

16              <li>西雅图</li>

17          </ul>

18      </div>

div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己
span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。
就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
span里面是放置小元素的，div里面放置大东西的：

1               <p>

2                   简介简介简介简介简介简介简介简介

3                   <span>

4                       <a href="">详细信息</a>

5                       <a href="">购买</a>

6                   </span>

7               </p>

div标签是最最重要的布局标签，至于class是什么意思，下面讲：

1       <div class="header">

2           <div class="logo"></div>

3           <div class="nav"></div>

4       </div>

5       <div class="content">

6           <div class="guanggao"></div>

7           <div class="dongxi"></div>

8       </div>

9       <div class="footer"></div>

所以，我们亲切的称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。

四、表单

表单就是收集用户信息的，就是让用户填写的、选择的。

1       <div>

2           <h3>欢迎注册本网站</h3>

3           <form>

4               所有的表单内容，都要写在form标签里面

5           </form>

6       </div>

form是英语表单的意思。form标签里面有action属性和method属性，在《Ajax》课程上给大家讲解。稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。

4.1 文本框

1   <input type="text" />

这是一个自封闭标签，自此，我们学习的自封闭标签有：

1   <meta name=”Keywords” content=”” />

2   <img src=”” alt=”” />

3   <input type=”text” />

value表示“值”，value属性就是默认有的值，文本框中已经被填写好了：

1   <input type="text" value="默认有的值" />

4.2 密码框

1   <input type="password" />

也就是说，input标签很神奇，又是文本框，又是密码框。
到底是啥？看type属性的值是什么，来决定。
如果type=”text” 文本框
如果type=”password” 密码框

4.3 单选按钮

只能选一个，术语叫做“互斥”。

1   <input type="radio" name="xingbie" /> 男

2   <input type="radio" name="xingbie" /> 女

radio是“收音机”的意思，input的type的值，如果是radio就是单选按钮。
非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。

单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
默认被选择，就应该书写checked=”checked”

1   <input type="radio" name="sex" checked="checked">

4.4 复选框

也是input标签，type是checkbox。

请选择你的爱好：

3       <input type="checkbox" name="aihao"/> 睡觉

4       <input type="checkbox" name="aihao"/> 吃饭

5       <input type="checkbox" name="aihao"/> 足球

6       <input type="checkbox" name="aihao"/> 篮球

7       <input type="checkbox" name="aihao"/> 乒乓球

8       <input type="checkbox" name="aihao"/> 打豆豆

HTML5中，input的类型又增加了很多（比如date、color，但是都不兼容，所以我们是在专门的HTML5课程中学）不过现在，我们就先学习这四个。

1   <input type="text" /> 文本框

2   <input type="password" /> 密码框

1   <input type="radio"> 单选按钮

2   <input type="checkbox" /> 复选框

4.5 下拉列表

select就是“选择”，option“选项”。
select标签和ul、ol、dl一样，都是组标签。

1   <select>

2       <option>北京</option>

3       <option>河北</option>

4       <option>河南</option>

5       <option>山东</option>

6       <option>山西</option>

7       <option>湖北</option>

8       <option>安徽</option>

9   </select>

4.6 多行文本框（文本域）

text就是“文本”，area就是“区域”。

1   <textarea cols="30" rows="10"></textarea>

这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。

cols属性表示columns“列”，rows属性表示rows“行”。
值就是一个数，表示多少行，多少列。

4.7 三种按钮

按钮也是input标签，一共有三种按钮：
普通按钮：

1   <input type="button" value="我是一个普通按钮" />

提交按钮：

1   <input type="submit" />

submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。
这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。
前端开发工程师，只需要关心页面的美、样式、板式、交互。至于数据的保存、读取，都是后台工程师做的事情。（Node.js就是后台语言，实际上Ajax课会给大家讲半天的PHP，涉及MySQL，Ajax课你就知道表单怎么真的被提交了。）
重置按钮：

1   <input type="reset" />

reset就是“复位”的意思。
至此，input的类型实际上非常多，HTML5将会变得更多。现在的阶段，input的类型：

1 text
2 password
3 radio
4 checkbox
5 button
6 submit
7 reset

4.8 label标签

本质上讲，“男”、“女”这两个汉字，和input元素没有关系。

1   <input type="radio" name="sex" /> 男

2   <input type="radio" name="sex" /> 女

label就是解决这个问题的。

1   <input type="radio" name="sex" id="nan" /> <label for="nan">男</label>

2   <input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>

input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。

复选框也有label：

1   <input type="checkbox" id="kk" />

2   <label for="kk">10天内免登陆</label>

什么表单元素都有label。

五、HTML杂项

5.1 HTML注释

任何的程序、代码都有注释，注释就是给程序员看的，不影响程序的。

适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的。

1       <!--这里是头部，还没有做完，准备加两天班弄完-->

2       <div>头部</div>

3       <!--这里是陈伟弄的，跟我没关系-->

4       <div>主要内容</div>

5       <!--这里是高俊负责的-->

6       <div>页尾</div>

HTML注释的语法：

1   <!--注释的内容-->

5.2 字符实体

我们想在页面上输出“< h1 >”这些字符，但是HTML认为这是一个标签，还没封闭。

1   好高兴啊，今天我们学习了<h1>标签，老师说这个标签是主标题的语义。

所以，可以使用转义字符

1   &lt;

就是<的字符实体，什么意思呢？就是用常用字符表示这些符号的方式。
lt 就是英语less than 小于的意思

1   &gt;

就是>的字符实体。
gt就是greater than 大于的意思。

1   &nbsp;

nbsp就是英语non-breaking spacing不打断空格的意思，就是空格。

5.3 HTML废弃标签介绍

HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。
这些样式的标签，都已经被废弃。

2004年之前的东西了：

1   <font size="9" color="red">哈哈</font>

这些标签都是css钩子，而不是原意：

1       <b>加粗</b>

2       <u>下划线</u>

3       <i>倾斜</i>

4       <del>删除线</del>

5       <em>强调</em>

6       <strong>强调</strong>

这些标签，是有着浓厚的样式的作用，干涉了css的作用，所以HTML抛弃了他们。
水平线：

1   <hr />

不另起一个段落，进行换行。

1       <p>

2           哈<br />哈哈

3       </p>

网页中99.9999%需要换行的时候，是因为另起了一个段落，所以要用p，不要用

br是英语break打断的意思。

标准的div+css页面，用的标签种类很少：

1   div  p  h1  span   a   img   ul   ol    dl    input

知道每个标签的特殊用法、属性。比如a标签，img的属性。

六、CSS

现在的互联网前端三层：

HTML 超文本标记语言从语义的角度描述页面结构。
CSS 层叠式样式表从审美的角度负责页面样式。
JS JavaScript 从交互的角度描述页面行为。
我们现在要开始学习CSS了，就是样式。

6.1 CSS整体感知

css是cascading style sheet 层叠式样式表的简写。“层叠式”的意思，我们将慢慢的去理解。
css的最新版本是css3，我们学习的是css2.1。因为css3和css2.1不矛盾，必须先学2.1然后学3。

1       <style type="text/css">

2           p{

3               color:red;

4               font-size: 30px;

5               text-decoration: underline;

6               font-weight: bold;

7               text-align: center;

8               font-style: italic;

9           }

10          h1{

11              color:blue;

12              font-size: 50px;

13              font-weight: bold;

14              background-color: pink;

15          }

16      </style>

我们写css的地方是style标签，就是“样式”的意思，写在head里面。
后面的课程你将知道，css也可以写在单独的文件里面，现在我们先写在style标签里面

1   <style type=”text/css”>

2   </style>

type表示“类型” ， text就是“纯文本”。css也是纯文本的。
css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。
语法：

1   选择器{

2       k:v;

3       k:v;

4       k:v;

5       k:v;

6   }

7   选择器{

8       k:v;

9       k:v;

10      k:v;

11      k:v;12  }

6.2 一些常见的属性

字符颜色：

1 color:red;

color属性的值，可以是英语单词，比如red、blue、yellow等等；也可以是rgb、十六进制，不要着急，后几天讲。
sublime中的快捷键是c，然后tab
字号大小：

1 font-size:40px;

font就是“字体”，size就是“尺寸”。px是“像素”。
单位必须加，不加不行。

背景颜色：

1 background-color: blue;

background就是“背景”。
加粗：

1 font-weight: bold;

font是“字体” weight是“重量”的意思，bold粗。

不加粗：

1 font-weight: normal;

normal就是正常的意思
斜体：

1 font-style: italic;

italic就是“斜体”
sublime中的快捷键是fsi，然后tab
不斜体：

1 font-style: normal;

下划线：

1 text-decoration: underline;

decoration就是“装饰”的意思
没有下划线

1 text-decoration:none;

css没啥难的，就是要把属性给记忆准确。

七、基础选择器

css怎么学？很简单有两个知识部分：
1）选择器，怎么选；
2）属性，样式是什么

7.1 标签选择器

就是标签的名字。
css：

1       <style type="text/css">

2           span{

3               color:red;

4           }

5       </style>

1   <h1>看不到我<span>嘤嘤嘤</span>看不到我</h1>

注意的是：
1） 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input
2）无论这个标签藏的多深，一定能够被选择上：

1       <ul>

2           <li>

3               <ul>

4                   <li>

5                       <ul>

6                           <li>

7                               <ul>

8                                   <li>

9                                       <p>我是很深的p</p><!--应该显示为蓝色 -->

10                                  </li>

11                              </ul>

12                          </li>

13                      </ul>

14                  </li>

15              </ul>

16          </li>

17      </ul>

css：

1           p{

2               color:blue;

3           }

3）选择的所有，而不是一个。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”的。

7.2 id选择器

1       <p>我是段落1</p>

2       <p id="para2">我是段落2</p>

3       <p>我是段落3</p>