黑马程序员技术交流社区
标题: 前端基础小结 [打印本页]
作者: 加勒比海带c 时间: 2018-9-15 18:23
标题: 前端基础小结
HTML
1、Web标注构成
结构:HTML 表现:CSS 行为:JS
2、HTML语言语法骨架格式:
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
3、无语义化标签:
<div></div> 块级元素,独占一行
<span></span> 行内元素,独占一行
有语义化标签:
<h1>…..<h6> 标题标签 <p></p>段落标签 <hr />水平线标签 <br />换行标签
文本格式化标签(右边的语义更加强烈):
<b></b> <strong></strong> 文字粗体显示 <i></i> <em></em> 文字斜体显示
<s></s> <del></del> 文字加删除线显示 <u></u> <ins></ins> 文字加下划线显示
4、图像标签:
① <img src=“图像url”/>
② 当图片找不到时,<img src=“图像 url” alt=“提示文本”/> 图像不能显示时替换文本。
③ 鼠标悬停时显示的内容:<img src=“图像url” title=“文字”/>
④ 设置图像的宽度:<img src=“图像url” width=“数值”>
⑤ 设置图像的宽度:<img src=“图像url” height=“数值”>
⑥ 设置图像边框的宽度:<img src=“图像url” border=“数值”>
5、链接标签:
<a href=“跳转目标”>文本或图像</a> (例: <a href=“http://www.baidu.com”>百度</a>
如果当时没有确定链接目标时,通常将href属性定义为“#”,即href=“#”,表示该链接暂时为一个空链接。
target=“目标窗口弹出方式”,blank为在新窗口中打开方式。(例:<a href=“http://www.baidu.com” target=“_blank”>百度</a>)
锚点定位:1、使用<a href=“#ID”>链接文本</a>创建链接文本。
2、使用相应的ID名标注跳转目标的位置。
base标签:base可以设置整体链接的打开状态
<head>
<base target=“_blank”/>
</head>
特殊字符: 空格 < 小于号 > 大于号
注释标签: <! - - 注释语句 - -> html:ctrl+? css:ctrl+shift+?
6、相对路径:
① 图像文件和HTML文件位于同一个文件夹,只需输入图像文件名称即可。如 <img src=“图像.jpg”/>
② 图像文件位于HTML文件的下一级文件夹,输入文件夹名和文件名之间用 / 隔开,如<img src=“文件/图像.jpg”/>
③ 图像文件位于HTML文件的上一级文件夹,在文件名之前加入../ ,如果是上两级,则需要使用 ../../ ,如<img src=“../图像.jpg”/>
绝对路径:<img src=“文件右击属性+图像名称.jpg”/> (不推荐使用)
7、列表,表格和表单:
一、列表
① 无序列表(无序列表的各个列表项之间没有顺序级别之分,是并列的)
如:<ul>
<li> 列表项1 <li>
<li> 列表项2 <li>
<li> 列表项3 <li>
</ul>
ul里面只能装li,li里面放什么都可以
②有序列表
如:<ol>
<li> 中国 </li>
<li> 英国 </li>
<li> 俄罗斯 </li>
③自定义列表
如:<dl>
<dt> 名词 </dt>
<dd> 名词解释1 </dd>
<dd> 名词解释2 </dd>
</dl>
二、表格
<table>
<caption></caption>
<th></th>
<tr></tr>
<td></td>
<tr></tr>
<td></td>
<tr></tr>
<td></td>
</table>
表格居中: align:“center”
cellspacing=“” 单元格与单元格之间的距离
cellpadding=“” 单元格内容与单元格边框之间的距离
表格合并: colspan 跨列合并 rowspan 跨行合并
三、表单
男女性别只能选一个的情况 <input type=“radio”name=“sex”/>
多选的情况 <input type=“checkbox”name=“”/>
预先选定的情况 <input type=“radio”name=“sex”checked=checked />
表单:表单控件、表单域、提示文本。
type:“button” 普通按钮 type:“reset” 重置按钮
type:“submit” 提交按钮 type:“file” 文件按钮(上传文件)
下拉栏(实际中一般用js做,这个不常用): <select>
<option> 1990年 </option>
<option> 1991年 </option>
<option> 1992年 </option>
</select>
<input type=“text”placeholder(占位字符)=“文本”>
<form action=“” method=“get/post”>
用户名:<input type=“text” name=“username”>
密码:<input type=“password” name=“psaaword”>
<input type=“submit”>
CSS
1、字体
① font-size 字体大小 ② font-family 字体类型 ③ font-weight 字体粗细(400=normal,700=bold) ④ font-style 字体风格 (normal,italic)
② font连写顺序:{font:font-style font-weight font-size font-family;}
③ text-indent 首行缩进 单位为em。
④ 换行:word-wrap;break-word
2、复合选择器
① 后代选择器:.nav li (选择所有的子孙后代)
② 子代选择器:.nav li (选择子儿子,第一级别的儿子)
③ 并集选择器:.nav, .footer (如果偶遇相同的样式,集体声明,逗号隔开)
④ 交集选择器:p.nav (既是又是的关系,这个是p标签,而且他的类名是nav)
⑤ 链接伪类选择器: a:hover(鼠标经过链接时的状态) a:link(未访问过的链接)
a:visited(已访问过的链接) a:active (当我们点击的时候,按下鼠标不松开)
3、显示模式
行内元素: ① 一行显示多个 ② 不能设置宽度和高度 ③ 默认的大小是内容的大小 ④ span,a,u,b,i,strong ⑤ 文本级元素
块级元素:① 一行只能放一个标签 ② 可以设置宽度和高度 ③ 宽度默认是容器(父级宽度)的100% ④ div,p,ul,ol,dl,table,li ⑤ 容器级元素
行内块元素: ① 一行可以放多个 ② 可以设置宽度和高度 ③ 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙 ④ 默认宽度就是它本身内容的宽度 ⑤ img input td
4、三大特性
层叠性
如果样式冲突,我们采取就近原则。
继承性
子级不指定,有一些样式会继承父亲的样式。(text- font- line- color,a标签什么都不继承)
优先级
① 不同选择器,级别执行不一样
② 通配符选择器或者继承 权重(0,0,0,0)
③ 标签选择器 权重(0,0,0,1)
④ 类选择器或伪类(a:hover) 权重(0,0,1,0)
⑤ id选择器 权重(0,1,0,0)
⑥ 行内样式表 权重(1,0,0,0)
⑦ !important 权重最高
5、盒子的内外边距
① 盒子的实际大小:内容的宽度和高度+内边距(padding)+边框(border)
②padding:内边距,指内容与边框之间的距离。Padding连写顺序为上右下左。
padding: apx bpx cpx; 上内边距为apx,左右内边距为bpx,下内边距为cpx。
padding: apx bpx; 上下内边距为apx,左右内边距为bpx。
③margin:外边距,指盒子与盒子之间的距离。
margin 上下左右外边距值参照padding。
④让块级盒子居中对齐:
必须有宽度(如果没有宽度,这个块就成了通栏盒子);左右外边距设置为auto。
通常写法:margin:auto;margin:0 auto
6、插入图片和背景图片的区别
① 插入图片,用的比较多的是产品展示类,移动位置靠盒模型,padding和margin。
② 背景图片,一般用于小图标背景或者超大背景图片。移动位置靠background-position:x坐标,y坐标。background-attachment:scroll/fixed (背景图片固定)
7、嵌套块元素垂直外边距的合并问题(塌陷)
解决办法:① 可以为父元素定义上边框(border-top);
② 可以为父元素定义上内边距(padding-top);
③ 可以为父元素添加overflow:hidden;
8、盒子模型稳定性
width > padding > margin
1、 margin会有外边距合并,还有IE6下面margin加倍的bug,最后使用。
2、 padding会影响盒子大小,其次使用
3、 width没有问题
9、清除浮动的方法
① 额外标签法:在浮动元素末尾添加一个空标签,<div class=“clear”></div>,在style里添加 .clear{clear:both;}
② 父级元素添加overflow属性,overflow:hidden;
③ 使用after伪元素清除浮动
.clearfix::after {
content:“”;
display: block;
height: 0;
visibility: hidden;
clear: both;
}
/* ie6\7专门清除浮动的样式/
.clearfix {
*zoom: 1;
}
class=“clearfix”
④ 清除浮动之父级添加双伪元素
.clearfix:before,
.clearfix:after {
content:“”;
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
10、定位
定义:将盒子定在某一个位置,自由的漂浮在其他盒子上面。
标准流在最底层(海底),浮动的盒子在中间层(海面),定位的盒子在最上面层(天空)。
定位=定位模式+边偏移
静态定位:static 相对定位:relative 绝对定位:absolute 固定定位:fixed
① 静态定位:静态定位按照标准流特性摆放位置,它没有边偏移。
静态定位在布局时我们几乎不用。
② 相对定位:相对定位是元素相对于它原来在标准流中的位置来说的。
原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。
③绝对定位:绝对定位是以带有定位(相对、绝对、固定)的父级元素来移动位置,如果父级元素都没有定位,则以浏览器文档为准移动位置。
④固定定位:固定定位是绝对定位的一种特殊方式。
完全脱标——完全不占位置
只认浏览器的可视窗口——浏览器可视窗口+边偏移属性来设置元素的位置。
跟父元素没有任何关系,不随滚动条滚动
⑤子绝父相:子级是绝对定位,父级要用相对定位。
⑥在使用绝对定位时,要想子盒子水平居中。
1、left:50% 让盒子左侧移动到父级元素的水平中心位置。margin-left: -子盒子的一半,让盒子向左移动自身宽度的一半。
2、transform:translate(-50%,-50%)
3、全部为0,top=0,left=0,bottom=0,right=0,margin=0
⑦鼠标样式:
default 小白(默认)
pointer 小手
move 移动
text 文本
not-allowed 禁止
⑧溢出的文字省略号显示
1、white-space:nowrap; 强制在一行内显示文本
2、overflow:hidden 溢出隐藏
3、text-overflow:ellipsis 文字溢出部分转换成省略号
⑨精灵图
使用background-position 来调整位置,通常是负值。
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |