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.样式名称首字母统一为小写字母,不能为数字,下划线及特殊字符;