web前端学习总结精华版文档格式.docx

1、具有交互属性的按钮18.私有样式当前页面独立使用的样式，不具备公用性19.水平（垂直）居中在页面中的某个元素处于父级的上下或左右的相同距离20.标准头（尾）定义相同的页面头或尾元素集合二.文本格式化1. 段落：p2. 斜体：address（联系信息）em（强调）i（突出不同）cite（引用）dfn（首次定义术语）3. 粗体：strong（重要）b（提醒）4. 图片块：figure5. 引述文段，段落缩进：blockquote6. 背景颜色：mark7. 虚线下划线：abbr8. 上标下标：sub/sup9. 下划线：ins10. 删除线：del（标记已删除内容）s（标记不准确内容）11. 等宽

2、字体：code12. 预格式化：pre13. 字号减小，表注释：small14. 时间：time15. 换行：br16. html5定义区块：header nav article section aside footer div span三.表单表格1. .2. 表单元素的组织：/fieldset3. 创建各种框: 注：textpassword/url/tel/email Id:为了让对应的标签识别，添加CSS Name：为了让服务器和脚本识别，通常和id设为一样 Size：文本框大小 Maxlength：能输入的最大字符数 Pattern：正则表达式4. 添加标签：label for=idn

3、ame5. 单（多）选按钮：input tupe=radio/checkboxaaabeijing北京bbbshanghai上海chengdu成都size:选择框的高度 multiple：允许多选 selected：默认选择 用9. 创建提交按钮：submit点此提交 创建带图像的提交按钮：button type=imageimg src=1.jpg点击这里 创建图像按钮： alt=提交 src= Submitreset重置10. 文本区域：textarea name=30 rows= cols=请在此输入字符11. 表格 :tablecaption/captiontheadtrth scop

4、e=rowgroup.col/tr/theadtbodyrowtd rowspan=3/tdtd/tbody/table四.文本格式化1. font：（斜体 粗体 小型大写字母） 字体大小（必有） 行距 字体集（必有）;2. 文本背景： background：#foc url（1.jpg）repeat-x scroll 0 0；3. 字间距：word-spacing:12px;4. 字偶距：letter-spacing:5. 缩进增加：text-indent:6. 小型大写字母: font-variant:small-caps;7. 文本对齐：text-align:left；适用于block，

5、inline-block8. 单词大小写: text-transform:capitalize（单词首字母大写）/uppercase（大写）/lowercase（小写）9. 文本上的线：text-decoraion:underline/overline/line-through;11. 空格：white-space:pre（显示所有空格回车）/nowrap（非断行空格）；12. h316px; h512px; verdana,Geneva,sans-serif;13. 列表属性： lilist-style:url（1.jpg） inside square;五.CSS布局1. width：不包括

6、padding，border，margin；max-width设置外围限制；2. 浮动：float:left; 清除浮动：clear:both;3. 设置边框： border:dotted 4px red;（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; 相对于该元素的原始位

7、置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半径）

8、13. 创建圆形： 50px为元素半径大小14. 文本加阴影：text-shadow: 2px 5px 5px #999; x/y/模糊半径15. 元素加阴影：（-moz-/-webkit-）box-shadow:（inset内阴影）2px 5px 5px #999; 5px 10px 2px #555（多重阴影）;16. 多重背景：background:#000 url（1.png） 50% 102% no-repeat,#222 url（2.png） 12px -150px repeat-x;17. 透明度： opacity:.5; 01 透明不透明18. 渐变背景：linear-grad

9、ient（left,#000,#999）; （left ：渐变线沿逆时针方向转至水平线的角度）六.html5视频音频1. html5支持3种视频：.ogg/.ogv .mp4/.m4v .webm2. 添加视频：video src=1.webm/video 视频属性：src autoplay controls muted loop poster width height preload3. 为视频添加多个来源：video controls=controlssource src=1.mp4 type=video/mp4video/webmobject type=application/x-shockwave-flash data=1.swf?videourl=1.mp4&control=true /嵌入Flash动画a href=下载该视频4. html5支持5中音频：.ogg .mp3 .wav .aac .mp45.添加音频：audio src=1.ogg/audio 音频属性：src autoplay controls muted loop preload 。多个来源同video。七.一些约定 我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。 1.样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；