HTML入门教材,从0到1,详细讲解网页渲染的过程,web基础

注脚

展开查看详情

1.Web 程序开发基础 第一章 HTML 基本结构及实体 本章目标:了解 HTML 文档的基本结构 掌握 HTML 结构标签<html><head><title><body> 掌握 HTML 字符实体 本章重点:了解 HTML 文档的基本结构 本章难点:HTML 字符实体的使用 一、 HTML 文档的基本结构 HTML 文件是什么? � HTML 表示超文本标记语言(Hyper Text Markup Language)。 � HTML 文件是一个包含标记的文本文件。 � 这些标记保速浏览器怎样显示这个页面。 � HTML 文件必须有 htm 或者 html 扩展名。 � HTML 文件可以用一个简单的文本编辑器创建。 想不想尝试一下? 假如你运行的是 windows 系统,打开记事本,在其中输入以下文本: <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> 将此文件保存为“mypage.htm”。 启动浏览器。在文件菜单中选择“打开”(或者“打开页面”),这时将出现一个对话 框 。 选 择 “ 浏 览 ” ( 或 者 “ 选 择 文 件 ” ), 定 位 到 你 刚 才 创 建 的 HTML 文 件 ——“mypage.htm”,选择它,单击“打开”。然后在对话框中,你将看到这个文件的 地址,比如说:“C:\MyDocuments\mypage.htm”。单击“确定”,浏览器将显示此页 面。 2

2. 使用样式表美化页面 1 例子解释: HTML 文档中,第一个标签是<html>。这个标签告诉浏览器这是 HTML 文档的开始。HTML 文档的最后一个标签是</html>,这个标签告诉浏览器这是 HTML 文档的终止。 在<head>和</head>标签之间文本的是头信息。在浏览器窗口中,头信息是不被显示的。 在<title>和</title>标签之间的文本是文档标题,它被显示在浏览器窗口的标题栏。 在<body>和</body>标签之间的文本是正文,会被显示在浏览器中。 在<b>和</b>标签之间的文本会以加粗字体显示。 关于 HTML 编辑器: 用一些所见即所得的编辑器,比如 frontpage,dreamwaver,你可以很容易创建一个 页面,而不需要在纯文本中编写代码。 但是假如你想成为一名熟练的网络开发者,我们强烈推荐你用纯文本编辑器编写代码, 这有助于学习 HTML 基础。 常见问题: 问:我编写完了 HTML 文件,但是不能在浏览器中看见结果,为什么? 答 : 请确 认 你 保 存了 文 件 , 并且 使 用 了 正确 的 文 件 名和 扩 展 名 ,例 如 : “c:\mypage.htm”,并且确认你用浏览器打开时使用同样的文件名。 问:我编辑了 HTML 文件,但是修改结果并没有在浏览器中显示,为什么? 答:浏览器缓存了你的页面,所以它不需要两次读取同样的页面。你修改了这个页面, 浏览器并不知道。请使用“刷新/重载”按钮来强迫浏览器读取编辑过的页面。 3

3.Web 程序开发基础 HTML 元素: HTML 文档是由 HTML 元素组成的文本文件。 HTML 元素是预定义的正在使用的 HTML 标签。 HTML 标签: HTML 标签用来组成 HTML 元素。 HTML 标签两端有两个包括字符:“<”和“>”,这两个包括字符被称为角括号。 HTML 标签通常成对出现,比如<b>和</b>。一对标签的前面一个是开始标签,第二 个是结束标签,在开始和结束标签之间的文本是元素内容。 HTML 标签是大小写无关的,<b>跟<B>表示的意思是一样的。 HTML 元素: 回忆一下上面的 HTML 例子: <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> 下面是一个 HTML 元素: <b>This text is bold</b> 此 HTML 元素以开始标签<b>起始, 内容是:This text is bold,以结束标签</b>中止。 <b>标签的目的是定义一个需要被显示成粗体的 HTML 元素。 下面也是一个 HTML 元素: <body> This is my first homepage. <b>This text is bold</b> </body> 4

