Web測試基礎-Html基礎知識

qq_842354603發表於2019-04-29
WebHTML

Html基礎知識

一、 什麼是html？

是用來描述網頁的一種語言，html指的是超文字標記語言（hyper textmarup language）,

它不是一種程式語言，它是一種標記語言，html包含靜態的html和動態的html

二、 html標籤

例子：

<html>

<head>

<title>青空地</title>

</head>

<body>

<h1>歡迎來到青空之地</h1>

<p>茫茫大海中，找一塊屬於自己的青空之地</p>

<p>在這裡，你可以做自己想做的事</p>

<body>

</html>

安例解析：

1、<html>與</html>之間的文字是用來描述整個網頁的內容

2、<htad>與</head>之間標籤內容是用來定義文件的頭部，它是頭部元素的容器。

3、<body>與</body>之間的文字是可見的頁面內容

4、<h1>與</h1>之間的文字被顯示為標題

5、<p>與</p>之間的文字被顯示為段落

總結：

1、 html標記標籤通常被稱為html標籤（html tag）

2、 html標籤是由尖括號包圍的關鍵詞，比如<html>

3、 html標籤通常是成對的，比如<p>和</p>

4、 標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤

5、 開始和結束標籤也被稱為開放標籤和閉合標籤

三、 基本的html標籤

1、 html標題

html標題是通過<h1><h2>…..<h6>等標籤進行下定義的，分為6級,字號大小不同。

如：

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

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

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

2、 head定義和用法

<head>標籤用於定義文件的頭部，它是所有頭部元素的容器。<head>中的元素可以引用指令碼、指示瀏覽器在哪裡找到樣式表，提供元資訊等等。

3、 html段落

html段落是通過<p>標籤進行定義的

如：

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

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

4、 html連結

html連結是通過<a>標籤進行定義的

<a>標籤定義超連結，用於從一張頁面連結到另一張頁面。

<a>元素最重要的屬性是href屬性，它指示連結的目標。

如：

<a href=https://www.baidu.com>this is 百度link</a>

案例：

<html>

<head>

<title>青空地</title>

</head>

<body>

<h1>歡迎來到青空之地</h1>

<p>茫茫大海中，找一塊屬於自己的青空之地</p>

<p>在這裡，你可以做自己想做的事</p>

<a href=https://www.baidu.com>this is 百度 link</a>

<body>

</html>

5、 html影像

html影像是通過<img>標籤進行定義的

如：<img src="timg.jpg" width="300"  height="300" />

注意：引號裡面放的是圖片的路徑，如果不在同一目錄下，則應該加上絕對路徑。

案例：

<html>

<head>

<title>青空地</title>

</head>

<body>

<img src="timg.jpg" width="300"  height="300" />

<h1>歡迎來到青空之地</h1>

<p>茫茫大海中，找一塊屬於自己的青空之地</p>

<p>在這裡，你可以做自己想做的事</p>

<a href=https://www.baidu.com>this is 百度 link</a>

<body>

</html>

6、 html註釋

可以將註釋插入html程式碼中，這樣可以提高其可讀性，使程式碼更易被人理解。瀏覽器會忽略註釋，也不會顯示它們。註釋的語法：

<!—這是一段註釋-->

7、 html換行

如果希望在不產生一個新段落的情況下換行，

請使用<br/>標籤：

案例：

<html>

<head>

<title>青空地</title>

</head>

<body>

<imgsrc="timg.jpg" width="300"  height="300" />

<h1>歡迎來到青空之地</h1>

<p>茫茫大海中，<br/>找一塊屬於自己的青空之地</p>

<p>在這裡，你可以做自己想做的事</p>

<a href=https://www.baidu.com>this is 百度 link</a>

<body>

</html>

 bdf878bc14c9428c9e84a9fae8c4e723.png

8、 html  div

<div>可定義文件中的分割槽或節（division/section）。

<div>標籤可以把文件分割為獨立的、不同的部分，它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。如果用id或class來標記<div>,那麼該標籤的作用會變

得更加有效。

案例：

 457720dc45d0439eab7533d3901d3305.png​

<html>

<head>

<title>青空地</title>

</head>

<body>

<imgsrc="timg.jpg" width="300"  height="300" />

<h1>歡迎來到青空之地</h1>

<p>茫茫大海中，<br/>找一塊屬於自己的青空之地</p>

<p>在這裡，你可以做自己想做的事</p>

<a href=https://www.baidu.com>this is 百度 link</a>

<div style="background-color:red;height:100;width:100">

<p>這是一塊新的區域</p>

</div>

<body>

</html>

四、 html基礎屬性

1、 name屬性

name屬性用於指定標籤元素的名稱。<a>標籤內必須提供href或name屬性。

如：<a name=”value”>

2、 id屬性

id屬性規定html元素的唯一的Id

id在html文件中必須是唯一的。

Id屬性可通過javascript(HTML  DOM)可通過css為帶有指定的id的元素改變或新增樣式。（來源：千鋒軟體測試）

相關文章