《Web前端开发精品课 HTML与CSS基础教程》---笔记

网上看到这本书，评分挺高
读一下，做下记录，作为视频学习的补充，查漏补缺

---

HTML

常用标签

标签 又叫做 元素

p标签，段落标签paragraph，可以用来标记一段文字
段落标签会自动换行

<br/>：break 换行
标签

上标标签sup，superscripted
a<sup>2</sup>：a²

下标标签sub，subscripted
H<sub>2</sub>O：H₂O

斜体
<em>斜体</em>：斜体

删除线
<s>删除线</s>：删除线

下划线
<u>下划线</u>：下划线

div标签：division（分区）

&nbsp：换行

分割线
<hr />：

---

标签分类

标签分为两种：一般标签 自闭合标签
一般标签有开始符号和结束符号，内部可插入其他标签或文字
自闭合标签没有结束符号

块元素和行内元素

HTML元素根据表现形式，可以分为两类：

1. 块元素 block
2. 行内元素 inline

块元素本身，占据整行
块元素内部，可以容纳其他块元素或行内元素

行内元素本身，可以与其他行内元素位于同一行
行内元素内部，可以容纳其他行内元素，但不可以容纳块元素

---

图片

<img src="img/abcd.jpg" alt="">

src，及source

超链接

超链接，不仅仅可以打开网页，还可以锚点定位
超链接常用的有：

• 外部链接
• 内部链接
• 电子邮件链接
• 锚点链接
• 空连接
• 脚本链接
• …

a标签

在HTML中，超链接使用a标签来表示：
<a href="https://www.baidu.com" target="目标窗口的打开方式">百度一下</a>

target属性可以控制目标窗口的打开方式，target属性取值有4个：
_self：当前窗口打开（常用）
_blank：在全新空白窗口打开（常用）blank，空白的
_top：在顶层框架中打开
_parent：在当前框架的上一层里打开

外部链接的链接对象，是外部网站
内部链接的链接对象，是网站的其他页面或当前页面
在内部链接中，链接地址使用的都是相对路径

锚点链接，其实是一种内部链接，链接对象时当前页面的某个部分

静态界面：不与服务器做交互
动态界面：与服务器做交互

---

表单

表单，最重要的左右就是在客户端收集用户的信息，然后将数据传递给服务器
一般包括：文本框、按钮、下拉列表等
使用时，需要把表单标签放在<form></form>内部

from属性

form标签有5个重要的属性：
name：表单名字
action：表单要提交到的url地址
method：get或者post
target：与a标签的target属性一样，指定目标窗口的打开方式
enctype：表单信息提交的编码方式，一般采取默认值，不需要设置

表单对象

表单标签只有4个：input、textarea、select、option其中，后两种是配合使用的

input标签

input标签里有一个type，表面表单的类型，其中，type有如下几种：

type

type为text时的用法例子：
<input type="text" name="给服务端用" value="默认文字" size="文本框长度" maxlength="最多输入字符数"/> <br/>

radio

type为radio时的用法例子：
<input type="radio" name="sex" checked="checked" value="nan"/>

多个radio的name必须一样，不然不能达到多选一的效果

不一样，又怎么比较呢？

value：给后台用的
checked：是否默认选中

checkbox 复选框

复选框没有文本，需要加入label标签，并且用label标签的for属性指向复选框的id

复选框checkbox，必须和label标签配合使用

button

按钮分为三种：

1. 普通按钮button
2. 提交按钮submit
3. 重置按钮reset

图片域image

语法：
<input type="image" src="图像的路径"/>

---

CSS

引入CSS的方式有三种：

1. 外部样式（放在单独的css文件里面）
2. 内部样式（放在header标签里面）
3. 内联样式（直接放在标签里面，不建议使用）

@import方式：先加载HTML，后加载CSS。一般不使用，用户体验差
link：先加载CSS，后加载HTML

选择器

选择器，就是一种选择元素的方式

id选择器，唯一的，同一个HTML页面中，不允许出现两个相同的id
class选择器，两个或两个以上的元素定义相同的样式，可以使用class属性。

元素选择器、id选择器、class选择器

子选择器：父元素 子元素（中间使用空格隔开）
群组选择器：选择器1,选择器2（中间使用,隔开）

字体样式

font-family: 字体1, 字体2, 字体3;
font-family可指定多种字体，按优先顺序排列，逗号隔开

每个人电脑装的字体不一样，优先使用字体1，如果电脑没有字体1，则使用字体2，以此类推

px，全称pixel（像素）。px就是一张图片中最小的点，或者是计算机屏幕最小的点

