自己收集的一些html知识在此分享第二部分
本帖最后由 梦幻的彼岸 于 2018-1-23 17:10 编辑由于字数限制 审查疲劳 分贴上传望见谅
HTML格式 ：
[*]
HTML定义了很多元素用来格式化输出，比如加粗和倾斜文本。
下面是很多例子，您可以自己尝试。
[*]示例
格式化文字：
[*]
[*]<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>
[*]
[*]这个例子说明了在HTML里面可以怎样格式化文本。
[*]预格式化文本：
[*]
[*]<html>
[*]<body>
[*]<pre>
[*]This is
[*]preformatted text.
[*]It preserves both spaces
[*]and line breaks.
[*]</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标签来控制换行和空格。
[*]“计算机输出”标签：
[*]
[*]<html>
[*]<body>
[*]<code>Computer code</code>
[*]<br>
[*]<kbd>Keyboard input</kbd>
[*]<br>
[*]<tt>Teletype text</tt>
[*]<br>
[*]<samp>Sample text</samp>
[*]<br>
[*]<var>Computer variable</var>
[*]<br>
[*]<p>
[*]<b>Note:</b> These tags are often used to display computer/programming code.
[*]</p>
[*]</body>
[*]</html>
[*]这个例子说明了“计算机输出”标签在显示上的不同。
[*]地址：
[*]
[*]<html>
[*]<body>
[*]<address>
[*]Donald Duck<br>
[*]BOX 555<br>
[*]Disneyland<br>
[*]USA
[*]</address>
[*]</body>
[*]</html>
[*]这个例子说明了如何用HTML书写一个地址。
[*]
缩写和首字母缩略法：
[*]
[*]<html>
[*]<body>
[*]<abbr title="United Nations">UN</abbr>
[*]<br>
[*]<acronym title="World Wide Web">WWW</acronym>
[*]<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>
[*]<p>This only works for the acronym element in IE 5.</p>
[*]<p>This works for both the abbr and acronym element in Netscape 6.2.</p>
[*]</body>
[*]</html>
[*]
这个例子说明了如何处理缩写和首字母缩略。
[*]文字方向：
[*]
[*]<html>
[*]<body>
[*]<p>
[*]If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
[*]</p>
[*]<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>
[*]<p>
[*]With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special.
[*]</p>
[*]</body>
[*]</html>
[*]这个例子说明了如何处理大段引用和小块引用。
[*]删除和插入文字：
[*]
[*]<html>
[*]<body>
[*]<p>
[*]a dozen is
[*]<del>twenty </del>
[*]<ins>twelve </ins>
[*]pieces
[*]</p>
[*]<p>
[*]Most browsers will overstrike deleted text and underline inserted text.
[*]</p>
[*]<p>
[*]Some older browsers will display deleted or inserted text as plain text.
[*]</p>
[*]</body>
[*]</html>
[*]这个例子说明了如何标记被删除或者插入的文本。
[*]如何查看HTML源文件
你有没有看过一些网页，并且想知道它是如何做出来的呢？
在浏览器菜单中选择查看——源文件，将弹出一个窗口，这个页面的HTML代码就在其中。
HTML实体：
[*]有些字符，比如说“<”字符，在HTML中有特殊的含义，因此不能在文本中使用。
想要在HTML中显示一个小于号“<”，需要用到字符实体
[*]字符实体
在HTML中，有些字符拥有特殊含义，比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话，必须在HTML代码中插入字符实体。
一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）
想要在HTML文档中显示一个小于号，我们必须这样写：<或者<
使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。
注意：实体名是大小写敏感的。
下面这个例子能够让你针对HTML实体实践一下。
[*]
[*]<html>
[*]<body>
[*]<p>This is a character entity: {</p>
[*]<p>
[*]</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>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</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>
[*]
[*]
[*]
页:
[1]