淡水求咸

博客园已经停止更新,请移步 http://lovecjh.com/

导航

HTML基础(一)

1.HTML三部分:<html></html>  <title></title>  <body></body>

例子:

<html>

<title>
This the first HTML page
</title>

<body>
This the HTML web page!
</body>

</html>

运行结果:

 

2.标题

格式:<hn 属性>文字添加部分</hn>  其中 n=1~6

例子:

<html>

<title>
This the first HTML page
</title>

<body>
This the HTML web page!
<h1 align = "center">This the HTML web page!</h1>
<h2 align = "center">This the HTML web page!</h2>
<h3 align = "center">This the HTML web page!</h3>
<h4 align = "center">This the HTML web page!</h4>
<h5 align = "center">This the HTML web page!</h5>
<h6 align = "center">This the HTML web page!</h6>
This the HTML web page!

</body>

</html>

运行结果:

 

3.段落、换行、空格

<p>     段落标记

<br>    换行标记

&nbsp;  空格标记

例子:

<html>

<title>
This the first HTML page
</title>

<body>

<h3 align = "center">Paragraph</h3>
<p>Paragraph1</p>
<p>Paragraph2</p>
<p>Paragraph3</p>

<h3 align = "center">Newline</h3>
Newline1
<br>

Newline2
<br>


Newline3
<br>

<h3 align = "center">Blank</h3>
Blank1
&nbsp;

Blank2
&nbsp;

Blank3
&nbsp;

</body>

</html>

运行结果:

 

4.标签中的属性和区域控制标签

格式: <标签名 属性1 = "属性值" 属性值2 = "属性值" ...... 属性值n = "属性值">内容</标签名>

    <div align = "center/left/right">文本</div>  区域控制标签

例子:

<html>

<title>
This the first HTML page
</title>

<body>

<div align = "center">HTML</div>
<div align = "left">HTML</div>
<div align = "right">HTML</div>

</body>

</html>

运行结果:

 

5.在网页中加入水平线

格式:   <hr align = "" size = "" width = "" color = "" [noshade]>

           noshade  是否显示阴影

例子:

<html>

<title>
This the first HTML page
</title>

<body>

<hr align = "center" size = "10" width = "100" color = "#000000">
<hr align = "center" size = "10" width = "100" color = "#000000" noshade>

</body>

</html>

运行结果:

 

6.显示预排格式标签

格式:<pre>文字内容</pre>

例子:

<html>

<title>
This the first HTML page
</title>

<body>

<h3>    This the HTML web page!</h3>
This the first sentense!    This the second sentense!
This the third sentense!    This the fifth sentense!

<pre>
<h3>    This the HTML web page!</h3>
This the first sentense!    This the second sentense!
This the third sentense!    This the fourth sentense!
</pre>


</body>

</html>

运行结果:

 

 

7.文字标签font

格式:<font size = "" color = "" face = "">文字</font>

例子:

<html>

<title>
This the first HTML page
</title>

<body>

<div align = "center">
<font color = "#0066cc" size = "+2" face = "华文行楷">This the HTML web page!</font><br>
<font color = "#0066cc" size = "+2" face = "华文行楷"><b>This the HTML web page!</b></font><br>
<font color = "#0066cc" size = "+2" face = "华文行楷"><i>This the HTML web page!</i></font><br>
<font color = "#0066cc" size = "+2" face = "华文行楷"><u>This the HTML web page!</u></font><br>

<font color = "#0066cc" size = "+2" face = "华文行楷">2<sup>3</sup></font><br>  <!-- sup 上标-->
<font color = "#0066cc" size = "+2" face = "华文行楷">2<sub>3</sub></font><br>  <!-- sub 下标-->
<font color = "#0066cc" size = "+2" face = "华文行楷">This the <font color = "#000000">HTML</font> web page!</font><br> </div> </body> </html>  <!-- 同类标签的就近原则 -->

运行结果:

 

8.超级链接

格式:<a href = "路径" name = "热点名" target = "打开方式">链接元素</a>

例子:

<html>

<title>
This the first HTML page
</title>

<body>

<div align = "center">
<a href = "http://www.baidu.com" name = "baidu" target = _blank>百度</a>
</div>


</body>

</html>

运行结果:

 

9.链接

格式:    <a href = "#标记号">热点文本</a>

            <a name = "标记号">显示的热点文本</a>

例子:

<html>

<title>
This the first HTML page
</title>

<body>

<a href = "#001">热点文字</a>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>

<a name = "001">跳到这里</a>

<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>


</body>

</html>

运行结果:

 

 

10.链接标签综合应用:应用到别的页面的热点

格式: <a href = "路径#标记号">热点文本</a>

例子:

<html>

<title>
This the first HTML page
</title>

<body>

<a href = "SevenPage.html#001">链接到SevenPage.html的一个热点区域</a>

</body>

</html>

运行结果:

单击链接结果:

 

源码下载

 

相关文章:
  (1)HTML基础(一)

  (2)HTML基础(二)

 

posted on 2013-01-27 21:15  深圳彦祖  阅读(598)  评论(0编辑  收藏  举报