4. 使用样式表美化页面 1 此 HTML 标签以开始标签<body>起始,终止于结束标签</body>。<body>标签的目的 是定义一个 HTML 元素,使其包含 HTML 文档的主体。 为什么使用小写标签? 我们刚说过,HTML 标签是大小写无关的:<B>跟<b>含义相同。当你上网的时候,你 会注意到多数教程在示例中使用大写的 HTML 标签,我们总是使用小写标签。为什 么? 假如你想投入到下一代 HTML 中,你应该开始使用小写标签。W3C 在他们的 HTML4 建议中提倡使用小写标签,XHTML(下一代 HTML)也需要小写标签。 标签属性: 标签可以拥有属性。属性能够为页面上的 HTML 元素提供附加信息。 标签<body>定义了 HTML 页面的主体元素。使用一个附加的 bgcolor 属性,你可以告 诉浏览器:你页面的背景色是红色的,就像这样: <body bgcolor="red"> 标签<table>定义了一个 HTML 表格。使用一个附加的 border 属性,你可以告诉浏览 器:这个表格是没有边框的,代码是: <table border="0"> 属性通常由属性名和值成对出现,就像这样:name="value"。属性通常是附加给 HTML 元素的开始标签的。 引号样式: 属性值应该被包含在引号中。双引号是最常用的,但是单引号也可以使用。 在很少情况下,比如说属性值本身包含引号,使用单引号就很必要了。 比如:name='John "ShotGun" Nelson'。 注意:中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。 二、 HTML 实体 有些字符,比如说“<”字符,在 HTML 中有特殊的含义,因此不能在文本中使用。 想要在 HTML 中显示一个小于号“<”,需要用到字符实体。 5

5.Web 程序开发基础 字符实体: 在 HTML 中,有些字符拥有特殊含义,比如小于号“<”定义为一个 HTML 标签的开始。 假如我们想要浏览器显示这些字符的话,必须在 HTML 代码中插入字符实体。 一个字符实体拥有三个部分:一个 and 符号(&),一个实体名或者一个实体号,最后 是一个分号(;) 想要在 HTML 文档中显示一个小于号,我们必须这样写:&lt;或者&#60; 使用名字相对于使用数字的优点是容易记忆,缺点是并非所有的浏览器都支持最新的 实体名,但是几乎所有的浏览器都能很好地支持实体号。 注意:实体名是大小写敏感的。 下面这个例子能够让你针对 HTML 实体实践一下。 <html> <body> <p>This is a character entity: &#123;</p> </body> </html> 运行代码,结果如下: 不可拆分的空格 在 HTML 中,最常见的字符实体就是不可拆分空格。 通常,HTML 会合并你文档中的空格。假如在你的 HTML 文本中连续写了 10 个空格, 其中 9 个会被去掉。想要在 HTML 中插入空格,可以使用实体:&nbsp; 6

6. 使用样式表美化页面 1 最常用的字符实体: 其他一些常用的字符实体: 7

7.Web 程序开发基础 第二章 HTML 基本元素的运用 本章目标:掌握下列标签: 段落相关标签<p><br><hr> 格式化相关标签<small><sub><sup><pre> 列表相关标签<ol><ul><li> 图片相关标签<img> 超链相关标签<a> 本章重点:段落相关标签,超链标签 本章难点:超链相关标签<a> 一、 段落 相关 段落相关 相关标签 标题元素: 标题元素由标签<h1>到<h6>定义。<h1>定义了最大的标题元素,<h6>定义了最小的。 <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> 运行代码,结果如下: 8

8. 使用样式表美化页面 1 HTML 自动在一个标题元素前后各添加一个空行。 段落: 段落是用<p>标签定义的。 <p>This is another paragraph</p> 运行代码,结果如下: HTML 自动在一个段落前后各添加一个空行。 换行: 当需要结束一行,并且不想开始新段落时,使用<br>标签。<br>标签不管放在什么位 置,都能够强制换行。 <p>This <br> is a para<br>graph with line breaks</p> 运行代码,结果如下: 9

9.Web 程序开发基础 <br>标签是一个空标签,它没有结束标记。 二、 格式化 相关 格式化相关 标签 相关标签 格式化文字: <html> <body> <b>This text is bold</b><br> <strong> This text is strong </strong><br> <big> This text is big </big><br> <em> This text is emphasized </em><br> <i> This text is italic </i><br> <small> This text is small </small><br> This text contains <sub> subscript </sub><br> This text contains <sup> superscript </sup> </body> </html> 10

