Web前端开发知识总结

一.名词解释

1.横切：在固定页面的宽度（按栅格化进行）并且对高度没有限制的容器称为一个标准横切。

2.留白：两个容器或碎片之间的上、下、左、右的空白距离。

3.继承：元素可以从其父级元素中可以获取一些可为自己使用的属性或值。

4.图片定位：把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中，利用css中对图片进行遮罩属性，多用于页面中的修饰图

5.底图：页面中在标签中使用的背景图

6.齐底（图）线：用于区分横切或碎片结束的线或图

7.页面结构：页面的基础框架，由横切、布局元素组成

8.焦点区（图）：最易注意的区域

9.导航：在页面中具有导向性的链接集合

10.头图：页面主题图片

11.间距：碎片或文字间的距离

12.行高：文字段落中行与行之间的距离

13.首行缩进：文字段落首行缩进

14.浮动：使被定义的区域脱离正常的页面文档流

15.碎片：由文字、图片组合成的内容区域

16.通栏广告：与页面内容区同宽的广告区域

17.功能按钮：具有交互属性的按钮

18.私有样式：当前页面独立使用的样式，不具备公用性

19.水平（垂直居中）：在页面中的某个元素处于父级的上下或左右的相同距离

20.标准头（尾）：定义相同的页面头或尾元素集合

二.文本格式化

1.段落：p

2.斜体：address（联系信息）em（强调）i（突出不同）cite（引用）dfn（首次定义术语）

3.粗体：strong（重要）b（提醒）

4.图片块：figure

5.引述文段，段落缩进：blockquote

6.背景颜色：mark

7.虚线下划线：ins

8.上标/下标：sub/sup

9.下划线：ins

10.删除线：del（标记已删除内容）s（标记不准确内容）

11.等宽字体：code

12.预格式化：pre

13.字号减小，表注释：small

14.时间：time

15.换行：br

16.HTML5定义区块：header/nav/article/section/aside/footer/div/span

三.表单表格

1.**html 代码**

<form method=”post” action=”show.php” enctype=”multipart/form-data”>…</form>

2.表单元素的组织：html 代码

<fieldset>…</fieldset>

