Html基础学习笔记
标签
<div>占一行,块级元素
<span>可以一行放多个,行内元素
<img src=”图像路径” alt=”图像显示不出来时的显示文字” title=”停留显示的文字”/>
链接
<a herf=”路径 未确定时可以使用#代替” target=”弹出方式 _self _blank”>标题</a>
图片链接
<a><img src=””/></a>
锚点链接
<a herf=”#name”></a> //对应位置 id=”name”
空格:
小于大于 <>
表格
Table
Tr
Thth(表头加粗居中)
thth
Tr
Tdtd
Tdtd
Tr
table
表格属性
《table》Align=center/left/right border cellpadding=单元格内文字和边框距离 cellspacing=单元格之间
《thead》《tbody》
Rowspan=合并行单元格 colspan=合并列单元格
自定义列表
Dl(definition list)
Dt(definition term)
Dd(definition description)
Dd
Dl
表单
《form》《/form》定义表单域
属性:action=”提交给地址” method=“post/get” name=””
<input type=”” value=”” checked=””/>
type:tect/button/select/image/submit/radio(单选)/checkbox(多选)(通过添加统一name确定选择域)
<label for=”目标表单元素的id”></label>
<select>
<option checked=”checked”></option>
</select>
<textarea></tectarea>
CSS
选择器+样式
基础选择器/复合选择器
基础选择器→标签……,类……,id,通配符……
类选择器 .class {}
选择器名字可以用-分段
多个类名空格隔开
id选择器 #id {}
通配符选择器 星号
字体 font-family
字体大小font-size
字体粗细font-weight:bold/700(相当于加粗)/400(相当于normal)
文字样式 font-style:italic(斜体)/normal
复合写法:font:style weight size/height family;
Text-align(水平对齐方式)
装饰文本text-decoration:underline
文本缩进 text-indent:2em(两个字符)/20px
行间距 line-height 可以用来使文字垂直居中
<link rel=”sytlesheet” herf=””>
外联css
Shift+alt+F 调整文档格式
复合选择器
后代、空格分隔 ol li {}
子类、大于号分隔(只选择子类不选孙类)
并集、逗号分隔
伪类、开头加冒号
链接伪类 a:link 未访问 a:visited a:hover a:active
要按LVHA的顺序!
光标伪类(主要针对表单) input:focus {background-color:pink;}
元素显示模式
块元素 占一行 如div h123456 p(文字类中不能放块级元素,如p,h)
行内元素 一行能放多个 如span 不能直接设置宽高(大小取决于内容) 里面只能放行内元素和文本
特殊:a里面可以放块级元素
行内块元素 可以想块元素指点宽高,也可以像行内元素一行多个
转换 display:block;/inline;/inline-block(行内块)
让行高(line-height)等于盒子高度(height)可以垂直居中
背景图片: background-image:url( );
Background-position:x y;
Background-attachment:fixed;固定背景图片在页面上,不随着滚动而滚动/scroll(默认)
Background:rgba(0,0,0,0.5)
Css三大特性:
①层叠性 就近原则
②继承性
行高的继承
③优先级 !Important》行内》id》class》标签
盒子模型
Border-collapse:collapse;(表格单元格border合并)
边框、padding会影响盒子大小,但当盒子没有指定大小的时候,padding不会撑开盒子
Padding 内边距
Margin 外边距
margin:0 auto;(水平居中)
Text-align:center(行内、行内块元素水平居中 )
嵌套元素塌陷:子元素margin大于父元素margin会让父元素一起塌陷,可以通过给父元素加border、padding、overflow:hidden解决
Box-shadow:10px(水平阴影) 10px(垂直阴影)10px(模糊距离) 10px(阴影尺寸) color;
浮动
①浮动元素会脱离标准流,不再保留原本的位置 ②浮动的元素会在一行内显示并顶端对齐 ③浮动的元素会有行内块的特性
清除浮动→当子元素需要浮动但父元素不方便设置高度时(否则因为子元素浮动了,父元素高度会变成0)
如何清除 clear:both/left/right
①额外标签法/隔墙法 在最后一个浮动元素后加一个标签,如<br><div>(必须是块级元素)
② 父元素添加overflow属性 overflow:hidden/auto/scroll
③ (最常用!)after伪元素
④ 双伪元素
定位
定位组成=定位模式+边偏移
静态定位static 标准流特性,用的少
相对定位relative 相对于原本的位置移动, 原本的位置保留,不会脱标
绝对定位absolute 相对于祖先元素
!子绝父相 子元素使用绝对定位,则父元素需要使用相对定位
固定定位fixed 以可视窗口作为标准,会脱标,可以看作一种绝对定位的特殊情况
粘性定位(了解)
定位叠放次序 z-index:number 数字越大越在上层
加了绝对定位的盒子不能通过margin:auto水平居中,居中通过left:50%(父容器宽度一半) margin:-&px(左移自己宽度的一半)
给行内元素、块级元素添加绝对定位/固定定位和display:inline-block效果类似
(浮动元素不会压住标准流的文字,绝对定位会压住所有的内容
元素隐藏
①应用非常广!→Display:none(隐藏元素,位置不保留) (display:block既可以表示转换为块级元素,也可以表示显示元素)
②visibility inherit是继承父元素的隐藏属性
③overflow:hidden隐藏溢出的部分 scroll添加滚动条 auto有溢出则添加滚动条否则不添加
Iconfont 比精灵图更好用,放大缩小不会失真,简单的小图标可以用
在iconfont.cn下载
鼠标样式属性cursor
去除表单输入框的轮廓线 outline:none(或者0)
去除textarea的放大缩小 resize:none
Vertical-align 垂直居中(只适用于行内和行内块)
:bottom(底线,默认)middle/top/baseline
文本溢出显示省略号
①单行 white-space:nowrap;(强制一行显示)
Overflow:hidden;(隐藏溢出)
Text-overflow:ellipsis;(省略号替换溢出)
HTML5的新特性
新增的标签
代替div的标签
<header><nav><article><section><aside><footer>
音频<audio>
视频<video src=”” >(其他属性:autoplay、muted(静音播放)、controls、loop)
支持mp4/ogg
新增input的type值
新增表单属性
Required=”requird” 不允许为空
Placeholder=”提示文本”
Autofocus=”autofocus” 加载网页时光标自动锁定输入框
Autocomplete=”off/on” 自动补全,默认是on
Mutiple=”multiple” 可以多选文件提交
Css3的新特性
属性选择器
(有点像子类选择器)
标签名[属性名] {}
标签名[属性名=”属性值”] {}
标签名[属性名^=”属性值共同的开头值”] {}
标签名[属性名$=”属性值共同的结尾值”] {}
结构伪类选择器(根据文档结构进行选择)
n可以是数字、公式、关键字(even偶数,odd奇数)
Child系列是先选出第一/最后一个子元素,再对照:前的属性名,of-type是先把需要的属性全部选出来,再找第一/最后一个
伪元素选择器 必须有content属性,用来清除浮动
父元素::after {content:’’; display:block; height:0; clear:both; visibility:hiden}
Box-sizing:border-box 盒子大小不受border、padding影响
过渡变化
(经常和:hover一起使用)
Transition写在要变化的标签里,:hover中写变化的目标效果
修改多个用逗号分隔或者属性写all