第01章. 网络安全基础章节-02-网站前端知识介绍
网站前端入门
2.1 网站HTML介绍说明
· HTML表示超文本标记语言（Hyper Text Markup Language）
· HTML文件是一个包含标记的文本文件 从而使浏览器可以按照要求显示页面信息
· HTML文件必须有HTML或者HTML扩展名
· HTML文件可以用一个简单的文本编辑器创建
1. 网站HTML入门编写
在系统中可以打开一个文件，进行以下内容编写，在编写完并将此文件保存为mypage.htm
<html>
<head>
<title>Title of page</title>
</head>
<body>
this is my first homepage
<b> this text is bold </b>
</body>
</html>
启动浏览器，在文件菜单中选择“打开”（或者“打开页面”），这时将出现一个对话框。选择 “浏览”（或者 “选择文件”）
定位到你刚才创建的HTML文件 “mypage.htm” 选择它，单击“打开”
然后在对话框中，将看到这个文件的地址，比如说：c：\MyDocuments\mypage.htm 单击“确定”，浏览器将显示此页面。
配置信息解释
| 编号 | 标签代码 | 说明 | 备注 |
|---|---|---|---|
| 01 | <html></html> | 这个标签有两方面作用 ① 告诉浏览器这是HTML文档的开始 ② 告诉浏览器这是HTML文档的终止 |
|
| 02 | <head></head> | 这个标签表示在之间的文本是头信息,在浏览器页面窗口，头信息是不被显示的 | |
| 03 | <title></title> | 这个标签表示在之间的文本是文档标题,在浏览器标题栏位置，进行显示 | |
| 04 | <body></body> | 这个标签表示在之间的文本是正文信息,在浏览器页面窗口，正文信息会被显示 | |
| 05 | <b></b> | 标签之间的文本会以加粗字体显示 |
2. 网站HTML编写软件
在编写HTML页面时，可以用一些所见即所得的编辑器，比如frontpage,dreamwaver,你可以很容易创建一个页面，而不需要再纯文本编写代码。
但是假如你想成为一名熟练的网络开发者，我们强烈推荐用纯文本编辑器编写代码，这有助于学习HTML基础知识。
3. 网站HTML常见问题
① 我编写完了HTML文件，但是不能在浏览器中看见结果，为什么？
解答：请确认你保存了文件，并且使用了正确的文件名和扩展名，例如：“c:\mypage.html”,并且确认你用浏览器打开时使用同样的文件名
② 我编辑了HTML文件，但是修改结果并没有在浏览器中显示，为什么？
解答：浏览器缓存了你的页面，所以它不需要两次读取同样的页面。你修改了这个页面，浏览器并不知道。请使用 “刷新/重载” 按钮来强迫浏览器读取编辑过的页面
2.2 网站HTML元素说明
· HTML文档是由HTML元素组成的文本文件
· HTML元素是预定义的正在使用的HTML标签
1. 网站HTML标签介绍
HTML标签用来组成HTML元素
HTML标签两端有两个包括字符：“<” 和 ">", 这两个包括字符被称为角括号。
HTML标签通常成对出现，比如<b>和</b>。一对标签的前面一个是开始标签，第二个是结束标签，在开始和结束标签之间的文本是元素内容。
HTML标签是大小写无关的，<b>跟<B>表示的意思是一样的。
当你上网的时候，你会注意到多数教程在示例中使用大写的HTML标签，我们总是使用小写标签，为什么？
假如你想投入到下一代HTML中，你应该开始使用小写标签。W3C在他们的HTML4建议中提倡使用小写标签，XHTML（下一代HTML）也需要小写标签
2. 网站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>
此HTML标签以开始标签<body>起始，终止于结束标签</body>。
<body>,使其包含HTML文档的主体。
3. 网站HTML标签属性
标签可以拥有属性。属性能够为页面上的HTML元素提供附加信息。
标签<body>定义了HTML页面的主体元素。使用一个附加的bgcolor属性，可以告诉浏览器：网站页面的背景色是红色的：
<body bgcolor="red">
标签<table>定义了一个HTML表格。使用一个附加的border属性，你可以告诉浏览器：这个表格是没有边框的：
<table border="0">
属性通常由属性名和值成对出现，就像这样：name="value"。 属性通常是附加给HTML元素的开始标签的。
4. 网站HTML属性引号
属性值应该被包含在引号中。双引号是常用的，但是单引号也可以使用。
在很少情况下，比如说属性值本身包含引号，使用单引号就很必要了。
比如：name='John "ShotGun" Nelson'
注意：中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。
2.3 网站HTML基本标签
HTML中最重要的标签是定义标题元素，段落和换行的标签
学习HTML的最好方法是编辑运行示例代码，可以根据提供的HTML源代码，进行学习代码使用作用，确认结果显示情况。
简单示例说明：
<html>
<body>
The content of body element is displayed in your browser.
</body>
</html>
这个例子是一个非常简单的HTML代码，拥有很少的几个HTML标签。
说明了一个主体元素中文本是如何在浏览器中显示的。
1. 网页HTML段落元素
段落是用<p>标签定义的，HTML自动在一个段落前后各添加一个空行。
以下示例说明了段落元素中的文本是如何在浏览器中显示的。
<html>
<body>
<p>This is a paragraph 01.</p>
<p>This is a paragraph 02.</p>
<p>This is a paragraph 03.</p>
<p>Paragraph elements are defined by the p tag.</p>
</body>
</html>
2. 网页HTML标题元素
标题元素有标签<h1>到<h6>定义。<h1>定义了最大的标题元素，<h6>定义了最小的。
<h1>This is a heading h1</h1>
<h2>This is a heading h2</h2>
<h3>This is a heading h3</h3>
<h4>This is a heading h4</h4>
<h5>This is a heading h5</h5>
<h6>This is a heading h6</h6>
HTML自动会在一个标题元素前后各添加一个空行。
3. 网页HTML换行元素
当需要结束一行，并且不想开始新段落时，使用<br>标签。<br>不管放在什么位置，都能够强制换行。
<br>标签是一个空标签，它没有结束标记。
<p>This <br>is a para<br>graph with line breaks</p>
4. 网页HTML注释元素
注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。你可以使用注释来解释你的代码，这可以在你以后编辑代码的时候帮助你
<!-- This is a comment -->
注意：你需要在左括号 "<" 后面跟一个感叹号，右括号不用。
5. 网页HTML注意事项
当你写下HTML文本的时候，是不能确认在浏览器中网页是如何显示的。用大的显示器和用小的显示器，每次用户调整窗口大小的时
文本都将被重新格式化。不要想在编辑器中写一些空行和空格来协助排版。
HTML将截掉文本中的多余空格，不管多少个空格，处理起来只当一个。
一点附件信息：在HTML里面，一个空行也只被当作一个空格来处理。
使用空段落<p>来插入空白行是一个坏习惯，请使用<br>标签替代。但是不要使用<br>标签来创建列表，后面课程会有专门列表的学习
也许你注意到了段落可以不写结束标记</p>，但也许HTML下一代版本将不准你漏掉任何一个结束标签。
HTML自动在某些元素前后增加额外的空行，就像段落和标题元素的前后一样。
也可以使用水平线<hr>标签来分割章节段落信息
6. 网页HTML更多示例
eg01：段落标签示例
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of your browser
window. If yor resize the browser window, the number of lines in this
paragraph will change.
</p>
</body>
</html>
说明：这个例子说明了段落的一些默认行为
eg02：换行标签示例
<html>
<body>
<p>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</p>
</body>
</html>
说明：这个例子说明了在HTML文档中换行的使用。
eg03：网页诗歌示例
<html>
<body>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
<p>Note that your browser simply ignores your formatting!</p>
</body>
</html>
说明：这个例子说明了HTML显示格式的一些问题。
eg04：标题标签示例
<html>
<body>
<h1>This is a heading h1</h1>
<h2>This is a heading h2</h2>
<h3>This is a heading h3</h3>
<h4>This is a heading h4</h4>
<h5>This is a heading h5</h5>
<h6>This is a heading h6</h6>
<p>Use heading tags only for headings. Don't use them just to make
something bold. Use other tags for that.</p>
</body>
</html>
说明：这个例子说明了在HTML中显示标题元素的标签。
eg05：居中标签元素信息：
<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>The heading above is aligned to the center of this page. The heading
above is aligned to the center of this page. The heading above is aligned to
the center of this page.</p>
</body>
</html>
说明：这个例子显示了一个居中的标题元素。
eg06：水平线标签元素信息：
<html>
<body>
<p>The hr tag defines a horizontal rule;</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
</body>
</html>
说明：这个例子说明了如何插入水平线。
eg07：注释标签元素信息：
<html>
<body>
<!-- This comment will not be displayed -->
<p>This is a regular paragraph</p>
</body>
</html>
说明：这个例子说明HTML文档中如何插入隐藏的注释
eg08：标签背景元素信息：
<html>
<body bgcolor="yellow">
<h2>Look: Colored Background!</h2>
</body>
</html>
说明：这个例子说明了如何给页面设置背景色。
2.4 网站HTML格式说明
HTML定义了很多元素用来格式化输出，比如加粗和倾斜文本。
1. 网页HTML文字格式处理
eg01：格式化文字信息
<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>
<small>
This text is small
</small>
<br>
This text contains
<sub>
subscript
</sub>
<br>
This text contains
<sup>
superscript
</sup>
</body>
</html>
说明：这个例子说明了在HTML里面可以怎样格式化文本信息
eg02：预格式化文本
<html>
<body>
<pre>
This is
preformatted text
It preserver both spaces
and line break.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
说明：这个例子说明了可以怎么用pre标签来控制换行和空格
浙公网安备 33010602011771号