自学前端所有笔记

html介绍

html介绍
超文本标记语言，扩展名包括html和htm，文件名称区分大小写，标签名称不去别大小写，标签成对出现，属性前后无顺序，属性值要用单双引号引起来
注意：页面不支持空格和回车
注释：
<！ --注释-- >
基本标签
1.<！ DOCTYPE html>注记 翻译html，如果不写会不识别html5语法，会兼容低版本造成页面串行
2.< html>主标记 所有html代码都必须写在此标签里
3.< head>头部 定义窗体信息和外部引入文件
4.< body>身体 放置页面上显示的信息
5.< meta charset=“UTF-8”>修改字符集
iso8859-1 欧美字符集（默认）
gbk中文简体
big5繁体字
utf-8本地字符集
6.< title>Document窗体名称
7.< h1>~< h6>标题标记
8.< p>段落标签
9.< span>布局标签 行级元素，会同行显示
10.< div>布局标签 块级元素，会换行显示
块级元素和行级元素区别？
标签是否换行
块级：h1~h6,p,div
行级：span，a
空标签：img，meta，br，&nbsp

CSS介绍

层叠样式表，用来美化页面的，将表现与样式相分离，减少代码写作，提高浏览器加载速度
语法
1.行内样式（不建议）
< h1 style=“color:red”>< /h1>
2.内嵌样式
< style>
h1{color:red;font-size;“20px”}
< style>
基本选择器
1.*{}通配符选择器（所有标签）
2.h1{}标签选择器
3.#font{}id选择器 选择id属性 是唯一的
4…font{}类选择器 选择class属性 可以重复
字体样式
1.color字体颜色
单词：red
十六机制值：#0f0f0f #eee
色阶值：rgb（0，0，0） 0-255 r红色 g绿色 b蓝色
2.font-size字体大小
单位：像素px或百分比% 页面默认12-16px
3.font-weight字体加粗
100-900 页面默认400
4.font-style设置斜体
normal-默认 itatic-斜体
5.font-family字体样式
font-family：“宋体”，Anal 默认字体是宋体
6.word-spacing单词间距 单位：px或百分比%
7.letter-spacing字体间距 单位：px或百分比%
8.line-height行高 单位：px或百分比%
9.text-algin水平对齐
left左 right右 center中
10.vertical-algin垂直对齐
top上 bottom下 middle中
定义路径的标签
< a>超链接 href定义路径
< img>图片 src定义路径
png推地图 jpg静态图 gif动态图
定义路径
绝对路径
http：//www.baidu.com外网
file：D：//a/work.html本地
相对路径
相同文件夹 aa.html
子文件夹 ww.aa.html
不同文件夹 …/ww/aa.html
…/返回上一级文件夹

CSS属性

css属性
文本修饰
text-decoration文本修饰
none无线体 underline下划线 line-throgth删除线 overline上划线
尺寸
width宽高
height高度
边框
border-width 边框粗细 单位：像素px或百分比
border-color 边框颜色
border-style 边距样式
none无边距 solid实线 double双边线 dotted点线 dashed虚线
简写：border：1px solid red
方向：left左 right右 top上 bottom下 border-left
边距
margin 外面边距 单位：像素px或百分比
padding 内边距 单位：像素px或百分比
方向：left左 right右 top上 bottom下 margin-left padding-left
写作顺序：
margin：50px 四边边距
margin：50px 80px 上下 左右
margin：50px 80px 100px 上 左右 下
margin：50px 80px 100px 120px 上 右 下 左
盒模型
标准盒模型：填充（宽高）+内边距+外边距+边框
IE盒模型（IE低版本）：填充（宽高）+内边距+边框
去掉标签自带的间距值
*{margin:0px;padding:0px}
让块级元素水平居中
margin：0px auto；
让文字和图片居中
text-algin：center

列表

列表
有序列表
< ol>
< li>< li>
< li>< li>
< /ol>
无序列表
< ul>
< li>< li>
< li>< li>
< /ul>
列表样式
1.list-style-type设置列表图形
disc实心圆 circle空心圆
square： 实心方块(CSS1)
decimal： 阿拉伯数字(CSS1)
lower-roman： 小写罗马数字(CSS1)
upper-roman： 大写罗马数字(CSS1)
lower-alpha： 小写英文字母(CSS1)
upper-alpha： 大写英文字母(CSS1)
none： 不使用项目符号(CSS1)
2.list-style-position设置列表对齐方式
outside外对齐
inside内对齐
3.list-style-image:url（）列表图片

一级标题

浮动
1.float浮动
left左浮动 right右浮动
2.clear 清除浮动
left左浮动 right右浮动 both两边
3.overflow超出内容的显示方式
visible不剪切也不添加滚动条 hidden隐藏
auto添加滚动条 scroll总是添加滚动条