溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何掌握HTML語言的基礎語法

發(fā)布時間：2022-03-02 13:50:16 來源：億速云 閱讀：129 作者：iii 欄目：web開發(fā)

本文小編為大家詳細介紹“如何掌握HTML語言的基礎語法”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“如何掌握HTML語言的基礎語法”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

基礎準備

我使用的是Hbuilder編輯器，在hbuilder中創(chuàng)建一個HTML文件。

如何掌握HTML語言的基礎語法

在hbuilder中運行HTML文件

如何掌握HTML語言的基礎語法

效果

如何掌握HTML語言的基礎語法

HTML文檔結(jié)構(gòu)

<!DOCTYPE html>
<html>
	<head>
		<!--網(wǎng)頁的頭部 -->
	</head>
	<body>
		<!--網(wǎng)頁內(nèi)容 -->
	</body>
</html>

<!-- -->   用于注釋代碼

HTML常用標簽

基礎標簽

  • html 最外層的元素

  • head 網(wǎng)頁的頭部

  • title 網(wǎng)頁的標題

  • body 網(wǎng)頁內(nèi)容

文本格式化

  • i/em 斜體

  • strong 加粗

  • q 引用

  • blockquote 長引用

  • code 元素定義編程代碼示例

<i>武漢，加油！</i>
<em>湖北,加油！</em>

<strong>武漢，加油！</strong>

<q>HX是輕量編輯器和強大IDE的完美結(jié)合體。敏捷的性能，清爽的界面，強大的功能和于一身。</q>

<blockquote>
  HX是輕量編輯器和強大IDE的完美結(jié)合體。敏捷的性能，清爽的界面，強大的功能和于一身。
</blockquote>

<code>var a = 1 </code>

實驗效果

如何掌握HTML語言的基礎語法

標題段落

  • h2-h7 表示標題 數(shù)字越大 字體越小

  • p 段落標簽

  • hr 水平分割線

  • br 換行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用標題和段落</title>
	</head>
	<body>
		
		<!-- 標題-->
		<h2>武漢加油！</h2>
		<h3>武漢加油！</h3>
		<h4>武漢加油！</h4>
		
		<h5>武漢加油！</h5>
		<h6>武漢加油！</h6>
		<h7>武漢加油！</h7>
		
		<!--段落標簽-->
		<p>武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！</p>
	
	    <hr > <!--水平分割線-->
		<p>武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！</p>

<!-- 換行符-->
武漢加油！武漢加油！武漢加油！武漢加油！
<br>武漢加油！武漢加油！武漢加油！
        
	</body>
</html>

如何掌握HTML語言的基礎語法

塊元素

  • div 盒子

  • span 功能和div類似，span可以用來裝一小段文字 和div的區(qū)別就是 在一行內(nèi)顯示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03</title>
	</head>
	<body>
		
		<i style="background-color: blue;">武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ </i>
		
		<div style="background-color: aqua;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</div>
		<div style="background-color: aqua;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</div>
		
		<span style="background-color: blue;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</span>
		<span style="background-color: blue;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</span>
	</body>
</html>

最終效果

如何掌握HTML語言的基礎語法

圖片

  • img

  • img標簽必須加上 src屬性 才能把圖像展示出來

  • alt屬性： 當圖片沒有辦法顯示的時候用來提示用戶的文字

  • title屬性：當鼠標移動到圖片的時候，用來提示用戶的文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用圖片</title>
	</head>
	<body>
		hello
		
		<img src="images/02.png" alt="風景圖" title="測試圖片" >
	</body>
</html>

如何掌握HTML語言的基礎語法

鏈接

  • a標簽 超鏈接

  • href屬性： 超鏈接的地址

  • target屬性：_blank 表示新建一個瀏覽器標簽頁來顯示超鏈接的內(nèi)容，不會覆蓋原來的網(wǎng)頁_parentsearchtop

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<a href="http://www.baidu.com" target="_blank">百度一下</a>
		<a href="http://www.baidu.com" target="_parent">百度一下</a>
	    <a href="http://www.baidu.com" target="_search">百度一下</a>
		<a href="http://www.baidu.com" target="_top">百度一下</a>
	
	</body>
</html>

列表

  • ol 有序列表

  • ul 無序列表

  • li 列表項

  • type 定義類型

  • disc 實體圓點

  • circle 空心圓

  • square 實體方形

  • a 小寫字母 （有序）

  • A 大寫字母（有序）

  • 默認數(shù)字（有序）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		
		
		<!--有序列表-->
		
		<ol type="1"> 
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		
		<ol type="A">
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		<ol type="a">
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		
		<!-- 無序列表-->
		<ul type="disc">
			<li>北京</li>
			<li>上海</li>
		</ul>
		<ul type="circle">
			<li>北京</li>
			<li>上海</li>
		</ul>
		
		<ul type="square">
			<li>北京</li>
			<li>上海</li>
		</ul>
		
		
	</body>
</html>

如何掌握HTML語言的基礎語法

表格

  • tablecaption 表格標題

  • th 表頭

  • tr 行

  • td 單元格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>table</title>
	</head>
	<body>
		<table border="1px" cellspacing="" cellpadding="">
			<caption>招聘信息</caption>
			<tr>
				<th>職位名稱</th>
				<th>薪資水平</th>
			</tr>
			<tr>
				<td>前端工程師</td>
				<td>20k</td>
			</tr>
			
			<tr>
				<td>后端工程師</td>
				<td>20k</td>
			</tr>
		</table>
	</body>
</html>

如何掌握HTML語言的基礎語法

讀到這里，這篇“如何掌握HTML語言的基礎語法”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手