web前端学习报告
篇一：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. 虚线下划线：abbr
  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. ...
  2. 表单元素的组织：......
  3. 创建各种框:
  注：text→password/url/tel/email
  Id:为了让对应的标签识别，添加CSS
  Name：为了让服务器和脚本识别，通常与id设为一样
  Size：文本框大小
  Maxlength：能输入的最大字符数
  Pattern：正则表达式
  4. 添加标签： ?
  5. 单(多)选按钮：
 
  北京
 
  上海
  注：id各自唯一，name必须相同。checked：默认选择
  6. 下拉框：
 
  北京
  上海
  成都
 
  注：size:选择框的高度 multiple：允许多选 selected：默认选择 用?对选择框进行分组
  7. 上传文件：
  注：size：输入路径和文件名的字段的宽度
  8. 禁用表单元素：
  9. 创建提交按钮：
  创建带图像的提交按钮：点击这里 创建图像按钮：
  Submit→reset重置
  10. 文本区域：请在此输入字符
  11. 表格 :
 
 
 
 
  ..
  ..
 
 
 
 
  ..
  ..
  ..
 
 
 
  四.文本格式化
  1. {font：（斜体 粗体 小型大写字母） 字体大小(必有) 行距 字体集（必有）;}
  2. 文本背景：{ background：#foc url（/xuexibaogao_1223/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-decoraion:underline/overline/line-through;
  11. 空格：white-space:pre(显示所有空格回车)/nowrap（非断行空格）；
  12. h3—16px; h5—12px; verdana,Geneva,sans-serif;
  13. 列表属性： li{list-style:url(/xuexibaogao_1223/1.jpg) inside square;}
  五.CSS布局
  1. width：不包括padding，border，margin；max-widt
h设置外围限制；
  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;} 相对于该元素的原始位置
  8. 绝对定位：{position:absolute; top:5px;} 相对于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:50px;
  border-top-left-radius:50px;} (左上角,角的半径是50px)
  {border-radius:50px;}(所有角简写)
  12. 创建椭圆角：{? ? border-radius:40px/20px;} （x半径/y半径）
  13. 创建圆形：{? ? border-radius:50px;} 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;} 0→1 透明→不透明
  18. 渐变背景：{background:linear-gradient(left,#000,#999);} (left ：渐变线沿逆时针方向转至水平线的角度)
  六.html5视频音频
  1. html5支持3种视频：.ogg/.ogv .mp4/.m4v .webm
  2. 添加视频：
  视频属性：src autoplay controls muted loop poster width height preload
  3. 为视频添加多个来源：
 
 
 
 
 
    //嵌入Flash动画
  下载该视频
 
  4. html5支持5中音频：.ogg .mp3 .wav .aac .mp4
  5.添加音频：
  音频属性：src autoplay controls muted loop preload 。多个来源同video。
  七.一些约定
  我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。
  1. 样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；
  2. 样式名尽量语义化或简写；
  3. 样式名需要组合拼写时，采用全部小写拼写并使用下划线连接，即：all_keyword；
  4. 使用px(像素)为基本计量单位；
  5. 页面中空格的使用：全角：中文空格  半角； 
  6. 项目完成包中，文件夹及文件名称全部采用小写字母，不使用中文文件名；
  7. 减少DIV的嵌套层数；
  8. 给重要图片加上alt属性；给重要的元素和截断的元素加上title；
  9. 使用正确的注释方法（详见“注释”章节）；
  10. 特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：style、font
  等；
  11. 双标记签都要有开始和结束标签，单标记标签的后面一定要加“ /”,例如：
等，
  并且有正确的层次；
  12. 其它特殊符号：
  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
篇二：web前端开发学习路线
  首语：刚接触前端的小伙伴可能会不理解，html是什么?html其实是web前端的基础，下面会为大家讲解什么是前端，以及如何才能把前端学好。
    我们应该怎么学习web前端开发这门技术呢 ？
  现在很多小伙伴喜欢在互联网上视频资料学习网页制作，但是光看视频你是不可能学会网页制作的，没有人指导你，而且很多视频已经过时了 ，并没有什么用!  如果你真的想学习网页制作这门技术，你可以来这个裙，前面是494，中间是〇六思，最后是久叁肆！ 在这里有最新的HTML课程 免费学习 也有很多人指导你进步，不需要你付出什么，只要你是真心想学习的，随便看看的就不要加了，加了也是浪费大家的时间 。
    Web前端的学习误区
    网页制作是计算机专业同学在大学期间都会接触到的一门课程，而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver，这种所见即所得的“吊炸天”IDE为我们制作网页带来了极大的方便。
  入门快、见效快让我们在不知不觉中已经深深爱上了网页制作。此时，很多人会陷入一个误区，那就是既然借助这么帅的IDE，通过鼠标点击菜单就可以快速方便地制作网页。
  那么我们为什么还要去学习HTML、CSS、JavaScrpt、jQuery等这些苦逼的代码呢?这不是舍简求繁吗?
    但是随着学习的深入，就会发现我们步入了一种窘境——过分的依赖IDE导致我们不清楚其实现的本质，知其然但不知其所以然。
  因此在页面效果出现问题时，我们便手足无措，更不用提如何进行页面优化以及完成一些更高级的应用了。其原因是显而易见的——聪明的IDE成全了我们的惰性，
    使我们忽略了华丽的网页背后最
  本质的内容——code。
  青春是学习的季节，青春是奋斗的岁月，不要停止我们前进的步伐，因为青春的路正长。有空的时候静下心来好好看看书，回头想想自己走过的路，为自己的人生做好一个规划，把
自己的理想铭刻在心中，做一个甘于寂寞，敢于创新、干劲十足的年青人。我们要抓住金青春，让人生中留下永恒的光辉！
  前端开发前景怎么样？
  行业发展好
  从我们身边的方方面面考虑，互联网行业无疑是现在发展前景最好的行业之一。潭州教育致力于改变中国IT实践教学模式，引领中国IT教学技术标准与人才培养标准。让想学习的人随时随地都可以进行学习！
  人才需求大
  互联网对人们的影响越来越大，各类职业也需求更多，前端的人才需求比以前也有了质的飞跃。我们希望从业者：“我们不是为了学技术而去学技术，我们学技术是为了能更好去做产品”。最后引用乔布斯的话，Web就是未来，我们作为前端开发工作者也是未来。相信Web前端开发的明天会更好。
篇三：WEB前端开发经验总结
  ASP.NET前端开发经验总结
  通过此次大作业的设计到完成，我负责的是web前端的开发，经过此次作业和结合W3C上
的自学，我渐渐有了一些对前端开发的小小经验（仅为个人意见）。 WEB标准是什么？
  说是WEB标准，不过我这里主要是对HTML5 和 CSS3.0的一些经验总结。因为WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括HTML5.0、HTML4.0、XHTML1.1、CSS3.0、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。
  刚刚上面提到了――DIV+CSS，这里要说明下，这样说其实是不正确的。DIV+CSS准确的说法（个人的理解）应该是：采用W3C推荐的WEB标准中的HTML5结合CSS3.0样式表制作页面的方法，DIV应该指的是HTML标签，而CSS显示是指的CSS样式表了。
  采用WEB标准开发的好处
  那么W3C为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用WEB标准开发（个人理解的）相对以前TABLE布局的优势有哪些？
  1、节约运营成本
  看看我们的WEB标准制作方法是如何做到的？
  采用WEB标准制作，我们可以做到表现很形式的分离，我们用XHTML来表现（数据），用CSS来控制（页面元素呈现的）形式。写的好的页面，XHTML代码中基本上都是用户要看
的数据，还其他修饰性的东西，全部由我们的CSS来控制。这样一来我们的（XHTML）页面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下，YAHOO的首页小1K，100W个人一起访问，那么带宽节约了多少？而且可以更充分的利用带宽。
  而我们的CSS控制了，所有的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。
  2、对用户友好更友好，且有机会获得更多的用户
  现在来说说用户友好。首先我想把我们的用户来分下类。
  第一类：普通用户（每个访问我们网站的人）；
  第二类：搜索引擎；
  采用WEB标准开发的页面，结构清晰，页面体积小，浏览器兼容性好。普通用户访问的时候，页面打开速度快，而且不管用户使用那种浏览器，都能够正常访问（显示）页面，且页面的结构清晰，要的数据可以很方便的浏览到。
  而对搜索引擎来说，一个好的采用WEB标准开发的页面，都是做过SEO优化的，它访问起来很友好，很容易理解你的页面中哪里是标题（H1~H6标签），哪里是段落（p标签），哪里是段落里要强调的内容（strong标签） 等，它可以很容易的分析出来。而一个SEO好的站点，大家都知道，被搜索引擎收录的机会更多，这个也意味着您的网站会被更多的普通用户访问到，给你的站点带来更多的用户。
  一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页面浏览速度，对用户友好，甚至能够不花钱宣传，就能给你带来更多用户的技术。你说你会不会去使用它？
  这个也正式我们的W3C推荐使用WEB标准开放网站的原因啊。而这个技术也得到了我们广大用户的认可，所以现在需要学习WEB标准啊。
  合理的布局
  前面我提到了一些知识点――“结构清晰、SEO优化、页面体积小、HTML代码中基本上都是用户要看的数据”。这些东西，都是我做了合理布局的结果。而且我个人觉得，我们采用WEB标准制作的一切都是从这个知识点开始的，所以我这里就先来说这个话题。
  也许有人会问，怎样的一个页面，才算是合理的布局的呢？这个问题问题问得好，也是我们大家刚开始学用WEB标准的问得最多的问题之一，我也曾经常被这个问题所困扰，这里就
说说我对合理布局的一些理解。
  在开始讲合理布局的页面要达到的要素前，我们还是用个实例来讲解会更直观些。先来看看这个图片：
  不错，这个是一个文章详细页，没有左右两栏布局，不过这里我重点要讲的是合理的布局。
    这是此次实验中customer（前端的一项）部分的完整代码：
    Inherits="Customer" %>
 
 
 
 
 
  " name="description"/>
  " name="keywords" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
   
 
 
 
 
 
 
 
 
 
    　BorderWidth="0px" CellPadding="0" GridLines="None" Height="1px"
  OnPageIndexChanged="DataGrid1_Page"
  PagerStyle-HorizontalAlign="Right" PageSize="4" ShowHeader="False" Width="237px">
 
 
 
 
 
 
 
 
    href='Customer_More.aspx?ID='>
 
 
 
 
  [  "pub_date", "{0:d}")%>]
 
 
 
 
 
 
 
 
 
 
前端html
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    看出来什么没有？（代码是很多）可能大家已经发现，整个页面里基本上都是用户要看的数据，其中只包含了很少（必要）的布局(XHTML)标签（请允许我这么说）。整个页面基本都是由最基础的h1~h6、p、ul、ol、li、form、div标签来实现的。
  说到这里就要讲到我在前面提到的“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”，看看我的这个例子做到了没有？
  结构清晰--也就是我们常说的，HTML标签要结构化。
  什么叫结构化？
  由于个人认为这个知识点是十分重要的，我采用WEB标准的方法制作页面的优势就体现在页面结构清晰。我以前用table布局的时候，我的表现（数据）和形式（布局样式）是混在一起的，有很多冗余的数据混杂在一起，而我上面给大家展示的代码，很明显，结构十分清晰。
  h1~h6--如果你要显示的数据是作为标题显示的时候，就用这些标签，因为这个标签的意思就是说，这个是一个标题，不仅我们的用户很容易理解h-head的英文字母缩写，我们的另外一个用户搜索引擎也可以很容易理解它。呵呵，看到了吧，一个充分结构化
  的页面，对用户是十分友好的。
  p--Paragraph（段落）
  ul--unorglized list(无序的列表)
  ol--orglized list(有序的列表)
  li--list item(列表项)
  form--表单
  div--division(区域)
  我写成这样就便于理解了，原来HTML标签是有着自己的意义的（至于其他的标签的语意义，大家可以自己到W3C看看它的解释，也可以查看语义化你的HTML标签和属性），所以我们讲要语意化的意思，就是用合理的标签来显示数据，比如前面提到的，是标题，就应该用h1~h6标签，如果是一个段落的介绍文字，那么就应该使用p标签，如果是显示的一个没有顺序的列表，就应该用ul标签，如此...
  所以看这个例子里
  标签导航实例详解
  这么写就是很合理的，h2标签就说明这里是个标题。而这么写：
  复制内容到剪贴板代码:
  .title{
  font-size:18px;
  ...
  }
  标签导航实例详解
    虽然用了strong来强调说明这部分文字，但是还是没有h2标签来的直接明了。 还有这么写
  Ajax标签导航实例详解
    我并不喜欢写成这样，可以不用嵌套层的地方，我们尽量不要去过多的嵌套层，减少嵌套会让浏览器解析起来会更容易，速度更快。
  所我们使用WEB标准开发页面，绝对不是单纯的把以前的table换成DIV就OK了。而采用标准制作页面，也不意味着我们就不使用table。只要把握我刚才说的原则，使用合理的标签显示相应特征的数据。
  其实我的table标签是一个很好的用来显示二维数据的标签，而table标签也确实是设计出来用来显示数据的，而不是用来布局的，只是很多人都会用table标签来布局了。。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。