HTML:是一种超文本标记语言,Hyper Text Markup Language的简写
标签(tag)和属性(attribute)
元素(亦称标签)
块元素:h1~h6,p,div,ul,li,ol,dl,dt,dd,table,tr,th,td
内联元素(行内元素):a,span,strong,em,img,form, input, select, option, textarea, label, td, th, font,b,i(后面三个现不常用)
空元素:br hr <!----> meta link
内联元素转块元素:display:block 块元素转内联元素:display:inline 内块特性兼有元素:display:inline-block 不显示(隐藏):display:none
常用属性及属性值
id:id
class:classname
style:style_definition
title: text
target:_blank
colspan rowspan cellspacing cellpadding
name color type src href background boder width height
超链接a
<a href="http://...../">网址链接</a> 路径:../一层../../两层 target:_blank新窗口打开 锚点(anchor)<a href="#id">网址链接</a> <p id="id"> title=""//鼠标指向时的内容
图片(img)
<img src="url" alt="" title="" usemap="#aaa" > 内联元素,但可以设置width height <map name="aaa";> <area= shape="rect" coords="10,12,456,478" href="url"> </map>
表格(table)
table tr td th border //默认不出现 cellspacing//单元格之间的边距,默认有,一般设为0; cellpadding//单元格内距,默认有,一般设为0; colspan//横向合并,注意删掉多余的横向后面的td,以免多出 rowspan//纵向合并,注意删掉多余的纵向向后面的td,以免多出 width height可单独给table/td设置(tr的哪一行在第一个td里设置)
表单(form)
<form action="" method="get/post" enctype=" multipart/form-data" > <input type="text" 单行文本框> 'password' 密码 'radio' 单选按钮 //checked默认选中,name一致限定单选 'checkbox' 复选框 //checked默认选中 'file' 文件,图片等上传 'hidden' 隐藏表单 'submit' 提交//js:form.submit="" 'reset' 重置 'button' 按钮 'select' 下拉选择框 //multiple多选 'option' select的选项//selected默认选中 'textarea' 文本域(多行文本框) 这些都是行内元素,如要换行记得加<br> label标签把input和对应文字括起来可以起到点击文字选中input的效果 以上也可添加disabled来限制该表单不可用
CSS:层叠样式表
css基本语法
选择器,以及一条或多条声明,多条声明间用分号隔开
声明由属性及其属性值组成,用冒号(:)赋值,多个属性值间用空格隔开( )
selector {declaration1; declaration2; ... declarationN }css注释用/* */
css引入方式
1,行内引用:style="property:value;..." 2,内部引用:<style> </> 3,外部引用:<link href="../../****.css" type="text/css" rel="stylesheet"> 权重:行内引用>>内部引用>>外部引用
css选择器
1,#id(唯一名)<<.classname(类名)<<tag(标签)<<*(通配符)
2,群组选择器:多个ID,classname,tag间用逗号(,)相连,一起调用选择
3,层次选择器:ID/classname/tag 间用空格( )相连,则调用前值得子元素相应的选择器,div p调用div 下的p
常用的字体属性及值
font-size 字号 //一般设为双数,8px,20px,等等 font-weight 字重(粗细)//normal不加粗,bold加粗,可以加具体数字(px)印刷行业的叫法 font-family 字体//"宋体" "微软雅黑" "楷体" 中文名字体得加引号,用外国名不加 font-style 字体倾斜方式//normal 不倾斜,italic oblique,两种角度不一样的倾斜 text-indent 首行缩进//2px,具体值,不管字号大小;2em,2字符,按字号大小来; text-decoration 文本修饰(各种线)//none,不要任何线,一般用来清除a链接的下划线 //underline,下划线 //line-through,中划线(删除线) //overline,上浮线 text-align //字体对齐方式,center用的多 color 字体颜色 line-hegiht 行高//当line-height和height设置的值一致时,字体上下居中 background 字体所在的背景设置 height 字体所在背景的高 margin-bottom//下边距,整段字体距下一段的距离 border-bottom//下边框,整段字体的下边的框线
盒模型
给元素(一般为块元素)添加宽(width)/高(height)/边框(border)/背景(background)等以便操作,因而称为盒模型
border(边框),值组成:线的粗细/虚实/颜色/位置 border:2px #f00 solid/dashed/dotted border:none ; 也可拆分四边不同设置: border-left:2px solid #00f; border-top:3px dashed #f00; border-right:1px dotted #ff0; border-bottom:4px solid #f0f;
background(背景),可添加背景色,或添加背景图片 background:#f00 url("url") no-repeat 10px 20px ; background:url("url") no-repeat 10px 20px,url("...") on-repeat 30px 40px ;//多背景图中间用逗号(,)隔开 背景也可以单独设置:background-color:rgba(255,0,0,.7)//后面的小数是设置透明度,颜色的设置方式是rgba的 background-image:url("urlvalue")//可配合opacity使用个图片加透明度 background-repeat:no-repeat/repeat/repeat-x/repeat-y/space //图片展开方式,一般不平铺 background-position:x y//图片从哪开始展开,x y可以是具体坐标点,也可以设置为left,center,right,top,bottom等
padding(内填充):元素里面实际可用空间和其边框间的距离,算在元素的占位里,可以设置大小,单位px padding:20px 30px 40px 50px //注意浏览器读取顺序是上>右>下>左 也可单独设置:padding-top: padding-right: padding-bottom: padding-left:
margin(外间距),元素距其他元素边框的距离,不算在元素占位里//margin距离很烦有时候是离同级元素距离,有时候是距父级元素的,有时候着父级元素一起动 margin :20px 10px 20px 5px //同padding一样注意浏览器读取顺序是上>右>下>左 margin:20px 10px//则浏览器会读取为上下都为20px左右为10px 同样可以单独设置,就不撤了,注意margin的auto,只能设置在水平位置居中,即margin:0px auto
几个常见的none,auto,normal
width:auto height:auto display:none border:none//可单独设置某一边 text-decoration:none margin:none//不是0,可单独设置某一边 margin:auto//水平居中 list-style:none //不要<li>前的黑点 font-weight:normal //不加粗
布局
float(浮动):一般设置<div>做盒子来切开页面各部分,再利用float(浮动)让div自己拼起来
float:left//左浮动,最常用,让div尽力地往左去挤,若不然则下来往左挤
float:right//右浮动,同上
//注意没有float:top和float:bottom,因为默认浏览器页面是没有底的,可以不断往下,只要你愿意一直翻可到内存撑不住为止
float会使元素脱离文档流,若子元素设置得float,而其父元素或其他同级元素没有,则会把父元素的部分(具体得开子元素的大小)盖住(隐藏)
行内元素设置float会自动为其加上块元素特性,相当于加了个display:block
使父元素脱离隐藏的方法: 设置父元素的高度 给父元素加上:overflow:hidden属性 再已浮动的子元素块后面加上一个空的子<div></div>并为其加上clear:both属性 overflow:auto,如果内容溢出元素框时自动加上滚动条, hidden,父元素溢出隐藏,内容会被修剪,并且其余内容是不可见的。 visible,内容不会被修剪,会呈现在元素框之外 scroll,元素框时自动加上滚动条,
position(定位):可以自由定义元素在任何位置(无脑定位),定位点事元素框的左上角点
相对定位:relative,相对于它本该在的位置移到定位点,原来的位置也留着 position:relative; left:20px;右移20px //只设置两个移动就行,位置就定了 top:10px;下移10px right:10px;左移20px bottom:20px;上移20px 绝对定位:absolute,按设置的位置坐标点移过去,脱离文档流,不占原位置,坐标点是按设置过的parents定的,若父一级没有,就再往上一级找,直到body position:absolute;left:20px;往右20px定 //只设置两个移动就行,位置就定了 top:10px;下10px定 right:10px;往左20px定 bottom:20px;往上20px定 //绝对定位容易被挤在下面被隐藏,可配合z-index设置层级 //以上relative,absolute的定位值都可设为负数,往返方向走 小广告:fixed,想对Window不动,固定在窗口的某一位置