HTML+CSS基础

c/s架构：c:client(用户端）用户通过客户端使用软件
c/s 架构：c:client（客户端） s:server(服务端) 服务器负责处理软件的业务逻辑
特点 1、我们一般使用的软件都是c/s的
2、使用前必须安装
3、c/s架构的软件不能跨平台使用
4、c/s架构的软件客户端和服务器通信采用的是自有协议，
相对来说比较安全

b/s架构：b:browser(浏览器)
s:server(服务器)
b/s本质上也是c/s的，只不过b/s架构的软件，使用浏览器作为软件的客户端
特点 1、软件不需要安装，直接使用浏览器访问即可
2、软件更新时，客户端不需要更新
3、可跨平台使用，只要有浏览器即可
4、b/s架构的软件，客户端和服务器通信采用通用的http
协议，相对来说不安全（https是安全的）

相关组织：1、万维网联盟（w3c） 专门为了定义网页的相关标准而成立
2、whatwg组织 是一个推动网络html5标准为目的而成立的组织

一个网页所包含的三部分内容 1、结构 HTML用于描述页面的结构
2、表现 css用于控制页面中元素的样式
3、行为 javaScript用于响应用户操作

HTML:超文本标记语言（标记==标签）

我们将一个完整的标签称为一个元素（element）

进行注释：<！-- 注释内容 -->

meta标签：用来设置浏览器网页的编码解析方式 自结束标签 其他功能1、可以用来设置网页的关键字 2、可以对网页进行描述 3、可以设置重定向（重新确定方向）

标题标签（ h标签）h1最重要，表示网页的主要内容

段落标签 paragraph( p标签) 不会将回车解释为换行

换行标签 （br标签 ） 自结束标签 在网页中换行要使用换行标签

浏览器会将回车、空格都解释为一个空格

水平线标签 （hr标签） 自结束标签

实体：在页面中有些特殊的字符不能直接写，需要用字符表示
实体格式：&实体内容；
< < 小于

&gt； 大于

图片标签 （img）网页中引用图片，要使用图片标签 自结束标签
img属性：src（用来指定图片路径）
alt（用来描述图片） 搜索引擎搜索时就会搜索alt的内容
width（用来指定图片的宽度）
height（用来指定图片的高度）
相对路径：相对你当前所对的位置
“./” 代表当前目录 "…/"代表上级目录

图片格式：JPG、PNG、GIF
图片的使用原则：图片效果不一致使用效果好的；效果一致，使用小的

html语法规范：1、不区分大小写，一般用小写
2、注释不能嵌套
3、标签必须结构完整
4、标签可以嵌套，但不能交叉嵌套
5、HTML属性必须有值，且值必须加引号

内联框架：使用内联框架可以在页面中引入另一个页面

iframe标签： 标签属性：src(用来指定外部页面的路径) width(设置宽度) height(设置高度) name(为内联框架指定一个name属性)

超链接：可以让我们从一个页面跳转到另一个页面
a标签：
标签属性：href(指定跳转路径)
target(以什么方式打开跳转页面)
可选值1、self（在当前页面跳转，默认的）
2、blank（新打开一个窗口跳转）
3、iframename（新页面在内联框架中打开）

居中：center标签（卸载center标签中的内容都会居中）

#功能：占用符、回到顶部

每个标签都有一个属性id,id是这个标签的唯一标识，不能重复

到底部：******

开始标签中引用：内联样式

head标签中引用：内部样式

外部引用css文件：外部样式

优先级：内联样式>内部样式>外部样式 遵循就近原则
实际上，页面的代码执行是有顺序的，是顺序执行的，同一个元素的样式，后边设置的样式会覆盖掉前面的

HTML中的元素大的方面分为两种1、块元素：指元素占一整行，无论它的内容有多少
2、行内元素（内联元素）：自己有多大，就占用多大的空间

常见的块元素：p（段落标签）、h（标题标签）、div标签
常见的行内元素（内联元素）：a（超链接）、img（图片标签）、iframe（内联框架）、span标签

span标签用来给文字设置样式

内联元素与与块元素的使用+
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式的

选择器，就是用来选中某些元素，为他们设置样式

css中的选择器：标签（元素）选择器、id选择器、class选择器、分组选择器、通配符选择器、复合（交集）选择器、后代元素选择器
子元素选择器

一、标签（元素）选择器：就是通过标签名字来获取元素，设置样式
二、id选择器：就是通一过标签的id并集属性去选择这个元素，设置样式 语法：#id{属性值}
三、class选择器：可以通过class选择器选择一类型的元素，是每个标签都有的属性，和id类似，标签属性可以重复 语法：.class值{}
四、分组（并集）选择器：就是可以选择一组元素，设置样式 语法：选择器1，选择器2，选择器N{}
五、通配符选择器：通配符*，匹配所有 语法：{}
六、复合（交集）选择器：同时满足一些条件，设置样式 语法：选择器1选择器2选择器N{}
七、后代元素选择器：语法：祖先元素 后代元素{}
八、子元素选择器：根据父元素定位子元素 语法：父元素>子元素{}
九、伪类选择器:专门用来表示元素的一种特殊的状态,利用伪类给一些元素设置不同状态情况下的样式
超链接有关的伪类1、：link（正常链接）
2、：visited（表示已经访问过的链接）
3、：hover（表示鼠标滑过链接）可用在其他元素
4、：active（表示正在点击的链接） 可用在其他元素
其他伪类5、：focus（获取焦点）可用在文本框上
6、：：selection（表示选中的元素）
十、伪元素选择器：可以表示元素中的一些特殊的位置
1、：first-letter（表示第一个字符）
2、：first-line（表示第一行）
3、：before（表示元素最前面部分）结合content使用
4、：after（表示元素的最后面部分） 结合content使用
十一、属性选择器：title属性（可以写在任何标签上）当移动到元素上时，会显示title的值
语法：[属性名] 表示选中有该属性的元素
[属性名=属性值] 表示选中属性名等于某个属性值的元素
[属性名^=属性值] 表示选中以某个属性值开头的元素
[属性名$=属性值] 表示选中以某个属性值结尾的元素
[属性名=属性值] 表示选中包含某个属性的元素
十二、子元素的伪类选择器：
语法：：first-child 表示选中第一个子元素
：last-child 表示选中最后一个子元素
：nth-child 表示选中第n个子元素
：nth-child（odd） 设置奇数行样式使用
：nth-child（even） 设置偶数行样式使用（常用来做隔行变色效果）
：first-of-type 当前类型的第一个子元素
：last-of-type 当前类型的最后一个子元素
：nth-of-type 当前元素的第n个子元素
十三、兄弟元素选择器：可以选择紧挨着某个元素的兄弟元素
语法：1、元素 + 元素{} 紧挨着的一个兄弟元素
2、元素 ~ 元素{} 后边所有的兄弟元素
十四、否定伪类选择器：除了个别的不选，别的都选 语法：：not（剔除的东西）

元素之间的关系：子元素：直接包含子元素的元素
父元素：直接包含父元素的元素
祖先元素：直接或间接包含后代元素的元素
后代元素：直接或间接包含祖先元素的元素
兄弟元素：拥有同一个父元素

样式的继承：利用继承，可以将一些基本的样式设置给祖先元素，所有的后代元素将会自动继承这些样式（背景、边框、定位相关的样式不会被继承）
内联样式>id>class（类和伪类）>元素>通配>样式的继承
1000 100 10 1 0 没有优先级
当选择器中含有多种选择器时，需要将多种选择器的优先级相加在比较
如果优先级一样，选择靠后的
并集选择器的优先级是单独计算的
可以在样式的最后，添加一个！important，则此时该样式会获得一个最高的样式（不推荐使用，不方便后期维护）
伪类选择器顺序必须根据顺序写，不许打乱，不然会出错

HTML文本标签：em用于表示一段内容中的着重点，浏览器显示斜体
strong用于表示一个内容的重要性，浏览器显示粗体
i和b也是斜体和加粗，只是单纯的斜体和加粗，没有语义
small标签：里面的文字比正常文字小一些，如合同中的小字、网站的版权声明等
cite标签：变成斜体
q标签：一个短的引用，浏览器会加上引号
blockquote标签：表示一个长的引用，块元素
sup：上标 sub：下标
del:删除 上边会有删除线
ins:插入 下方会有下划线
pre和code标签：在网页中显示代码时使用
pre：会将代码的格式在网页保存
code：专门用来表示代码 两者一般结合来使用

列表：1、无序列表 2、有序列表 3、自定义列表
无序列表：

type：disc 实心圈 square 实心方框 circle 空心圆 list-style:none（去掉项目符号）
有序列表：

属性：start（规定有序列表起始值） type（规定在列表中使用的标记类型） reversed（列表顺序变为降序） list-style（去掉项目符号）
自定义列表：

长度单位：像素（px）css的长度单位，屏幕中的一个小点，看不见 浏览器默认字体大小16px
百分比（%）当父元素发生变化时，子元素也会按照比例发生变化
em相对于当前元素的字体大小来计算的 设置字体相关的样式时，可以使用em

RGB（红色的浓度，绿色的浓度，蓝色的浓度）
十六进制（#ffffff ）两两重复可以简写

字体样式：font-family
分类：衬线字体
非衬线字体
等宽字体
草书字体
虚幻字体
1、 font-style
normal：默认
italic:浏览器显示一个斜体的字体样式
oblique：浏览器显示一个倾斜的字体样式
2、font-variant：字母样式
normal：默认
small-caps：小型的大写字母表示
3、font-weight：规定字体的粗细
normal：默认
bold:粗体
lighter：更细

行高：line-height
css中没有直接设置行间距的方式，通过行高来间接控制行间距，行高越大行间距越大
行间距=行高-字体大小
行高单位：像素、百分比、直接写数字，设置几倍的字体大小为行高

当用font设置时，最后必须得用大小和字体，顺序不可打乱

文本样式
1、控制文本大小写：text-transfrom
none:默认
capitalize:每个单词首字母大写
uppercase：将所有字母转为大写
lowercase：将所有字母转为小写
2、文本装饰：text-decoretion
none：默认（可以去掉超链接的下划线）
underline：给文字加一条下划线
overline：给文字脑袋上加线
line-through：删除线
3、字符间距：letter-spacing
normal：默认
length：数值，可以是负数
4、单词间距：word-spacing
normal：默认
length：数值，可以是负数
5、文本水平对齐：text-align
left：左对齐
right：右对齐
center：居中
justify：两端对齐
6、首行缩进：text-indent
数值或者百分比
缩进的长度定义为2em最合适！

盒子模型：box model，也叫框模型
内容区：content 内边距：padding 边框：border 外边距：margin
使用width来设置盒子内容区的宽度，使用height来设置盒子内容区的高度
width和height只是设置的盒子内容区的大小，而不是整个盒子的大小
盒子可见框的大小由内容区，内边距和边框共同决定

设置边框需要三个样式：边框的宽度（有默认值）、边框的颜色（默认黑色）、边框的样式
上下左右 上下-左右 上-左右-下 上-右-下-左
border-top-width border-right-width border-bottom-width border-left-width
边框颜色和边框样式与上边边框宽度一样
边框样式：border-style
solid：实线
dashed：虚线
dotted:点状线
double：双实线

display：规定元素矿的类型
none：将元素隐藏，没有元素位置
block：将内联元素转换为块元素
inline：将块元素转换为内联元素
inline-block：行内块元素（不会占用一整行，还能设置宽高）

visibility：可以用来设置元素的隐藏和显示的状态
visible：默认值，元素默认会显示在页面
hidden：将元素隐藏，但还有元素位置

overflow：可以通过设置父元素如何处理溢出的内容
visible：默认
hidden：修剪
scroll：滚动条
auto：两者都有

文档就是指一个网页
文档流就是处在页面的最底层，他表示的是一个页面中的位置

元素在文档流中的特点：
块元素：1、块元素在文档流中会独占一行，块元素会自上向下排列
2、块元素在文档流中默认宽度是父元素的100%
3、块元素在文档流中的高度默认被内容撑开
内联元素：1、内联元素在文档流中只占自身的大小，会默认从左向右排列，如果
一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
2、内联元素的宽度和高度默认都被内容撑开

浮动：1、将块元素转换为行内块元素 display：inline-block
2、float（浮动）none默认不做任何处理
left元素向左浮动
right元素向右浮动

当元素脱离文档流后，内联元素都看成块元素来看

页面的布局：包括头部（header）、内容（centent）、底部（footer）

如何解决高度塌陷：一、开启BFC,可以解决高度塌陷问题（visible：hidden）
二、添加一个空的块元素，清除浮动（clear）
三、使用伪元素选择器（.clearfix：after{
content:"";
display:blick;
clear:both;
}）

设置导航条时，首先设置清除浏览器默认值

清除浮动：clear
none：默认，
left：清除左浮动元素对我的影响
right：清除右浮动元素对我的影响
both：清除左右浮动元素对我的影响（最大）

定位指的是将指定的元素摆放到页面的任意位置
子绝父相，即相对定位是给父级的，绝对定位的时候是给子级的。
position：static（默认值）
relative（相对定位）
相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置，
然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
absolute（绝对定位）内联变为块
绝对定位是相对于元素最近的已定位的祖先元素
如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。
fixed（固定定位）
直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化，
除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于
浏览器窗口内视图的某个位置，不会受文档流动影响。

opacty:透明度（使用数字0-1,0表示完全透明，1表示完全不透明）

设置背景图片：background-image：url（图片路径）
背景图片重复方式：background-repead
repead:默认值
no-repead:不重复
repead-x:水平方向重复
repead-y:垂直方向重复

背景图片位置：background-position
top、right、bottom、left、center两两组合，
如果写一个，则另一个默认为center

值1 值2   表示水平方向、垂直方向位置（可以负值）

背景图片定位：background-attachment
scroll：默认值，随页面滚动而滚动
fixed：不会随页面滚动而滚动

表格：table border width
calspan:水平合并单元格
rowspan:垂直合并单元格
行：tr 单元格：td

  border-spacing：设置边框的距离
  border-collapse：合并边框

设置隔行变色：tr:nth-child（数字）{}
鼠标移至某行后变色：tr：hover{}

长表格：thead:表头
tbody:表格主体
tfoot:表格底部

解决父子元素外边距重叠：class名:after{content:"";display:table;}

表单的作用就是将用户信息提交给服务器 ，使用form标签，必须指定action属性，指向一个服务器地址
input type=“text"表示文本框
input type=“radio” name=”" value="按钮名字"表示单选框
input type="checkbox"多选框
input type="file"上传文件
下拉列表
textarea创建文本域
表单提交的两种方式：method=“get”默认值，表单数据显示在地址栏上，而且数据大小有限制
method=“post”表单数据不会显示在地址栏上，数据大小没有限制
disabled=“disabled”禁用