好程序員web前端分享HTML基本結構和基本語法

程序員web前端分享HTML基本結構和基本語法

HTML基本結構

HTML的基本語法

1、<常規標記>

<標記屬性=“屬性值” 屬性=“屬性值”></標記>

標記也可叫標簽或叫元素

例如：<head></head>

2.空標記

<標記屬性=“屬性值” />

例如：<meta charset=”utf-8”>

說明：

1.寫在<>中的第一個單詞叫做標記，標簽，元素。

2.標記和屬性用空格隔開，屬性和屬性值用等號連接，屬性值必須放在“”號內。

3.一個標記可以沒有屬性也可以有多個屬性，屬性和屬性之間不分先后順序。

4.空標記沒有結束標簽，用“/”代替。

五、HTML常用標記

1、文本標題（h1-h6）

<h3>三級標題H3</h3>

<h4>四級標題H4</h4>

注：文本標題標簽自帶加粗，有自己的文本大小，并且獨占一行，有默認間距

2、段落文本(p)

<p>段落文本內容</p>

標識一個段落(段落與段落之間有段間距)

3、空格

所占位置沒有一個確定的值,這與當前字體字號都有關系.

4、換行(br)

<br />

換行是一個空標記(強制換行)

5、水平線

<hr />空標記

6、加粗有兩個標記

A、<b>加粗內容</b>只是顯示加粗

B、<strong>強調的內容</strong>突出的文本

7、傾斜

8、擴展

<u>文本</u>下劃線

<del>文本</del>刪除線

<s>文本</s>刪除線

<sub></sub>下標

<sup></sup>上標

9、列表(ul,ol,dl)

HTML中有三種列表分別是：無序列表，有序列表，自定義列表

*無序列表

無序列表組成：

<ul>(unordered list)

．．．．．．

</ul>

*有序列表

有序列表組成：

<ol>(ordered list)

．．．．．．

</ol>

*自定義列表

<dl>(definition list)

(definition description)

．．．．．．

</dl>

知識擴展2----有序列表的屬性

1)、type:規定列表中的列表項目的項目符號的類型

語法：<ol type="a"></ol>

1 數字順序的有序列表（默認值）（1, 2, 3, 4）。

a 字母順序的有序列表，小寫（a, b, c, d）。

A 字母順序的有序列表，大寫（A,B,C,D)

i 羅馬數字，小寫（i, ii, iii, iv）。

I 羅馬數字，大寫（I, ii, iii, iv）。

2)、start 屬性規定有序列表的開始點。

語法：<ol start="5"></ol>

10、插入圖片

注:所要插入的圖片必須放在站點下

title的作用:圖片的標題；在你鼠標懸停在該圖片上時顯示一個小提示，鼠標離開就沒有了，HTML的絕大多數標簽都支持title屬性，title屬性就是專門做提示信息的

alt的作用:提示文本必寫；alt屬性是在你的圖片因為某種原因不能加載時在頁面顯示的提示信息，它會直接輸出在原本加載圖片的地方。（優化圖片的）

*相對路徑的寫法：

1)當當前文件與目標文件在同一目錄下，直接書寫目標文件文件名+擴展名；<img src=”q12.jpg”/>

2)當當前文件與目標文件所處的文件夾在同一目錄下，寫法如下：

文件夾名/目標文件全稱+擴展名；<img src=”images/q12.jpg”/>

3)當當前文件所處的文件夾和目標文件所處的文件夾在同一目錄下，寫法如下：

../目標文件所處文件夾名/目標文件文件名+擴展名；

11、超鏈接的應用

語法：

<a href="#"></a>空鏈接

屬性：target:頁面打開方式，默認屬性值_self。

屬性值：_blank 新窗口打開

<a href="#" target="_blank">新頁面打開</a>

12、數據表格的作用及組成

作用：顯示數據

表格組成

<tr>

</tr>

</table>

注：一個tr表示一行;一個td表示一列(一個單元格)

<th></th>表格的列標題

*數據表格的相關屬性

1）width="表格的寬度"

2）height="表格的高度"

3）border="表格的邊框"

4）bgcolor="表格的背景色"

5）bordercolor="表格的邊框顏色"

6）cellspacing="單元格與單元格之間的間距"

7）cellpadding="單元格與內容之間的空隙"

8）水平對齊方式：align="left左對齊/center居中/right右對齊";

9) 垂直對齊方式：valign="top頂對齊/middle居中/bottom底對齊/baseline(基線);

10)合并單元格屬性：

colspan=“所要合并的單元格的列數"合并列;

rowspan=“所要合并單元格的行數”合并行;

13、表單的作用及組成

表單的作用：用來收集用戶的信息的;

表單組成：表單框（表單域form）

提示信息

表單控件/表單元素

1)、表單框

2）文本框

3)密碼框

4)提交按鈕

