Download presentation
Presentation is loading. Please wait.
1
网页编程基础 曾宪文，Rex Zeng 纸飞机网络技术部部长 Leader of ACE
2
导论
3
导论 什么是网页编程？ 首先，请这么做： 1.打开任意一张网页 2.在网页空白处（或文字上）点击右键
3.点击“查看源代码”，然后大喊一声“Wow” 4.尽情欣赏 “编程”，就是要跟代码打交道； “网络编程”，就是要跟网页上的代码打交道。
4
导论 网页编程需要哪些知识？ 网页编程分为前台和后台。 前台：终端显示给用户的部分 HTML，CSS，JavaScript……
后台：服务器端运行的程序 PHP，MySQL…… 此外也需要一些基本的网络安全知识。
5
导论 为什么要学习网页编程？ 目前，越来越多的项目依赖于网络。 软件杯，科创，个人网站…… WebView，WebApp，微信……
For male：前端工程师中妹子比例很高 For female：能写出好网页的男生是好男生 For others：不管怎么样，尝试一下总是好的
6
导论 网页编程的注意事项？ 首先，请抛弃Frontpage； 其次，请弃用DreamWeaver的“设计”模式；
再者，请拥抱最新的标准，不局限于旧标准； 然后，请患上轻微的强迫症； 最后，请不要急于完成任务。 推荐的编辑器： Sublime Text || Notepad++ || Eclipse 推荐的网站：
7
HTML
8
HTML HTML是什么？ 今年的生日会上，技术部的小品里有一句： “我才不说HTML是How-To-Make-*的意思呢！”
其实，HTML的全称是“Hypertext Markup Language”，翻译过来是“超文本标记语言”，就是用一系列标签来标记信息。 HTML是所有网页编程的基础。其文件的扩展名是*.htm或*.html。
9
HTML DOCTYPE的概念 在绝大部分网页的源代码中，第一句总有一个类似<!DOCTYPE ……>的标记。
DOCTYPE定义了浏览器渲染该网页的标准，目前最新的标准是HTML5，它的DOCTYPE应该这么写：<!DOCTYPE html>。 网页开头必须使用DOCTYPE，以避免浏览器使用“怪异模式”渲染页面。
10
HTML HTML中的标签和属性 跟Word类似，一张网页也是一个文档，里面可能会有标题、段落、图片、表格等元素。
我们用“标签”来描述元素的类型。标签的格式是<tag>，即一对尖括号括起来一个标签名称。 标签有单标签和双标签之分。单标签被当作是基本元素，双标签可以括起一些内容，看起来更像“框架”。
11
HTML HTML中的标签和属性 按照自然逻辑，我们可以这么来描述一篇文章： <article>
<title>我是标题</title> <content> <para>我是第一段。</para> <image /> <para>我是第二段。</para> </content> </article>
12
HTML HTML中的标签和属性 只有标签也不行。例如，刚才的那个乱入的图片究竟画了什么？
标签是有属性的，例如我要在这里放一个圆，它的圆心坐标是(10,20)，半径为5，我们可以这样来描述它： <circle cx="10" cy="20" r="5" /> HTML文档是用一个个有意义的标签组合起来的。<para>标签只是我的杜撰，并无意义。
13
HTML HTML文档结构 一个网页，需要有一个合适的结构。
14
HTML <head>标签 人有一个头； 双头蛇有两个头； 九头龙有九个头； OIers眼中的九头龙有M个头……
15
HTML <meta>标签 每一个<meta>标签描述网页的一个属性。
<meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width" /> <meta name="description" content="如果百度收录了这个网页，搜索结果里就会显示这句话。" />
16
HTML <title>标签、<link>标签 前者没什么可说的，就是网页的标题。
<title>我会显示在浏览器标题栏上</title> 后者则用来定义文档与外部资源的关系，例如外部样式表（马上会学到）、网页图标等。 <link rel="stylesheet" href="css/main.css" />
17
HTML <body>中的标签们
标题分为六级，分别可以用<h1>~<h6>括起来。若h后面的数字变大，则字号会变小。 <h3>我是一个三级标题</h3> 段落用<p>（表示paragraph）标签括起来。 <p>这是一段文本。</p> <p>这是另一段文本。</p>
18
HTML <body>中的标签们 文字格式化是个比较好玩的东西。 <b>粗体文本</b>
<big>大号字</big> <em>着重文字</em> <i>斜体字</i> <small>小号字</small> <strong>加重语气</strong> <sup>上标字</sup> <sub>下标字</sub>
19
HTML <body>中的标签们 链接是个比较复杂的东西。
<a href=" target="_blank" title="页面集合">有趣的页面们</a> <a <a href="#aboutme">关于我</a> <a href=" 后两者需要在网页中创建锚。 <a name="tip">提示</a>
20
HTML <body>中的标签们 图片用<img>标签表示，用属性来描述内容。
<img src="images/logo.png" width="150" height="30" alt="图片加载不出来的时候，图片的位置上会显示这句话" /> 这里要提一下相对路径与绝对路径的问题。因为打字太麻烦，我决定口述。
21
HTML <body>中的标签们 表格用来展现数据，其结构大体如下。表格的各种属性请参考这里。
22
HTML <body>中的标签们
此外，还有一些标签本身不会有太多效果，但是它们是为语义而生。不妨称为语义标签。提供给浏览器的语义信息越多，浏览器就可以越好地把这些信息展示给用户。 线性代数的缩写是<abbr>LA</abbr>。 地址：<address>怡园16栋601-01</address> <blockquote>子曾经曰过……</blockquote> <pre>for (p=head; p; p=p->next) {...}</pre> 令<var>N</var>表示输入的数字。
23
HTML 结束语 想做出高大上的网页，这些标签还不够。
有些标签不是特别常用，例如<ul>、<ol>和<li>，因此留给大家课下探索。 有些标签太复杂，例如<div>、<span>，以后的学习中会不断遇到这些标签。 有些标签和属性已经被时代的潮流抛弃，例如<font>标签、align属性等，它们的接替者是我们马上要学习的内容——CSS。
24
CSS基础
25
CSS 什么是CSS？ 如果要改变HTML元素的样式，怎么办？
此外，CSS还可以改变元素的默认样式，也就是说，如果需要，你可以把<em>标签从斜体改为红色（百度就是这么干的）。
26
CSS CSS该怎么用？ 要使用CSS，有三种方法。 1.在<head>中加入：
<link rel="stylesheet" href="css/main.css" /> 2.在任何地方加入： <style>CSS语句</style> 3.利用元素的style属性： <p style="CSS语句">……</p>
27
CSS 标记HTML元素 “页面中的<p>元素这么多，但我只想控制其中特定的几个，怎么办？”
其实，每个元素都有id和class两个属性。原则上，同一网页中的元素不能有相同的id，但是可以有相同的class。此外，class可以叠加。 <p class="one striked">class的叠加</p> <p id="main" class="two">id不可重复</p> <p class="one">class可重复</p>
28
CSS 各种各样的选择器 常见的选择器有这么几种。 id选择器【#foo】：选择所有id为foo的元素
类选择器【.foo】：选择所有class为foo的元素 标签选择器【foo】：选择所有的foo元素 后代选择器【foo1 foo2】：选择foo1的后代中所有的foo2 子元素选择器【foo1>foo2】：选择foo1的孩子中所有的foo2
29
CSS 选择器练习
30
CSS 基础CSS语句 假如我们有这么个选择器：#foo，我们要改变它的样式。如果是正常人的话，大概会这么想： #foo { 字体颜色：红色
字体大小：16像素 背景颜色：黄色 字体样式：加粗，倾斜 } CSS是正常人，只不过是歪果仁。
31
CSS 基础CSS语句 background-color: yellow;
background-image: url(../image/bg.png); color: red; /* #F00、#FF0000、rgb(255, 0, 0) */ font-family: "SimHei", "Segoe UI"; font-size: 16px; /* 1em、0.5cm */ font-weight: bold; text-decoration: italic;
32
CSS 行内元素与块级元素 有的元素（例如<a>、<img>）可以嵌入在一段文字内，与之相对的元素（例如<p>、<h1>）则必须占用单独一行。这就是行内元素与块级元素的区别。 可以用CSS的display属性来强行改变元素的性质，它的取值有block、inline、inline-block。 注：IE7及以下浏览器对inline-block支持有限。
33
CSS 总结 CSS的规则非常多，多到正常人记不过来。因此，常备一个手册是很重要的。 CSS选择器不宜写的太长，会影响效率。
34
作业 如果想通过技术部二面，就写作业吧！ 如果你是零基础：对文章进行美化，CSS和各种标签的使用多多益善。 如果你有基础：确保网页结构良好，兼容各浏览器，使用并理解刚才未提到的标签和CSS。 二面通过标准：以作业质量来定。
35
Thanks Rex Zeng From NUAA-CCST-2013
Similar presentations
