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