html基础

什么是html (Hypertxtext Markup Language)/超文本标记语言

html 作用 html负责结构 css负责表现 JavaScript负责行为。

注释怎么写 <!-- -->

乱码怎么办 改编码格式为utf-8 <meta chareset ="utf-8"

图片格式:

  • jpeg图片支持颜色较多,可以压缩,但是不支持透明 用于颜色丰富图片

  • gif图片支持颜色少,只支持简单透明,支持动态图 用于颜色单一或者动态图

  • png支持颜色较多,支持复杂透明

看效果,用效果好的。效果一样,用小的

重定向 <meta htt-quiv="refresh" content="秒数;url=目标地址"/>

a 可以包含任意除a外的元素

块状元素 div p h 独占一行 (p元素内不能放块元素)

行内元素 span

css基础

css注释/* 。。。 */


原样输出 程序格式

选择器

p{}元素选择器 h1{} 标签选择器 #id{} id选择器 。class{} 类选择器 * {}通配符选择器

并集选择器 选择器1,选择器2,选择器n{} 满足其中一个即可

交集选择器 选择器1选择器2选择器n{} 中间没空格 满足所有即可

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

子元素选择器 父元素>子元素

伪类选择器

  • a:link 访问过的链接

  • a:visited(只能定义字体颜色)

  • a:hover(鼠标滑动链接)

  • a:active正在点击的链接

  • :focus获取焦点

  • :before在元素前 结合content

  • :after 在元素后 结合content

  • ::selection选中元素

伪元素选择器

:first-letter首字母

:first-line首行

属性选择器

title属性 提示词 <p titlr='hello'></p>

p[title]选取含有该属性的元素

p[title=‘a’]选取含有titlte为a的元素

p[title^=‘a’]选取以a开头titlte的元素

p[title$=‘a’]选取以a结尾titlte的元素

p[title*=‘a’]选取包含a titlte的元素

子元素伪类选择器

:first-child选择第一个子标签

:last-child选择最后一个子标签

:nth-child(数)选择指定位置的子元素 even偶数 odd奇数

:first-of-type

:last-of-type

:nth-of-type 选择自定类型的子元素

兄弟元素选择器

span+p{} 后一个兄弟元素

span~p{} 后面所有兄弟元素

否定伪类

p:not(.hello){} 除hello外的p

样式继承

背景相关,边框相关 定位相关的样式不会被继承

选择器的优先级

内联样式优先级1000 id选择器 100 类和伪类10 元素选择器1 通配0 继承没有优先级 叠加的相加 同级的用后面 并集选择器的单独计算

 

外边距重叠在垂直方向的相邻兄弟元素外边距会取最大值而不是求和

如果父子元素垂直外边距相邻了 子元素的外边距会设置给父元素

内联元素没有width和height

浮动元素不会超过他的(结构上边的)兄弟元素

浮动的元素不会盖住文字,文字会自动环绕

解决高度塌陷 创建一个after伪类设置 content:"";display:block; clear:both(ie6要设置zoom:1)

最终版

.clearfix:after .clearfix:before { content:""; dispaly:table; clear:both;}

clearfix{zoom:1}

生成多个 div div.box$*3

定位

z-index只对开启定位的元素起作用

父元素永远都盖不住子元素

相对定位

当元素的position属性设置为relative时,则开启了元素的相对定位

1.当开启元素的相对定位后,不设置偏移量元素不会发生任何变化

2.相对定位是相对元素在文档流原来的位置进行定位

3.相对定位的元素不会脱离文档流

4.相对定位会使元素提升一个层级

绝对定位

当元素的position属性设置为absolute时,则开启了元素的绝对定位

1.当开启元素的相对定位后,脱离文档流

2.开启绝对定位以后,如果不设置偏移量,则元素位置不会发生变化

3.绝对定位相对于离他最近开启了定位的祖先元素进行定位 如果都没有开启定位相对于浏览器窗口进行定位

4.开启绝对定位会把内联元素变成块元素 (宽高可设置)

固定定位

当元素的position属性设置为fixed时,则开启了元素的固定定位(也是一种绝对定位)

1.永远相对于浏览器窗口定位

2.ie6不支持固定定位

透明

opacity:0.5;透明度

ie8以下需要使用 filter:alpha(opacity=50);

background-attachment:fixed;背景图片固定定位

表格

隔行背景颜色

tr:nth-child(even)奇数行

tr:nth-child(odd)偶数行

tr:hover{}鼠标指向

表单

select选择器多选 multuple=“multiple”多选

selected=“selected”默认选中

<optgroup lable="XXX”></optgroup>分组

 

给表单项分组 fieldset

png兼容ie6 得转换成png8或者使用js处理

<!-- [if IE]>

内容(ie浏览器才显示) 如果加数值 后面为指定版本

if lt IE 9小于ie9 gt(大于) gte大于等于 lto 小于等于 !非该版本

<![end if]-->

posted @ 2020-03-25 17:47  笑看吴钩  阅读(97)  评论(0编辑  收藏  举报