前台界面(1)---HTML基本定義及常見標簽


已經很久沒有更新博客了,從今天開始要繼續走在學習的路上,話不多說,先來干貨:

目錄

1. HTML定義 

2. H標簽 

3. Img標簽 

4. P標簽 

5. A標簽 

6. 無序列表 

7. 有序列表 

8. Form表單 

9. Text input文本輸入框 

10. Button submit提交按鈕 

11. 單選按鈕 

12. 復選按鈕 

13. Div標簽 

-------------------------------------------黃金分割線------------------------------------------------

內容

1. HTML定義

HTML是英文Hyper Text Markup Language(超文本標記語言)的縮寫。

2. H標簽

h1是一個HTML元素h1header1的簡寫,意思是一級標題。

大部分元素都有一個開始標記和一個結束標記

開始標記像這樣:<h1>

結束標記像這樣:</h1>

開始標記和結束標記的唯一區別就是結束標記多了一個/

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

3. Img標簽

也有一些標簽沒有結束標記,如使用img元素來為你的網站添加圖片,使用src屬性指向一個圖片的具體地址。

舉例如下:

<img src="https://www.your-image-source.com/your-image.jpg">

注意:img元素是自關閉元素,不需要結束標記。

alt屬性,也被稱為alt text, 是當圖片無法加載時顯示的替代文本。alt屬性對於盲人或視覺損傷的用戶理解一幅圖片中所描繪的內容非常重要,搜索引擎也會搜索alt屬性。

簡而言之,每一張圖片都應該有一個alt屬性!

你可以像下面例子中一樣為img元素添加一個alt屬性:

<img src="www.your-image-source.com/your-image.jpg" alt="your alt text">

4. P標簽

P標簽中的P是英文paragraph段落的縮寫,經常被用來創建一個段落。如

<p>123456454</p>

5. A標簽

a元素,也叫anchor(錨點)元素,既可以用來鏈接到外部地址實現頁面跳轉功能,也可以鏈接到當前頁面的某部分實現內部導航功能。

<p>Here's a <a href="http://freecodecamp.cn"> link to FreeCodeCamp中文社區 </a> for you to follow.</p>

Nesting(嵌套)就是把一個元素放在另一個元素里面,如把a元素放到了p元素中

有時你想為你的網站添加一個a元素,但此時你還不知道要將它們鏈接到哪兒,此時可以使用固定鏈接。

把你的a元素的href屬性的值替換為一個#,別名hash(哈希)符號,將其變為一個固定鏈接。

舉例如下:

<a href="#"><img src="/images/relaxing-cat.jpg"></a>

6. 無序列表

HTML有一個特殊元素,用於創建unordered lists(無序列表), 或帶項目符號的列表。

無序列表以<ul>元素開始,並包含一個或多個<li>元素。

例如:

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

將會創建一個帶項目符號的"milk"和"cheese"列表。

7. 有序列表

HTML有一個特殊元素,用於創建ordered lists(有序列表), 或數字編號列表。

有序列表以<ol>元素開始,並包含一個或多個<li>元素。

例如:

<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

將創建一個包含"Garfield"和"Sylvester"的數字編號列表。

8. Form表單

使用HTML來構建可以跟服務器交互的Web表單(form),通過給你的form元素添加一個action屬性來達到此目的。

action屬性的值指定了表單提交到服務器的地址。

例如:

<form action="/url-where-you-want-to-submit-form-data"></form>

9. Text input文本輸入框

Text input(文本輸入框)是用來獲得用戶輸入的絕佳方式。

你可以用如下方法創建:

<input type="text">

注意,input元素是自關閉的。

占位符(placeholder text)是用戶在input(輸入)框輸入任何東西之前放置在input(輸入)框中的預定義文本。

你可以用如下方式創建占位符:

<input type="text" placeholder="this is placeholder text">

當你設計表單時,你可以指定某些選項為必填項(required),只有當用戶填寫了該選項后,用戶才能夠提交表單。

例如,如果你想把一個文本輸入字段設置為必填項,在你的input元素中加上required屬性就可以了,你可以使用:
<input type="text" required>

10. Button submit提交按鈕

form表單添加一個submit(提交)按鈕,點擊這個按鈕,表單中的數據將會被發送到你通過action屬性指定的地址上。

下面是submit按鈕的例子:

<button type="submit">this button submits the form</button>

為你的form元素添加一個type為submit的提交按鈕,用"Submit"作按鈕文本。

11. 單選按鈕

單選就是你只能在多個選項中選擇一個,就好比你有很多追求者,但卻只能選擇一個結婚。

多選一的場景就用radio button(單選按鈕)

單選按鈕只是input輸入框的一種類型。

每一個單選按鈕都應該嵌套在它自己的label(標簽)元素中。

注意:所有關聯的單選按鈕應該使用相同的name屬性。

下面是一個單選按鈕的例子:

<label><input type="radio" name="indoor-outdoor"> Indoor</label>

12. 復選按鈕

當你在大學選課時,面對幾百門課程,而因為時間和精力,你只能從中選擇十幾門。

這樣的場景就用checkboxes(復選按鈕)

復選按鈕是input的輸入框的另一種類型。

每一個復選按鈕都應該嵌套進label元素中。

所有關聯的復選按鈕應該具有相同的name屬性。

下面是復選按鈕的例子:

<label><input type="checkbox" name="personality"> Loving</label>

注意:使用checked屬性,你可以設置復選按鈕和單選按鈕默認被選中。

為此,只需在input元素中添加屬性checked

<input type="radio" name="test-name" checked>

13. Div標簽

div元素,也被稱作division(層)元素,是一個盛裝其他元素的通用容器。

所以可以利用CSS的繼承關系把div上的CSS傳遞給它所有子元素。

你可以用<div>來標記一個div元素的開始,然后用</div>來標記一個div元素的結束。

14. 注釋

注釋的開始標記是<!--

結束標記是-->

注釋有兩個功能:

1、想讓某一段代碼不起作用,但你又不想刪除這一段代碼。

2、就是給代碼添加一些說明,方便團隊合作或日后自己查看,但又不想影響代碼本身。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM