2.1html解读.ppt

Web标准网页设计与PHP 唐四薪 编著 清华大学出版社 2016年10月 第2章 HTML 本章要点 HTML文档的结构 HTML标记的结构和分类 文本格式标记 超链接标记 图像和多媒体标记 HTML文档的结构 编写HTML网页文档的方法 HTML文档是一个纯文本文件，可以使用任何文本编辑器编写，并保存为后缀名为“.html” 或“.htm”的文件，如2-1.htm 使用记事本编辑一个html文件 使用Dreamweaver新建一个html文件 用记事本写一个最简单的网页 2.1.2 Dreamweaver的开发界面 （1）“设计视图”的作用是帮助用户以“所见即所得”的方式编写HTML代码，即通过一些可视化的方式自动编写代码，减少用户手工书写代码的工作量。 （2）“代码视图”供用户手工编写或修改代码，因为在网页制作过程中，代码视图拥有代码提示的功能，即使是手工编写代码，速度也很快。 （3）“拆分视图”同时显示设计视图和代码视图 2.1.4 HTML标记 标记是HTML文档中一些有特定意义的符号，这些符号指明内容的含义或结构。标记名总是放在尖括号内，大多数标记是成对出现的。 带有属性的HTML元素的结构 例2 找出下面html代码的错误 下列HTML元素的写法错在什么地方？ img birthday.jpg / i Congratulations! i a href=file.htmllinked text/a href=file.html pThis is a new paragraph\p liThe list item /li HTML标记 的分类（2） 为便于记忆，可将标记按出现的情况分为： 单标记：br /，hr /，img /， input /， meta /，link / 双标记：大部分标记都是双标记 成组标记：table，form，ul, ol, dl, frameset，fieldset及其子标记等，配对标记中很多都是成组标记 HTML标记（续） 双标记 语法：标记受标记影响的内容/标记 例： p制作网页是我的爱好。/p h1 align=“center”衡阳师范学院/h1 a href= “/”衡阳师院/a HTML标记（续） 单标记 语法：标记 [属性名:属性值]/ 例： link href=“style/basic.css” type=“text/css” / br / img src=“images/logo.gif” alt=“彩虹科技” width=“200” height=“125” / input name=“user” type=“text” size=“10” / HTML标记 的分类 头部标记：title, meta, link, style 文本标记：font, b, i, u , strong, 段落标记：p, hn, pre, marquee, br, hr 列表标记：ul, ol, li, dl, dt, dd 5) 超链接标记：a, map, area 6) 图像及媒体元素标记：img, embed, object 7) 表格标记：table, tr, td, th, tbody 8) 表单标记：form, input, textarea, select, option, fieldset, legend 9) 框架标记：frameset, frame, iframe 10) 容器标记：div, span html标记常见的的属性 公共属性： align（对齐方式），border（边框），title（提示文字），src（链接的文件路径），style（引入CSS行内样式），id，name 特有属性： a href（链接的目标），target（窗口打开方式） input type（元素的类型），size（含义依据type而不同） 练习 要在空白页面中插入一个p元素，应插入在哪个标记内 body标记内 要在p标记中插入一个align属性，应在哪插入 起始标记的尖括号内 2.2在网页中添加文本 文本格式标记 2.2.1 文本格式标记 1）段落标记p这是一段文本/p 2）标题标记 h1这是文章的一级标题/h1 3）换行标记br / 例：春天br /来临， 又到了播种耕种的季节 用标题标记hn……/hn格式化文本 h1第1号标题字体/h1 h3第3号标题字体/h3 h4第4号标题字体/h4 h5 align=center第5号标题字体（居中）/h5 文本格式标记的示例 body h1 align=center1号标题/h1 p第一段/p h33号标题/h3 p第二段/p h5 align=right5号标