前端技术

专题：span p div的区别
前端技术
HTML只是赋予内容的手段，大部分HTML标签都有其意义（标签p创建段落，h1标签创建标题等等) 也就是说span和div没有很大的意义但是是对于seo来讲的，现实中，几乎是div+css布局，也就是说div站很大比例 span 是内联标签什么意思？意识是不换行，也就是一行如果都是span的话，那么他是不换行一直过去了（导航栏的原理用内联样式或者标签） div是构成整个页面布局的标签，是块级元素，也就是说换行的，跟内联是相反的，（导航栏原理：可以限定宽度，用css的浮动来达到效果） p(段落)元素是块级的,前后断行,而且还要再隔一行.相当于断两行。

admin2019-04-03 17:28:38【前端技术】
阅读更多
css篇：font的样式
前端技术
1，text-align : left | right | center | justify text-align参数值与说明： left : 左对齐 right : 右对齐 center : 居中 *justify : 两端对齐（不推荐使用，通常大部分浏览器不使用）我们对text-align常用的参数值为left、right、center 2，text-indent 让每个段落首行开头文字缩进 .divcss5{text-indent:25px} 这里divcss5对象内段落首行开头文字缩进了25像素。 3，text-decoration下划线CSS单词值参数： none : 　无装饰 blink : 　闪烁 underline : 　下划线 line-through : 　贯穿线 overline : 　上划线 text-decoration:none 无装饰，通常对html下划线标签去掉下划线样式 text-decoration:underline 下划线样式 text-decoration:line-through 删除线样式-贯穿线样式 text-decoration:overline 上划线样式 4，font、font-family(字体)、font-size（字大小）、font-style（字样式）、font-weight（css加粗）、text-decoration（下划线）、font-variant（字母大小写）、text-transform（英文大小写）、letter-spacing（间隔） 5，常用字体样式设置font-style: italic 兼容各大浏览器 normal : 正常的字体(默认字体样式，可用于去掉html i斜体标签默认斜体样式) italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique oblique : 倾斜的字体 6，white-space norma nowrap强制同一行内显示所有文本文字，让所有文字内容中一排显示不换行 ①、white-space语法： white-space : normal nowrap ②、white-space参数： normal : 　默认处理方式 nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。DIVCSS5推荐使用white-space:nowrap强制不换行。 ③、white-space说明： white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容 7，text-overflow文本有溢出时显示css省略号 text-overflow语法： text-overflow : clip | ellipsis text-overflow参数值和解释： clip : 　不显示省略标记（...），而是简单的裁切 ellipsis : 　当对象内文本溢出时显示省略标记（...）

admin2019-03-20 16:20:06【前端技术】
阅读更多
css篇：border的样式
前端技术
border-border边框样式颜色、边框样式、边框宽度 1、四个边框 border-left 设置左边框，一般单独设置左边框样式使用 border-right 设置右边框，一般单独设置右边框样式使用 border-top 设置上边框，一般单独设置上边框样式使用 border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用 2、四边相同边框border简写 #divcss5{border:1px solid #00F} 设置了divcss5对象盒子1px像素蓝色实线边框 3、边框三个样式通常我们可以对边框设置宽度（厚度）、边框样式、边框颜色这三个属性与参数。 1）、边框颜色：border-color:#000 2）、边框厚度（宽度）：border-width:1px 使用数字+单位设置边框厚度宽度，如1px(边框厚度宽度为1像素)，边框必须为正数字，大于0的数值。否则设置边框border样式无效。 3）、border边框样式：border-style:solid 边框样式值如下： none : 　无边框。与任何指定的border-width值无关 hidden : 　隐藏边框。IE不支持 dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用） dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用） solid : 　实线边框（常用） double : 　双线边框。两条单线与其间隔的和等于指定的border-width值 groove : 　根据border-color的值画3D凹槽 ridge : 　根据border-color的值画菱形边框 inset : 　根据border-color的值画3D凹边 outset : 　根据border-color的值画3D凸边 4）、边框样式截图：四、CSS单独设置左边框、右边框、上边框、下边框 - TOP 以缩写方式写上、下、左、右边框单独CSS样式设置方法 1、1px黑色虚线上边框 border-top:1px dashed #000 2、1px黑色实线下边框 border-bottom:1px solid #000 3、1px黑色虚线左边框 border-left:1px dashed #000 4、1px黑色实线右边框 border-right:1px solid #000 五、常用推荐边框样式 - TOP 我们通常使用主流浏览器兼容边框样式有： 1、实线边框：solid Border:1px solid #000 设置对象1px（像素）宽厚的黑色实线边框。 2、虚线边框：dashed Border:1px dashed #000 设置对象1px（像素）宽厚的黑色虚线边框。六、css border边框用处 - TOP 设置对象边框样式，设置单独上边框、下边框、左边框、右边框样式，实现美化美观。边框起到分割、规划布局作用。七、border边框样式优化简写图文教程 - TOP

