html前端开发的20个知识点（个人建站总结出来的）
2015-06-12 23:41
706 查看
这是我自己平时在建站的时候，遇到的一些小技巧和重要的知识点，分享给大家
1.盒子的border 3要素：框形色
2.padding的颜色就是背景色，且是向外扩张
3.利用margin auto完成首页居中
4.上下相邻的普通元素（有的div设置了浮动，那就不是普通元素），上下边距，并非简单的相加，而是取其中较大的边距值，这种现象叫做
margin重叠
5.盒子模型是块状（div）布局分块用，span是内联 选择文字用
6.text-indent：20px;缩进20像素 ********
text-decoration:line-through;（删除线)
leteter-spacing:20px;(文字之间的距离)
line-height:(行高)
font-family:(字体)'SimHei'(黑体)
字体控制技巧：顺序之分
font:italic bold 23px/46px "SimHei";
style weight size height family
风格 粗细 大小 行高 字体
sans-serif 无衬线，seirf 有衬线（新宋体）
7.设置背景图片
background-image: url(small.jpg)
background-repeat: repeat-x/y/no-repeat;
background-attachment: fixed(固定); //相对于浏览器固定于一个位置，随着页面的滑动而滑动
8.css选择器：id选择器 class选择器 标签选择器（如P标签，div标签） 派生选择器（元素之间的上下级关系来声明 伪类选择器 通配选择
器
9.CSS引入的4种方式
1）外部链接一个CSS文件，我们在HTML头部分表明：
<link href="css/my.css" rel="stylesheet" type="text/css"/>
2)头部直接写入css：<style type="text/css"> div{margin:0;padding:0;border:1px solid red;}</style>
3)外接多个css文件时:<style type="text/css"> @import url(my.css)<style>
4)直接在html标签里写入对这个标签的CSS控制，如：<div style="border:1px solid red;">测试信息</div>
第二个可以声明class 第三个 用float 浮动
10.插入图片 <img src="juhua.jpg" alt="花图" title="花图" /> 34
搜索引擎用， 图片的文字说明
11.去除li小黑点 list-style-type:none;
初始化css后，写li,并用背景图片+padding,来完成li小图标的效果，且达到各浏览器兼容 36
12.在页面内添加3个锚点，并建立3个链接
<a href="31.anchor.html#p1">p1锚点</a>
<a href="31.anchor.html#p2">p2锚点</a>
<a href="31.anchor.html#p3">p3锚点</a>
<a name="p1"></a>
<p>p1</p>
<a name="p2"></a>
<p>p2</p>
<a name="p3"></a>
<p>p3</p>
13.CSS允许我们针对A便签的4种状态设置各自的CSS特性，叫做CSS伪类
a:link{color:gray;}
a:visited{color:orange;}
a:hover{color:purple;}
a:active{color:black;}
注意：顺序是lvha
active一般不必写
a:link一般简写成a:
字符实体 在html开发中，有一些字符，不适于直接写出，
如 ><"¥©
> < " RMB 商标
14.css画圆角 border-radius:15px;(半径)
px： width:300px;
heigth:300px;
border:1px solid red;
border-radius:150px;
(一个半径为150px的圆)
15overflow溢出处理:
overflow:visible;/auto;/hidden;/scroll;
16表单 ：
在用户注册，在线报名等场合时，需要把用户的信息，填写并提交，这是要用到表单来收集用户的信息
<form action="http://www.baidu.com" method="post">这里插入以下的填写信息</form>
用户名：<input type="text" name="usename" />
密码：<input type="password" name="password" />
性别:男:<input type="radio" name="gender" value="男" />
女:<input type="radio" name="gender" value="女" />
爱好： 篮球<input type="checkbox" name="hobby" value="篮球" />
足球<input type="checkbox" name="hobby" value="足球" />
台球<input type="checkbox" name="hobby" value="台球" />
排球<input type="checkbox" name="hobby" value="排球" />
学历：<select name="xueli">
<option value="请选择">请选择</option>
<option value="大学">大学</option>
<option value="高中">高中</option>
<option value="初中">初中</option>
上传头像：<input type="file" name="pic" />
17.块级元素：就是一个方块，像段落一样，默认占据一行出现；
18.内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。
19.一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内
联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示
，而且其后的无素也需另起一行进行显示。
20.相同的元素，如li，在不同的浏览器下，显示的效果稍有不同，是因为，不同的浏览器对各元素的margin，border，font-size
等略有不同，如果想杜绝这种情况，我们通过css强制让所有元素的属性值都一样，这样，浏览器显示就一致了，减少了不兼容情况
的发生，这个过程叫做css初始化
1.盒子的border 3要素：框形色
2.padding的颜色就是背景色，且是向外扩张
3.利用margin auto完成首页居中
4.上下相邻的普通元素（有的div设置了浮动，那就不是普通元素），上下边距，并非简单的相加，而是取其中较大的边距值，这种现象叫做
margin重叠
5.盒子模型是块状（div）布局分块用，span是内联 选择文字用
6.text-indent：20px;缩进20像素 ********
text-decoration:line-through;（删除线)
leteter-spacing:20px;(文字之间的距离)
line-height:(行高)
font-family:(字体)'SimHei'(黑体)
字体控制技巧：顺序之分
font:italic bold 23px/46px "SimHei";
style weight size height family
风格 粗细 大小 行高 字体
sans-serif 无衬线，seirf 有衬线（新宋体）
7.设置背景图片
background-image: url(small.jpg)
background-repeat: repeat-x/y/no-repeat;
background-attachment: fixed(固定); //相对于浏览器固定于一个位置，随着页面的滑动而滑动
8.css选择器：id选择器 class选择器 标签选择器（如P标签，div标签） 派生选择器（元素之间的上下级关系来声明 伪类选择器 通配选择
器
9.CSS引入的4种方式
1）外部链接一个CSS文件，我们在HTML头部分表明：
<link href="css/my.css" rel="stylesheet" type="text/css"/>
2)头部直接写入css：<style type="text/css"> div{margin:0;padding:0;border:1px solid red;}</style>
3)外接多个css文件时:<style type="text/css"> @import url(my.css)<style>
4)直接在html标签里写入对这个标签的CSS控制，如：<div style="border:1px solid red;">测试信息</div>
第二个可以声明class 第三个 用float 浮动
10.插入图片 <img src="juhua.jpg" alt="花图" title="花图" /> 34
搜索引擎用， 图片的文字说明
11.去除li小黑点 list-style-type:none;
初始化css后，写li,并用背景图片+padding,来完成li小图标的效果，且达到各浏览器兼容 36
12.在页面内添加3个锚点，并建立3个链接
<a href="31.anchor.html#p1">p1锚点</a>
<a href="31.anchor.html#p2">p2锚点</a>
<a href="31.anchor.html#p3">p3锚点</a>
<a name="p1"></a>
<p>p1</p>
<a name="p2"></a>
<p>p2</p>
<a name="p3"></a>
<p>p3</p>
13.CSS允许我们针对A便签的4种状态设置各自的CSS特性，叫做CSS伪类
a:link{color:gray;}
a:visited{color:orange;}
a:hover{color:purple;}
a:active{color:black;}
注意：顺序是lvha
active一般不必写
a:link一般简写成a:
字符实体 在html开发中，有一些字符，不适于直接写出，
如 ><"¥©
> < " RMB 商标
14.css画圆角 border-radius:15px;(半径)
px： width:300px;
heigth:300px;
border:1px solid red;
border-radius:150px;
(一个半径为150px的圆)
15overflow溢出处理:
overflow:visible;/auto;/hidden;/scroll;
16表单 ：
在用户注册，在线报名等场合时，需要把用户的信息，填写并提交，这是要用到表单来收集用户的信息
<form action="http://www.baidu.com" method="post">这里插入以下的填写信息</form>
用户名：<input type="text" name="usename" />
密码：<input type="password" name="password" />
性别:男:<input type="radio" name="gender" value="男" />
女:<input type="radio" name="gender" value="女" />
爱好： 篮球<input type="checkbox" name="hobby" value="篮球" />
足球<input type="checkbox" name="hobby" value="足球" />
台球<input type="checkbox" name="hobby" value="台球" />
排球<input type="checkbox" name="hobby" value="排球" />
学历：<select name="xueli">
<option value="请选择">请选择</option>
<option value="大学">大学</option>
<option value="高中">高中</option>
<option value="初中">初中</option>
上传头像：<input type="file" name="pic" />
17.块级元素：就是一个方块，像段落一样，默认占据一行出现；
18.内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。
19.一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内
联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示
，而且其后的无素也需另起一行进行显示。
20.相同的元素，如li，在不同的浏览器下，显示的效果稍有不同，是因为，不同的浏览器对各元素的margin，border，font-size
等略有不同，如果想杜绝这种情况，我们通过css强制让所有元素的属性值都一样，这样，浏览器显示就一致了，减少了不兼容情况
的发生，这个过程叫做css初始化
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Flex设置LinkButton的背景色有思路有源码
- Lua中关于元方法的一些知识点小结
- PowerShell小技巧之配置机器的静态IP
- Powershell小技巧之找出最大最小值
- PowerShell入门教程之高效使用PowerShell交互式运行环境的几个小技巧
- Powershell小技巧--将文件夹中的大文件分成若干份
- PowerShell小技巧之启动远程桌面连接
- PowerShell小技巧之添加远程防火墙规则
- Powershell小技巧之获取MAC地址
- Powershell小技巧之使用Get-ChildItem得到指定扩展名文件
- Powershell小技巧之复合筛选
- PowerShell小技巧之同时使用可选强制参数
- firefox下rowspan+border+border-collapse的bug
- css下margin、padding、border、background和font缩写示例
- DIV border边框显示不完全问题的解决方法
- 检测SqlServer数据库是否能连接的小技巧
- 几个比较经典常用的jQuery小技巧
- PHP 日常开发小技巧
- 让的PHP代码飞起来的40条小技巧(提升php效率)
- DevExpress设置FocusedNode背景色的方法