2(X)HTML与CSS.ppt

ASP动态网页设计与Ajax技术 唐四薪 主编 第二章 (X)HTML与CSS HTML文档的基本结构 编写HTML文档的方法 HTML文档是一个纯文本文件，可以使用任何文本编辑器编写保存 使用记事本编辑一个html文件 使用Dreamweaver新建一个html文件 HTML标记(Tags) 标记是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标记 的分类 为便于记忆，可将标记按出现的情况分为： 双标记：大部分标记都是双标记 单标记：br /，hr /，img /， input /， meta /，link / 成组标记：table，form，ul, ol, dl, frameset，fieldset及其子标记等 HTML标记（续） 双标记 语法：标记内容/标记 例： p制作网页是我的爱好。/p h1衡阳师范学院/h1 a href= “/”衡阳师院/a HTML标记（续） 单标记 语法：标记 / 例： link href=“style/basic.css” rel=“stylesheet” type=“text/css” / br / img src=“images/logo.gif” alt=“彩虹科技” width=“200” height=“125” / input name=“username” type=“text” id=“username” size=“10” / HTML元素的概念和分类 把HTML标记（如p…/p）和标记之间的内容组合称为HTML元素 1. 根据元素有无内容分类 “有内容的元素”是由起始标记、结束标记和两者之间的内容组成，其中元素内容既可以是文字内容，也可以是其他元素。 “空元素”则只有起始标记而没有结束标记和元素内容，可见“空元素”对应单标记 2. 根据元素的排列方式分类 行内元素(inline)是指元素与元素之间从左到右并排排列，只有当浏览器窗口容纳不下才会转到下一行 块级元素(block)是指每个元素占据浏览器一整行位置，块级元素与块级元素之间自动换行，从上到下排列。 2.2.3 文本格式标记 文本格式标记是网页中定义文本格式的标记 1）直接写文本div文本/div、td文本/td、body文本/body、li文本/li ； 2）用段落标记p……/p格式化文本，各段落文本将分行显示； 3）用标题标记hn……/hn格式化文本，作用：定义第n号标题字体，n=1~6，n值越大，字越小； 4) 用预格式化标记pre……/pre格式化文本，标记内的文本将按原来的格式显示，保留文本中的所有空格、换行和定位符； 2.2.3 文本格式标记（续） 文本换行标记br / 例：春天br /来临，又到了播种耕种的季节 水平线标记hr / 例：hr size=3 width=85% noshade=noshade align=center color=red / 文本中的字符实体 “nbsp;” 表示空格，“lt;”代表符号“”， “gt;”代表符号“” 列表标记 为了合理地组织文本，网页中常常要用到列表。在HTML中可以使用的列表标记有无序列表、有序列表和定义列表三种。 无序列表(Unordered List) ul, li 有序列表(Ordered List) ol, li 定义列表(Defined List) dl, dt, dd 嵌套的无序列表示例 ul id=nav lia href=文章/a ul lia href=CSS教程/a /li lia href=DOM教程/a/li lia href=XML教程/a/li /ul /li lia href=参考/a ul lia href=XHTML/a/li lia href=XML/a/li lia href=CSS/a/li /ul /li /ul 2.2.5 图像标记img img src=images/info.gif width=158 height=41 align=left alt=公告/ 2.2.6 超链接标记a