html基础内容样式

head

<meat charset="utf-8" /> 编码格式：让浏览器可以识别中文

<meat name="Author" content="歪哥"> 作者

<meta name="keywords" content="百度，淘宝，歪哥"> 关键字：用户搜索的时候可以通过关键字搜索到该网页

<meta name="description" content="这是一个非常强大的第三网站...> 网站的描述信息

body

h1~h6:标题标签，重要性依次递减，字体默认加粗，一般作为文章的标题使用

<p></p> p标签：段落标签

<br> 换行标签

&nbsp； 牛逼的空格

<hr> 水平线

&lt; <

&gt; >

<q></q> " "

<blockquote></blockquote> 引用别人一段话

<strong></strong> 强调文本为重要文本，字体加粗

<em></em> 强调文本为重要文本，字体倾斜

 上标

 下标

<img src="网络路径 本地路径 相对路径"> 一般写相对路径

./ 例如：./girl.jpg 当前目录，可以省略

../ .. /girl.jpg 跳到上级目录

<img alt=" "> 图片加载失败的时候，显示的替换文本

<img title=" "> 鼠标悬浮在元素上时显示的内容

<a href=" " target=" "></a> href:超链接，网页之间的纽带

target＝“_blank” 代表在新的网页中打开地址

target＝“_seft” 默认值，代表在当前页打开地址

<a href="#">回到顶部</a> 回到网页顶部

<a href="#teacher">讲师</a> 设置锚点, 可以跳到 id 为 teacher的元素

<a href="img.zip">下载图片</a> 下载

<ul><li></li></ul> 无序列表

<ol><li></li></ol> 有序列表

<dl> <dt><dd></dd></dt></dl> 自定义列表

表格

border:边框

cellspacing: 单元格之间的距离

cellpadding: 单元格和内容之间的距离

align: 对齐方式

align="left" 居左对齐

align="right" 居右对齐

align="center" 居中对齐

<caption>花</caption> 标题

<tr> </tr> 表格的行 给tr添加align＝“center”他的自代元素都会居中对齐

<th></th> <td></td> 表格的列 th: td的一个变种，字体默认加粗，居中

<td rowspan="2"> rowspan:行的跨度

<td colspan="2" align="center" bgcolor="red">

colspan:列的跨度 bgcolor：背景颜色

<tfoot> </tfoot> 表尾

tfoot:写在tbody上方，并不影响页面中的显示效果，但可以让用户优先看到tfoot中的内容

css样式

<link rel="stylesheet" type="text/css" href="index02.css">

type:类型，表示浏览器解析的方式，如果不定义的话，有些css效果浏览器解释的效果不一样

width:200px; 宽度

height:200px; 高度

background:green; 背景颜色

text-align:center; 对齐方式

color:white; 设置字体颜色

选择器

div>p 子代选择器

div p 后代选择器

ul+p 相邻兄弟选择器 选择和ul相邻的选则器

* 选择所有元素

＃ id选择器

. class选择器

属性选择器

div[id] 选中具有id属性的

div[class] 选中具有class属性的div

div[class|="home"]选择class为home的div元素，或着选中class为home开头 后面内容用 － 链接的div元素

div[class="a c"] 选中class为ac属性的

div[class~="a"] 选中包含a属性的

div[class^="r"] 选择以属性名开头的元素

div[class$="x"] 选择以属性名结尾的元素

div[class*="i"] 选中属性中包含该值的元素

伪类伪元素选择器

a:link 当元素定义了超链接属性，并且从来没有点击的样式

a:visited 该链接已经被访问过的样式

a:hover 鼠标悬浮在元素上方时的样式

a:active 鼠标按下不松开

div::first-line 第一行的样式

div::first-letter 第一个单词

p::before 前面添加。。

p::after 后面添加

顺序:link－visited－hover－active;

结构伪类选择器

.box>li:nth-child(odd) 选中处于基数位的元素

.box>li:nth-child(even) 选中处于偶数位的元素

.box>li:nth-child(n+3) 可以跟简单的数学公式

.box>li:nth-child(5n) 5的倍数

.box>li:first-child 选取第一个元素

.box>li:last-child 选取最后一个元素