HTML注释方式<!-- -->
CSS注释方式/* */

文本样式

text-decoration: unerline下划线 line-through删除线 overline顶划线 none去掉所有样式
text-align: left center right对齐。不仅对文本文字有效，对img标签也有效

text-align对图片作用的时候，要加载img的父元素上，而不是img本身

letter-spacing: 字母间距: R o m a…（字母之间）
word-spacing: 单词间距：Roma wast built in a day（单词之间）

字体之间的间距大小，在iOS中就很难，而在web中就是属性的设置而已

边框样式

边框必须要设置三个属性：
border-width：边框的宽度
border-style：边框的外观（实现或虚线）
border-color：边框的颜色

超链接样式

超链接在鼠标点击不同时期，样式是不一样的
默认情况：字体蓝色，带有下划线
鼠标点击时：字体红色，带有下划线
鼠标点击后：字体紫色，带有下划线

在CSS中，可以使用超链接伪类，来定义超链接在不同时期的不同样式

:hover不仅可以用在a标签上
也可以用在其他标签，如div或img上

浏览器鼠标样式：cursor: 属性值;
自定义鼠标样式：cursor:url("地址"), default

图片样式

图片的垂直对齐
使用vertical-align: 属性值;
vertical 垂直的 align 使排整齐

属性值有：

文字环绕效果float

文字环绕效果，可以使用浮动属性float

float: left;元素向左浮动
float: right;元素向右浮动

list-style-image: url("地址");自定义列表样式

CSS盒子模型

页面中所有元素都可以看成一个盒子，并且占据着一定的页面空间
一个页面由多个这样的盒子组成，这些盒子之间会互相影响。

因此，盒子模型需要从两个方面来理解：

• 一是理解单独一个盒子的内部结构
• 二是理解多喝盒子之间的相互关系

盒子模型从里向外由：
content（内容）、padding（内边距）、border（边框）和margin（外边距）4个属性组成

内容区

内容区有三个属性：width、height和overflow
width和height属性可以指定盒子内容区的宽度和高度
width和height针对内容区而言，不包括padding部分
当内容信息太多，超出内容区所占范围时，可以使用overflow溢出属性来处理

只有块元素（例如：div）能设置宽高
行内元素（例如：span）不能设置宽高

行内元素想设置宽高，可以以使用display属性，将行内元素转换为块元素，然后设置宽高

内边距

padding: 10px;4个方向的内边距都是10px
padding: 10px 20px;上下内边距是10px，左右内边距是20px

外部距

指两个盒子之间的距离，可能是子元素与父元素的距离，也可能是兄弟元素之间的距离

---

浮动布局

HTML文档流

HTML文档流，就是元素在页面出现的先后顺序

HTML文档流分为两种：
正常文档流动
脱离正常文档流动

啥意思呢？

正常文档流，就是正常情况，块元素独占一行，相邻行内元素在每行中按从左到右依次排列元素

脱离正常文档流，就是把顺序做了改变
比如，将最后一个div5提到了最前面，改变了顺序，这就是脱离正常文档流

在CSS布局中，可以使用浮动或者定位两种技术来实现 脱离正常文档流

清除浮动clear

clear: left、right、both
清除浮动后，前一个元素产生的浮动，就不会对后续元素产生影响

定位布局

浮动布局比较灵活，但是不易控制
而定位布局，使得用户可以精准定位页面中的任意元素

CSS定位，可以将一个元素精确地放在页面上任何你指定的地方

布局定位有4种方式：

• fixed：固定定位
• relative：相对定位
• absolute：绝对定位
• static：静态定位

fixed

固定元在某个位置
position: fixed; top: 10px
fixed必须跟方向值中的任意一个
top参考对象时 浏览器的边

简单一个fixed，fixed哪了呢？所以，必须加上方向值

relative

相对定位，其位置是相对于它的原始位置计算而来的
相对定位，是通过将元素从原来的位置，向上、向下、向左或向右移动来定位的

也必须结合方向值

相对定位的容器变动后，其所占的位置仍然留有空位置，后面的无定位元素不会“挤上来”

保留原来的位置

absolute

一个元素变成了绝对定位元素，则这个元素就完全脱离正常文档流了。
绝对定位元素的前面或者后面元素，会认为这个元素不存在
即，这个元素浮于其他元素上面，独立出来

不再保留原来的位置

也必须结合方向值
方向值，是相对于浏览器的位置

static

默认情况，就是static

书还可以，当然，有些知识没有涉及，都放在了进阶部分，看来，进阶部分也是必读了