Web前端开发知识总结

天津前端开发招聘信息
泰安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 代码

<input type=”text” id=”name” name=”name” class=”zky” required=”required” placeholder=”请输入” value=”http://” autofocus=”autofocus” size=”12″ maxlength=”20″ pattern=”..” />
 注:type -->*password*/*url*/*tel*/*email*
        Id:为了让对应的标签识别,添加css    
        Name:为了让服务器和脚本识别,通常与id设为一样   
        Size:文本框大小    
        Maxlength:能输入的最大字符数   
        Pattern:正则表达式 

4.添加标签html 代码

<label for=””></label>

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

<input tupe=”radio/checkbox” id=”aaa” name=”zky” value=”beijing” />
<label for=”aaa”>北京</label>
<input tupe=”radio/checkbox” id=”bbb” name=”zky” value=”shanghai” />
<labelfor=”bbb”>上海</label>
 注:id各自唯一,name必须相同。checked:默认选择

6. 下拉框html 代码

<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>对选择框进行分组

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 代码

<table>
    <caption></caption>
    <thead>
        <tr>
            <th scope=”rowgroup”>..</th>
            <th scope=”col”>..</th>
        </tr>
        </p>
        <p>
    </thead>
    <tbody>
        <tr>
            <th scope=”row”>..</th>
            <td rowspan=”3″>..</td>
            <td>..</td>
        </tr>
    </tbody>
</table>

四.文本格式化

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 代码**

{
    border: dotted 4px red;
    /*(dotted点状、dashed虚线、solid实线)*/
}

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

{
vertical-align:baseline/middle/text-bottom;
}

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

{
display:black/inline/inline-block;
}

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

{
visibility:visible/hidden;
}

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

{position:relative;top:5px;}

相对该元素的原始位置。

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

{position:absolute;top:5px;}

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

9.三维位置css 代码

{z-index:50;}

越大的在最上面

10.厂商前缀:-webkit-(Safari) –moz-(Firefox) –ms-(IE) –o-(opera

11.创建圆角:
css 代码

{
    -moz-border-radius-topleft: 50px;
    -webkit-border-top-left-radius: 50px;
    border-top-left-radius: 50px;
    /*左上角,角的半径是50px*/
    border-radius: 50px;
    /*所有角简写*/
}

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

{
border-radius:40px/20px;
/*(X半径/Y半径)*/
}

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

{
border-radius:50px;
/*50px为元素半径大小*/
}

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

{
text-shadow:2px 5px 5px #999;
/*水平阴影的位置/垂直阴影的位置/模糊的距离/阴影颜色*/
}

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

{
/*(-moz-/-webkit-)*/
box-shadow:(inset内阴影)2px 5px 5px #999; 5px 10px 2px #555(多重阴影)
}

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

{
    background: #000 url(1png) 50% 102% no-repeat,
        #222 url(2png) 12px -150px repeat-x;
}

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

{
opacity:.5
/*0–>1透明–>不透明*/
}

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

{
background:linear-gradient(left,#000,#999);
/*left:渐变线沿逆时针方向转至水平线的角度*/
}

六.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 代码

<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>

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 代码

9.2.页面标签初始化设置

**1.常用基本标签**div,form,ul,ol,lispanpdldtddimg
设置基本标签的间距、边框默认值为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 代码

.clear { clear:both; height:0; font-size:0; line-height:0 }


css 代码

.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;
}


css 代码

.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>

方法二
css 代码

.clear {
    zoom: 1;
}
.clear:after {
    clear: both;
    height: 0;
    overflow: hidden;
    display: block;
    visibility: hidden;
    content: ‘ .’;
}

css 代码

.claer {
    height: auto;
    _height: 200px;
    min-height: 200px;
    verflow: auto;
    zoom: 1;
    _overflow: visible;
}

使用方法: html 代码

<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自定义属性

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 代码

/* 全局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 约定

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

6.2.1   栏间留白
 三栏时定义中间栏,多栏定义时从第二栏开始定义。 
 6.2.2   横切留白

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

html 代码

<input type=”text” id=”name” name=”name” class=”zky” required=”required” placeholder=”请输入” value=”http://” autofocus=”autofocus”
size=”12″maxlength=”20″pattern=”..” />
大连web前端开发招聘
菲律宾招聘前端开发人员
前端开发招聘题
» 本文来自:前端开发者 » 《Web前端开发知识总结》
» 本文链接地址:https://www.rokub.com/6171.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!