来自百度文库：web前端学习总结(精华版)，里面讲了许多的知识，非常适合刚进入前端的童鞋，就算一些有点基础的也会从中受益，通过本文，你将了解到制作中的那些元素解释、命名、布局、CSS重置、选择框架和设定等一系列前端入门知识。学习什么我觉得做好笔记很关键，平时遇到问题多多记录下来。
一.名词解释
- 横切
在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切
- 留白
两个容器或碎片之间的上、下、左、右的空白距离
- 继承
元素可以从其父级元素中获得一些可为自己使用的属性或值。
- 图片定位
把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中，利用CSS中对图片进行遮罩属性，多用于页面中的修饰图
- 底图
页面中在标签中使用的背景图
- 齐底(图)线
用于区分横切或碎片结束的线或图
- 页面结构
页面的基础框架，由横切、布局元素组成
- 焦点区(图)
最易注意的区域
- 导航
在页面中具有导向性的链接集合
- 头图
页面主题图片
- 间距
碎片或文字间的距离
- 行高
文字段落中行与行之间的距离
- 首行缩进
文字段落首行缩进
- 浮动
使被定义的区域脱离正常的页面文档流
- 碎片
由文字、图片组合成的内容区域
- 通栏广告
与页面内容区同宽的广告区域
- 功能按钮
具有交互属性的按钮
- 私有样式
当前页面独立使用的样式，不具备公用性
- 水平(垂直)居中
在页面中的某个元素处于父级的上下或左右的相同距离
- 标准头(尾)
定义相同的页面头或尾元素集合
二.文本格式化
- 段落：p
- 斜体：address（联系信息）em（强调）i（突出不同）cite（引用）dfn（首次定义术语）
- 粗体：strong（重要）b（提醒）
- 图片块：figure
- 引述文段，段落缩进：blockquote
- 背景颜色：mark
- 虚线下划线：abbr
- 上标下标：sub/sup
- 下划线：ins
- 删除线：del（标记已删除内容）s（标记不准确内容）
- 等宽字体：code
- 预格式化：pre
- 字号减小，表注释：small
- 时间：time
- 换行：br
- html5定义区块：header nav article section aside footer div span
三.表单表格
- <form method=”post” action=”show.php” enctype=”multipart/form-data”>…</form>
- 表单元素的组织：<fieldset>…</fieldset><fieldset>…</fieldset>
- 创建各种框: <input type=”text” id=”name” 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：正则表达式
- 添加标签： <label for=”idname”>…</label>
- 单(多)选按钮：
<input tupe="radio/checkbox" id="aaa" name="zky" value="beijing" />
<label for="aaa">北京</label>
<input tupe="radio/checkbox" id="bbb" name="zky" value="shanghai" />
<label for="bbb">上海</label>
注：id各自唯一，name必须相同。checked：默认选择- 下拉框：
<select id="zky" name="zky" size="12" multiple="multiple">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="chengdu">成都</option>
</select>注：size:选择框的高度 multiple：允许多选 selected：默认选择 用<optgroup label=”东北”>…</label>对选择框进行分组
- 上传文件：<input type=”file” id=”zky” name=”zky” size=”5″ />
注：size：输入路径和文件名的字段的宽度
- 禁用表单元素：<input …disabled>
- 创建提交按钮：<input type=”submit” value=”点此提交” />
创建带图像的提交按钮：<button type=”image”><img src=”1.jpg”>点击这里</button>
创建图像按钮：<input type=”image” alt=”提交” src=”1.jpg” />
Submit→reset重置
- 文本区域：<textarea name=”zky” maxlength=”30″ rows=”5″ cols=”5″>请在此输入字符</textarea>
- 表格 :
<table>
<caption></caption>
<thead>
<tr>
<th scope="rowgroup">..</th>
<th scope="col">..</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">..</th>
<td rowspan="3">..</td>
<td>..</td>
</tr>
</tbody>
</table>四.文本格式化
- {font：（斜体 粗体 小型大写字母） 字体大小(必有) 行距 字体集（必有）;}
- 文本背景：{ background：#foc url（1.jpg）repeat-x scroll 0 0；}
- 字间距：word-spacing:12px;
- 字偶距：letter-spacing:12px;
- 缩进增加：text-indent:12px;
- 小型大写字母: font-variant:small-caps;
- 文本对齐：text-align:left；适用于block，inline-block
- 单词大小写: text-transform:capitalize(单词首字母大写)/uppercase(大写)/lowercase(小写)
- 文本上的线：text-decoraion:underline/overline/line-through;
- 空格：white-space:pre(显示所有空格回车)/nowrap（非断行空格）；
- h3—16px; h5—12px; verdana,Geneva,sans-serif;
- 列表属性： li{list-style:url(1.jpg) inside square;}
五.CSS布局
- width：不包括padding，border，margin；max-width设置外围限制；
- 浮动：float:left; 清除浮动：clear:both;
- 设置边框： border:dotted 4px red;(dotted点状、dashed虚线、solid实线)
- 使元素对齐：vertical-align:baseline/middle/text-bottom..
- 显示：display:black/inline/inline-block;
- 显示：visibility:visible/hiddle;
- 相对定位：{position:relative; top:5px;} 相对于该元素的原始位置
- 绝对定位：{position:absolute; top:5px;} 相对于body或离他最近定位的祖先元素
- 三维位置：{z-index:50;} 越大的在最上面
- 厂商前缀：-webkit-(safari) –moz-(firefox) –ms-(IE) –o-(opera)
- 创建圆角：
{-moz-border-radius-topleft:50px;
-webkit-border-top-left-radius:50px;
border-top-left-radius:50px;} (左上角,角的半径是50px)
{border-radius:50px;}(所有角简写)- 创建椭圆角：{…… border-radius:40px/20px;} （x半径/y半径）
- 创建圆形：{…… border-radius:50px;} 50px为元素半径大小
- 文本加阴影：{text-shadow: 2px 5px 5px #999;} x/y/模糊半径
- 元素加阴影：{(-moz-/-webkit-)box-shadow:(inset内阴影)2px 5px 5px #999; 5px 10px 2px #555(多重阴影);}
- 多重背景：{background:#000 url(1.png) 50% 102% no-repeat,#222 url(2.png) 12px -150px repeat-x;}
- 透明度： {opacity:.5;} 0→1 透明→不透明
- 渐变背景：{background:linear-gradient(left,#000,#999);} (left ：渐变线沿逆时针方向转至水平线的角度)
六.html5视频音频
- html5支持3种视频：.ogg/.ogv .mp4/.m4v .webm
- 添加视频：<video src=”1.webm”></video>
视频属性：src autoplay controls muted loop poster width height preload
- 为视频添加多个来源：
<video controls="controls">
<source src="1.mp4" type="video/mp4">
<source src="1.webm" type="video/webm">
<object type="application/x-shockwave-flash" data="1.swf?videourl=1.mp4&control=true">
<param name="movie" value="1.swf?videourl=1.mp4&control=true">
</object> //嵌入Flash动画
<a href="1.mp4">下载该视频</a>
</video>- html5支持5中音频：.ogg .mp3 .wav .aac .mp4
5.添加音频：<audio src=”1.ogg”></audio>
音频属性：src autoplay controls muted loop preload 。多个来源同video。
七.一些约定
我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。
- 样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；
- 样式名尽量语义化或简写；
- 样式名需要组合拼写时，采用全部小写拼写并使用下划线连接，即：all_keyword；
- 使用px(像素)为基本计量单位；
- 页面中空格的使用：全角：中文空格 半角；
- 项目完成包中，文件夹及文件名称全部采用小写字母，不使用中文文件名；
- 减少DIV的嵌套层数；
- 给重要图片加上alt属性；给重要的元素和截断的元素加上title；
- 使用正确的注释方法（详见“注释”章节）；
- 特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：style、font等；
- 双标记签都要有开始和结束标签，单标记标签的后面一定要加“ /”,例如：<br />等，并且有正确的层次；
- 其它特殊符号：
1) <(<)
2) >(>)
八.命名空间
8.1外挂样式名称
- 全局：public.css（全局样式为全站公用，为页面样式基础，页面中必须包含。）
- 结构：layout.css（页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。）
- 私有：style.css（独立页面所使用的样式文件，页面中必须包含。）
- 模块 module.css（产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。）
- 默认 default.css
- 文章 article.css
- 图片 photo.css
- 下载 soft.css
- 主题 themes.css（实现换肤功能时应用。）
- 补丁 mend.css（基于以上样式进行的私有化修补。）
8.2 常用名称
(1)页面结构
- 容器: container
- 页头：header
- 内容：content/container/content(A)
- 页面主体：main
- 页尾：footer
- 导航：nav
- 侧栏：sidebar
- 栏目：column
- 页面外围控制整体布局宽度：wrapper
- 左右中：left right center
- 浮左浮右：fl fr
- 清除浮动 clear
(2)导航
- 导航：nav
- 主导航：mainbav
- 子导航：subnav
- 顶导航：topnav
- 边导航：sidebar
- 左导航：leftsidebar
- 右导航：rightsidebar
- 菜单：menu
- 子菜单：submenu
- 标题：title
- 摘要：summary
- 路径：path
(3)模块化命名
- 模块头部：hd
- 模块内容部分：bd
- 模块底部：ft
(4)各内容页对应
- 标题：title
- 副标题：subtitle
- 属性：properties
- 简介：infor
- 内容：content
- 分页：page
- 插入广告：insert_ad
- 表情：expression
- 功能选项：options
- 上下篇：up_down
- 评论：comments
- 相关内容：related
- 下载地址：download
- 播放地址：play_add
(5)功能
- 标志：logo
- 广告：banner
- 登陆：login
- 登录条：loginbar
- 注册：regsiter
- 搜索：search
- 日期：date
- 功能区：shop
- 标题：title
- 加入：joinus
- 状态：status
- 按钮：btn
- 滚动：scroll
- 标签页：tab
- 文章列表：list
- 提示信息：msg
- 当前的：current
- 小技巧：tips
- 图标：icon
- 注释：note
- 指南：guild
- 服务：service
- 热点：hot
- 新闻：news
- 下载：download
- 投票：vote
- 合作伙伴：partner
- 友情链接：link
- 版权：copyright
九.基本设置-public.css
9.1 全局设置
- 上下边距(margin、padding)：0(px)
- 左右边距(margin)：auto(自动)
- 底色(background):#FFF(白色)
- 字体(font-family)、字号(font-szie)、字色(color)：”宋体” 12px #666
代码：
/* 全局CSS定义 */
body{margin:0 auto;padding:0;background:#FFF;color:#666;font:12px ‘宋体'; }
div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}
ul,ol,li{list-style:none}
table,td,input,textarea{font-size:12px}9.2 页面标签初始化设置
- 常用基本标div,form,ul,ol,li,span,p,dl,dt,dd,img
设置基本标签的间距、边框默认值为0。
- h1～h6标题
默认标题内字号12px，内外间距为0px，文字不加粗。
- ul,ol,li 列表
默认不显示项目符号。
- h2 栏目标题
说明：h2标签被定义为栏目标题特殊使用，在标签中非标题文字默认居右显示，主标题文字使用span标签包含，居左显示。
- 默认链接颜色
常态下不显示文字下划线，颜色为灰(#333)，鼠标悬浮时：显示文字下划线，颜色变为暗红(#ccc)。
- 状态：a:link{未点} a:visited{已点} a:focus{键盘选中} a:hover{指针停留} a:active{正在点}
9.3 页面宽度
默认页面宽(命名规范)：按栅格化进行
9.4 .clear
结束容器内各元素的浮动属性，使相邻容器或元素节点正常显示。
以下是清除浮动的几种方法
方法一
.clear {
clear:both;
height:0;
font-size:0;
line-height:0
}或
.clear {
border-top: 1px solid transparent !important;
margin-top: -1px !important;
border-top: 0px;
margin-top: 0px;
height: 0px;
clear: both;
background: none;
font-size: 0px;
visibility: hidden;
}或
.clear{
clear:both;
font-size:1px;
width:1px;
height:0;
visibility:hidden;
margin-top:0px!important;
*margin-top:-1px;
line-height:0
}使用方法: <div class=”clear”></div>
<div class=”clear”></div>
方法二
.clear{zoom:1;}
.clear:after {
clear:both;
height:0;
overflow:hidden;
display:block;
visibility:hidden;
content:" .";
}或
.claer {
height:auto;
_height:200px;
min-height:200px;
verflow:auto;
zoom:1;
_overflow:visible;
}
使用方法:
<div class="">
<ul class="clear">
<li><a href="#">送水送气</a></li>
<li><a href="#">送花服务</a></li>
<li><a href="#">宾馆住宿</a></li>
<li><a href="#">家电维修</a></li>
<li><a href="#">餐饮电话</a></li>
<li><a href="#">电脑网络</a></li>
</ul>
</div>9.5 自定义属性
- 文字列表 ： (样式名)
用于文字列表，区分为两种字体(12px/14px)，默认行内间距上下3px。
- 图片列表 ：(样式名)
用于组图型碎片，默认具有claar属性，容器内img、span标签为块级元素,并清除图片上下外间距
- 图文混排： (样式名)
碎片内使用<div>、<p>区分图片及文字，默认形态为左图右文，且图片与文字间距为10px。
- 文字类：加粗(b)、arial 字体(.fontArial)
处理局部应用
- 浮动： (fl/fr)
用于构建页面框架
- 留白: (blank5/blank8)
设定页面中留白高度为5px、8px两种
9.6完整代码
/* 全局CSS定义 */
body{text-align:center;margin:0 auto;padding:0;background:#FFF;color:#666;font:12px '宋体';}
div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;}
……需要举例说明
十.框架设置
10.1 约定
- 横切结构样式为area，所有横要带有id，名称：contentA,contentB
- 结构元素使用div标签，标签嵌套注意层级关系，如：
10.2 说明
6.2.1 栏间留白
三栏时定义中间栏，多栏定义时从第二栏开始定义。
6.2.2 横切留白
横切间留白，在下一个横切中定义，如：margin‐top:10px
