HTML中你不得不知道的標籤及屬性

Intellectual_Li發表於2020-12-12
HTML

簡單的思維導圖，不想看圖的小夥伴可直接拉到下面
在這裡插入圖片描述

文字版

在瞭解標籤之前，我們要先知道HTML是什麼

一、HTML介紹

1、HTML全名：Hyper Text Markup Language
中文名：超文字標記語言
2、版本：HTML4——XHTML——HTML5，由3wc（又稱全球資訊網聯盟）為其制定標準
3、作用：製作網頁

二、如何使用

1、選擇工具：notepad、sublime、Notepad++、Dreamweaver、VScode、Webstorm等
2、使用步驟：以sublime3為例：①新建檔案（ctrl+N），儲存（ctrl+S）（PS：要經常使用這個組合否則…），修改副檔名為XXXX.html② 愉快地敲程式碼 ③再次儲存，並右擊，選擇在瀏覽器中開啟
3、瀏覽器選擇：IE瀏覽器微軟、chrome谷哥瀏覽器、fifirefox火狐、safari蘋果

三、什麼是標籤

介紹
1、標籤組成：<標籤名 屬性名=“屬性值”>內容</標籤名>
2、標籤分類：

  • 雙標籤，即有關閉標籤併成對出現。
<html></html>
<head></head>
<title></title>
  • 單標籤，即無關閉標籤,單身。
<meta>
<br>
<h1>....<h6>

四、有哪些重要的標籤及屬性

一、body：定義文件的主體

  • 屬性①bgcolor(背景顏色)②background(圖片作背景)

二、Hn：文字的標題

  • n取值1-6
  • 取值越小，字型越大
  • 字型加粗效果

三、form：表單

  • 該標籤一般不會單獨使用 會和input標籤聯合使用
  • 屬性：①action=”url url表示路徑②target，如圖：

- ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201209210256536.pn
四、input：用於蒐集使用者資訊

  • 使用方法：<input type=”” name=””>

  • Text ----文字框
    Password ----密碼框
    Submit ----提交按鈕
    Radio ----單選框
    Checkbox ----多選框
    Reset 重置按鈕
    Button 普通的按鈕
    四、select ：選擇

  • 多選：屬性——multiple

五、a標籤：超連結

  • 錨點：使網頁的展示到達某一個定位的地點，如圖使用
<a href=”#D1”></a>

<a name=”D1”></a>

六、img：頁面上的圖片

  • 屬性①Src：圖片的路徑②Alt：影像的代替文字③Width：寬度④Height：高度

七、map：對映，可點選圖片中某一指定區域，配合img一起

  • 必選屬性：id
  • 可選屬性：name
  • 如圖
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

八、表格標籤

  • Table——表格
  • Tr——錶行
  • Th——表頭
  • Td——表元
  • 如圖
<table>
  <tr>
     <td>
    </td>
  </tr>
</table>

九、列表標籤

  • 無序列表，字首預設為小圓圈，如圖
<Ul>
 <li></li>
<ul>
  • 有序列表，字首預設為1234~，如圖
<ol>
<li></li>
</ol>
  • 定義列表，如圖
	<dl>
	  <dt>我</dt>
	  <dd>是人</dd>
	</dl>

十、vedio:視訊 audio:音訊

<video src="" controls="">
</video>
<audio src=""  controls="">
</audio>

以上十條即HTML中常用標籤。

相關文章