python全栈2:CSS基础

一、列表

列表有3种

1.1 无序列表

无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。
- ul就是英语unordered list，“无序列表”的意思。
- li 就是英语list item ， “列表项”的意思。
注意，这是第一个“组标签”，就是要么不写，要么就要写一组。
也就是说，所以的li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。

浏览器会默认的给无序列表小圆点的“先导符号”
但是，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

li是一个容器级标签，里面放置的内容可能很多，甚至于可以再放一个ul。

2.2 有序列表：

ordered list 有序列表，用ol表示，浏览器会自动增加阿拉伯序号。

也就是说，ol和ul就是语义不一样，怎么使用都是一样的。
ol里面只能有li，li必须被ol包裹。li是容器级。
ol这个东西用的不多，如果想表达顺序，大家一般也用ul。

2.3 定义列表

定义列表也是一个组标签，不过比较复杂，出现了三个标签：
1.dl表示definition list 定义列表
2.dt表示definition title 定义标题
3.dd表示definition description 定义表述词儿

表达的语义是两层：

<dl>
<dt>北京</dt>
<dd>国家首都，政治文化中心</dd>
<dt>上海</dt>
<dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
<dt>广州</dt>
<dd>中国南大门，有珠江、小蛮腰</dd>
</dl>
1) 是一个列表，列出了北京、上海、广州三个项目
2) 每一个词儿都有自己的描述项。dd是描述dt的。
定义列表用法非常灵活，可以一个dt配很多dd：

真实案例-京东最下方：
<dl>
<dt>购物指南</dt>
<dd>
<a href="#">购物流程</a>
<a href="#">会员介绍</a>
<a href="#">生活旅行/团购</a>
<a href="#">常见问题</a>
<a href="#">大家电</a>
<a href="#">联系客服</a>
</dd>
</dl>
<dl>
<dt>配送方式</dt>
<dd>
<a href="#">上门自提</a>
<a href="#">211限时达</a>
<a href="#">配送服务查询</a>
<a href="#">配送费收取标准</a>
<a href="#">海外配送</a>
</dd>
</dl>

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

三、div和span

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

div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。div标签是一个容器级标签，里面什么都能放，甚至可以放div自己，div标签是最最重要的布局标签

span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

总之，span里面是放置小元素的，div里面放置大东西的：

四、表单

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

form是英语表单的意思。form标签里面有action属性和method属性。稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。

---

<input type="text" /> 文本框
<input type="password" /> 密码框
<input type="radio"> 单选按钮
<input type="checkbox" /> 复选框
<input type="button" value="我是一个普通按钮" />

---

4.1 文本框
<input type="text" value="默认有的值"/>
input表示“输入”，指的是这是一个“输入小部件”;
type表示“类型”;
value表示“值”，value属性就是默认有的值，文本框中已经被填写好了;
text表示“文本”，指的是类型是一个文本框的输入小部件,这是一个自封闭标签.

---

4.2 密码框

如果type=”text” 文本框
<input type="password" />
如果type=”password” 密码框

---

4.3 单选按钮

 男"><input type="radio" name="xingbie" /> 女```
只能选一个，术语叫做“互斥”。

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

单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。

```<input type="radio" name="sex" checked="checked">```
默认被选择，就应该书写checked=”checked”
** **

4.4 复选框

也是input标签，type是checkbox。 




<div class="se-preview-section-delimiter"></div>

```<p>
    请选择你的爱好：
    <input type="checkbox" name="aihao"/> 睡觉
    <input type="checkbox" name="aihao"/> 吃饭
    <input type="checkbox" name="aihao"/> 足球
    <input type="checkbox" name="aihao"/> 篮球
    <input type="checkbox" name="aihao"/> 乒乓球
    <input type="checkbox" name="aihao"/> 打豆豆
</p>```
复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

HTML5中，input的类型又增加了很多（比如date、color，但是都不兼容）。
** **

4.5 下拉列表

select就是“选择”，option“选项”。

select标签和ul、ol、dl一样，都是组标签。

---

4.6 多行文本框（文本域）

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

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

cols属性表示columns“列”，rows属性表示rows“行”。

值就是一个数，表示多少行，多少列。

---

4.7 三种按钮

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

普通按钮：

button就是英语“按钮”的意思。value就是“值”的意思，按钮上面显示的文字。

提交按钮：

submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。

这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。

前端开发工程师，只需要关心页面的美、样式、板式、交互。至于数据的保存、读取，都是后台工程师做的事情。（Node.js我们猴年要学，Node.js就是后台语言，到时候我们就知道怎么把表单存储到数据库中了。实际上Ajax课会给大家讲半天的PHP，涉及MySQL，Ajax课你就知道表单怎么真的被提交了。）

重置按钮：

reset就是“复位”的意思。

至此，input的类型实际上非常多，HTML5将会变得更多。现在的阶段，input的类型：

---

4.8 label标签

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

label就是解决这个问题的。

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

复选框也有label：

什么表单元素都有label。

五、HTML杂项

5.1 HTML注释

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

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

HTML注释的语法

Sublime中按ctrl+/ 就是注释

