歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > HTML >
一文掌握HTML語言的基礎語法

 

基礎準備

我使用的是Hbuilder編輯器,在hbuilder中創建一個HTML文件。

一文掌握HTML語言的基礎語法

 

在hbuilder中運行HTML文件

一文掌握HTML語言的基礎語法

 

效果

一文掌握HTML語言的基礎語法

 

HTML文檔結構

<!DOCTYPE html>
<html>
	<head>
		<!--網頁的頭部 -->
	</head>
	<body>
		<!--網頁內容 -->
	</body>
</html>

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

HTML常用標簽

基礎標簽

  • html 最外層的元素
  • head 網頁的頭部
  • title 網頁的標題
  • body 網頁內容

文本格式化

  • i/em 斜體
  • strong 加粗
  • q 引用
  • blockquote 長引用
  • code 元素定義編程代碼示例
<i>武漢,加油!</i>
<em>湖北,加油!</em>

<strong>武漢,加油!</strong>

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

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

<code>var a = 1 </code>

實驗效果

一文掌握HTML語言的基礎語法

 

標題段落

  • h1-h6 表示標題 數字越大 字體越小
  • p 段落標簽
  • hr 水平分割線
  • br 換行
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用標題和段落</title>
	</head>
	<body>
		
		<!-- 標題-->
		<h1>武漢加油!</h1>
		<h2>武漢加油!</h2>
		<h3>武漢加油!</h3>
		
		<h4>武漢加油!</h4>
		<h5>武漢加油!</h5>
		<h6>武漢加油!</h6>
		
		<!--段落標簽-->
		<p>武漢加油!武漢加油!武漢加油!武漢加油!武漢加油!武漢加油!武漢加油!武漢加油!武漢加油!</p>
	
	    <hr > <!--水平分割線-->
		<p>武漢加油!武漢加油!武漢加油!武漢加油!武漢加油!武漢加油!武漢加油!武漢加油!武漢加油!</p>

<!-- 換行符-->
武漢加油!武漢加油!武漢加油!武漢加油!
<br>武漢加油!武漢加油!武漢加油!
        
	</body>
</html>
一文掌握HTML語言的基礎語法

 

塊元素

  • div 盒子
  • span 功能和div類似,span可以用來裝一小段文字 和div的區別就是 在一行內顯示
<!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 表示新建一個瀏覽器標簽頁來顯示超鏈接的內容,不會覆蓋原來的網頁_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>

一文掌握HTML語言的基礎語法

 

列表

  • ol 有序列表
  • ul 無序列表
  • li 列表項
  • type 定義類型
  • disc 實體圓點
  • circle 空心圓
  • square 實體方形
  • a 小寫字母 (有序)
  • A 大寫字母(有序)
  • 默認數字(有序)
<!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語言的基礎語法

如需轉載,請注明文章出處和來源網址:http://www.hjkjtws.com.cn/html/h58278.shtml

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2018-08-14 17:37 原創:DIVCSS5
本文www.hjkjtws.com.cn DIVCSS5版權所有。

时时彩内部管理计划群 手机怎么上网赚钱 北京小赛车群 甘肃快三组三最大遗漏 广东好彩1开奖 北京pk赛车开奖app 排列3开奖结果查询 十一选五的最佳买法 10bet娱乐城百家乐 网上捕鱼游戏能赚钱 吉祥棋牌三打一扑克 青海快3十大技巧 如何判断特别号码的单双波色 天下棋牌? 老快3和值怎么玩 互联网理财平台大全 甘肃快三玩法介绍