Lecture3MoreBasicHTMandCSS(C)

1、第三讲第三讲更多基础的更多基础的HTMLHTML和和CSS CSS Web ProgrammingSchool of Computer Science and Engineering,South China University of TechnologyWeb 2.0 Programming More Basic HTML and CSS2 / 33March 2, 2022South China University of Technology概要概要l更多更多HTML元素元素l更多基础的CSSlCSS实践Web 2.0 Programming More Basic HTML and CS

2、S3 / 33March 2, 2022South China University of Technology网页元数据网页元数据: lnameauthordescriptionkeywordsgeneratorrevisedlhttp-equivcontent-typeexpiresrefresh XHTMLWeb 2.0 Programming More Basic HTML and CSS4 / 33March 2, 2022South China University of Technology表格表格: , , , , namegenderBillmaleSusanfemale S

3、mart Guys namegender Billmale Susanfemale HTMLoutputl不要使用表格进行布局不要使用表格进行布局!Smart Guystable./table - 定义表格th - 定义表头 Defines a table headertr - 定义表行 Defines a table rowtd - 定义表元(表格的具体数据) td stands for table data, Defines a table cell.Web 2.0 Programming More Basic HTML and CSS5 / 33March 2, 2022South Ch

4、ina University of Technology定义列表定义列表: : , , , , dl 表示一个定义列表(块元素) dt 表示每一个项目(即术语), 而 dd 表示它的意义 newbieone who does not have mad skills ownto soundly defeat (e.g. I owned that newbie!) frag a kill in a shooting game HTMLnewbie one who does not have mad skills own to soundly defeat (e.g. I owned that ne

5、wbie!) frag a kill in a shooting game outputWeb 2.0 Programming More Basic HTML and CSS6 / 33March 2, 2022South China University of Technology引用引用: : 一段长引用(块元素)As Lincoln said in his famous Gettysburg Address: Fourscore and seven years ago, our fathers brought forth on this continent a new nation, c

6、onceived in liberty, and dedicated to the proposition that all men are created equal. HTMLAs Lincoln said in his famous Gettysburg Address:Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are

7、created equal.outputWeb 2.0 Programming More Basic HTML and CSS7 / 33March 2, 2022South China University of Technology行内引用行内引用: : 一段短引用(行内元素)Quoth the Raven, Nevermore.HTMLQuoth the Raven, “Nevermore”.outputl为什么不直接这样写?lQuoth the Raven, Nevermore.l基于以下两个理由,我们不使用 “ :lXHTML不应该包含文字的引用符号; 他们应该写成 &quo

8、t;l使用 允许我们将CSS样式应用于quotations中Web 2.0 Programming More Basic HTML and CSS8 / 33March 2, 2022South China University of TechnologyHTMLHTML字符实体字符实体l完整的HTML字符实体列表l你会如何显示网页上的&?在网页中表示任何unicode字符的方法字符字符实体实体< > é è ñ ™ © π &

9、;delta; ΔИ " &Web 2.0 Programming More Basic HTML and CSS9 / 33March 2, 2022South China University of TechnologyHTML-编码文本<p> <a href="http:/ Search Google for Marty </a> </p> HTML Search Google for Marty o

10、utputl在网页中，要照原样显示含有html标签的文本，我们需要对那些特定字符进行转义，使用相应的转义字符（如上例）。Web 2.0 Programming More Basic HTML and CSS10 / 33March 2, 2022South China University of Technology计算机代码计算机代码: : code: 一段简短的计算机代码(通常会通过固定宽度的字体呈现出来) The ul and ol tags make lists. HTMLThe ul and ol tags make lists. outputWeb 2.0 Programming

11、More Basic HTML and CSS11 / 33March 2, 2022South China University of Technology预编排文字预编排文字: : 一大段预编排的文字(块元素) Steve Jobs speaks loudly reality distortion Apple fans bow downHTMLSteve Jobs speaks loudly reality distortion Apple fans bow downoutputl显示时会保留空格和回车l以默认的等宽度字体显示l如果我们把它包含在code标签里面,它看起来会是怎样的?Web

12、 2.0 Programming More Basic HTML and CSS12 / 33March 2, 2022South China University of Technology概要概要l更多HTML元素l更多基础的更多基础的CSSlCSS实践Web 2.0 Programming More Basic HTML and CSS13 / 33March 2, 2022South China University of Technology样式分组样式分组p, h1, h2 color: green;h2 background-color: yellow;CSSThis parag

13、raph uses the above style.outputl一种样式可以选择多个元素, 由逗号分隔l单独的元素也可以拥有自己的样式 (例如上面的h2)This h2 uses the above style.Web 2.0 Programming More Basic HTML and CSS14 / 33March 2, 2022South China University of TechnologyCSSCSS的文本属性的文本属性属性属性 描述描述text-align 文本的水平对齐方式text-decoration 文本的修饰, 例如下划线line-height, word-spa

