html+css

章不想说话

2020-06-16 247 阅读17分钟

网页

一个网页主要由三部分组成： 1.结构：HTML用于描述页面的结构 2.表现：CSS用于控制页面中元素的样式 3.行为：JavaScript用于响应用户操作。

万维网联盟W3C

万维网联盟World Wid Web Consortium
W3C专门为了定义网页相关的标准而成立的。
W3C定义了网页的HTML、CSS、DOM、HTTP、XML等标准。

WHATWG

网页超文本应用技术工作小组
是一个以推动网络HTML5标准为目的二成立的组织。在2004年，由Opera、Mozilla基金会和烂苹果这些浏览器厂商组成

HTML

基本格式

注释

< !-- 注释中的内容不会在页面中显示,但是可以在源码中查看 -->

属性

可以通过属性来设置标签，如果处理标签中的内容，可以在开始标签中添加属性

声明

乱码

常见字符集：ASCII ISO-8859-1 GBK GBK2312 UTF-8

meta标签

使用meta标签还可以用来设置网页的关键字 < meta name="keywords" content="html5 js 前端" />
还可以用来指定网页的描述：< meta name="description" content="发布H5、js等前端相关信息" />
使用meta可以用来做请求的重定向：< meta http-equiv="refresh" content="5(秒数),url=http://www.baidu.com（地址）" />

常用标签

h1->h6 对于搜索引擎来说，h1的重要性仅次于title，搜索完title，会立即查看h1
段落标签 P
hr
br
图片标签 < img src="" alt="" width="200px" height="100px" />,宽度和高度两个如果设置一个，另外一个也会同时等比调整大小。
相对路路径
绝对路径
图片的格式：
1. JPEG(JPG) JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明，一般使用jpeg来保存照片等颜色丰富的图片
1. GIF GIF支持的颜色少，只支持简单的透明，支持动态图，图片颜色单一，或者是动态图是可以使用gif
1. PNG支持的颜色比较多，并且支持复杂的透明，可以用来显颜色复杂的透明的图片
图片使用原则：效果不一致，使用好的，效果一致，使用小的。

实体

在html中，一些如<>这种特殊字符是不能直接使用，需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）.浏览器解析到实体时，会自动将实体转换为其对应的字符。
实体的语法：&实体名字；
< <

内联框架

使用内联框架可以引入一个外部的页面，使用iframe来创建一个内联框架，属性 src：指定一个外部页面的路径，可以使用相对路径,width,height,name。< iframe src="" >，在现实开发中不推荐使用内联框架，因为内联框中的内容不会被搜索引擎所检索。

超链接

使用超链接可以让我们从一个页面跳转到另外一个页面，使用a标签创建一个超链接。

CSS

层叠样式表（Cascading style sheets）
css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会被覆盖层次低的，
而css就可以分别为网页的各个层次设置样式。
可以将css样式写到元素的style属性当中，< p style="color:red;font-size:40px" >
也可以将css样式编写到head中的style标签中 < head> < style type="text/css">p{color:red;font-size:40px}
还可以将样式表编写到外部的css文件中，然后通过link标签来将外部的css文件引入到当前页面中，这样外部文件中的css样式将会应用到当前页面中 < link rel="stylesheet" type="text/css" href="" /> p{color:red;font-size:50px}
css语法：选择器声明块
css注释：/* */

块级元素

所谓块级元素就是独占一行的元素
块元素主要用来做页面布局
div h1 p...

内联元素

所谓内联元素只占自身大小的元素，不会独占一行。
内联元素主要用来选中文本设置样式
a、img、span...

块级和内联

一般情况下只使用块级元素包含内联，而不是用内联元素包含块级元素
a元素可以包含任意元素，不能包含它本身
p元素中不能包含任何块级元素

选择器

标签选择器

p{key:value}

id选择器

id="id" #id{}

class选择器

class = "p2" .p2{}

选择器分组

选择器1,选择器2,选择器3{}

通配选择器

星号（*）{}

复合选择器（交集）

选择器1 选择器2 选择器3{}

祖先后代选择器

祖先选择器后代选择器{}

子元素选择器

父元素 > 子元素{}

伪类选择器

伪类专门表示一种元素的特殊状态
比如：访问过的超链接，比如普通的超链接，当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。
正常链接a:link
访问过的链接a:visited
鼠标滑过的链接a:hover
正在点击的链接a:active
visited 为了保护用户的隐私，只能设置字体的颜色
hover和active也可以为其他元素使用（IE6不支持对a元素以外的元素使用）
:focus（获取焦点）
:before（指定元素前）
:after（指定元素后）
::selection（选中的元素）

伪类的顺序

设计到a的伪类一共有四个，:link :visited :hover :active
而这个四个选择器的优先级是一样的。会出现同时满足的状态

伪元素（使用伪元素来表示元素中的特殊位置）

:first-letter
:first-line
:before
:after
p:before{content:"我会出现在最前面",color:red}

属性选择器(可以根据元素中的属性或属性值来选取指定元素)

