web前端学习总结精华版文档格式.docx
《web前端学习总结精华版文档格式.docx》由会员分享，可在线阅读，更多相关《web前端学习总结精华版文档格式.docx（15页珍藏版）》请在冰豆网上搜索。
具有交互属性的按钮
18.私有样式
当前页面独立使用的样式，不具备公用性
19.水平（垂直）居中
在页面中的某个元素处于父级的上下或左右的相同距离
20.标准头（尾）
定义相同的页面头或尾元素集合
二.文本格式化
1.段落：
p
2.斜体：
address（联系信息）em（强调）i（突出不同）cite（引用）dfn（首次定义术语）
3.粗体：
strong（重要）b（提醒）
4.图片块：
figure
5.引述文段，段落缩进：
blockquote
6.背景颜色：
mark
7.虚线下划线：
abbr
8.上标下标：
sub/sup
9.下划线：
ins
10.删除线：
del（标记已删除内容）s（标记不准确内容）
11.等宽字体：
code
12.预格式化：
pre
13.字号减小，表注释：
small
14.时间：
time
15.换行：
br
16.html5定义区块：
headernavarticlesectionasidefooterdivspan
三.表单表格
1.<
formmethod="
post"
action="
show.php"
enctype="
multipart/form-data"
>
...<
/form>
2.表单元素的组织：
<
fieldset>
/fieldset>
3.创建各种框:
<
inputtype="
text"
id="
name"
name="
class="
zky"
required="
required"
placeholder="
请输入"
value="
http:
//"
autofocus="
autofocus"
size="
12"
maxlength="
20"
pattern="
.."
/>
注：
text→password/url/tel/email
Id:
为了让对应的标签识别，添加CSS
Name：
为了让服务器和脚本识别，通常和id设为一样
Size：
文本框大小
Maxlength：
能输入的最大字符数
Pattern：
正则表达式
4.添加标签：
labelfor="
idname"
…<
/label>
5.单（多）选按钮：
inputtupe="
radio/checkbox"
aaa"
beijing"
北京<
bbb"
shanghai"
上海<
注：
id各自唯一，name必须相同。
checked：
默认选择
6.下拉框：
selectid="
multiple="
multiple"
optionvalue="
/option>
chengdu"
成都<
/select>
size:
选择框的高度multiple：
允许多选selected：
默认选择用<
optgrouplabel="
东北"
对选择框进行分组
7.上传文件：
file"
5"
size：
输入路径和文件名的字段的宽度
8.禁用表单元素：
input…disabled>
9.创建提交按钮：
submit"
点此提交"
创建带图像的提交按钮：
buttontype="
image"
imgsrc="
1.jpg"
点击这里<
/button>
创建图像按钮：
alt="
提交"
src="
Submit→reset重置
10.文本区域：
textareaname="
30"
rows="
cols="
请在此输入字符<
/textarea>
11.表格:
table>
caption>
/caption>
thead>
tr>
thscope="
rowgroup"
..<
/th>
col"
/tr>
/thead>
tbody>
row"
tdrowspan="
3"
/td>
td>
/tbody>
/table>
四.文本格式化
1.{font：
（斜体粗体小型大写字母）字体大小（必有）行距字体集（必有）;
}
2.文本背景：
{background：
#focurl（1.jpg）repeat-xscroll00；
3.字间距：
word-spacing:
12px;
4.字偶距：
letter-spacing:
5.缩进增加：
text-indent:
6.小型大写字母:
font-variant:
small-caps;
7.文本对齐：
text-align:
left；
适用于block，inline-block
8.单词大小写:
text-transform:
capitalize（单词首字母大写）/uppercase（大写）/lowercase（小写）
9.文本上的线：
text-decoraion:
underline/overline/line-through;
11.空格：
white-space:
pre（显示所有空格回车）/nowrap（非断行空格）；
12.h3—16px;
h5—12px;
verdana,Geneva,sans-serif;
13.列表属性：
li{list-style:
url（1.jpg）insidesquare;
五.CSS布局
1.width：
不包括padding，border，margin；
max-width设置外围限制；
2.浮动：
float:
left;
清除浮动：
clear:
both;
3.设置边框：
border:
dotted4pxred;
（dotted点状、dashed虚线、solid实线）
4.使元素对齐：
vertical-align:
baseline/middle/text-bottom..
5.显示：
display:
black/inline/inline-block;
6.显示：
visibility:
visible/hiddle;
7.相对定位：
{position:
relative;
top:
5px;
}相对于该元素的原始位置
8.绝对定位：
absolute;
}相对于body或离他最近定位的祖先元素
9.三维位置：
{z-index:
50;
}越大的在最上面
10.厂商前缀：
-webkit-（safari）–moz-（firefox）–ms-（IE）–o-（opera）
11.创建圆角：
{-moz-border-radius-topleft:
50px;
-webkit-border-top-left-radius:
border-top-left-radius:
}（左上角,角的半径是50px）
{border-radius:
}（所有角简写）
12.创建椭圆角：
{……border-radius:
40px/20px;
}（x半径/y半径）
13.创建圆形：
}50px为元素半径大小
14.文本加阴影：
{text-shadow:
2px5px5px#999;
}x/y/模糊半径
15.元素加阴影：
{（-moz-/-webkit-）box-shadow:
（inset内阴影）2px5px5px#999;
5px10px2px#555（多重阴影）;
16.多重背景：
{background:
#000url（1.png）50%102%no-repeat,#222url（2.png）12px-150pxrepeat-x;
17.透明度：
{opacity:
.5;
}0→1透明→不透明
18.渐变背景：
linear-gradient（left,#000,#999）;
}（left：
渐变线沿逆时针方向转至水平线的角度）
六.html5视频音频
1.html5支持3种视频：
.ogg/.ogv.mp4/.m4v.webm
2.添加视频：
videosrc="
1.webm"
/video>
视频属性：
srcautoplaycontrolsmutedloopposterwidthheightpreload
3.为视频添加多个来源：
videocontrols="
controls"
sourcesrc="
1.mp4"
type="
video/mp4"
video/webm"
objecttype="
application/x-shockwave-flash"
data="
1.swf?
videourl=1.mp4&
control=true"
<
paramname="
movie"
/object>
//嵌入Flash动画
ahref="
下载该视频<
/a>
4.html5支持5中音频：
.ogg.mp3.wav.aac.mp4
5.添加音频：
audiosrc="
1.ogg"
/audio>
音频属性：
srcautoplaycontrolsmutedlooppreload。
多个来源同video。
七.一些约定
我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。
1.样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；
升级会员 