.box>li:nth-last-child(n+2) 选取最后三行的

.wrap>p:nth-of-type(1) nth-of-type用法同nth-child基本一致，只不过nth-of-type会过滤掉其他类型的元素

.wrap>p:nth-last-of-type(n+3) 倒着数

.wrap>p:first-of-type 选中第一个类型为p的元素

.wrap>p:last-of-type 选中最后一个类型为p的元素

其他结构伪类选择器

div:empty 选中元素内容为空的元素

p:only-child 选中该元素父级中只有该元素的元素

:root 选中的html

状态伪类选择器

input:disabled 选中禁用状态下的input

input:enabled 选中可用状态下的input

input:focus 选中聚焦状态下的input

input:checke 针对单选框和多选框 选中状态下的input

其他选择器

.box~p 通用兄弟选择器 选中，box下面的所有匹配的p元素

li>*:not(div) 否定伪类选择器 选中除了div元素之外的其它元素

p:target 目标伪类选择器 通过a标签跳转到该标签时，样式会起作用

选择器的优先级

！important(慎用)>行内样式>ID选择器>class选择器>与元素选择器

盒模型

padding-top:20px 上内填充

padding: 20px 30px 40px 上 左右 下

padding:20px 30px 上下 左右

border-top-width:10px; 上边框宽度

border-top-style:outset 上边框样式()

solid：实线

dashed： 虚线

dotted： 小点

double： 双实线

groove: 3d凹槽

ridge： 3d凸槽

outset: 3d凸边

inset： d凹边

border-top-color:blue; 上边框颜色

box-sizing: border-box; 怪异盒模型 ie下会出现怪异盒模型

border－box：width／height ＝ border＋padding ＋content；

盒子阴影

box-shadow: 10px 10px 0 0 gray;

第一个值：阴影在x方向的偏移量，正值向右偏移，负值向左偏移；

第二个值：阴影在y方向的偏移量，正值向下偏移，负值向左偏移；

第三个值：模糊度；

第四个值：阴影半径；

第五个值：颜色；

disaply

块级（block）元素 常见的块级元素（div, p, h1~h6, ul, li, ol, dl, dt, tr, table, dd）

1. 默认独占一行

2. 不设置宽度的话，默认盛满父级

3. 支持宽高设置，支持所有的css样式设置

内联（inline）元素：

1. 行内元素可以和行内元素并排显示

2. 换行会被解析 (解决方案，将父级元素的font-size设置为0)

3. 不支持宽高设置，不支持margin－top, margin－bottom, padding－top,

padding-bottom设置

4. 宽决定

inline-block

1.可以设置高

2.换行被解析

3.可以同排显示

disaply: inline; 让元素以行内高由内容元素形式展示

disaply: block; 让元素以块级元素形式展示

disaply: inline－block; 让元素同时具有块级元素和行内元素部分特征

margin

第一个margin-top会传递给父级;

解决方案:

1：改用padding

2:给父级添加: border－top

3:给父级添加:overflow:hidden;

行内元素设置上下margin，上下padding无效，宽高也不能设置。有内容决定宽高

文本设置（text）

color: red 给字体设置颜色

text-decoration: line-through；

文本装饰

overline:上划线;

underline: 下划线;

line－through:删除线;

none:不要任何修饰;

text-align: justify;

文本对齐方式

left:左对齐;

center:居中对齐;

right:右对齐;

justify:两端对齐;

text-indent: 32px; 首行缩进

white-space: nowrap;

空白符处理

pre:原样显示

pre-line:合并空白符,但不会合并换行

pre-wrap:换行;

nowrap:不换行;

overflow: hidden; 益处隐藏

text-overflow:ellipsis;

文本溢出

clip：剪切;

ellipsis:省略号；

vertical-align:middle; 垂直方向对齐

vertical-align: bottom; 底部对齐

默认: baseline寄线对齐,

这个值会造成图片下方和元素有一个间隙的问题；

字体设置（font）

font-style: oblique

字体样式

italic:字体中的斜体

oblique:把字体强行拉斜;

font-variant: small-caps; 小写英文变大写

font-weight: bold;

normal:普通;

bold:粗体;

bolder:更粗;

