HTML+CSS 輕松入門之HTML基礎(chǔ)標(biāo)簽（一）

html 中的注釋

?

HTML種標(biāo)簽有很多，大家可以參考手冊,接下來我們講解一些我們常用的標(biāo)簽

首先我們來講P標(biāo)簽 ?段落（p）

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
		<p>大家好</p>
</body>
</html>

然后我們在瀏覽器上運(yùn)行，輸出：大家好

看以下代碼：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
		<p>大家好</p>
		<p>大家好！</p>
</body>
</html>

段落會自己換行，所以輸出：

大家好

<meta>-----是head 標(biāo)簽內(nèi)的一個(gè)輔助標(biāo)簽，通常用來設(shè)置編碼，以及優(yōu)化推廣的關(guān)鍵詞關(guān)鍵字等

<br> -------換行

<font>---------給文字格式化

<table>------表格

<span>------行內(nèi)標(biāo)簽

提示和注釋：

提示：請使用 <span> 來組合行內(nèi)元素，以便通過樣式來格式化它們。

注釋：span 沒有固定的格式表現(xiàn)。當(dāng)對它應(yīng)用樣式時(shí)，它才會產(chǎn)生視覺上的變化。

<h1>到<h6>-----控制字體大小

<div>-------把文檔分割為獨(dú)立的、不同的部分（等學(xué)到css ?我們會講解）

<hr>-------被水平線分隔的標(biāo)題和段落

接下來我們先講解這些簡單的標(biāo)簽

如下代碼：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
		<p>大家好<span>123456</span></p>
		<p>大家好</p>
		
		111111111111111<br>1111111111111111 <!--換行-->

		<hr>  <!--用來和以上隔開，有一條黑色的直線-->

		<font size='18' color="red">我們都一樣</font>   <!--font設(shè)置字體大小，顏色-->

		<hr>

		<h1>中國</h1>
		<h2>中國</h2>
		<h3>中國</h3>
		<h4>中國</h4>
		<h5>中國</h5>
		<h6>中國</h6>

</body>	
</html>

大家把代碼拷貝到自己的電腦上，創(chuàng)建文件，后綴為.html ?然后雙擊預(yù)覽

表格

大家請看以下代碼：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
		<table>
			<tr>
				<th>美國</th>
				<th>日本</th>
				<th>中國</th>
			</tr>

			<tr>
				<td>123</td>
				<td>456</td>
				<td>789</td>
			</tr>

			<tr>
				<td>123</td>
				<td>456</td>
				<td>789</td>
			</tr>
		</table>
</body>
</html>

表格的構(gòu)成是由行和列 ? 準(zhǔn)確的說不能叫列，只能叫單元格

以上代碼中的<tr>標(biāo)簽代表行 ? ? <td>代表單元格 ? 但是我們在預(yù)覽中是以表格的形式展示，所以稱為3行3列

<th> ?定義表頭單元格，一般用于標(biāo)題上，例如我們做一個(gè)星期的日程表 ? ?星期一到星期天，這些字需要加粗等

以上代碼運(yùn)行結(jié)果：

美國 ? 日本 ? 中國

123 ? ?456 ? ?789 ? ?

這樣的表格我們看的有點(diǎn)不習(xí)慣，那么我來給表格加邊框

以上代碼中。我們在table ?標(biāo)簽中加入border='1' ? 然后我們給表格加一個(gè)寬度和高度 ?width="300" ?height="200"

具體代碼如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
		<table border="1" width="300" height="200">
			<tr>
				<th>美國</th>
				<th>日本</th>
				<th>中國</th>
			</tr>

			<tr>
				<td>123</td>
				<td>456</td>
				<td>789</td>
			</tr>

			<tr>
				<td>123</td>
				<td>456</td>
				<td>789</td>
			</tr>
		</table>
</body>
</html>

繼續(xù)學(xué)習(xí)

新建文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1" width="300" height="200"> <tr> <th>美國</th> <th>日本</th> <th>中國</th> </tr> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> </table> </body> </html>

提交重置代碼

自動運(yùn)行