html超文本标记语言学习

时间：2022-11-19 20:06:21
所有内容整理自 ：

http://www.w3school.com.cn/html/html_styles.asp

HTML 标题

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

 

 

HTML 链接

<a href="http://www.w3school.com.cn">This is a link</a>、

 

HTML 图像

HTML 图像是通过 <img> 标签进行定义的

<img src="w3school.jpg" width="104" height="142" />

 

HTML 属性

属性例子 1:

<h1 align="center"> 拥有关于对齐方式的附加信息。

属性例子 2:

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

属性例子 3:

<table border="1"> 拥有关于表格边框的附加信息

 

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'
 
 

HTML 水平线
 

<hr /> 标签在 HTML 页面中创建水平线。
 

hr 元素可用于分隔内容。
 

实例
 

<p>This is a paragraph</p><hr /><p>This is a paragraph</p><hr /><p>This is a paragraph</p>
 

HTML 提示 - 如何查看源代码
 

您一定曾经在看到某个网页时惊叹道 “WOW! 这是如何实现的？”
 

如果您想找到其中的奥秘，只需要单击右键，然后选择“查看源文件”（IE）或“查看页面源代码”（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
 

 
 

HTML 段落
 

段落是通过 <p> 标题定义的。
 

实例



<p>This is a paragraph</p>
<p>This is another paragraph</p>
 

 
 

HTML 折行
 

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
 

<p>This is<br />a para<br />graph with line breaks</p>
 

 
 

HTML 文本格式化
 

HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。
 

HTML 的 style 属性
 

style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义
 

 
 

HTML 样式实例 - 背景颜色
 

background-color 属性为元素定义了背景颜色：
 

<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>
 

style 属性淘汰了“旧的” bgcolor 属性。
 

HTML 样式实例 - 字体、颜色和尺寸
 

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：



<html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>
 

style 属性淘汰了旧的 <font> 标签。
 

 
 

HTML 样式实例 - 文本对齐
 

text-align 属性规定了元素中文本的水平对齐方式：
 

<html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>
 

 
 

 
 

HTML 链接
 

HTML 超链接（链接）
 

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
 

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
 

我们通过使用 <a> 标签在 HTML 中创建链接。
 

有两种使用 <a> 标签的方式：
 

    

  1. 通过使用 href 属性 - 创建指向另一个文档的链接 
    2.  
 
  2. 通过使用 name 属性 - 创建文档内的书签 
    3.  




HTML 链接语法
 

链接的 HTML 代码很简单。它类似这样：
 

<a href="url">Link text</a>
 

href 属性规定链接的目标。
 

开始标签和结束标签之间的文字被作为超级链接来显示。
 

HTML 链接 - target 属性
 

使用 Target 属性，你可以定义被链接的文档在何处显示。
 

下面的这行会在新窗口打开文档：
 

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
 

HTML 链接 - name 属性
 

name 属性规定锚（anchor）的名称。
 

name 属性用于创建 HTML 内部的书签。
 

书签不会以任何特殊方式显示，它对读者是不可见的。
 

当使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。
 

 
 

HTML 表格
 

表格
 

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。



<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
 

在浏览器显示如下：
 

 




row 1, cell 1 
   row 1, cell 2 
  



row 2, cell 1 
   row 2, cell 2 
  




注意：这个空的单元格的边框没有被显示出来。（不过 Mozilla Firefox 可以将整个边框显示出来。）为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
 

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td></tr></table>
 

在浏览器中显示如下：
 

 





row 1, cell 1
 
   
row 1, cell 2
 
  




row 2, cell 1
 
   
 
 
  




 
 

 
 

跨行或跨列的表格单元格
 

<html>
 

<body>
 

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>
 

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>
 

</body>
 

 
 

HTML 图像
 

 
 
图像标签（<img>）和源属性（Src）
 
 
在 HTML 中，图像由 <img> 标签定义。
 
 
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
 
 
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
 
 
定义图像的语法是：
 
 
<img src="url" />
 
 
URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。
 
 
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
 




 
 
替换文本属性（Alt）
 
 
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
 
 
<img src="boat.gif" alt="Big Boat">
 
 
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
 

 

1.背景图片设置
 

<html>
 

<body background="/i/eg_background.jpg">
 

<h3>图像背景</h3>
 