10. 使用样式表美化页面 1 运行代码,结果如下: 这个例子说明了在 HTML 里面可以怎样格式化文本。 三、 列表相关标签 无序列表: 无序列表是一个项目的序列。各项目前加有标记(通常是黑色的实心小圆圈)。 无序列表以<ul>标签开始。每个列表项目以<li>开始。 <ul> <li>Coffee</li> <li>Milk</li> </ul> 运行代码,结果如下: 无序列表的项目中可以加入段落、换行、图像,链接,其他的列表等等。 有序列表: 有序列表也是一个项目的序列。各项目前加有数字作标记。 有序列表以<ol>标签开始。每个列表项目以<li>开始。 <ol> 11

11.Web 程序开发基础 <li>Coffee</li> <li>Milk</li> </ol> 运行代码,结果如下: 更多示例: 有序列表的不同类型: <html> <body> <h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase letters list:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> 12

12. 使用样式表美化页面 1 <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </body> </html> 运行代码,结果如下: 13

13.Web 程序开发基础 这个例子显示了有序列表的不同类型。 无序列表的不同类型: <html> 14

14. 使用样式表美化页面 1 <body> <h4>Disc bullets list:</h4> <ul type="disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Circle bullets list:</h4> <ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Square bullets list:</h4> <ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html> 运行代码,结果如下: 这个例子显示了无序列表的不同类型。 15

15.Web 程序开发基础 四、 图片相关标签 Img 标签和 src 属性: 在 HTML 里面,图像是由<img>标签定义的。 <img>是空标签,意思是说,它只拥有属性,而没有结束标签。 想要在页面上显示一个图像,需要使用 src 属性。“src”表示“源”的意思。“src”属性的 值是所要显示图像的 URL。 插入图像的语法: URL 指 向 图像 存 储的 地 址 。网 站 “www.w3schools.com” 子 目 录“images” 中 的 图像 “boat.gif”的 URL 如下: “http://www.w3schools.com/images/boat.gif”。 当浏览器在文档中遇到 img 标签时,就放置一个图像。如果把 img 标签放在两个段落 之间,就会先显示一个段落,然后是这个图像,最后是另外一个段落。 alt 属性: alt 属性用来给图像显示一个“交互文本”。alt 属性的值是由用户定义的。 “alt”属性在浏览器装载图像失败的时候告诉用户所丢失的信息,此时,浏览器显示这 个“交互文本”来代替图像。给页面上的图像都加上 alt 属性是一个好习惯,它有助于更 好地显示信息,而且,对纯文本浏览器很有用。 基本注意点——有用的技巧: 如果一个 HTML 文档包含 10 个图像,那么为了正确显示这个页面,需要加载 11 个文件。 加载图像是需要时间的,所以请谨慎使用图像。 更多示例: 调整图像大小: <html> <body> <p> 16

16. 使用样式表美化页面 1 <img src="./images/hackanm.gif" width="20" height="20"> </p> <p> <img src="./images/hackanm.gif" width="45" height="45"> </p> <p> <img src="./images/hackanm.gif" width="70" height="70"> </p> <p> You can make a picture larger or smaller changing the values in the "height" and "width" attributes of the img tag. </p> </body> </html> 运行代码,结果如下: 背景图像: <html> <body background="./images/background.jpg"> <h3>Look: A background image!</h3> <p>Both gif and jpg files can be used as HTML backgrounds.</p> <p>If the image is smaller than the page, the image will repeat itself.</p> </body> </html> 运行代码,结果如下: 17

17.Web 程序开发基础 图像链接: <html> <body> <p> You can also use an image as a link: <a href="back.htm"> <img border="0" src="./images/next.gif"> </a> </p> </body> </html> 运行代码,结果如下: 五、 超链相关标签 18

18. 使用样式表美化页面 1 锚标签和 href 属性: HTML 使用锚标签(<a>)来创建一个连接到其他文件的链接。锚可以指向网络上的 任何资源:HTML 页面,图像,声音,影片等等。 创建一个锚的语法: 锚可以指向网络上的任何资源:HTML 页面,图像,声音,影片等等。 标签<a>被用来创建一个链接指向的锚,href 属性用来指定连接到的地址,在锚的起始 标签<a>和结束标签</a>中间的部分将被显示为超级链接。 这个锚定义了一个到 W3Schools 的链接: 上面这段代码在浏览器中显示的效果如下: target 属性: 使用 target 属性,你可以定义从什么地方打开链接地址。 下面这段代码打开一个新的浏览器窗口来打开链接: 锚标签和 name 属性 name 属性用来创建一个命名的锚。使用命名锚以后,可以让链接直接跳转到一个页面 的某一章节,而不用用户打开那一页,再从上到下慢慢找。 下面是命名锚的语法: 你可以为锚随意指定名字,只要你愿意。下面这行代码定义了一个命名锚: 你应该注意到了:命名锚的显示方式并没有什么与众不同的。 想要直接链接到“tips”章节的话,在 URL 地址的后面加一个“#”和这个锚的名字,就像 这样: 19