[属性名]选取含有指定属性的元素
p[title]
[属性名=属性值]
p[title = "myTitle"]
[属性名^=""] 以什么什么开头
p[title ^= "ab"]
[属性名 $= 属性值] 以什么什么结尾
[属性名 *= "属性值"] 选取属性值以包含指定内容的元素

子元素的伪类

:first-child 可以选中第一个子元素
:last-child
:nth-child 指定参数，选中第几个元素even表示偶数 odd表示奇数所有的子元素中排列
:nth-child(1)
:nth-child(3)
:nth-child(even)偶数
:nth-child(odd)奇数
:first-of-type
:last-of-type
:nth-of-type 是当前类型的子元素中排列

兄弟元素选择器

- 后一个兄弟元素可以选中后一个元素紧挨着
span + p{}
~ 选中后面的所有兄弟元素
span ~ p{}

否定伪类

:not（选择器）可以从选中的元素中剔除某些元素
p:not(#p1){}

样式的继承

利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些元素，并不是所有的样式都会被子元素所继承，比如背景相关的样式都不会被继承

选择器的优先级

内联样式优先级 1000
id选择器优先级 100
类和伪类优先级 10
元素选择器优先级 1
通配优先级 0
继承样式优先级没有优先级
交集 p h1 h2 当选择器中包含多种选择器时，需要将多种选择器的优先级相加后再比较，但是注意，选择器优先级计算不会超过他的最大的数量级，如果优先级一样，则使用靠后的样式
并集 p,h1,h2 并集优先级是单独计算
!important 可以在样式的最后，添加一个！important，则此时该样式将会获得一个最高的优先级

文本标签(h5中规定，对不需要着重的内容而是单纯的加粗或者斜体就可以使用b和i标签)

强调内容 < em > 语气上的强调 < strong >表示强调的内容，比em更强烈
斜体< i > 加粗< b >
< small >
< cite > 表示参考的内容《论语》
< q > 表示一个短的引用-默认加上引号（行内引用）子曰：学而时习之不亦乐乎！
bolckquote 表示一个长引用（块级引用）
sup sub
del
ins
pre
code

列表

长度单位

px 像素
像素是我们在网页中使用的最多的一个单位，一个像素就相当于我哦们屏幕中的一个小点，我们的屏幕实际上就是由这些像素点构成的，但是这些像素点是不能直接看见的。
不同的显示器一个像素的大小也不相同，显示效果越好越清晰，像素就越小，反之像素越大。
百分比 %
也可以将单位设置未一个百分比的形式，这样浏览器将会根据其父元素的样式来计算该值。
em
em和百分比相似，它是想相当于当前元素的字体大小来计算的

颜色

字体

设置字体颜色，使用color来设置
设置字体的大小，浏览器中一般默认的字体大小都是16px
font-size设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的，我们设置的font-size实际上设置格的高度
font-family 文字的字体

字体分类

serif(衬线字体)
sans-serif(非衬线字体)
monospace(等宽字体)
cursive(草书字体)
fantasy(虚幻字体)

字体语法

使用font设置样式时，斜体，加粗小大字母，没有顺序要求，甚至可以不写，如果不写则使用默认值，
但是要求文字的大小和字体必需写而且字体必需是最后一个样式，大小必需是倒数第二个样式。
font:small-caps bold italic 字体大小/行高字体分类
字体样式：text-transform

盒模型

margin(外边距) border(边框) padding(内边距) element(内容区)
为一个元素设置边框必须指定三个样式(border-width border-color border-style)大部分浏览器中，边框的宽度和颜色都是有默认值的，而边框的样式默认值是none
内边距：指的是盒子的内容区和盒子之间的距离一共有四个方向的内边距
内边距会影响盒子的可见框的大小，元素的背景会延申到内边距
盒子的可见宽=border-left-width + padding-left + width + padding-right + border-right-width
外边距：指定是当前盒子与其他盒子的距离，他不会影响可见框的大小，而是影响到盒子的位置。
发生外边距重叠有两个条件：1.相邻 2.垂直方向外边距
兄弟元素垂直外边距重叠（取最大值）
父子元素的垂直外边距重叠，子元素的外边距会设置给父元素。

浏览器默认样式

清楚浏览器默认样式
*{margin:0px,padding:0px}

内联元素的盒模型

内联元素不能设置宽高
内联元素可以设置水平方向内边距可以影响布局
内联元素可以设置垂直方向内边距，不会影响布局
内联元素水平方向外边距可以（不会重叠而是求和）
内联元素垂直方向外边距不可以（不支持）

display和visibility

display（可以改变元素的类型）
1、inline block inline-block
2、none:不显示，并且元素不继续占用位置
visibility
1、visible
2、hidden:元素会隐藏，元素继续占用位置

overflow

子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容大小。如果子元素的大小超过了父元素内容区，则超过的大小会在父元素以外的位置显示。超出父元素的内容，我们称之为溢出的内容。父元素默认是将溢出内容在父元素外边显示
visible 默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示。
hidden,溢出内容，会被修剪，不会显示。
sroll,会为父元素添加滚动条，通过拖动滚动条来查看完整内容。
auto,会根据需求添加滚动条。

文档流

文档流处在网页的最底层，它表示的是一个页面的位置
我们所创建的元素默认都处在文档流中

元素在文档流中的特点

块元素

块元素在文档流中会独占一行，块元素会自上而下排列
块元素在文档流中默认宽度是父元素的100%
块元素高度在文档流中默认被子元素(内容)撑开

内联元素

内联元素在文档流中只占自身的大小，默认从左到右排列,如果一行不足以容纳所有的内联元素，则换下一行，继续自左向右
内联元素在文档流中不会独占一行，会自左向右排序
内联元素在文档流中高度和宽度被内容撑开

当元素的高度或宽度的值为auto时，此时指定内边距不会影响可见框的大小。而是会自动修改高度和宽度，以适应内边距

浮动

float
none 默认值，元素默认在文档流中排列。
left 元素会立即脱离文档流，向页面左侧浮动
right 元素会立即脱离文档流，向页面的右侧浮动
块元素在文档流中默认垂直排列，如果希望块元素在页面中水平排列，可以使块元素脱离文档流
当为一个元素设置浮动以后（float属性是一个非none的值）,元素会立即脱离文档流，元素脱离文档流以后，它下面的元素会立即向上移动，元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到父元素的边框或者其他浮动元素。
如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。
浮动的元素不会超过它的上边的兄弟元素
浮动的元素不会盖住文字，文字会自动环绕在浮动元素周围，所以我们可以通过设置浮动来设置文字环绕图片的效果。
在文档流中元素的子元素的宽度占父元素的100%
块元素脱离文档流以后，高度和宽度都被内容撑开
内联元素脱离文档流后会变成块元素。

高度塌陷问题（BFC）

根据W3C的标准，在页面中元素都有一个隐含的属性Block Formatting Context简称BFC，该属性默认是关闭的，当开启元素的BFC以后，元素将有一下特性
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素覆盖
3.开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC

1.设置元素浮动
-- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
2.设置元素绝对定位
3.设置元素为inline-block
-- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
4.将元素的overflow设置为一个非visible值 overflow:hidden
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
但是再IE6及以下的浏览器中并不支持BFC，所以使用这种不能兼容IE6，在IE6中虽然没有BFC，但是具有另外一个隐含的属性叫做hasLayout，该属性的作用和BFC类似，所以，在IE6浏览器可以通过hasLayout来解决问题。
IE6一下：zoom:1

清除浮动

由于受到box1浮动的影响，box2整体向上移动了100px，我们有时希望清除掉其他浮动对当前元素产生影响，这是可以使用clear来完成功能
clear可以用来清除其他浮动元素对当前元素的影响
方法二：可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素高度，然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度基本没有副作用
.box1:after{content:"";display:block;clear:both;}
在IE6中不支持after 可以添加 zoom:1

定位

定位指的就是将指定的元素摆放到页面的任意位置
通过position属性来设置定位
可选值
static:默认值，元素没有开启定位
relative:开启元素的相对定位
absolute:开启元素的绝对定位
fixed:开启元素的固定定位

相对定位

当开启元素的定位时（position属性是是一个非static的值）我们可以通过left right top bottom四个属性来设置元素的偏移量
left:元素相对于其定位位置的左侧的偏移量，right,top,bottom.
当开启元素的相对定位时，而不设置偏移量，元素不会发生任何变化
相对定位是相对于元素在文档流中原来的位置进行定位
相对定位的元素不会脱离文档流
相对定位会使元素提升一个层级 *相对定位不会改变元素的性质，块还是块，内联还是内联
通常偏移量只需要使用两个就可以对一个元素进行定位。

绝对定位

绝对定位会脱离文档流
开启绝对定位，如果不设置偏移量，元素的位置不会发生变化。
绝对定位是相对与离他最近的开启了定位的祖先元素进行定位的。
绝对定位会使元素提升一个层级
绝对定位会改变元素的性质，内联元素会变成块元素，块元素宽高被内容撑开。

启固定定位

固定定位也是一中绝对定位，他的大部分特点都和绝对定位一样。
不同的是固定定位永远都是相对于浏览器窗口进行定位。
固定定位会固定在浏览器的某个位置，不会随着滚动条移动。
IE6不支持固定定位。

层级

如果定位元素的层级是一样的，则下面的元素会盖住上边的。
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高越优先显示。
对于没有开启定位的元素不能使用z-index
父元素的层级再高，也不会盖住子元素。

透明

opacity可以用来设置元素背景的透明
他需要一个0-1之间的值
0表示完全透明
1表示不透明
opacity在IE8及以下浏览器不支持
IE8及以下使用filter：alpha(opacity=50);代替

背景

使用background-image来设置背景图片
如果背景图片大小大于元素，默认会显示图片的左上角
background-image:url(img/1.jpg);