Transcript HTML
网页编程基础 曾宪文，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> article <title>我是标题</title> <content> title<para>我是第一段。</para> content <image /> <para>我是第二段。</para> para image para </content> </article> HTML HTML中的标签和属性 只有标签也不行。例如，刚才的那个乱入的图 片究竟画了什么？ 标签是有属性的，例如我要在这里放一个圆， 它的圆心坐标是(10,20)，半径为5，我们可以 这样来描述它： <circle cx="10" cy="20" r="5" /> HTML文档是用一个个有意义的标签组合起来 的。<para>标签只是我的杜撰，并无意义。 HTML HTML文档结构 一个网页，需要有一个合适的结构。 html head meta link body title 内容 HTML <head>标签 人有一个头； 双头蛇有两个头； 九头龙有九个头； OIers眼中的九头龙有M个头…… ……可见头的重要性。HTML文档有一个头， 用<head>标签括起来。里面可以存放跟文档 相关的信息，例如元信息、标题等。 <head>里的内容不会显示在浏览器页面中。 HTML <meta>标签 每一个<meta>标签描述网页的一个属性。 <meta charset="utf-8" /> <meta name="viewport" content="initialscale=1,maximum-scale=1,userscalable=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:[email protected]">发邮件</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>中的标签们 表格用来展现数据，其结构大体如下。表格的 各种属性请参考这里。 table caption th thead tbody tfoot tr tr tr th td td td td 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的全名为“层叠式样式表”，它就是干这 个的。例如网页中有一类元素，CSS大概就是 描述“这货应该长这样”的一个语言。 此外，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 选择器练习 body p#foo table p.foo1 p.foo2 tbody p.foo1 ul#foo1 li li li tr td ul td#foo5 li li 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选择器不宜写的太长，会影响效率。 更高级的CSS3会在后续的课程中涉及。 推荐完全使用CSS来控制网页样式。如果需要， 可以覆写语义标签的默认样式。 作业 如果想通过技术部二面，就写作业吧！ 制作一个网页，内容为一篇文章。文章自选。 于2014年10月7日晚23:00之前发至我的邮箱 [email protected]，过时则视为未完成。 如果你是零基础：对文章进行美化，CSS和各 种标签的使用多多益善。 如果你有基础：确保网页结构良好，兼容各浏 览器，使用并理解刚才未提到的标签和CSS。 二面通过标准：以作业质量来定。 Thanks Rex Zeng From NUAA-CCST-2013