文章目录
一、基础概念
1、软件架构
- C/S
- B/S
（1）、B/S中的B指的是browsers，是浏览器的意思，S值Server指服务器的
意思
（2）、B/S架构的软件一般都是通过访问一个网页的形式来使用的，而将一
些运算等操作放到远端的服务器上
（3）、这样就降低了对客户端的要求，我们的计算机上只需要安装一个浏览
器即可使用。
2、网页的组成
根据W3C标准，一个网页主要由三部分组成：结构、表现还有行为。
结构：HTML用于描述页面的结构；
表现：CSS用于控制页面中元素的样式；
行为：JavaScript用于响应用户操作；
二、HTML
- HTML（Hypertext Markup Language） 超文本标记语言。
- 它负责网页的三个要素之中的结构。
- HTML使用标签的的形式来标识网页中的不 同组成部分。
- 所谓超文本指的是超链接，使用超链接可 以让我们从一个页面跳转到另一个页面。
1、标签
- HTML中的标记指的就是标签。
- HTML使用标记标签来描述网页。
- 结构：
<标签名>标签内容</标签名>
<标签名 />
2、元素
- 我们还将一个完整的标签称为元素；
- -这里我们可以将元素和标签认为是一个同义词；
例：
我是内容
这里面的p标签就是元素
3、 常见属性
- id
- class
- title (title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。)
4、 注释
- HTML注释中的内容不会在网页中显示
- 注释不能嵌套！
5、doctype
HTML总共有那么多的版本，而且这其中至少有三个版本在广泛使用，那么浏览器怎么知道我们在使用哪个版本呢？使用doctype声明。
以前版本都不讲了，因为声明起来都很麻烦，我们现在使用的都是html5的文档声明，而且非常简单：
<!DOCTYPE html>
怪异模式：
- 为了兼容一些旧的页面，浏览器中设置了
两种解析模式：
– 标准模式（Standards Mode）
– 怪异模式（Quirks Mode） - 怪异模式解析网页时会产生一些不可预期
的行为，所以我们应该避免怪异模式的出
现。 - 避免的最好方式就是在页面中编写正确的
doctype。
6、乱码
- 在计算机的内部，文件都是以二进制编码保存的；
- 所谓的二进制编码就是指1和0，也就是我们的所有内容都需要转换为1和0
- 常见的字符集：ASKII、ISO8859-1、GBK、GB2312、UTF-8；
• 中国两个字在计算机的底层保存的可能要转换为10100101这种二进制码，这一过程称为编码。
• 计算机在读取文件时需要将10100101在转换为中国给我们显示这一过程称为解码。
字符集
• 这就带来一个问题，中国到底是10100101还是01011010到底由谁说了算。
• 所以我们还需要一个东西称为字符集，字符集规定了如何将文本转换为二进制编码
我们转换文件的时候出现的乱码,就是因为我们使用了两种不同的字符集导致的,
解决乱码
在html5中只需要使用meta标签即可完成这个任务
<meta charset="utf-8" />
7、meta
作用:
- 标签可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
- 标签位于文档的头部，不包含任何内容。
- 标签的属性定义了与文档相关联的名称/值对。
用法:
• 设置页面的字符集
<meta charset="utf-8">
• 设置网页的描述
<meta name="description" content="">
• 设置网页的关键字
<meta name="keywords" content="">
• 请求的重定向
<meta http-equiv="refresh" content="5;url=地址"/>
三、CSS
1、行内样式：样式直接写在标签内部的style属性上；
2、内部样式，直接写在当前文件的style标签中；
3、外部样式表，将所有的样式保存到一个外部的css文件中，然后引入进来。
1、选择器
- 元素选择器
语法：标签名 { } - 类选择器
语法：.className: {} - ID选择器
语法：#id { } - 复合选择器
语法：选择器1选择器2{} div.box1 - 群组选择器
语法：选择器1,选择器2,选择器3 { } - 通用选择器（选择页面中所有元素）
语法：*{ } - 后代选择器
语法：祖先元素 后代元素 后代元素 { } - 伪类和伪元素
（1） 给链接定义样式
正常链接：a:link
访问过的链接：a:visited（只能定义字体颜色）
鼠标滑过的链接： a:hover
正在点击的链接： a:active
（2）其他
获取焦点： :focus
指定元素前： :before
指定元素后： :after
选中的元素：::selection（注意这里有两个冒号）
（3）给段落定义样式
首字母： :first-letter
首行： :first-line - 属性选择器
- 子元素选择器
- 其他子元素选择器
选择第一个子标签：:first-child
选择最后一个子标签：:last-child
选择指定位置的子元素： :nth-child
选择指定类型的子元素：:first-of-type、 :last-of-type、 :nth-of-type - 兄弟选择器
查找后边一个兄弟元素： 兄弟元素 + 兄弟元素{}
查找后边所有的兄弟元素： 兄弟元素 ~ 兄弟元素{} - 否定伪类
语法：:not(选择器){}
比如p:not(.hello)表示选择所有的p元素但是class为hello的除外。
2、选择器权重
不同的选择器有不同的权重值：
- 内联样式：权重是 1000
- id选择器：权重是 100
- 类、属性、伪类选择器：权重是 10
- 元素选择器：权重是 1
- 通配符：权重是 0
• 计算权重需要将一个样式的全部选择器相加，比如上边的body
h1的权重是20，h1的权重是10，所以第一个选择器设置的样
式会优先显示。
四、文本标签及样式
1、文本标签
1、<em>和<strong>
- em标签用于表示一段内容中的着重点。
- strong标签用于表示一个内容的重要性。
- -通常em显示为斜体，而strong显示为粗体
2、<i>和<b>
- i标签会使文字变成斜体。
- b标签会使文字变成粗体。
- 这两个标签和em和strong类似，但是这两个标签没有语义。
- 所以根据html5标准，当我们只想设置文本特殊显示，而不需要强调内容时就可以使用i和b标签
3、<small>
- small标签表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等
- • 浏览器在显示small标签时会显示一个比父元素小的字号；
4、<cite>
- 使用cite标签可以指明对某内容的引用或参考。
- 例如，戏剧、文章或图书的标题，歌曲、电影、照片或雕塑的名称等
5、<blockquote>和<q>
- blockquote和q表示标记引用的文本
- blockquote用于长引用，q用于短引用
- 在两个标签中还可以使用cite属性来表示引用的地址
6、<sup>和<sub>
- sup和sub用于定义上标和下标
- 上标主要用于表示类似于10^3中的3
- 下标则用于表示类似余H₂O中的2
7、<ins>和<del>
- ins表示插入的内容，显示时通常会加上下划线
- del表示删除的内容，显示时通常会加上删除线
8、<code>和<pre>
- 如果你的内容包含代码示例或文件名，就可以使用code元素
- pre元素表示的是预格式化文本，可以使用pre包住code来表示一段代码
9、有序列表
- 使用ol和li来创建一个有序列表。
10、无序列表
- 使用ul和li来创建一个无序列表
11、定义列表
- 使用dl、dd、dt来创建一个定义列表
2、文本格式化
1、单位
px、百分比、em
em和百分比类似，也是相对于父元素说的，1em就相当于100%，2em相当于200%，1.5em相当于150%
2、颜色
17种颜色，例：blue等
147种svg颜色
3、十六进制颜色 ：#6600FF
上边的例子中66代表红色的浓度，00代表绿色的浓度，FF代表了蓝色的浓度。最后的颜色是由这些指定浓度的红绿蓝混合而成的。
4、RGB值
可以使用0~255的数值，也可以使用0% — 100% 的百分比数；
– RGB(100%,0%,0%)
– RGB(0,255,0)
5、RGBA
比RGB多了一个A（alpha）来表示透明度，透明度需要一个0-1的值。
0表示完全透明，1表示完全不透明。
6、文字斜体和粗体
- font-style用来指定文本的斜体
– 指定斜体：font-style:italic
– 指定非斜体：font-style:normal - font-weight用来指定文本的粗体
– 指定粗体：font-weight:bold
– 指定非粗体：font-weight:normal
7、文字小型大写字母
font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母
font-variant:small-caps
8、字体属性的简写
语法： font: 加粗 斜体 小型大写 大小/行高 字体
这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个。
9、行间距
- line-height用于设置行高，行高越大则行间距越大；
- 行间距 = line-height – font-size
10、大写化
text-transform样式用于将元素中的字母全都变成大小写
- 大写：text-transform:uppercase
- 小写：text-tansform:lowercase
- 首字母大写：text-transform:capitalize
- 正常：text-transform:none
11、文本的修饰
- text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。
- 可选值：underline、overline、line-through、none
12、字母间距和单词间距
- letter-spacing用来设置字符之间的间距
- word-spacing用来设置单词之间的间距
- 这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离
13、首行缩进
- text-indent用来设置首行缩进
- 该样式需要指定一个长度，并且只对第一行生效
五、盒子模型
CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。
1、盒子的组成
- 内容区(content)
- 内边距(padding)
- 边框(border)
- 外边距(margin)
2、边框的样式
– none（没有边框）
– dotted（点线）
– dashed（虚线）
– solid（实线）
– double（双线）
– groove（槽线）
– ridge（脊线）
– inset（凹边）
– outset（凸边）
3、 display和visibility
- visibility属性主要用于元素是否可见
- 和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然
保持，不会被其他元素覆盖
4、文档流和浮动
- 文档流指的是文档中可现实的对象在排列时所占用的位置。
- 文档流中元素默认会紧贴到上一个元素的右边，如果右边不足以放下元素，元素则会另起一行，在新的一行中继续从左至右摆放；
- 所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来
- 块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一
个块级元素
浮动元素默认会变为块元素，即使设置display:inline以后其依然是个
块元素 - 当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元
素时我们都会为其指定一个宽度。
5、清除浮动
- clear属性可以用于清除元素周围的浮动对元素的影响。
- 也就是元素不会因为上方出现了浮动元素而改变位置
- 可选值：
– left：忽略左侧浮动
– right：忽略右侧浮动
– both：忽略全部浮动
– none：不忽略浮动，默认值
六、设置元素的背景
1、background-color
2、background-image
3、background-repeat
- background-repeat用于控制背景图片的重复方式；
- 如果只设置背景图片默认背景图片将会使用平铺的方式，可以通过该属性进行修改；
- 可选值：
– repeat：默认值，图片左右上下平铺
– no-repeat：只显示图片一次，不会平铺
– repeat-x：沿x轴水平平铺一张图片
– repeat-y：沿y轴水平平铺一张图片
4、background-position
- background-position用来精确控制背景图片在元素中的位置
- 可以通过三种方式来确定图片在水平方向和垂直方向的起点。
– 关键字：top right bottom left center
– 百分比
– 数值
5、background-attachment
- background-attachment用来设置背景图片是否随页面滚动
- 可选值：
– scroll：随页面滚动
– fixed：不随页面滚动
6、background
background是背景的简写属性，通过这个属性可以一次性设置多个样式，而且样式的顺序没有要求。
background: green url(1.jpg) no-repeat center center fixed;
7、CSS Sprite
- CSS Sprites是一种网页图片应用处理方式；
- 通过这种方式我们可以将网页中的零星图片集中放到一张大图上
- 这样一来，一次请求便可以同时加载多张图片，大大提高了图片的加载效率。
七、表格的基本设置
1、table、tr、th、td
- 使用table标签创建一个表格。
- tr表示表格中的一行。
- tr中可以编写一个或多个th或td。
- th表示表头。
- td表示表格中的一个单元格
2、caption、thead、tbody、tfoot
- caption表示表格的标题。
- thead表示表格的头部。
- tbody表示表格的主体。
- tfoot表示表格的底部
3、合并单元格
- 合并单元格可以通过在th或td中设置属性来完成。
- 横向合并 colspan
- 纵向合并 rowspan
4、表格的样式
八、表单的基本设置
1、input
- input是我们使用的最多的表单项，它可以根据不同的type属性呈现不同的状态
- type属性可选值：
– text：文本框
– password：密码框
– submit：提交按钮
– radio：单选按钮
– checkbox：多选框
– reset ：重置按钮
2、select、option
- select用于创建一个下拉列表。
- option表示下拉列表中的列表项。
- optgroup用于为列表项分组。
3、textarea
可用属性：
– cols：文本域的列数
– rows：文本域的行数
4、fieldset、legend、label
- fieldset用来为表单项进行分组。
- legend用于指定每组的名字。
- label标签用来为表单项定义描述文字。
扫一扫
1940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