<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
 

<p>如果图像小于页面，图像会进行重复。</p>
 

</body>
</html>
 

2.排列图片设置
 

<html>
 

<body>
 

<h2>未设置对齐方式的图像：</h2>
 

<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
 

<h2>已设置对齐方式的图像：</h2>
 

<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
 

<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>



<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
 

<p>请注意，bottom 对齐方式是默认的对齐方式。</p>
 

</body>
</html>
 

 
 

3.调整图片尺寸
 

<html>
 

<body>
 

<img src="/i/eg_mouse.jpg" width="50" height="50">
 

<br />
 

<img src="/i/eg_mouse.jpg" width="100" height="100">
 

<br />
 

<img src="/i/eg_mouse.jpg" width="200" height="200">
 

<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>
 

</body>
</html>
 

 
 

4.设置图片超链接
 

<html>
 

<body>
<p>
您也可以把图像作为链接来使用：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
 

</body>
</html>
 

HTML 背景



 
 
好的背景使站点看上去特别棒。
 

 

 
 
实例
 
 


 
    
  
 
 


背景（Backgrounds）
 
 
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
 
 
背景颜色（Bgcolor）
 
 
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
 
 
<body bgcolor="#000000"><body bgcolor="rgb(0,0,0)"><body bgcolor="black">
 
 
以上的代码均将背景颜色设置为黑色。
 

 

背景（Background）
 

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
 

<body background="clouds.gif"><body background="http://www.w3school.com.cn/clouds.gif">
 

URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。
 

提示：如果你打算使用背景图片，你需要紧记一下几点：
 

    

  • 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。 
    •  
 
  • 背景图像是否与页面中的其他图象搭配良好。 
    •  
 
  • 背景图像是否与页面中的文字颜色搭配良好。 
    •  
 
  • 图像在页面中平铺后，看上去还可以吗？ 
    •  
 
  • 对文字的注意力被背景图像喧宾夺主了吗？
    •  




基本的注意事项 - 有用的提示：
 

<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。
 

应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。
 

 
 

HTML 颜色
 

 
 

216 跨平台色
 

最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。
 

 




000000 
   000033 
   000066 
   000099 
   0000CC 
   0000FF 
  



003300 
   003333 
   003366 
   003399 
   0033CC 
   0033FF 
  



006600 
   006633 
   006666 
   006699 
   0066CC 
   0066FF 
  



009900 
   009933 
   009966 
   009999 
   0099CC 
   0099FF 
  



00CC00 
   00CC33 
   00CC66 
   00CC99 
   00CCCC 
   00CCFF 
  



00FF00 
   00FF33 
   00FF66 
   00FF99 
   00FFCC 
   00FFFF 
  



330000 
   330033 
   330066 
   330099 
   3300CC 
   3300FF 
  



333300 
   333333 
   333366 
   333399 
   3333CC 
   3333FF 
  



336600 
   336633 
   336666 
   336699 
   3366CC 
   3366FF 
  



339900 
   339933 
   339966 
   339999 
   3399CC 
   3399FF 
  



33CC00 
   33CC33 
   33CC66 
   33CC99 
   33CCCC 
   33CCFF 
  



33FF00 
   33FF33 
   33FF66 
   33FF99 
   33FFCC 
   33FFFF 
  



660000 
   660033 
   660066 
   660099 
   6600CC 
   6600FF 
  



663300 
   663333 
   663366 
   663399 
   6633CC 
   6633FF 
  



666600 
   666633 
   666666 
   666699 
   6666CC 
   6666FF 
  



669900 
   669933 
   669966 
   669999 
   6699CC 
   6699FF 
  



66CC00 
   66CC33 
   66CC66 
   66CC99 
   66CCCC 
   66CCFF 
  



66FF00 
   66FF33 
   66FF66 
   66FF99 
   66FFCC 
   66FFFF 
  



990000 
   990033 
   990066 
   990099 
   9900CC 
   9900FF 
  



993300 
   993333 
   993366 
   993399 
   9933CC 
   9933FF 
  



996600 
   996633 
   996666 
   996699 
   9966CC 
   9966FF 
  



999900 
   999933 
   999966 
   999999 
   9999CC 
   9999FF 
  



99CC00 
   99CC33 
   99CC66 
   99CC99 
   99CCCC 
   99CCFF 
  