3.创建各种框：html 代码

 注：type -->*password*/*url*/*tel*/*email*
        Id:为了让对应的标签识别，添加css    
        Name：为了让服务器和脚本识别，通常与id设为一样   
        Size：文本框大小    
        Maxlength：能输入的最大字符数   
        Pattern：正则表达式 

4.添加标签：html 代码

<label for=””></label>

5. 单(多)选按钮： html 代码

 注：id各自唯一，name必须相同。checked：默认选择

6. 下拉框： html 代码

 注：size:选择框的高度 multiple：允许多选 selected：默认选择 用<optgroup label="东北">„</label>对选择框进行分组

7. 上传文件：html 代码

<input type=”file” id=”zky” name=”zky” size=”5″ />

 注：size：输入路径和文件名的字段的宽度 

8. 禁用表单元素：html 代码

<input disabled>

9. 创建提交按钮：html 代码

<input type=”submit” value=”点此提交” />

创建带图像的提交按钮：html 代码

<button type=”image”><img src=”1.jpg”>点击这里</button>

创建图像按钮：html 代码

<input type=”image” alt=”提交” src=”1.jpg” />

Submit→reset重置

10. 文本区域：html 代码

<textarea name=”zky” maxlength=”30″ rows=”5″ cols=”5″>请在此输入字符</textarea>

11. 表格 : html 代码

四.文本格式化

1.{font（斜体，粗体，小型大写字母）字体大小（必有）行距 字体集（必有）}

2.文本背景{background：#foc url（1.jpg）repeat-x scroll 0 0；}

3.字间距：word-spacing：12px

4.字符距：letter-spacing:12px

5.缩进增加：text-indent：12px

6.小型大写字母：font-variant:small-caps;

7.文本对齐：text-align:left;适用于block，inline-block

8.单词大小写：text-transform：capitalize（单子首字母大写）/uppercase（大写）/lowercase（小写）

9.文本上的线：text-decoration：underline、overline、line-through；

10.空格：white-space：pre（显示所有空格回车）/nowrap（非断行空格）

11.h3—16px; h5—12px; verdana,Geneva,sans-serif;

12.列表属性：li {list-style:url(1.jpg) inside square;}

五.css布局

1.width不包括padding，border，margin；max-width设置外围限制；

2.浮动：flo：left；清除浮动：clear：both；

3设置边框：**css 代码**

4.使元素对齐：**css 代码**

5.显示：**css 代码**

6.显示：**css 代码**

7.相对定位：**css 代码**

相对该元素的原始位置。

8.绝对定位：**css 代码**

{position：absolute；top：5px；}

相对于body或离他最近定位的祖先元素。

9.三维位置：css 代码

{z-index：50；}

越大的在最上面

10.厂商前缀：-webkit-（Safari） –moz-（Firefox） –ms-（IE） –o-（opera）

11.创建圆角：
css 代码

12.创建椭圆角：**css 代码**

13.创建圆形：**css 代码**

14.文本加阴影：**css 代码**

15.元素加阴影：**css 代码**

16.多重背景：**css 代码**

17.透明度：**css 代码**

18.渐变背景：**css 代码**

六.HTML5视频音频

1.HTML5支持3种视频：.ogg/.ogv.mp4/.m4v .webm

2.添加视频：**html 代码**

<video src=””></video>

视频属性：*src*\*autoplay*\*controls*\*muted*\*loop*\*poster*\*width*\*height*\*preload*

3.为视频添加多个来源
html 代码

4.HTML5支持5种音频：.ogg/.mp3/.wav/.aac/.mp4

5.添加音频：**html 代码**

<audio src=””></audio>

音频属性：*src**autoplay**controls**muted* *loop**preload*。多个来源同video

七.一些约定

我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。

1.样式名称统一为小写字母，不能为数字，下划线及特殊字符；

2.样式名尽量语义化或简写；

3.样式名需要组合拼写时，采用全部小写拼写并使用下划线链接，如：all_keyword；

4.使用px（像素）为基本计量单位；

5.页面中空格的使用：全角：中文空格 半角：&nbsp;

6.项目完成包中，文件夹及文件名称全部采用小写字母，不能使用中文文件名；

7.减少div的嵌套层数；

7.减少div的嵌套层数；

8.给重要图片加上alt属性；给重要的元素和截断的元素加上title；

9.使用正确的注释方法；

10.特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，如：style、font等；

11.双标记标签都要有开始和结束标签，单标记标签后面一定要加”/”，例如：<br />等，并且有正确的层次；

12.其他特殊符号：
1） <(&lt;)
2) >(&gt;)

八.命名空间

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-size）、字色（color）：“”宋体” 12px #666
代码：
css 代码

/* 全局CSS定义 */<br /><br /> body{<br /><br /> margin:0 auto;<br /><br /> padding:0;<br /><br /> background:#FFF;<br /><br /> color:#666;<br /><br /> font:12px ‘宋体’;<br /><br /> }<br /><br /> div,form,ul,ol,li,span,p,dl,dt,dd,img{<br /><br /> margin:0;<br /><br /> padding:0;<br /><br /> border:0;<br /><br /> }<br /><br /> h1,h2,h3,h4,h5,h6{<br /><br /> margin:0;<br /><br /> padding:0;<br /><br /> font-size:12px;<br /><br /> font-weight:normal;<br /><br /> }<br /><br /> ul,ol,li{<br /><br /> list-style:none;<br /><br /> }<br /><br /> table,td,input,textarea{<br /><br /> font-size:12px;<br /><br /> }

9.2.页面标签初始化设置

**1.常用基本标签**div,form,ul,ol,li，span，p，dl，dt，dd，img
设置基本标签的间距、边框默认值为0.

2.h1~h6标题
默认标题内字号12px，内外间距为0px，文字不加粗。

3.ul，ol，li列表
默认不显示项目符号

4.h2栏目标题
说明：h2标签被定义为栏目标题特殊使用，在标签中非标题文字默认居右显示，主标题文字使用span标签包含，居左显示。

5.默认链接颜色
常态下不显示文字下划线，颜色为灰色（#333），鼠标悬停时：显示文字下划线，颜色变为暗红（#ccc）。

6.状态：a:link{未点} a:visited{已点} a:focus{键盘选中} a:hover{指针悬停} a:active{正在点}

9.3页面宽度

默认页面宽（命名规范）：按栅格化进行

9.4 .clear

结束容器内各元素的浮动属性，使相邻容器或元素节点正常显示。 以下是清除浮动的几种方法

方法一
css 代码

或
css 代码

或
css 代码

使用方法: <div class=”clear”></div>

方法二
css 代码

或 css 代码

使用方法: html 代码

9.5自定义属性

1.文字列表：（样式名）
用于文字列表，区分为两种字体（12px/14px），默认行内间距上下3px。

2. 图片列表：（样式名）
用于组图型碎片，默认具有claar属性，容器内img、span标签为块级元素,并清除图片上下外间距

3.图文混排：（样式名）
碎片内使用<div>、<p>区分图片及文字，默认形态为左图右文，且图片与文字间距为10px。

4.文字类：加粗（b）、arial字体（.fontArial）处理局部应用

5.浮动：（fl/fr）
用于构建页面框架

6.留白：（blank5/blank8）
设定页面中留白高度为5px、8px两种

9.6完整代码

css 代码

需要举例说明

十.框架设置

10.1 约定

1.  横切结构样式为area，所有横要带有id，名称：contentA,contentB  2.  结构元素使用div标签，标签嵌套注意层级关系，如：  10.2 说明

6.2.1   栏间留白

 三栏时定义中间栏，多栏定义时从第二栏开始定义。 

 6.2.2   横切留白

横切间留白，在下一个横切中定义，如：margin‐top:10px

html 代码