admin2019-03-20 16:17:26【前端技术】
阅读更多
css篇：magin的应用
前端技术
Margin延伸（单独设置四边间距属性单词） margin-left 对象左边外延边距（margin-left:5px; 左边外延距离5px） margin-right 对象右边外延边距（margin-right:5px; 右边外延距离5px） margin-top 对象上边外延边距（margin-top:5px; 上边外延距离5px） margin-bottom 对象下边外延边距（margin-bottom:5px; 下边外延距离5px）上下相同、左右相同原始：margin-top:5px; margin-bottom:5px; margin-left:7px; margin-right:7px 缩写：margin:5px 7px; 案例

admin2019-03-20 16:13:23【前端技术】
阅读更多
css篇：z-index层重叠顺序
前端技术
z-index 跟具体数字如： div{z-index:100} 注意：z-index的数值不跟单位。 z-index的数字越高越靠前，并且值必须为整数和正数（正数的整数）。案例说明：三个盒子均都使用了绝对定位属性position:absolute样式，并且设置相同的高度和宽度样式。为了便于观察我们使用left、right属性并赋予不同值，让其错落有致。 Divcss5-1盒子背景为黑色，z-index:10 Divcss5-2盒子背景为红色，z-index:20 Divcss5-3盒子背景为蓝色，z-index:15 为可以看见第一个盒子z-index:10，所以重叠在最下层，而第二个盒子z-index:20，值最大所以最上层重叠，第三个盒子设置z-index:15，居中。

admin2019-03-20 16:04:27【前端技术】
阅读更多
css篇：float的浮动和清除
前端技术
FLoat:元素浮动，取值：left或right （1）：浮动元素可以向左或向右浮动，浮动到包围元素的边框或上一个元素的边上为止（2）：元素浮动起来后，所占的空间就消失了，浮动元素的层级要高于普通元素（3）：任何元素都可以浮动，浮动元素将变成“块元素”，不管原来是什么元素块元素：具有width和height属性，而行内元素默认width和height不起作用提示：元素浮动，可以使行内元素转成“块元素“： display:block; 一个行内元素，要想宽和高能用，可我不想进行浮动，能否实现： display 的属性：可以取值：none（无）、block（块元素）、inline(行内元素)

admin2019-03-20 16:03:47【前端技术】
阅读更多
css篇：padding的应用
前端技术
Padding:40px 30px 50px 20px; 我们可以简写为： Padding:40px 30px 50px 20px; 注意每个数值后一个空格间隔隔开解释分别意思第一个40px代表“上”padding-top:40px; 第二个30px代表“右”padding-right:30px; 第三个50px代表“下”padding-bottom:50px; 第四个20px代表“左”padding-left:20px;

admin2019-03-20 16:02:01【前端技术】
阅读更多
css篇：position属性
前端技术
static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative：相对定位（空间占位置）元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute：绝对定位（空间不占位置）元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 z-index：用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

admin2019-03-20 15:55:46【前端技术】
阅读更多
css篇：行内与块级元素
前端技术
CSS 定位 (Positioning) 属性允许你对元素进行定位 div、h1或p元素常常被称为块级元素，这意味着这些元素显示一块内容，即“块框” span 和 strong 等元素称行内，这是因为它们的内容在行中，“行内框” 1.行内元素与块级元素直观上的区别行内元素会在一条直线上排列，都是同一行的，水平方向排列块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。 2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。 3.行内元素与块级元素属性的不同，主要是盒模型属性上行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效 display:block (字面意思表现形式设为块级)

admin2019-03-20 15:52:20【前端技术】
阅读更多
基础篇：meta的作用
前端技术
(本篇需要记住的重点(红色标记)，其他作为了解) meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 <meta name="参数"content="具体的参数值"> Keywords(关键字) 说明：keywords用来告诉搜索引擎你网页的关键字是什么。 <meta name="keywords"content="meta总结,html meta,meta属性,meta跳转"> description(网站内容描述) 说明：description用来告诉搜索引擎你的网站主要内容。 <meta name="description"content="haorooms博客,html的meta总结，meta是html语言head区的一个辅助性标签。"> robots(机器人向导) 说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 content的参数有all,none,index,noindex,follow,nofollow。默认是all。具体参数如下：信息参数为all：文件将被检索，且页面上的链接可以被查询；信息参数为none：文件将不被检索，且页面上的链接不可以被查询；信息参数为index：文件将被检索；信息参数为follow：页面上的链接可以被查询；信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 <meta name="robots"content="none"> author(作者) <meta name="author"content="root,root@xxxx.com"> Refresh(刷新) 说明：自动刷新并指向新页面。 <meta http-equiv="Refresh"content="2;URL=http://www.haorooms.com"> //(注意后面的引号，分别在秒数的前面和网址的后面) 注意：其中的2是指停留2秒钟后自动刷新到URL网址。 Set-Cookie(cookie设定) 说明：如果网页过期，那么存盘的cookie将被删除 <meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> 防止乱码 <meta charset="utf-8"> 用于响应式设定（后期请看响应式篇） <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">

admin2019-03-20 15:21:45【前端技术】
阅读更多