css
<div class="border-item" style="border-style:none"> none: 无轮廓。border-color与border-width将被忽略 </div>
<div class="border-item" style="border-style:hidden"> hidden: 隐藏边框。IE7及以下尚不支持 </div>
<div class="border-item" style="border-style:dotted"> dotted: 点状轮廓。IE6下显示为dashed效果 </div>
<div class="border-item" style="border-style:dashed"> dashed: 虚线轮廓。 </div>
<div class="border-item" style="border-style:solid"> solid: 实线轮廓 </div>
<div class="border-item" style="border-style:double"> double: 双线轮廓。两条单线与其间隔的和等于指定的border-width值</div>
<div class="border-item" style="border-style:groove"> groove: 3D凹槽轮廓。 </div>
<div class="border-item" style="border-style:ridge"> ridge: 3D凸槽轮廓。 </div>
<div class="border-item" style="border-style:inset"> inset: 3D凹边轮廓。 </div>
<div class="border-item" style="border-style:outset"> outset: 3D凸边轮廓。 </div>
HTML选择器(标签选择器): 标签名{css code} div{css code} ID选择器: #ID名{css code} #header{css code} class选择器: .class名{css code} .box{css code} 关联选择器: selector1 selector2{css code} 组合选择器: selector1,selector2{css code} 子类选择器: selector1>selector2{css code} 伪类选择器: a:link{css code}未访问链接 a:hover{css code}鼠标划过链接 a:active{css code}鼠标按下时 a:visited{cdd code}已经访问过的
font-family:字体1,字体2 font-size:字体大小 font-weight:字体加粗 bold | normal | lighter font-style:字体风格 italic | normal | oblique font-variant:字体变形 small-caps|normal font:[字体风格][字体加粗][字体变形]<字体大小>[/行高]<字体族科>
background-color:颜色 #ffffff background-image:图片 url(../images/icon.png) background-repeat:重复方式 no-repeat | repeat-x | repeat-y | repeat background-attachment:背景附件 scroll | fixed background-position:位置 left|center|right top|center|bottom background:<color>|<image> [repeat][attachment][position]
text-align:left | center | right | justify(两端对齐) text-decoration:文字修饰 underline 下划线 overline 上划线 line-through 删除线 none 没有线 letter-spacing:字母间隔 color:颜色 word-spacing:词的间隔(通过空格识别) text-indent:文本首行缩进 line-height:行高 white-space:nowrap 强制不换行 word-wrap:break-word;word-break:normal 自动换行
border-color:颜色 border-style:风格 solid:实线 dashed:虚线 dotted:点线 groove:巢状线 ridge:脊线 double:双实线 inset:内嵌效果 outset:外凸效果 border-width:宽度 border-radius:圆角 border:width color style
margin-top: margin-left: margin-right: margin-bottom: margin:上下左右 margin:上下 左右 margin:上 左右 下 margin:上 右 下 左 padding:类似margin 盒子的总宽:width + border + padding 盒子的总高:height + border + padding 盒子居中: 设置属性:margin:0 auto;
position:定位 absolute:绝对定位 ,默认基于body定位,可以同relative更改定位点 relative:相对定位,也可以用作设置定位点 fixed:固定定位 static:静态定位(默认) 定位需配合一下属性使用: top left right bottom z-index:显示层级调整
display:显示状态 none:不显示(不占位) block:转换为块级元素 inline:转换为行级元素 inline-block:转换为行内块级元素 visibility:元素显示状态 inherit:继承(默认) hidden:隐藏 visible:显示可见
overflow: hidden:隐藏 visible:强制显示 scroll:出现滚动条 auto:自动
float: left right 特性: 设置浮动 脱离普通文档流 浮动的元素都会变为块级元素 如果不设置宽度,会尽可能的窄 属性值:left right clear:清除浮动 left right both
鼠标光标
<div class="cursor-item" style="cursor:auto"> auto</div>
<div class="cursor-item" style="cursor:default">default </div>
<div class="cursor-item" style="cursor:none "> none</div>
<div class="cursor-item" style="cursor:context-menu">context-menu </div>
<div class="cursor-item" style="cursor:help "> help</div>
<div class="cursor-item" style="cursor:pointer">pointer</div>
<div class="cursor-item" style="cursor:progress "> progress</div>
<div class="cursor-item" style="cursor:wait "> wait</div>
<div class="cursor-item" style="cursor:cell "> cell</div>
<div class="cursor-item" style="cursor:crosshair">crosshair </div>
<div class="cursor-item" style="cursor:text "> text</div>
<div class="cursor-item" style="cursor:vertical-text">vertical-text </div>
<div class="cursor-item" style="cursor:alias ">alias </div>
<div class="cursor-item" style="cursor:copy "> copy</div>
<div class="cursor-item" style="cursor:move ">move </div>
<div class="cursor-item" style="cursor:no-drop ">no-drop </div>
<div class="cursor-item" style="cursor:not-allowed">not-allowed </div>
<div class="cursor-item" style="cursor:e-resize ">e-resize </div>
<div class="cursor-item" style="cursor:n-resize ">n-resize </div>
<div class="cursor-item" style="cursor:ne-resize ">ne-resize </div>
<div class="cursor-item" style="cursor:nw-resize ">nw-resize </div>
<div class="cursor-item" style="cursor:s-resize "> s-resize</div>
<div class="cursor-item" style="cursor:se-resize ">se-resize </div>
<div class="cursor-item" style="cursor:sw-resize ">sw-resize </div>
<div class="cursor-item" style="cursor:w-resize ">w-resize </div>
<div class="cursor-item" style="cursor:ew-resize ">ew-resize </div>
<div class="cursor-item" style="cursor:ns-resize "> ns-resize</div>
<div class="cursor-item" style="cursor:nesw-resize "> nesw-resize</div>
<div class="cursor-item" style="cursor:nwse-resize ">nwse-resize</div>
<div class="cursor-item" style="cursor:col-resize "> col-resize </div>
<div class="cursor-item" style="cursor:row-resize ">row-resize </div>
<div class="cursor-item" style="cursor:all-scroll">all-scroll </div>
html整体结构
<!DOCTYPE html> <html> <head> <title>标题</title> <meta charset="utf-8"/> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="keywords" content="8-12个以英文逗号分隔的单词或者词语"/> <meta name="description" content="80字以内的一段话,与网站内容有关"/> <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"/> <meta name="author" name="author"/> <meta name="copyright" content="2008-2015版权所有"/> <meta http-equiv="refresh" content="3;url=https://www.baidu.com/"/> <base href="http://www.baidu.com" target="_blank"> <link rel="stylesheet" type="text/css" href="css.css"> <script type="text/javascript" src="js.js"></script> </head> <boyd> </boyd> </html>
格式标签:
hr:水平线 br:换行 p:段落 pre:按照原文输出,不支持标签直接输出 center:居中 ol:有序列表 ul:无序列表 li:列表中的项目
文本标签
u:下划线 i:斜体 b:粗体 s:中划线 em:斜体(强调) strong:粗体(强调) big:大的 small:小的 sub:下标 sup:上标 tt:打印机字体 cite:牵引 h1-h6:标题 font=>color,size=1-7:字体设置
表格标签
结构 table=>caption+tr=>td|th table:表格 width:宽度 height:高度 border:边框 bgcolor:背景颜色 background:背景图片 cellspacing:单元格间距(外间距) cellpadding:单元格与内容间距(内间距) align:当对于外边的水平对齐方式 caption:表格标题 tr height:高度 bgcolor:背景颜色 align:水平对齐方式 left|center|right valign:垂直对齐方式 top|middle|bottom td|th width:宽度 height:高度 bgcolor:背景颜色 align:水平对齐方式 left|center|right valign:垂直对齐方式 top|middle|bottom colspan:合并列 rowspan:合并行 注意:tr没有宽度
a标签
a href:跳转的url地址 target:打开方式 _self|_blank|_top|_parent|framename(自定义) title:鼠标停留时的提示文字 name:名字(定义锚点时配合#用)
img标签
img src:图片的url地址 width:宽度 height:高度 border:边框 alt:当图片不正常显示时的代替文字
form表单相关标签
结构: form=>input|select=>option|textarea form action:数据接受的url文件地址 method:提交的方式 get|post enctype="multipart/form-data" //上传文件时定义 input type:类型 name:名字 value:值 size:大小(可以设置text框的长度) disabled:禁止(无值属性) checked:选中(无值属性) readonly:只读(无值属性) placeholder:提示文字(html5) 其中type属性的值: text:文本框 password:密码框 radio:单选框 同一组radio的name值必须相同 checkbox:复选框 name的值后面要加[] submit:提交按钮 有提交功能 button:普通按钮 没有提交功能 image:图片按钮 有提交功能 reset:重置按钮 file:文件域 hidden:隐藏域 传递不让用户看见的数据 email:邮箱 (html5) select:下拉框 name:名字 size:显示的选项数量 multiple:设置可以多选(无值属性) disabled:禁止(无值属性) option:选项 value:值 disabled:禁止(无值属性) selected:选中(无值属性) textarea:多行文本域 name:名字 cols:列数 rows:行数 disabled:禁止(无值属性) readonly:只读(无值属性) maxlength:最大可输入长度
frameset框架
结构: frameset=>frame frameset cols:分列的定义 可以用百分比或者像素,值用英文的逗号隔开(,) *表示剩下的所有 rows:分行的定义 border:边框 frameborder:是否显示边框 yes|no frame href:显示的页面url地址 name:名字 scrolling:是否显示滚动条 yes|no noresize:禁止拖动 注意事项:frameset不能和body标签一起使用。