<input type="reset" value="按鈕內容"/>重置按鈕

5）單選框/單選按鈕

單選按鈕里的name屬性必須寫，同一組單選按鈕的name屬性值必須一樣。

6）復選框

復選按鈕里的name屬性必須寫，同一組復選按鈕的name屬性值必須一樣。

checked="checked"表示默認被選中，可簡寫成checked

disabled="disabled"表示禁用，可簡寫成disabled

enabled:可用狀態

7)下拉菜單

</select>

8）多行文本框（文本域）

</textarea>

9)跳轉按鈕

button和submit的區別是：

submit是提交按鈕起到提交信息的作用，type類型是button只起到跳轉的作用，不進行提交。

提示信息標簽(作用：將提示信息及相應的表單控件進行關聯)

擴展知識點3：對于不同的輸入類型，value 屬性的用法的意義

value 屬性為 input 元素設定值。

對于不同的輸入類型，value 屬性的用法也不同：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本

type="text", "password" - 定義輸入字段的初始值

type="checkbox", "radio" - 定義與輸入相關聯的值

注釋：<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 他name屬性。

擴展知識點4：

Form中的獲取數據的兩個方式get和post的區別？

1. get是從服務器上獲取數據，post是向服務器傳送數據。

2. get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中可以看到。post是通過HTTP post機制，將表單內各個字段與其內容放置在HTML HEADER內一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。

3. 對于get方式，服務器端用Request.QueryString獲取變量的值，對于post方式，服務器端用Request.Form獲取提交的數據。

4. get傳送的數據量較小，不能大于2KB。post傳送的數據量較大，一般被默認為不受限制。

5. get安全性非常低，post安全性較高。但是執行效率卻比Post方法好。

建議：

1、get方式的安全性較Post方式要差些，包含機密信息的話，建議用Post數據提交方式；

2、在做數據查詢時，建議用Get方式；而在做數據添加、修改或刪除時，建議用Post方式；

14、div和span的用法

沒有具體含義，除了獨占一行之外沒有任何其它的默認屬性，是頁面布局中常用的標簽；

文本結點標簽

可以是某一小段文本，或是某一個字。它除了不換行外，沒有任何其它的默認屬性；

一部分：HTML簡介

什么是HTML？

HTML代表超文本標記語言（Hypertext Markup Language）。它是一種用于構建網頁的標記語言。HTML文件包含一組標簽，這些標簽用于定義網頁的結構和內容。瀏覽器讀取HTML文件，并根據標記中的指示呈現網頁內容。

HTML的主要作用是定義文本內容、圖像、鏈接和其他媒體的排列方式，并提供交互元素，例如表單和按鈕。

HTML的基本結構

每個HTML文檔都應該遵循以下基本結構：

<!DOCTYPE html>
<html>
<head>
    <title>網頁標題</title>
</head>
<body>
    <!-- 內容在這里 -->
</body>
</html>

讓我們逐步解釋這個結構：

<!DOCTYPE html>：這是文檔類型聲明，它告訴瀏覽器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
<html>：HTML文檔的根元素。所有其他元素都包含在<html>標簽內。
<head>：包含與文檔相關的元信息，如頁面標題、字符集聲明和外部樣式表鏈接。
<title>：定義網頁的標題，顯示在瀏覽器標簽頁上。
<body>：包含網頁的主要內容，如文本、圖像和其他媒體。

HTML標簽和元素

HTML標簽是由尖括號括起來的名稱，例如<p>表示段落，<img>表示圖像。標簽通常成對出現，有一個開始標簽和一個結束標簽。例如：

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

<p>是開始標簽，</p>是結束標簽，文本位于兩個標簽之間。標簽定義了元素的類型和結構。

有些HTML標簽是自封閉的，不需要結束標簽，例如<img>用于插入圖像。

HTML注釋

在HTML中，你可以使用注釋來添加說明性文字，注釋不會在瀏覽器中顯示。HTML注釋使用結尾，如下所示：

<!-- 這是一個注釋 -->

注釋通常用于添加文檔說明、調試代碼或標記未來的修改。

第二部分：HTML基本元素

文本

HTML中的文本通常包含在段落、標題、列表等元素中。以下是一些常見的文本元素：

<p>：定義一個段落。
<h1>到<h6>：定義標題，<h1>是最高級別的標題，<h6>是最低級別的標題。
<strong>：定義強調文本，通常以粗體顯示。
<em>：定義強調文本，通常以斜體顯示。
<a>：定義超鏈接，允許用戶點擊跳轉到其他頁面。

示例：

<p>這是一個段落。</p>
<h1>這是一個標題</h1>
<p><strong>這是強調文本。</strong></p>
<p><em>這是斜體文本。</em></p>
<p>訪問<a href="https://www.example.com">示例網站</a></p>

圖像