14、cing, letter-spacing 文本的间隔text-indent 每一段落的首字符缩进 完整的文本属性列表Web 2.0 Programming More Basic HTML and CSS15 / 33March 2, 2022South China University of Technologytext-alignltext-align 可以是 left, right, center, 或者 justify (两端对齐, 并使各行长度相等)Web 2.0 Programming More Basic HTML and CSS16 / 33March 2, 2022South

15、China University of Technologytext-decorationl可以是 l可以组合其效果:text-decoration: overline underlineWeb 2.0 Programming More Basic HTML and CSS17 / 33March 2, 2022South China University of Technologylist-style-typelist-style-type 属性属性ol list-style-type: upper-roman CSSl可能的值: none : 没有标记disc (default), cir

16、cle, squaredecimal : 1, 2, 3, etc.decimal-leading-zero : 01, 02, 03, etc.lower-roman : i, ii, iii, iv, v, etc.upper-roman : I, II, III, IV, V, etc.lower-alpha : a, b, c, d, e, etc.upper-alpha : A, B, C, D, E, etc.lower-greek : alpha, beta, gamma, etc.其它: hebrew, armenian, georgian, cjk-ideographic,

17、hiragana, katakana, hiragana-iroha, katakana-irohaWeb 2.0 Programming More Basic HTML and CSS18 / 33March 2, 2022South China University of Technology概要概要l更多HTML元素l更多基础的CSSlCSS实践实践Web 2.0 Programming More Basic HTML and CSS19 / 33March 2, 2022South China University of TechnologyBody Body 样式样式l要把一种样式应

18、用到网页中的整个body, 你需要写一个body元素的选择器l避免让你手动为每一个元素添加样式body font-size: 16px; CSSWeb 2.0 Programming More Basic HTML and CSS20 / 33March 2, 2022South China University of Technology层叠样式表层叠样式表l它被称为层叠样式表是因为元素的属性以以下的顺序 层叠 在一起: 浏览器的默认样式外部样式表文件 (在标签里面)内部样式表 (在网页头的标签里面)行内样式 (HTML 元素的样式属性)Web 2.0 Programming More Ba

19、sic HTML and CSS21 / 33March 2, 2022South China University of Technology继承样式继承样式l当多种样式应用到某一个元素时, 它们是可以被继承的被继承的l一个更紧密匹配的规则可以覆盖一个更通用的继承而来的规则l不是所有的属性都是可以被继承的(注意上面的链接颜色)Web 2.0 Programming More Basic HTML and CSS22 / 33March 2, 2022South China University of Technology冲突的样式冲突的样式l当两种样式为同一个属性设定了冲突的值时, 后一个样

20、式会取得更高的优先级l(稍后我们会学到特殊的样式, 它们可以覆盖通用的样式)Web 2.0 Programming More Basic HTML and CSS23 / 33March 2, 2022South China University of TechnologyW3C CSS W3C CSS 验证器验证器/css-validator/l检查你的CSS, 确保它符合官方CSS规格l比浏览器严格, 因为浏览器可能正确的渲染畸形的CSS HTMLoutputWeb 2.0 Programming More Basic HTML and CSS24 / 33Ma

21、rch 2, 2022South China University of TechnologyCSS CSS 的背景属性的背景属性属性属性描述描述background-color 背景色background-image 背景图background-position 相对于元素的背景位置background-repeat 背景是否/如何被重复background-attachment 背景是否随页面滚动Web 2.0 Programming More Basic HTML and CSS25 / 33March 2, 2022South China University of Technolog

22、ybackground-imagel背景图/颜色充满元素的内容区域draft.jpgWeb 2.0 Programming More Basic HTML and CSS26 / 33March 2, 2022South China University of Technologybackground-repeatl可以是repeat (默认), repeat-x, repeat-y, 或者no-repeatWeb 2.0 Programming More Basic HTML and CSS27 / 33March 2, 2022South China University of Techn

23、ologybackground-positionl值由两部分组成, 每一个可以是top, left, right, bottom, center, 以百分数或者px, pt 为单位的长度.l值可以是负数, 以指定超出左/上边界的长度Web 2.0 Programming More Basic HTML and CSS28 / 33March 2, 2022South China University of Technology收藏夹图标收藏夹图标(“favicon”)(“favicon”)l在head部分里面的link标签, 能够为网页指定一个图标lIE6: 这种方法是无效的; 必须在服务器根

24、目录放置一个ico格式并且命名为favicon.ico的文件(指导)Web 2.0 Programming More Basic HTML and CSS29 / 33March 2, 2022South China University of Technology总结总结l更多HTML元素metadl, dt, ddblockquote, qHTML字符实体, HTML编码文本code, prel更多基础的CSS样式分组注释文本属性: text-align, text-decoration列表样式类型Web 2.0 Programming More Basic HTML and CSS30 / 33March 2, 2022South China University of Technology总结总结lCSS实践body 样式层叠 vs. 继承冲突处理W3C CSS 验证器背景属性: background-image, background-repeat, background-position收藏夹图标Web 2.0 Programming More Basic HTML and CSS31 / 33March 2, 2022So