19.Web 程序开发基础 一个链接到本页面中某章节的命名锚是这样写的: 基本注意点——有用的技巧: 尽量 在子目 录路径 后面加 一个左 斜杠。 假如你 像下面 这样写 : href="http://www.w3schools.com/html",将会产生向服务器产生两个 HTTP 请求,因为 服务器会在后面追加一个左斜杠,产生一个新的请求,就像这样: href="http://www.w3schools.com/html/"。 命名锚通常用来在大型文档的开头创建章节表。这个页面的每个章节被加上一个命名 锚,到这些锚的链接被放在页面的顶端。 如果浏览器无法找到指定的命名锚,它将转到这个页面的顶部,而不显示任何错误提 示。 更多示例: 在新浏览器窗口中打开链接: <html> <body> <a href="lastpage.htm" target="_blank">Last Page</a> <p> If you set the target attribute of a link to "_blank", the link will open in a new window. </p> </body> </html> 运行代码,结果如下: 20

20. 使用样式表美化页面 1 单击超连接,打开一个新窗口: 链接到本页面的某个位置: <html> <body> <p> <a href="#C4"> See also Chapter 4. </a> </p> <p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <a name="C4"><h2>Chapter 4</h2></a> <p>This chapter explains ba bla bla</p> </body> </html> 运行代码,结果如下: 21

21.Web 程序开发基础 单击超连接, 22

22. 使用样式表美化页面 1 第三章 用 HTML 创建表格 本章目标:了解掌握表格的基本结构<table><tr><th><td> 掌握跨行、跨列属性 colspan rowspan 掌 握 表 格 相 关 修 饰 属 性 border width height bgcolor background height cellpadding cellspacing 本章重点:掌握表格的基本结构及相关属性 本章难点:掌握跨行、跨列属性 colspan rowspan 一、 HTML 表格 表格: 表格是用<table>标签定义的。表格被划分为行(使用<tr>标签),每行又被划分为数据单 元格(使用<td>标签)。td 表示“表格数据”(Table Data),即数据单元格的内容。数据单 元格可以包含文本,图像,列表,段落,表单,水平线,表格等等。想不想尝试一下? 在浏览器中显示如下: 表格和 border 属性: 如果不指定 border 属性,表格将不显示边框。有时候这很有用,但是多数时候我们希望 23

23.Web 程序开发基础 显示边框。 表格头: 表格头使用<th>标签指定。 在浏览器中显示如下: 表格中的空单元格 在多数浏览器中,没有内容的单元格显示得不太好。 在浏览器中显示如下: 注意一下空单元格的边框没有显示出来。为了避免这个,可以在空单元格里加入不可分 24

24. 使用样式表美化页面 1 空格来占位,这样边框能正常显示。 在浏览器中显示如下: 基本注意点——有用的技巧 通常很少使用<thead>,<tbody>,<tfoot>标签,因为浏览器对它们的支持不好。希望这 个在 XHTML 的未来版本中得到改变。 更多示例: 没有边框的表格: <html> <body> <h4>This table has no borders:</h4> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <h4>And this table has no borders:</h4> <table border="0"> <tr> 25

25.Web 程序开发基础 <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> 表格头: <html> <body> <h4>Table headers:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> 26

26. 使用样式表美化页面 1 <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Vertical headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table> </body> </html> 有标题的表格: 27

27.Web 程序开发基础 <html> <body> <h4> This table has a caption,and a thick border: </h4> <table border="6"> <caption>My Caption</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> 单元格跨行(列)的表格: 28

28. 使用样式表美化页面 1 <html> <body> <h4>Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html> 29

29.Web 程序开发基础 表格内的其他标签: <html> <body> <table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>This cell contains a list <ul> 30

user picture
一个幽灵,共产主义的幽灵,在欧洲大陆徘徊。

相关文档