99FF00 
   99FF33 
   99FF66 
   99FF99 
   99FFCC 
   99FFFF 
  



CC0000 
   CC0033 
   CC0066 
   CC0099 
   CC00CC 
   CC00FF 
  



CC3300 
   CC3333 
   CC3366 
   CC3399 
   CC33CC 
   CC33FF 
  



CC6600 
   CC6633 
   CC6666 
   CC6699 
   CC66CC 
   CC66FF 
  



CC9900 
   CC9933 
   CC9966 
   CC9999 
   CC99CC 
   CC99FF 
  



CCCC00 
   CCCC33 
   CCCC66 
   CCCC99 
   CCCCCC 
   CCCCFF 
  



CCFF00 
   CCFF33 
   CCFF66 
   CCFF99 
   CCFFCC 
   CCFFFF 
  



FF0000 
   FF0033 
   FF0066 
   FF0099 
   FF00CC 
   FF00FF 
  



FF3300 
   FF3333 
   FF3366 
   FF3399 
   FF33CC 
   FF33FF 
  



FF6600 
   FF6633 
   FF6666 
   FF6699 
   FF66CC 
   FF66FF 
  



FF9900 
   FF9933 
   FF9966 
   FF9999 
   FF99CC 
   FF99FF 
  



FFCC00 
   FFCC33 
   FFCC66 
   FFCC99 
   FFCCCC 
   FFCCFF 
  



FFFF00 
   FFFF33 
   FFFF66 
   FFFF99 
   FFFFCC 
   FFFFFF 
  





 
 
HTML 4.01 快速参考
 
 
 
  
来自 W3School 的 HTML 快速参考。可以打印它，以备日常使用。
 
 
 
 
 
  
HTML Basic Document
 
  
<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>
 
 
 
 
 
  
Text Elements
 
  
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
 
 
 
 
 
  
Logical Styles
 
  
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
 
 
 
 
 
  
Physical Styles
 
  
<b>This text is bold</b>
<i>This text is italic</i>
 
 
 
 
 
  
Links, Anchors, and Image Elements
 
  
<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL"
alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
 
 
 
 
 
  
Unordered list
 
  
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
 
 
 
 
 
  
Ordered list
 
  
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
 
 
 
 
 
  
Definition list
 
  
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
 
 
 
 
 
  
Tables
 
  
<table border="1">
<tr>
  <th>someheader</th>
  <th>someheader</th>
</tr>
<tr>
  <td>sometext</td>
  <td>sometext</td>
</tr>
</table>
 
 
 
 
 
  
Frames
 
  
<frameset cols="25%,75%">
  <frame src="page1.htm">
  <frame src="page2.htm">
</frameset>
 
 
 
 
 
  
Forms
 
  
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname"
value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60"
cols="20"></textarea>
</form>
 
 
 
 
 
  
Entities
 
  
&lt; is the same as <
&gt; is the same as >
&#169; is the same as ©
 
 
 
 
 
  
Other Elements
 
  
<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>
 
  
 
 
  
HTML 框架
 
 
 
 
 
  框架1 
 
 
 
<html>
 
 
<frameset cols="25%,50%,25%">
 
 
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
 
 
</frameset>
 
 
</html>
 

 


  框架2 

 

<html>



<frameset rows="25%,50%,25%">
 

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
 

</frameset>
 

</html>
 

 
 

框架
 

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
 

使用框架的坏处：
 

    

  • 开发人员必须同时跟踪更多的HTML文档 
    •  
 
  • 很难打印整张页面 
    •  






   框架结构标签（<frameset>） 
 
 
 
 
  
    

  • 框架结构标签（<frameset>）定义如何将窗口分割为框架 
    •  
   
  • 每个 frameset 定义了一系列行或列 
    •  
   
  • rows/columns 的值规定了每行或每列占据屏幕的面积 
    •  
  


 



编者注：frameset 标签也被某些文章和书籍译为框架集。
 

框架标签（Frame）
 

Frame 标签定义了放置在每个框架中的 HTML 文档。
 

在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：



<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>
 

基本的注意事项 - 有用的提示：
 

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
 

为不支持框架的浏览器添加 <noframes> 标签。
 

重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）
 

 
 

 
标签：
相关文章