前端前端笔记前端基础

前端学习笔记一-html+css

2019-09-17  本文已影响0人  AizawaSayo

一、html

1.1 排版标签

1.2 文本格式化标签

1.3 base标签

整体设置所有链接的打开模式 <base target='_blank'>
是写到<head></head>中的

1.4 预格式化文本标签

<pre>...</pre>：会直接按照我们书写的格式显示，保留空格和换行。用得很少。

1.5 特殊字符(记住常用的即可)

1.6 表格table

<table border="1" cellpadding="5" cellspacing="0" width="400" align="center">
       <caption><h3>小说排行榜</h3></caption>
       <tr>
           <td>11</td>
           <td>22</td>
       </tr>
</table>

1.7 列表

自定义列表，虽然dt和dd是并列结构，但dd是围绕dt的，属于它上面的dt类。一个dt可能对应多个dd

<dl>
    <dt>名词1</dt>
    <dd>名词1解释a</dd>
    <dt>名词2</dt>
    <dd>名词2解释a</dd>
    <dd>名词2解释b</dd>
</dl>

1.8 表单

<form action="data.php" method="get" name="loginForm">
    <input type="text" name="user"/>
    <input type="password" name="psw"/>
    <input type="submit"/>//点击后会执行提交（把表单form中已输入的数据以method的提交方式提交到action的地址），然后清空表单
    <input type="reset"/>   //点击后会清空表单
</form>

二、css

2.1 内部样式表

规范写法是放在</head>中的最后，<style type="text/css"></style>
在html5中，type="text/css"可以省略

2.2 外部样式表（外链式）

标准格式： <link rel="stylesheet" type="text/css" href="style.css" />
也是放在<head>中，rel="stylesheet"是指它和当前页面的关系是用来定义该页样式的层叠样式表，而在html5中，type="text/css"同样可以省略

2.3 尽量不使用无具体语义的标签选择器

如<div> <span>(一般只是容器，不像p有表示段落的意义，li表示列表的子项)

2.4 长度单位

- 相对长度单位：

px：像素，最常用
em：其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font-size的参考对象为父元素文本font-size）
rem：参考对象为根元素<html>的font-size
- 绝对长度单位：pt（点）

2.5 font-famliy设置中文字体时使用Unicode编码更甚于英文名称，兼容性更好

2.6 font-weight

值400等于normal，700等于bold

2.7 font综和性写法

font: font-style font-weight font-size/line-height font-family;
举例：
font: normal 400 12px/26px "微软雅黑"
必须有font-size（字号）和font-family（字体）属性值，其他可以省略
font: 14px "微软雅黑"

2.8 颜色十六进制

#rrggbb：按顺序前两位、中间两位、最后两位分别表示红绿蓝，范围是00～FF，最浅到最深，混合出来的颜色，因此#FF0000表示纯红色（红色100%）
三个区域内的两个值两两相同的话就可以只简写以为，如上面的红色可以写成#F00

2.9 颜色RGB代码

color:rgb(red,green,blue)：取值范围是255～0 相当于100%～0% （最大值～最小值）
rgb(255,0,0)等于rgb(100%,0%,0%)等于#FF0000

2.10 行间距

行高测量

line1.png
line2.png
行高默认是文字本身的高度，设置成文字加上上下边距等于盒子高度的话就能使得文字垂直居中。

属性值单位px和em用得比较多。一般比字号大7、8像素比较合适
比如字号16px，line-height: 24px

2.11 装饰线text-decoration

属性值有：

2.12 emmer语法小技巧

2.13 复合选择器

2.14 标签显示模式

注意：h、p、dt标签内不能放块级元素，它们都是文字类块级标签*

2.15 background

body{
    height:3000px;
    overflow:auto;
    background-image:url(images/bg.jpg);
    background-repeat:no-repeat;
    background-positon:center top;
    background-attachment: fixed;
}

2.16 CSS三大特性

2.17 CSS盒子模型（Box Model）

但是如果子级盒子有设置浮动的话，就不会产生嵌套外边距塌陷

2.18 photoshop使用小技巧

2.19 CSS书写规范

/*选择器后加一个空格*/
.selecter {
    width: 200px;/*属性名后加一个空格*/
    height: 100px;/*属性定义都另起一行，不要写在一行*/
}
/*并集选择器独占一行*/
.selecter,
goods,
page {
}
/*选择器的嵌套不要大于三级*/

2.20 浮动float-浮漏特口诀

重要的导航栏都要采取li包含a的结构，不然搜索引擎会觉得有堆砌关键字的问题，从而影响网站排名

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {/*ie6\7专属*/
    *zoom: 1;
}

（4）使用双伪元素：同样给浮动元素的父级盒子加上我们预先定义好的clearfix类