---

5.2 字符实体

我们想在页面上输出“

”这些字符，但是HTML认为这是一个标签，还没封闭。

所以，

就是<的字符实体，什么意思呢？就是用常用字符表示这些符号的方式。

lt 就是英语less than 小于的意思；

就是>的字符实体。

gt就是greater than 大于的意思。

就是© 版权符号。

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

所以：

空出了4个字的格，可以防止空白折叠现象。

---

5.3 HTML废弃标签介绍

HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。

这些样式的标签，都已经被废弃。

2004年之前的东西了：

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

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

水平线：

换行：

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

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

br是英语break打断的意思。

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

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

HTML结构、字符集。

网络的基础知识。

六、CSS

现在的互联网前端三层：

HTML 超文本标记语言 从语义的角度描述页面结构。

CSS 层叠式样式表 从审美的角度负责页面样式。

JS JavaScript 从交互的角度描述页面行为。

我们现在要开始学习CSS了，就是样式。

6.1 CSS整体感知

css是cascading style sheet 层叠式样式表的简写。“层叠式”的意思，我们将慢慢的去理解。

css的最新版本是css3，我们学习的是css2.1。 因为css3和css2.1不矛盾，必须先学2.1然后学3。

我们写css的地方是style标签，就是“样式”的意思，写在head里面。

后面的课程你将知道，css也可以写在单独的文件里面，现在我们先写在style标签里面

type表示“类型” ， text就是“纯文本”。css也是纯文本的。

sublime这里如果想自动生成，那么要输入：

    请选择你的爱好：
    <input type="checkbox" name="aihao"/> 睡觉
    <input type="checkbox" name="aihao"/> 吃饭
    <input type="checkbox" name="aihao"/> 足球
    <input type="checkbox" name="aihao"/> 篮球
    <input type="checkbox" name="aihao"/> 乒乓球
    <input type="checkbox" name="aihao"/> 打豆豆
</p>```
复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

HTML5中，input的类型又增加了很多（比如date、color，但是都不兼容）。
** **

4.5 下拉列表
```<select>
    <option>北京</option>
    <option>河北</option>
    <option>河南</option>
    <option>山东</option>
    <option>山西</option>
    <option>湖北</option>
    <option>安徽</option>
</select>```
select就是“选择”，option“选项”。select标签和ul、ol、dl一样，都是组标签。
** **

4.6 多行文本框（文本域）
```<textarea cols="30" rows="10"></textarea>```
text就是“文本”，area就是“区域”。
这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。
cols属性表示columns“列”，rows属性表示rows“行”。
** **

4.7 三种按钮

按钮也是input标签，一共有三种按钮：
普通按钮：
```<input type="button" value="我是一个普通按钮" />

button就是英语“按钮”的意思。value就是“值”的意思，按钮上面显示的文字。

提交按钮：

submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。

这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。

前端开发工程师，只需要关心页面的美、样式、板式、交互。至于数据的保存、读取，都是后台工程师做的事情。（Node.js我们猴年要学，Node.js就是后台语言，到时候我们就知道怎么把表单存储到数据库中了。实际上Ajax课会给大家讲半天的PHP，涉及MySQL，Ajax课你就知道表单怎么真的被提交了。）

重置按钮：

reset就是“复位”的意思。

至此，input的类型实际上非常多，HTML5将会变得更多。现在的阶段，input的类型：

---

4.8 label标签

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

label就是解决这个问题的。

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

复选框也有label：

什么表单元素都有label。

五、HTML杂项

5.1 HTML注释

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

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

HTML注释的语法

Sublime中按ctrl+/ 就是注释

---

5.2 字符实体

我们想在页面上输出“

”这些字符，但是HTML认为这是一个标签，还没封闭。

所以，

就是<的字符实体，什么意思呢？就是用常用字符表示这些符号的方式。

lt 就是英语less than 小于的意思；

就是>的字符实体。

gt就是greater than 大于的意思。

就是© 版权符号。

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

所以：

空出了4个字的格，可以防止空白折叠现象。

---

5.3 HTML废弃标签介绍

HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。

这些样式的标签，都已经被废弃。

2004年之前的东西了：

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

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

水平线：

换行：

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

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

br是英语break打断的意思。

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

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

HTML结构、字符集。

网络的基础知识。

六、CSS

现在的互联网前端三层：

HTML 超文本标记语言 从语义的角度描述页面结构。

CSS 层叠式样式表 从审美的角度负责页面样式。

JS JavaScript 从交互的角度描述页面行为。

我们现在要开始学习CSS了，就是样式。

6.1 CSS整体感知

css是cascading style sheet 层叠式样式表的简写。“层叠式”的意思，我们将慢慢的去理解。

css的最新版本是css3，我们学习的是css2.1。 因为css3和css2.1不矛盾，必须先学2.1然后学3。

我们写css的地方是style标签，就是“样式”的意思，写在head里面。

后面的课程你将知道，css也可以写在单独的文件里面，现在我们先写在style标签里面

type表示“类型” ， text就是“纯文本”。css也是纯文本的。

sublime这里如果想自动生成，那么要输入：