自己收集的一些html知识在此分享第二部分

梦幻的彼岸 · 发表于 2018-1-23 15:36:48

本帖最后由梦幻的彼岸于 2018-1-23 17:10 编辑

由于字数限制审查疲劳分贴上传望见谅[index]

HTML格式：

HTML定义了很多元素用来格式化输出，比如加粗和倾斜文本。

下面是很多例子，您可以自己尝试。
示例

格式化文字：
<html>
<body>
This text is bold
This text is strong
<big>
This text is big
</big>
This text is emphasized
This text is italic
This text is small
This text contains
subscript
This text contains
superscript
</body>
</html>
这个例子说明了在HTML里面可以怎样格式化文本。
预格式化文本：
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
The pre tag is good for displaying computer code:
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
这个例子说明了可以怎样用pre标签来控制换行和空格。
“计算机输出”标签：
<html>
<body>
<code>Computer code</code>
<kbd>Keyboard input</kbd>
<tt>Teletype text</tt>
<samp>Sample text</samp>
<var>Computer variable</var>
Note: These tags are often used to display computer/programming code.
</body>
</html>
这个例子说明了“计算机输出”标签在显示上的不同。
地址：
<html>
<body>
<address>
Donald Duck
BOX 555
Disneyland
USA
</address>
</body>
</html>
这个例子说明了如何用HTML书写一个地址。
缩写和首字母缩略法：
<html>
<body>
<abbr title="United Nations">UN</abbr>
<acronym title="World Wide Web">WWW</acronym>
The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.
This only works for the acronym element in IE 5.
This works for both the abbr and acronym element in Netscape 6.2.
</body>
</html>
这个例子说明了如何处理缩写和首字母缩略。
文字方向：
<html>
<body>
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
这个例子说明了如何改变文字方向。
块引用：
<html>
<body>
Here comes a long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>
Here comes a short quotation:
<q>
This is a short quotation
</q>
With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special.
</body>
</html>
这个例子说明了如何处理大段引用和小块引用。
删除和插入文字：
<html>
<body>
a dozen is
<del>twenty </del>
<ins>twelve </ins>
pieces
Most browsers will overstrike deleted text and underline inserted text.
Some older browsers will display deleted or inserted text as plain text.
</body>
</html>
这个例子说明了如何标记被删除或者插入的文本。
如何查看HTML源文件

你有没有看过一些网页，并且想知道它是如何做出来的呢？

在浏览器菜单中选择查看——源文件，将弹出一个窗口，这个页面的HTML代码就在其中。

HTML实体：

有些字符，比如说“<”字符，在HTML中有特殊的含义，因此不能在文本中使用。

想要在HTML中显示一个小于号“<”，需要用到字符实体
字符实体

 在HTML中，有些字符拥有特殊含义，比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话，必须在HTML代码中插入字符实体。

 一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）

 想要在HTML文档中显示一个小于号，我们必须这样写：<或者<

使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。

 注意：实体名是大小写敏感的。

 下面这个例子能够让你针对HTML实体实践一下。