值也可以是100的倍数，范围:100- 900

400:normal

700:bold

font-size: 25px; 字体大小 默认:16px

line-height: 100px; 行高

font-family: " " 字体家族

font: italic small-caps bold 20px/100px（字体大小／行高 必写） "翩翩体－简"；

浮动

浮动:

元素脱离文档流，沿着某一个方向流动,

知道碰到父级边界或者同级浮动元素的边界才会停止

浮动元素 margin: auto; 失效

如果浮动元素上方有块级元素,那么浮动元素不会遮盖上方块级元素

浮动元素特点:

1.不设置宽高,有内容撑起宽高

2.会使元素脱离文档流,(文档流:元素在网页中所占的位置)

3.让元素同时具有行内元素和块 元素部分特征

4.会提升元素层级

5.不会遮盖文字

元素的嵌套规则:

1.块级元素可以嵌套大部分的块级元素，可以嵌套行内元素

2.行内元素可以嵌套行内元素，但不能嵌套块级元素

3.p,dt,h1~h6 不能嵌套块级元素

4.同级元素之间一般是行内元素与行内元素并列, 块元素与块元素并列

图片

background-image: url('as.jpg')； 背景图片

background: url("img/bg-tl.png") no-repeat left top,

url("img/bg-tr.png") no-repeat right top,

url("img/bg-bl.png") no-repeat left bottom,

url("img/bg-br.png") no-repeat right bottom;

background-repeat: no-repeat;

背景平铺效果

no-repeat:没有平铺效果;

repeat-x: x方向平铺;

repeat-y: y方向平铺;

repeat: 默认效果，x y方向都平铺

background-position: 20px 20px;

背景图片位置

值可以为:left right, center, top, bottom这几个的组合值,例如: right top是右上角; 也可以

为像素,比如:20px 20px;

background-attachment: scroll;

依附关系

scroll:背景图位置随着网页的滚动儿滚动;

fixed:背景图的位置固定,不随着网页的滚动而发生变化;

（overflow: scroll; position: relative; ） 超出的内容通过滚动查看

background-size:50% 50%

背景大小

cover（覆盖）｜px｜ percent｜ contait（让图片以最大尺寸在背景中完全显示）｜

隐藏元素

display: none; 展示效果:

none:元素消失，不在网页中占据位置

visibility: visible;

hidden：不可见 元素不可见，但是在网页中占据位置；

visible：可见；

ul样式

list-style-type:upper-alpha；

列表样式类型:

none: 没有样式;

disc: 实心圆;

circle:实心圆;

square:实心方块;

decimal－leading－zero:0开头的十进制;

lower－alpha:小写英文字母;

upper－alpha:大写英文字母;

list-style-position: inside;

列表样式位置

inside 在li内部

outside 在li外部

list-style-image: url('ad.jpg'); 样式图片

css样式的单元格

border-spacing: 10px； 边框之间的距离

border-collapse: collapse; 合并边框

empty-cells: hide; 隐藏空单元格

清除浮动

clear: right

celer:

left:清除周围左浮动元素对该元素造成的影响;

right:清楚周围右浮动元素对该元素造成的影响;

both:清除周围左右浮动元素对该元素造成的影响;

绝对定位

position: absolute;

right: 0;

top: 0;

left: 0;

bottom: 0;

margin: auto;

绝对定位：相对于距离自己最近的，

具有定位属性的父辈元素进行定位（注意：

父辈元素的定位属性值不能是默认值static）

相对定位

position: relative;

top:150px;

left: 100px;

right: 100px;

相对定位:

相对于元素本身原来的位置进行定位，

会提高元素的层级，元素本身的特性不发生变化，

一般设置了相对定位，不会对其left，top，right，

bottom的值进行修改；

固定定位

position: fixed;

固定定位：相对于document进行定位（当前窗口），

不会随着页面的滚动而滚动（悬浮框效果）；

h5（视频 音频 输入框）

<audio autoplay controls>

<source src="yinyue.mp3"></source>

<source src="yinyue.wav"></source>

<source src="yinyue.ogg"></source>

该浏览器不支持音频播放，请下载最新版本的浏览器wg（歪哥）浏览器

</audio>

