HTML之簡單標籤

carson0408發表於2018-03-16
HTML

        html全稱為HyperText Markup Language,譯為超文字標記語言，不是一種程式語言，是一種描述性的標記語言，用於描述超文字中內容的顯示方式。比如字型什麼顏色，大小等。html是最基本的網頁語言，它具有簡易性、可擴充套件性、平臺無關性、通用性等特點。本文主要來講解html的一些最基本的標籤。

1.基本格式

        平時看到的html語言的一個基本格式就如下所示，整體的框架是這樣的，然後通過不斷往裡面新增更多的標籤，從而實現網頁。

<html>
	<head><title></title></head>
	<body></body>
</html>

通過以下程式碼進行演示：

<html>
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	hello,everyone!this is the area for us to learn about html
</body>
</html>

直接點選html檔案，得到如下網頁：


從上面可以知道<head></head>表示網頁的頭部，可以用<title></title>新增標題。另外，網頁正文部分，用<body></body>來新增內容。

2.樣式與特殊字元

        首先樣式主要指字的大小，字的顏色等等。<font></font>可以對字型進行修飾：

<html>
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<font size="5" color="red" face="arial">
	hello,everyone!this is the area for us to learn about html
	</font>
</body>
</html>

得到如下網頁：


        從上圖可以看出字型的大小、顏色以及字型風格都發生了改變。

再通過b、u、i、s等標籤對文字樣式再做修飾。程式碼如下：

<html>
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	
	<b>hello,everyone!this is the area for us to learn about html</b><br/>
	<u>hello,everyone!this is the area for us to learn about html</u><br/>
	<i>hello,everyone!this is the area for us to learn about html</i><br/>
	<s>hello,everyone!this is the area for us to learn about html</s><br/>
	
</body>
</html>

得到如下網頁：


        可以看出b是加粗，u是下劃線，i是斜體，s是刪除線。


瞭解一下對於文章內容佈局的span、div等

<html>
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	
	<span>hello,everyone!</span>
	<span>this is the area for us to learn about html</span>
	<div>hello,everyone!</div>
	<div>this is the area for us to learn about html</div>
	
</body>
</html>

得到如下網頁：


        根據結果可以看出span還有空格的作用，而div則有換行的作用。


接下來來看看特殊符號的作用：

<html>
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	
	<hello,everyone!>  this is the area for us to learn about html</span>
	
	
</body>
</html>

得到如下網頁：


          從上可以看出：&lt;表示<,&gt表示>，&nbsp;表示空格。

接下來看看標題標籤。

<html>
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<h1 align="center">HTML</h1>
	hello,everyone!this is the area for us to learn about html
</body>
</html>

得到如下網頁：


<h1/>是標題標籤，<h2/>等也是標題標籤，數字表示字型大小。

3.列表標籤

定義列表：<dl></dl>     有序列表：<ol></ol>     ul標籤：<ul></ul>

<html>
 <head>
  <title>HTML</title>
 </head>
 <body>
	<!-- 列表標籤 -->
	<dl>
		<dt>部門</dt>
		<dd>財務部</dd>
		<dd>學工部</dd>
		<dd>人事部</dd>
	</dl>

	<hr size="10" color="black"/>

	<!-- 有序列表 -->
	<ol type="a">
		<title>部門</title>
		<li>財務部</li>
		<li>學工部</li>
		<li>人事部</li>
	</ol>

	<hr/>
	<!-- 無序列表 -->
	<ul type="square">
		<li>財務部</li>
		<li>學工部</li>
		<li>人事部</li>
	</ul>
 </body>
</html>

得到如下結果：


定義列表中<dt/>表示標題，<dd/>來表示內容；有序列表用<li ></li>表示內容，<ol type=""></ol>中type值為1時則阿拉伯數字順序，為a則字母順序，i則為羅馬數字;ul標籤中<ul type=></ul>表示標籤，其中type有disc、square、circle等取值，<li></li>修飾每條記錄。

4.影像標籤

        影像標籤用<img  src=   width=   height=   alt=>,其中src表示影像路徑，width則表示寬，height表示高度，alt則表示當圖片顯示不出的時候替代的字元。

<html>
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<img src="img/w02.jpg" width="100" height="150"  alt="此圖有誤"/>
</body>
</html>

得到如下結果：

                                            

5.超連結標籤

   <a href=""></a>和<a name=""></a>來表示超連結。

以下程式碼是使用<a href="">的示例。

<html>
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<a href="http://blog.csdn.net/carson0408"/>點選進入部落格</a>
</body>
</html>

得到如下結果：


點選上面的超連結便可進入一個部落格。

使用<a name=></a>的示例。

<html>
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<a name="top">welcome</a>
	
	
	<a href="#top"/>load in</a>
</body>
</html>

使用<a name="top"></a>可以標記位置，<a href="#top">xxx</a>點選href便可回到top所在的位置。



相關文章