.clearfix:before,.clearfix:after { 
    content: "";
    display: table; 
}
.clearfix:after {
   clear: both;
}
.clearfix {
    *zoom: 1;
}

优点：相较伪元素代码更简洁

切图插件：Cutterman

2.21 CSS书写顺序

建议遵循以下顺序：
-布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
-自身属性：width / height / margin / padding / border / background
-文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
-其他属性：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

2.22 定位（position）

三种布局机制的上下顺序：
标准流在最底层（海底）----浮动盒子在中间层（海面）----定位盒子上最上层（天空）
定位 = 定位模式 + 边偏移（方位名词属性）
边偏移常用属性值：

定位口诀 —— 子绝父相 —— 子级是绝对定位，父级要用相对定位。

结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。
应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。

z-index 的特性如下：
（1） 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
（2）如果属性值相同，则按照书写顺序，后来居上；

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

display 是 显示模式， 可以改变显示模式有以下方式:

所以， 一个行内的盒子，如果设置了浮动/固定定位/绝对定位，那么不用转换，就可以给这个盒子直接设置宽度和高度等。另外行内块元素的默认宽度就是内容宽度，没有内容就无法显示。

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）

2.23 圆角矩形设置4个角

圆角矩形可以为4个角分别设置圆度， 但是是有顺序的，border后面的属性名记住先写上下，再写左右，然后从左上角开始顺时针按顺序来写，养成习惯

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

我们也可以按照简写的形式，然后从左上角开始顺时针分别写每个角的数值，具体如下:

border-radius: 左上角 右上角 右下角 左下角;

实现贴合版心的固定定位的一个小技巧:

dingwei.png

2.24 隐藏和显示元素使用display和visibility的区别

2.25 用户界面样式

input, textarea {
    outline: none;
}

2.25 vertical-align 垂直对齐

属性值有: baseline(默认) | middle | top | bottom
只针对行内元素或行内块元素，在块级元素如div内设置无效。通常（特别是行内块元素）用来控制图片/表单与文字的对齐。

默认基线对齐 
<div><!--默认是基线对准-->
    <img src="xxx.png" alt="" style="vertical-align: baseline"/>
    我是文字
</div>
<div><!--中线对准最常用-->
    <input type="text" style="vertical-align: middle"/>
    我是文字
</div>

由于图片默认是基线对齐，放在盒子中会撑开盒子底部（给基线之外的文字预留空间），因此用vertical-align可以解决这个bug（方案一，常用）。或者让图片转为块级元素也可以解决 img {display: blockl}（方案二）

2.26 文字溢出省略号显示（三步曲）

（1）先强制文本一行显示white-space: nowrap;
（2）超出的部分隐藏overflow: hidden;
（3）用省略号代替超出的部分文字text-overflow: ellipsis;

2.27 CSS精灵技术（sprite）

为了有效减少服务器接收和发送请求的次数，提高页面的加载速度
写背景position样式时建议用Fireworks工具，比PS方便

2.28 CSS滑动门技术

特殊形状的背景图能够自由拉伸滑动，以适应元素内部不固定宽度的文本内容
一般经典布局

<li>
    <a href="#">/*a设置左侧背景*/
        <span></span>/*span设置左侧背景*/
    </a>
</li>

a {
    /*因为我们是滑动门，左右推拉跟文字内容多少有关系，此时需要用文字撑开盒子， 就要用到行内块*/
    display: inline-block;
    height: 33px;
    background: url(images/to.png) no-repeat;
    margin: 10px 20px;
    padding-left: 15px;
    color: #fff;
}
a span {
     display: inline-block;
     height: 33px;
     /*一定注意 span 需要背景图片 右对齐*/
     background: url(images/to.png) no-repeat right;
     padding-right: 15px;
}

2.29 margin 负值

消除相邻盒子的边框叠加

div li{//淘宝做法，浮动的盒子紧贴在一起，前面的盒子往左移1px，后面的盒子也会移贴近它然后再左移1px
    float: left;
    margin-left: -1px;
    margin-top: -1px;
    border: 1px solid #ccc
}
div li:hover {
    position: relative;//定位的盒子层级默认是在标准流和浮动层上面的，所以因为margin是负值，li的边框原本是会被后面一个li的边框挡住（右边的那条），但给鼠标移上那个层加上定位后它就变成最上显示了
    border: 1px solid #F00;
    //如果li本身就有定位属性，那么给鼠标经过的CSS加上z-index就可以了
    /*z-index: 1;*/
}

2.30 CSS 三角形

如果一个盒子宽高都是0，那给单边边框颜色就可以模拟三角形效果

p {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px;
    boder-color: #F40 transparent transparent transparent;
    /*以下样式照顾低版本浏览器*/
    font-size: 0;
    line-height: 0;
}
上一篇下一篇

猜你喜欢

热点阅读