<video autoplay controls width="500px">

<source src="shipin.mp4"></source>

<source src="shipin.wav"></source>

<source src="shipin.ogg"></source>

该浏览器不支持视频播放，请下载最新版本的浏览器

</video>

<input type="email" required> 邮箱输入框，提交时会验证输入框中的内容是否正确required ：内容必填

<input type="url"> 验证url

<input type="number" step="5"> 数字 step(每次都加5)

<input type="date"> 年月日

<input type="month"> 年月

<input type="week"> 年周

<input type="text" autofocus> autofocus：自动聚焦

<input type="text" disabled> disabled：使不能使用

<input type="submit"> 提交按钮

<header></header> 头部内容

<nav></nav> 导航内容

<footer></footer> 尾部内容

<aside></aside> 侧边栏

<article></article> 有独立内容的部分，比如一个评选区，讨论区等待

media媒体查询

<meat name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

viewport：视窗

width：视窗宽度＝设备宽度（css像素）

initial－scale：初始缩放比例

minimum－scale：允许缩放最小倍数

maximum－scale：允许缩放最大倍数

user－scalable：是否允许用户进行缩放 no是不允许 ，yes是允许

像素分为 设备像素（物理像素）和 css像素（设备无关像素）

window. devicePixelRatio = 物理像素／css像素

《html》@media only screen and (min-width: 600px) and (max-width: 800px)

《head》<link rel="stylesheet" href="css/middle.css" media="screen and (min-width:550px) and (max-width:750px)">

percent百分比

width: 50%; 父级宽度的50%

height: 50%; 父级高度的50%

border-radius:100% 100% 100% 100%/50% ; 50% /100% 100% 0 0(上下椭圆的一半)

100% 0 0 100% / 50%;( 左右椭圆的一半)

注意：margin—top，margin-bottom,padding-top,padding-bottom是相对于父级的宽度的百分比；

em和rem

rem是html的font－size的大小

em:当前元素字体大小

响应式布局：

格局不同的页面尺寸，写不同的页面布局（css）

 

技术：

媒体查询

用百分比代替像素左适配（自适应布局）

用rem，em来设置元素的尺寸

用viewport来适配移动端，对移动端进行优化

渐变

background-image: linear-gradient(to right bottom ,blue ,red ,150px,yellow);

线性渐变：

第一个值：方向；

可以是to right, to left, to top, to bottom,

to right top , to left top, to right bottom,

to left bottom,还可以是角度，单位是 deg

后面的值：颜色 渐变的位置（px｜百分比）；

background-image: radial-gradient(200px circle at center center,red 20px, orange,yellow);

径向渐变：

半径 形状 at 圆心位置， 颜色 渐变位置，颜色 渐变位置。。。

 

圆心位置可以是 top， right， bottom， left， center，

也可以是px， 也可以是 percent（百分比）

background-image:radial-gradient(farthest-corner ellipse at 100px 100px ,red,yellow,blue);

形状如果是椭圆的话，半径不能写成像素

farthest-side:圆心到最远的边;

clothest-side:圆心到最近的边;

farthest-corner:圆心到最远的角;

clothest-corner:圆心到最近的角;

椭圆渐变

background-image:radial-gradient(farthest-corner ellipse at 100px 100px ,red,yellow ,blue );

形状如果是椭圆的话，半径不能写成像素

farthest-side:圆心到最远的边;

clothest-side:圆心到最近的边;

farthest-corner:圆心到最远的角;

clothest-corner:圆心到最近的角;

分段渐变

background-image: repeating-linear-gradient(to right,skyblue,yellowgreen,orange 20%);

椭圆分段渐变

background-image: repeating-radial-gradient(farthest-corner ellipse at center center,red,yellow ,blue 6% );

transparent：透明色；

repeating-linear-gradient(to left,pink 0px,pink 10px, transparent 10px, transparent 20px); （格格）

雪碧图

1.工作中，ui设计师给我们提供设计图，设计图为psd格式

2.为了减小前端和服务器的链接次数（减小服务器的压力），一般把一些小的图片

放到一张图上，我们称之为Css sprites（雪碧图）

background: url("img/bg_v3.png")(图片)no-repe

;