html入门的一些东西
来源：互联网 发布：济宁胜通软件 编辑：程序博客网 时间：2024/05/19 08:03
##########################################HTML介绍########################################## HTML文件是什么？ HTML表示超文本标记语言（Hyper Text Markup Language）。 HTML文件是一个包含标记的文本文件。 这些标记保速浏览器怎样显示这个页面。 HTML文件必须有htm或者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文档中，第一个标签是<html>。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是</html>，这个标签告诉浏览器这是HTML文档的终止。在<head>和</head>标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。在<title>和</title>标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。在<body>和</body>标签之间的文本是正文，会被显示在浏览器中。在<b>和</b>标签之间的文本会以加粗字体显示。 为什么使用小写标签？HTML标签是大小写无关的：<B>跟<b>含义相同。当你上网的时候，你会注意到多数教程在示例中使用大写的HTML标签，我们总是使用小写标签。为什么？ 假如你想投入到下一代HTML中，你应该开始使用小写标签。W3C在他们的HTML4建议中提倡使用小写标签，XHTML（下一代HTML）也需要小写标签。 标签<body>定义了HTML页面的主体元素。使用一个附加的bgcolor属性，你可以告诉浏览器：你页面的背景色是红色的，就像这样：<body bgcolor="red"> 标签<table>定义了一个HTML表格。使用一个附加的border属性，你可以告诉浏览器：这个表格是没有边框的，代码是：<table border="0">属性通常由属性名和值成对出现，就像这样：name="value"。属性通常是附加给HTML元素的开始标签的。 属性值应该被包含在引号中。双引号是最常用的，但是单引号也可以使用。在很少情况下，比如说属性值本身包含引号，使用单引号就很必要了。比如：name='John "ShotGun" Nelson'。注意：中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。 ##########################################HTML介绍########################################## ##########################################HTML基本标签##########################################----------------------------------------------------------<html><body><p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p><p>Paragraph elements are defined by the p tag.</p></body></html>---------------------------------------------------------- 段落<p> </p> --> HTML自动在一个段落前后各添加一个空行。 标题元素由标签<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>---------------------------------- 换行<br>当需要结束一行，并且不想开始新段落时，使用<br>标签。<br>标签不管放在什么位置，都能够强制换行。<p>This <br> is a para<br>graph with line breaks</p> <br>标签是一个空标签，它没有结束标记。 HTML中的注释 注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。你可以使用注释来解释你的代码，这可以在你以后编辑代码的时候帮助你。<!-- This is a comment --> 注意：你需要在左括号“<”后面跟一个感叹号，右括号不用。 基本注意点——有用的技巧:当你写下HTML文本的时候，你不能确知在另外一个浏览器中，这些文本将被如何显示。有人用着大的显示器，有的人用的小一些。每次用户调整窗口大小的时候，文本都将被重新格式化。不要想在编辑器中写一些空行和空格来协助排版。 HTML将截掉你文本中的多余空格。不管多少个空格，处理起来只当一个。一点附加信息：在HTML里面，一个空行也只被当作一个空格来处理。 使用空段落<p>来插入空白行是一个坏习惯，请使用<br>标签来替代。（但是不要用<br>标签来创建列表，我们后面会专门学习HTML列表的。） 你也许注意到了段落可以不写结束标记</p>。别依赖它，HTML的下一个版本将不准你漏掉任何一个结束标签。 HTML自动在某些元素前后增加额外的空行，就像在段落和标题元素的前后一样。使用水平线（<hr>标签）来分隔------------------------------------------------------------<html><body bgcolor="blue"><hr><center><p>This is a test page <br>This is a test page</p><hr></body></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><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 inext i</pre></body></html>---------------------------------------- <!-- pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 --> ##########################################HTML基本标签########################################## ##########################################HTML实体##########################################有些字符，比如说“<”字符，在HTML中有特殊的含义，因此不能在文本中使用。想要在HTML中显示一个小于号“<”，需要用到字符实体。 一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）想要在HTML文档中显示一个小于号，我们必须这样写：<或者<使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。注意：实体名是大小写敏感的。-------------------------------------------<html><body><p>This is a character entity: {</p><p></body></html>##########################################HTML实体####################################################################################HTML链接##########################################-----------------------------------------------------------<html><body><p><a href="lastpage.htm">This text</a> is a link to a page on this Web site.</p><p><a href="http://www.microsoft.com/"><! -- 创建链接 其中<a href="http://www.microsoft.com/" target="_blank"> <! -- 以上表示在新标签打开链接，不加的话会在当前标签覆盖原网页打开 -->This text</a> is a link to a page on the World Wide Web. </p></body></html>-----------------------------------------------------------------------------------------------------<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><!-- name属性用来创建一个命名的锚。使用命名锚以后，可以让链接直接跳转到一个页面的某一章节，而不用用户打开那一页，再从上到下慢慢找。 --><p>This chapter explains ba bla bla</p><h2>Chapter 5</h2><p>This chapter explains ba bla bla</p><h2>Chapter 6</h2><p>This chapter explains ba bla bla</p><h2>Chapter 7</h2><p>This chapter explains ba bla bla</p><h2>Chapter 8</h2><p>This chapter explains ba bla bla</p><h2>Chapter 9</h2><p>This chapter explains ba bla bla</p><h2>Chapter 10</h2><p>This chapter explains ba bla bla</p><h2>Chapter 11</h2><p>This chapter explains ba bla bla</p><h2>Chapter 12</h2><p>This chapter explains ba bla bla</p><h2>Chapter 13</h2><p>This chapter explains ba bla bla</p><h2>Chapter 14</h2><p>This chapter explains ba bla bla</p><h2>Chapter 15</h2><p>This chapter explains ba bla bla</p><h2>Chapter 16</h2><p>This chapter explains ba bla bla</p><h2>Chapter 17</h2><p>This chapter explains ba bla bla</p></body></html>------------------------------------------##########################################HTML链接####################################################################################HTML框架##########################################------------------------------------------<html><frameset cols="25%,50%,25%"><frame src="frame_a.htm"><frame src="frame_b.htm"><! -- 这个例子说明了如何创建一个有三个页面的垂直分栏。src=填网页名称 --><frame src="frame_c.htm"></frameset></html>------------------------------------------------------------------------------------<html><frameset rows="25%,50%,25%"><frame src="frame_a.htm"><frame src="frame_b.htm"><! -- 这个例子说明了如何创建一个有三个页面的水平分栏。src=填网页名称 --><frame src="frame_c.htm"></frameset></html>------------------------------------------<frame>标签定义了每个框架中放入什么文件基本注意点——有用的技巧假如一个框架有可见边框，用户可以拖动边框来改变它的大小。如果不想让用户改变大小，可以在<frame>标签中加入：noresize="noresize"。##########################################HTML框架####################################################################################HTML表格##########################################<tr> 标签定义 HTML 表格中的行。--------------------------------------<table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr></table>-------------------------------------##########################################HTML表格##########################################
