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

礎準備

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

在hbuilder中運行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>

實驗效果

標題段落

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>

塊元素

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>

最終效果

圖片

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>

鏈接

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>

列表

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>

表格

tablecaption 表格標題
th 表頭
tr 行
td 單元格

TML 基礎- 4個實例

本章介紹了 HTML 中較為常用的標簽的實例。

您可能還沒接觸過這些實例，不過不用擔心，閱讀完本章您就能夠掌握它們了！

HTML 標題

HTML 標題（Heading）是通過<h1> - <h6> 標簽來定義的。

h 是英文header標題的縮寫，標題無處不在，它的應用范圍十分廣泛：網站結構、寫作文、PPT 等。h1 是主標題，h2 是副標題，h3、h4、h5、h6 依次遞減字體的大小。

實例

<h1>這是一個標題</h1>

<h2>這是一個標題</h2>

<h3>這是一個標題</h3>

HTML 段落

HTML 段落是通過標簽 <p> 來定義的，P 是英文paragraph段落的縮寫，經常被用來創建一個段落，就和你寫作文一樣，您可以進行實戰實驗。

實例

<p>這是一個段落。</p>

<p>這是另外一個段落。</p>

HTML 鏈接

HTML 鏈接是通過標簽 <a> 來定義的.a標簽，也叫anchor（錨點）元素，既可以用來鏈接到外部地址實現頁面跳轉功能，也可以鏈接到當前頁面的某部分實現內部導航功能。

實例

<a href="#">這是一個鏈接</a>

提示:在 href 屬性中指定鏈接的地址。

(您將在本教程稍后的章節中學習更多有關屬性的知識)。

HTML 圖像

HTML 圖像是通過標簽 <img> 來定義的。使用img元素來為你的網站添加圖片，使用src屬性指向一個圖片的具體地址。

舉例如下：<img src="#">

請注意：img元素是自關閉元素，不需要結束標記。

實例

注意：圖像的名稱和尺寸是以屬性的形式提供的。

教學還沒結束喲，我會盡快編輯下一章。

我是一名前端開發程序員，自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理，送給每一位前端小伙伴，這里是小白聚集地，歡迎初學和進階中的小伙伴
前端資料獲取方式：
1.在你手機的右上角有【關注】選項，點擊關注！
2.關注后，手機客戶端點擊我的主頁面，右上角有私信，請私信回復：【學習】
電腦已經設置好了關鍵詞自動回復，所以回復的時候請注意關鍵詞喲~

html圖像

在htmtl中,圖像由<img>標簽定義.<img>是空標簽,它只包含屬性,并且沒有閉合標簽.

要在頁面上顯示圖像,使用源屬性(src).源屬性的值是圖像的url地址(統一資源定位符).

定義圖像的語法是:

url指存儲圖像的位置.

<html>

<head>

<title>first page</title>

</head>

<body>

</body>

<html>

●如果圖像無法顯示,則alt屬性用來為圖像定義一串預備的可替換的文本.alt屬性是必需的.

height(高度)與width(高度)屬性用于設置圖像的高度與寬度.該屬性值可以以像素或百分比形式指定,默認單位為像素

<html>

<head>

<title>first page</title>

</head>

<body>

</body>

</html>

●<img>的border屬性規定圖像周圍的邊框的寬度.默認情況下,圖像是沒有邊框的

border屬性的屬性值的單位是像素.表示邊框的寬度

實例:帶有2個像素粗邊框的圖像.

二 html鏈接

html使用標簽<a>來設置超文本鏈接.

超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,你可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分.

在標簽<a>中,使用href(hyper text reference)屬性來描述鏈接的目標地址

鏈接的html代碼很簡單.格式如下:

上邊的代碼顯示為:鏈接文本(鏈接文本下面有下劃線)

●使用target屬性,你可以規定在何處打開鏈接文檔.如果給target屬性賦值_blank,將使鏈接在新窗口或新選項卡中打開.

三 html列表

無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記

無序列表使用<ul>標簽,與<li>標簽一起使用(unordered list)

<ul>

</ul>

瀏覽器顯示效果如下:

有序列表也是一列項目,列表項目使用數字進行標記.

有序列表始于<ol>標簽,每個列表項目始于<li>標簽.

<ol>

</ol>

運行效果如下:

四 html表格

表格由<table>標簽定義.

每個表格均有若干行(由<tr>標簽定義,table row),每行被分割為若干單元格(由<td>標簽定義,table division)

下面是一個包含兩行兩列的表格:

<tr>

</tr>

<tr>

</tr>

</table>

運行效果:

在線咨詢

上一篇：這些實用的HTML5 & jQuery 插件要收藏哦，網站開發中一定會用到
下一篇：安裝jdk1.8并配置系統變量

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

礎準備

HTML文檔結構

HTML常用標簽

您的項目需求