要在網頁中插入圖像，可以使用<img>標簽。它是一個自封閉標簽，需要指定圖像的src屬性來指定圖像文件的路徑。

示例：

htmlCopy code
<img src="image.jpg" alt="圖像描述">

src：指定圖像文件的路徑。
alt：提供圖像的替代文本，用于無法加載圖像時的文字描述。

鏈接

通過使用<a>標簽，可以在網頁中創建鏈接。鏈接通常包含在文本或圖像中，并使用href屬性指定目標URL。

示例：

<a href="https://www.example.com">訪問示例網站</a>

href：指定鏈接的目標URL。

列表

HTML支持有序列表（<ol>）、無序列表（<ul>）和定義列表（<dl>）。

無序列表

無序列表使用<ul>標簽定義，每個列表項使用<li>標簽。

示例：

<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

有序列表

有序列表使用<ol>標簽定義，每個列表項使用<li>標簽。

示例：

<ol>
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ol>

定義列表

定義列表使用<dl>標簽定義，每個定義項目使用<dt>標簽定義術語，使用<dd>標簽定義描述。

示例：

<dl>
    <dt>術語1</dt>
    <dd>描述1</dd>
    <dt>術語2</dt>
    <dd>描述2</dd>
</dl>

第三部分：HTML表單

HTML表單允許用戶與網頁進行交互，提交數據。以下是HTML表單的基本元素：

<form>元素

<form>元素用于創建表單，可以包含文本字段、復選框、單選按鈕、下拉列表等。

示例：

<form action="submit.php" method="post">
    <!-- 表單元素在這里 -->
</form>

action：指定表單數據提交的目標URL。
method：指定提交方法，通常是"post"或"get"。

輸入字段

輸入字段用于接收用戶輸入的數據，常見的輸入字段類型包括文本框、密碼框、單選按鈕、復選框等。

文本框

文本框使用<input>標簽，type屬性設置為"text"。

示例：

<input type="text" name="username" placeholder="用戶名">

type：指定字段類型。
name：指定字段的名稱。
placeholder：設置文本框的占位符文本。

密碼框

密碼框使用<input>標簽，type屬性設置為"password"。

示例：

htmlCopy code
<input type="password" name="password" placeholder="密碼">

單選按鈕

單選按鈕使用<input>標簽，type屬性設置為"radio"。

示例：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

name：指定單選按鈕組的名稱。
value：指定每個選項的值。

復選框

復選框使用<input>標簽，type屬性設置為"checkbox"。

示例：

<input type="checkbox" name="subscribe" value="yes">訂閱新聞

下拉列表

下拉列表使用<select>和<option>標簽創建。<select>定義下拉列表，而<option>定義選項。

示例：

<select name="country">
    <option value="us">美國</option>
    <option value="ca">加拿大</option>
    <option value="uk">英國</option>
</select>

name：指定下拉列表的名稱。
每個<option>標簽表示一個選項，使用value屬性定義選項的值。

第四部分：HTML樣式和CSS

HTML用于定義網頁的結構和內容，但要使網頁看起來更吸引人，需要使用CSS（層疊樣式表）。CSS允許你定義字體、顏色、布局等樣式。

內聯樣式

可以在HTML元素內部使用style屬性來定義內聯樣式。

示例：

<p style="color: blue; font-size: 16px;">這是一個藍色的段落。</p>

外部樣式表

外部樣式表將樣式規則保存在獨立的CSS文件中，并通過<link>標簽將其鏈接到HTML文檔。

示例（style.css）：

/* style.css */
p {
    color: blue;
    font-size: 16px;
}

在HTML中鏈接外部樣式表：

<link rel="stylesheet" type="text/css" href="style.css">

這使得可以在整個網站上共享相同的樣式。

總結

HTML是構建現代網頁的基礎。通過學習HTML的基本語法和元素，你可以創建吸引人且功能強大的網頁。無論是文本、圖像、鏈接還是表單，HTML提供了豐富的工具來呈現內容和實現用戶交互。

這篇文章提供了HTML的基礎知識，但HTML是一個廣泛的主題，還有許多高級特性和技巧等待你探索。希望這篇文章對你入門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 單元格

在線咨詢

上一篇：HTML培訓：如何在HTML中更改文本大小
下一篇：網頁設計制作之中文本輸入框的參數解釋

您的項目需求

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

整合營銷服務商

好程序員web前端分享HTML基本結構和基本語法

一部分：HTML簡介

什么是HTML？

HTML的基本結構

HTML標簽和元素

HTML注釋

第二部分：HTML基本元素

文本

圖像

鏈接

列表

無序列表

有序列表

定義列表

第三部分：HTML表單

<form>元素

輸入字段

文本框

密碼框

單選按鈕

復選框

下拉列表

第四部分：HTML樣式和CSS

內聯樣式

外部樣式表

總結

礎準備

HTML文檔結構

HTML常用標簽

您的項目需求