HTML和CSS基础笔记
HTML常用标签。CSS常用属性。常用的布局方法。
附件:
HTML和CSS基础笔记
HTML部分
DTD声明
1、渲染效果不同 2、javascript支持程度不同 3、省略的时候进行怪异模式
Html页面常用标签
文字版面标签
<p>段落 <br>换行 <center>居中 <pre>预览格式 <ul><li>无序列表 <ol><li>有序列表 <hr>水平分割线
超级链接
相对URL 绝对URL <a href="http://mail.163.com">163邮箱</a> <a href="http://i.baidu.com">百度个人</a> 属性：href,target(_self,_blank,_parent,top _name)
锚点
<a name="name">内容</a> <a href="#name">内容</a>//#代表本页面
邮箱
<a href="mailto:duanqibai@163.com?subject=test&test&cc=lywon@163.com">给我留言</a> 主题抄送
图像
<img src="URL" border=12 alt width="" height="" alt="说明文字" /> 指定宽高中一个时，等比例缩放
图像地图
图像分为多个部分，每个部分指向一个链接 map指定热点名称，usemap使用热点,area分割热点区域 <img src="logo.gif" border="0" usemap="mymap"/> <map name="mymap"> <area shape="rect" coords="0,0,50,50" href="URL" /> </map> shap可以为：rect矩形(指定热点矩形区域的对角线焦点起始位置)；circle圆形；poly多边形（分别指定顶点位置）
表格
<table align="left" border="1" width="" height="" > <tr><td></td></tr> <tr><td></td></tr> </table> 单元格、表格行、表 属性：border,width,height,align,cellspaceing(单元格距离),cellpadding(内容与单元格),bordercolor,bordercolor[light,dark](模仿投影选择border), 表格体 标题<caption>（table内部） 列标题<th>定义字段，单元格内容居中加粗显示，代替<td> tr，td属性 background,align,vlign,width,height,color,border,bordercolor 跨列与跨行：colspan,rowspan <thead><tbody><tfoot>各自包含<tr>使其语义化 此前操作的单元格的宽高设置会影响列行
Frame
窗口框架集,帧标签 <frameset rows="*,*,*"> <frame><frame></frame> </frameset> frameset属性：cols,rows[固定值，百分比，像素]以行列划分窗口 <frameset rows="*,*,*" border="0"> <frameset cols="*,*"> <frame src="http://www.baidu.com"><frame src="http://www.taobao.com"> </frameset> <frame src="http://zh.wikipedia.org"> </frameset> <noframe>你使用的浏览器不支持框架集，请使用其他浏览器</noframe>--提示用户浏览器不支持 <iframe src="URL" name="ID" id=""></iframe>放在body里使用，画中画的效果 其他属性：border[<1>,$Number],frameborder,noresize(调节窗口边框)，src,scrolling[no]framspacing 注意： 1、frame框架集之外不能添加任何东西，否则认为body！！body与frame不能共存 2、frame一般不用前台，前台用iframe 窗口链接实现同步 1、给各个框架指定一个name属性 2、利用框架链接target[_blank,_parent,_self<默认>，_top,框架集的name属性]指向框架
表单
交互界面的基础 <table border="1" width="500" align="cneter" > <form name="frm" action="login.php" target="_blank" title="this is a form test page"> <caption>表单的运用</caption> <tr> <th>文本域</th> <td><input type=“text” name="userID"></td> </tr> <tr> <th>密码域</th> <td><input type="password" name="passwd" size="20"></td> </tr> <tr> <td colspan="2" align="center" > <input type="submit" name="submit" /> <input type="button" value="清空" onlick=“document.frm.userID.value=''”> </td> </tr> </form> </tabel> form action默认当前URL ,用于提交内容给后台的处理程序的URL 各个input的name指定其容器 method[post|get]get将内容附加给URL后面,URL有长度限制，容易泄露密码，不建议使用；post target 提交后转到的窗口 title 用于鼠标放在元素上的时候显示的内容 enctype 指定浏览器上传表单数据时所用的编码方式，两个取值 application/x-www-form<默认值> multiple/data-form文件上传时采用 input属性 maxlength-最大长度 readonly 只读 type [text|password|submit|image|reset|button|checkbox|radio|hidden|file|] 按钮配合javascript才有效果 type=image 功能类似submit,而且会提交image的点击位置想x,y checkbox 复选框可以用数组的方式命名name如“case[]”,自动以数组提交；默认选上用checked radio-单选框,name相同为一个组只提交其中选中的一个,默认值用checked指定 <input type=radio name="sexy">男 <input type=radio name="sexy">女 <input type="radio" name="sexy">保密 file-上传文件，method必须为post,enctype必须为第二种 <input type="file" name="picture"> 列表 如果带有value提交值为value,否则提交<option>中的元素值,默认用selected属性 <select name="choice"> <option value="0">1</option> <option>2</option> <option>3</option> <option>4</option> </select> option加上属性multiple成为多选列表 隐藏域 <input type="hidden" name="ID" value="100" />//不会在 name value 默认初始值 <textarea>-多行文本输入标签 <textarea name="" cols="30" rows"40" > </texarea> <lable>--标签，为某个标签（ID）指定快捷键(accesskey) <label for="gn" accesskey="O">快捷键</label> //for跟某个标签的ID(需指定)，accesskey指定快捷键,用Alt+accesskey打开
CSS部分
CSS使用方法
作用：设置网页元素显示位置和格式，就是排版和交互
eg: p{
color:#ff0000;
background-color:yellow;
font-size:4px;
border:2px solid green;
text-align="center";
}
CSS的使用
任何标签都有的标准属性：class,id,name,style
CSS格式
选择器{属性：属性值；属性：属性值；...}
关于属性大小表示
颜色：#fff,#ffffff,rgb(1,2,3)，yellow|green
大小单位：px,em,pt,$Number%,pc,cm,mm,in
URL
注释 /*...*/---多行注释，注释之中不能子再包含注释
使用方法
1. 内联：任何一个标签内指定,style属性；使用灵活，独立性强，但不便于管理统一
eg:<b style="Ffont-style="italic"">内联标签</b>
2. 嵌入：头部设置整个页面的样式
eg: <style>
样式选择器{
属性：值；
属性：值；
}
</style>
3. 外部样式表:创建以.css结尾的独立文件,可以实现共享样式表
.css文件里这样写：样式选择器{
属性：值；
属性：值；
html文件link这样引用：<head><link rel="stylesheet" type="text/css" href="URL"></head>
4. 输入(导入)样式表：将一个样式文件输入到另一个样式表文件中,每个文件作为一个部分与其他组合导入到某个HTML文件，使得css文件的可重用率更高 @import url()
在样式表文件中导入
one.css
p{
font-size:20px;
}
two.css
p{
color:#6677ff;
}
three.css
p{
border:4px solid #aaeebb;
}
test.css
p{
background-color:#445566;
}
@import url(one.css)
@import url(two.css)
@import url(theree.css)
add.html
<head><link rel="stylesheet" type="text/css" href="test.css"></head>
<p> 输出样式表的实验</p>
或者在add.html中</style>标签中直接导入：
<style>@impor url(one.css)</style>
四中样式表的优先级(在浏览器中处理的先后):
内联的高于其它，其它的和加载的先后顺序有关，最终加载的样式最终表现
CSS选择器
格式selector{property:value;}中，selector为样式选择器
-
HTML选择器，以Html标签作为选择器,选择标签元素的所有内容
eg：div p{} -
类选择器：选择具有属性（class=“某个类名”）的所有标签元素，相当于给标签进行分类并给出类的名字，对同一类的标签进行选择
调用时用[tag].classname eg:style标签中p.content{};body中<p class="content"></p>
其中tag省略表示所有标签
一个标签可以指定多个类<p class="1 2 3">，一个类指定多个标签 -
ID选择器
一个标签元素指定一个ID,一个ID只能一个标签使用，即ID在一个HTML中唯一
使用：#id1{
color="#ffffff";
font-size=10px;
} -
关联选择器
div #one .two//在id为one的标签里class为two的div标签
根据层叠关系使用，由外到里，由左到右eg:div p #one .two{}
各关联用空格隔开 -
组合选择器
eg:div,p,#header{}
各个组合元素用“，”隔开，同时选择多个选择器，避免多次声明相同的内容 -
伪元素选择器
同一个Html元素下不同状态的区分,只有a和p可以使用【标签：为元素状态】
eg:
a:link 没有任何操作
a:hover 光标放在超链接文字
a:active 选择超链接
a:visited 已经访问过p:first-letter 段落首字母 p:first-line 段落首行使用：a.one:link
一般a:link,a:visited使用链接
样式的继承关系
内层继承外层
选择器优先级
eg:div p a.one#header:link,div p a.one.visited
关联>id>class>组合>Html-伪元素
CSS属性
字体
font-size 字号 [5cm | 20px | 2em | 50% | 4pt]
font-weight 字体加粗 [bold | xx]
font-family 字体 [serif,sans-arial,楷体，宋体]
font-style 风格 [italic | ]
font-variant 字体变形 [small-caps | ]
color 字体颜色
整合属性使用:
font:<font-style font-variant font-weight font-size lineheight fontfamily]
eg:
font:italic bold 20px serif,arial small-caps
文本
letter-spacing:-3px; 字符间距
text-align:left; 文本对齐
text-decoration:overline; 文本修饰 [line-through |overine|underline | none]
text-indent:.4; 文本缩进
text-transform:uppercase; 大小写转换 [lowercase | uppercase]
line-height:; 行高
text-align:; 水平排列
背景属性
background-color
background-image [url(logo.jpg)]
background-repeat [ repeat | no-repeat | repeat-x | repeat-y]//横纵重复；不重复；横向重复；纵向重复
background-attachment []
background-position [ left | right | center |top bottom | ]
整合属性
background: color url() repeat left center
向外裁剪指定的区域
一张图标划分为多个部分进行布局引用，减少访问次数
向外裁剪指定的区域
background-clip:
访问方法:
div {
width:100px;
height:100px;
background:url(logo.png) no-repeat
}
边框
border-style 边框样式 [solid dotted dashed solid double groove]
2个值指定(上下，左右),3个值(上、左右、下)或4个值指定（上、右、下、左），或分别指定border-top-style:solid;[top|bottom|left|right]
border-width:4px 9px
使用同上
border-color:red
使用同上
border整合使用：
eg：border:3px solid green;
border-left:3px dashed green;
border-top:3px dotted red;
鼠标光标属性
cursor改变鼠标放置在元素上时的形状
cursor:pointer; [pointer | help | wait(默认) | ]
列表样式
list-style-type [circle | square | none<通常设为这个，便于自己使用> | <以后为无序列表>decimal | lower |Roman]
list-style-image [url()]用图片做样式
list
DIV+CSS标准化布局
提高网页的搜索效率
无意义区块标签，便于css进行格式化
<div>默认换行，定义整块
<span>不换行，定义行内
盒子模型-适用于区块标签(div,span,h,p)
margin:border:padding:content//外边距，边框，填充，内容
margin-top,margin-bottom,margin-left,margin-right其他相同
使用：//宽高可调的居中
body{
height:50px;
widht:100%;
margin:0;
padding:100%;
}
定位属性：positon[relative | absolute],top,left,width,height,z-index
//是固定宽高页面居中
div{
width:300px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin-left:-150;
margin-top:-200;
}
//链接特效
a:hover{
position:relative;
left:1px;
top:1px;
}
z-index:$number指定层级，大的在上层，默认根据文档流确定z-index
display:区块显不显示,显示方式
display [none<关闭其和模型，不占用空间>|block<块状显示> | inline<行内显示>]
overflow--脱离文档流
//超出部分隐藏
overflow:hidden|scroll<超出部分滚动条>
width:40px;
height:40px;
visibility
float:区块浮动
绝对定位不是首选，布局适应窗口应该用浮动
脱离文档流，默认区块标签换行
根据文档顺序布局,相当于z-index=top
多个float区块相当与从左到右，从上到下依次摆放（左浮动）
eg:
float:righ 右浮动[left|right]
clear:行框和清除浮动
left|right|both 哪边不能包含浮动块
使用单独一个class使用clear,相当于文档中<br/>换行
.class{
clear:both
}
padding居中
两列浮动布局
#one{
float:left;
width:300px;
height:400px;
}
#two{
float:right;
width:300px;
height:400px;
}
三栏布局--盒子嵌套
.left{
float:left;
width:600px;
}
#one{
float:left;
width:300px;
height:400px;
}
#two{
float:right;
width:300px;
height:400px;
}
#three{
float:left;
width:300px;
height:400px;
}
<div class=left><#one><#two>
<#three>
多列浮动布局
页面居中布局