<html>
<body>
This is a character entity: {
</body>
</html>
不可拆分的空格

在HTML中，最常见的字符实体就是不可拆分空格。

通常，HTML会合并你文档中的空格。假如在你的HTML文本中连续写了10个空格，其中9个会被去掉。想要在HTML中插入空格，可以使用实体：
最常用的字符实体

显示结果描述实体名实体号
不可拆分的空格
< 小于 < <
> 大于 > >
& and符号 & &
" 引号 " "
' 单引号 '
其他一些常用的字符实体

显示结果	描述	实体名	实体号
￠	分	￠	￠
￡	英镑	￡	￡
￥	人民币元	￥	￥
§	章节	§	§
©	版权	©	©
®	注册	®	®
×	乘号	×	×
÷	除号	÷	÷

HTML框架:

使用框架，可以在一个浏览器窗口中显示不止一个页面。
示例
垂直分栏：
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
这个例子说明了如何创建一个有三个页面的垂直分栏。
水平分栏：
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html
这个例子说明了如何创建一个有三个页面的水平分栏。
如何使用<noframes>标签：
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
</frameset>
</html>
这个例子说明了如何使用<noframes>标签。

在这个页面的底部，还有更多例子。
框架

使用框架，可以在一个浏览器窗口中显示不止一个HTML文档。这样的HTML文档被称为框架页面，它们是相互独立的。

使用框架的不利因素有：
- 网站开发者需要关心更多HTML文档的情况。
- 打印整个页面变得困难。
- frameset标签
 - <frameset>标签定义了如何将窗口拆分成框架。
 - 每个frameset标签定义了一组行和列。
 - 行/列的值指明了每个行/列在屏幕上所占的大小。
 - frame标签
 - <frame>标签定义了每个框架中放入什么文件。
 下面这个例子中，有一个两列的分栏。第一个被设置成窗口宽度的25％，第二个被设置成窗口宽度的75％。页面“frame_a.htm”被放在第一个分栏中，“frame_b.htm”被放在第二个分栏中。
 - <frameset cols="25%,75%">
 <frame src="frame_a.htm">
 <frame src="frame_b.htm">
 </frameset>
 - 基本注意点——有用的技巧
 
 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。如果不想让用户改变大小，可以在<frame>标签中加入：noresize="noresize"。
 
 给不支持框架的浏览器写上<noframes>标签。
 - 更多示例：
 - 混合框架：
 - <html>
 - <frameset rows="50%,50%">
 - <frame src="frame_a.htm">
 - <frameset cols="25%,75%">
 - <frame src="frame_b.htm">
 - <frame src="frame_c.htm">
 - </frameset>
 - </frameset>
 - </html>
 - 这个例子说明了怎样把三个页面以行列混合的方式放在框架中。
 - 使用了noresize="noresize"的框架：
 - <html>
 - <frameset rows="50%,50%">
 - <frame noresize="noresize" src="frame_a.htm">
 - <frameset cols="25%,75%">
 - <frame noresize="noresize" src="frame_b.htm">
 - <frame noresize="noresize" src="frame_c.htm">
 - </frameset>
 - </frameset>
 - </html>
 - 这个例子说明了noresize属性。这个框架是不可改变大小的，把鼠标移动到框架边界上，你会发现无法调整大小。
 - 导航框架：
 - <html>
 - <frameset cols="120,*">
 - <frame src="frame_link.htm">
 - <frame src="frame_a.htm" name="showframe">
 - </frameset>
 - </html>
 - 这个例子说明了如何创建一个导航框架。导航框架包含了一系列链接，它们的目标页面在第二个框架中。文件“frame_links.htm”包含了三个链接，链接的代码如下：
 - <a href ="frame_a.htm" target ="showframe">Frame a</a>
 <a href ="frame_b.htm" target ="showframe">Frame b</a>
 <a href ="frame_c.htm" target ="showframe">Frame c</a>
 - 第二个框架将显示链接到的页面。
 - 内联框架：
 - <html>
 <body>
 <iframe src="intro.htm"></iframe>
 Some older browsers don't support iframes.
 If they don't, the iframe will not be visible.
 </body>
 </html>
 - 这个例子说明了如何创建一个内联框架（包含在HTML页面里的框架）。
 - 在框架内跳转到指定章节：
 - <html>
 <frameset cols="30%,70%">
 <frame src="frame_a.htm">
 <frame src="frame_section.htm#C10">
 </frameset>
 </html>
 - 这个例子显示了两个框架页。其中一个的源是一个文件的指定章节，该章节在文件“frame_section.htm”中使用代码<a name="C10">指定。
 - 使用导航框架跳转到指定章节：
 - <html>
 - <frameset cols="200,*">
 - <frame src="frame_linksection.htm">
 - <frame src="frame_section.htm" name="showframe">
 - </frameset>
 - </html>
 - 这个例子显示了两个框架页。左边的导航框架包含了一系列以第二个框架为目标的链接（“frame_linksection.htm”），第二个框架显示链接文件（“frame_section.htm”）。导航框架中的一个链接指向目标文件中的指定章节。文件“frame_link”中的HTML代码是像这样的：
 - <a href ="frame_section" target ="showframe">没有命名锚的链接</a>
 <a href ="frame_section#C10" target ="showframe">有命名锚的链接</a>

		自动登录	找回密码
密码			加入我们