HTML入门教材

下载 1

快召唤伙伴们来围观吧
微博 QQ QQ空间 贴吧
文档嵌入链接
<iframe src="https://www.slidestalk.com/u16/HTML50629?embed" frame border="0" width="640" height="360" scrolling="no" allowfullscreen="true">复制
微信扫一扫分享
已成功复制到剪贴板

蓝色的海牛

发布于

6年前

4399

人观看

#信息技术

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 文档中显示一个小于号，我们必须这样写：<或者< 使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。注意：实体名是大小写敏感的。下面这个例子能够让你针对 HTML 实体实践一下。 <html> <body> <p>This is a character entity: {</p> </body> </html> 运行代码，结果如下：不可拆分的空格在 HTML 中，最常见的字符实体就是不可拆分空格。通常，HTML 会合并你文档中的空格。假如在你的 HTML 文本中连续写了 10 个空格，其中 9 个会被去掉。想要在 HTML 中插入空格，可以使用实体：  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

9点赞

4收藏

1下载