HTML（一）

目錄

HTML

img

簡介

HTML （Hypertext Markup Language） 是用於構建網頁及其內容的程式碼。例如，內容可以在一組段落、項目符號列表或使用影像和數據表中進行結構化；

通俗的理解為：HTML就是構造網頁的骨架；

定義

HTML 是一種定義內容結構的標記語言。HTML由一系列元素組成，您可以使用這些元素來包含或包裝內容的不同部分，以使其以某種方式顯示或以某種方式執行。封閉的標籤可以使單詞或影像超鏈接到其他位置，可以斜體化單詞，可以使字體變大或變小，等等；

例如，以以下內容行為例：

My cat is very grumpy

如果我們希望該行獨立存在，我們可以通過將其括在段落標記中來指定它是一個段落：

<p>My cat is very grumpy</p>

HTML元素

image

我們元素的主要部分如下：

  • 開始標記（Opening tag）：它由元素的名稱（在本例中為 p）組成，該名稱括在左尖括弧和右尖括弧中。這表示元素開始或開始生效的位置 — 在本例中為段落開始的位置。
  • 結束標記（Closing tag）：這與開始標記相同，只是它在元素名稱前包含正斜杠。這表示元素的結束位置 — 在本例中為段落結束的位置。未能添加結束標記是標準的初學者錯誤之一，可能會導致奇怪的結果。
  • 內容：這是元素的內容，在本例中，它只是文本。
  • 元素：開始標記、結束標記和內容共同構成了元素。

元素的屬性：

image

屬性包含有關元素的額外資訊，如果不希望這些元素顯示在實際內容中。此處是屬性名稱，並且是屬性值。該屬性允許您為元素提供一個非唯一標識符，該標識符可用於使用樣式資訊和其他內容將其作為目標（以及具有相同值的任何其他元素）class``editor-note``class``class

  • 屬性應始終具有以下內容：
它與元素名稱（或上一個屬性，如果元素已具有一個或多個屬性）之間的空格。
屬性名稱後跟等號。
由左引號和右引號括起來的屬性值。

注意：不包含 ASCII 空格（或任何字元）的簡單屬性值可以保持不加引號，但建議您引用所有屬性值，因為這會使程式碼更加一致和易於理解。" ' = < >

HTML標籤

在HTML中，標籤用於創建元素；

HTML 元素的名稱是尖括弧（如段落）中使用的名稱。請注意，結束標記的名稱前面有一個斜杠字元 ，並且在空元素中，結束標記既不是必需的，也不是允許的。如果未提及屬性，則在每種情況下都使用默認值；

注意! 元素和標籤不是一回事。標籤在源程式碼中開始或結束元素，而元素是DOM的一部分DOM是用於在瀏覽器中顯示頁面的文檔模型；

HTML 標籤分類

分類1

  • 雙標籤：通俗理解為有頭有尾的；
<p></p>
<a></a>
  • 自閉合標籤：單標籤
<img/>

分類2

塊級別標籤：在頁面內以塊的形式展現，每一個標籤都出現在新的一行，佔用全部寬度；

<div></div>
<h1></h1>
<p></p>

行內標籤：通常在塊級元素內，不會導致文本換行，只佔必要的部分寬度

<a></a>
<u></u>
<i></i>
<s></s>
<b></b>
<img>
<em></em>
<strong></strong>

HTML文檔結構

主題結構

<html>
  	<head>編寫給瀏覽器查看的內容</head>
    <body>編寫展示給用戶查看的內容</body>
</html>

自建html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

image

文檔結構剖析

  • <!DOCTYPE html>： 解釋文檔類型，必須寫的序言；
  • <html></html>：此元素包裝整個頁面上的所有內容，根元素；
  • <head></head>：此元素充當要包含在 HTML 頁面上的所有內容的容器，是編寫給瀏覽器查看的內容；
  • <meta charset="utf-8">：設置字符集
  • <title></title>：頁面的標題，即在載入頁面的瀏覽器選項卡中顯示的標題；
  • <body></body>：Web 用戶訪問頁面時向他們顯示的所有內容，編寫給用戶查看的內容；

如何注釋

方式一：

1.單行注釋
<!--單行注釋內容-->
2.多行注釋
  <!--
  多行注釋內容1
  多行注釋內容2
  -->

方式二：

  • 快捷鍵：Ctrl+?

注意！

編寫HTML標籤的時候 不需要自己寫大括弧小括弧 只需要寫標籤名稱+tab鍵即可自動補全(所有支援編寫html文件的工具內部自帶的插件語法功能)

HTML標籤

head內常見的標籤

標籤 說明
<title>內容</title> 定義網頁標題
<style></style> 內部支援css程式碼
<script></script> 內部支援編寫js程式碼，還可以通過src屬性導入外部js文件
<link> 通過href屬性引入外部的css文件
meta 定義網頁源資訊
keywords關鍵字搜索
description網頁描述資訊

注意，在html文件中 可以編寫html和css以及js，但是實際工作中三者其實是分開存放的 這樣有利於後期維護和擴展；

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 網頁標題 -->
    <title>Hammer Title</title>

    <!--  樣式:將h1標題修改顏色  -->
    <style>
        h1 {
            color: cyan;
        }
    </style>
    <!-- js動態效果:驗證  -->
    <script>
        prompt('hammer')
    </script>
    <!-- 引入外部js   -->
    <script src="第一個js文件.js"></script>
    <link rel="stylesheet" href="第一個css文件.css">
    <!-- 網頁源:refresh-刷新,2秒後跳轉到百度  -->
    <meta  http-equiv="refresh" content="2;URL=//www.baidu.com">
    <!-- 關鍵字查詢:相當於熱詞搜索   -->
    <meta name="keywords" content="Hammer's html">
    <!-- 網頁描述性資訊   -->
    <meta name="description" content="hammer html">
</head>
<body>
<h1>Hello world</h1>
</body>
</html>

image

body內常見的標籤

標題標籤

有h1~h6級別標籤，一共六個級別標籤

<h1></h1>

<body>
<!-- 4 heading levels: -->
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
</body>

image

段落標籤

代表段落，塊級標籤

<body>
<p>This is a single paragraph</p>
</body>

image

字體相關標籤

標籤 說明
<b></b> 字體加粗
<i></i> 斜體
<u></u> 下劃線
<s></s> 刪除線 
<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除線</s>

注意：有時候相同的樣式 可能有多種標籤可以實現

換行、水平分割線標籤

  • <br>：換行
  • <hr>：水平分割線

image

列表標籤

網路上的很多內容都是列表，HTML有特殊的元素。標記列表始終包含至少 2 個元素。最常見的列表類型是有序列表和無序列表：

  • 無序列表（Unordered List）中項目的順序並不重要，就像購物列表。用一個<ul>元素包圍。
  • 有序列表（Ordered List）中項目的順序很重要，就像烹調指南。用一個 <ol>元素包圍。

無序列表

<body>
<p>At Mozilla, we』re a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

</body>

<!--快速生成列表標籤-->
ul>li{$$$}*10

image

有序列表

<ol>
<li>Hammer</li>
<li>hammer</li>
<li>ze</li>
</ol>

image

標題列表（了解）

	<dl>
    <dt>標題1</dt>
      <dd>內容1</dd>
    <dt>標題2</dt>
      <dd>內容1</dd>
      <dd>內容2</dd>
	</dl>

鏈接標籤

鏈接非常重要 — 它們賦予 Web 網路屬性。要植入一個鏈接，我們需要使用一個簡單的標籤：<a></a>是 “anchor” （錨）的縮寫；

a標籤的兩種用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--通過href屬性指定網址(URL)點擊跳轉-->
<a href="//www.baidu.com">百度</a>
<!--錨點-->
<!--通過跟id值來跳轉-->
<a href="#d2" id="d1">錨點1</a>
<div style="background-color: cyan;height:1000px"></div>
<a href="#d1" id="d2">錨點2</a>
<div style="background-color: #aaa1a4;height:1000px"></div>

</body>
</html>

鏈接標籤跳轉的方式

1.當前頁面跳轉	target="_self"  (默認)	
2.新建頁面跳轉	target="_blank"

<a href="//www.baidu.com" target="_self">百度</a>
<a href="//www.baidu.com" target="_blank">百度</a>

圖片標籤

  • <img>
  • src 屬性是必須的，它包含了你想嵌入的圖片的文件路徑；
  • alt 屬性包含一條對影像的文本描述，這不是強制性的，但對可訪問性而言，它難以置信地有用——螢幕閱讀器會將這些描述讀給需要使用閱讀器的使用者聽，讓他們知道影像的含義。如果由於某種原因無法載入影像，普通瀏覽器也會在頁面上顯示alt 屬性中的備用文本：例如，網路錯誤、內容被屏蔽或鏈接過期時；
  • title：屬性寫文本用於滑鼠懸浮在圖片上之後提示的文本資訊；
  • height、width屬性寫像素，用於調整圖片的尺寸，需要注意調整的時候 修改一個另外一個自動等比例縮放，如果同事調整兩個 那麼可能會造成圖片的失真；
<img class="fit-picture"
     src="/media/cc0-images/grapefruit-slice-332-332.jpg"
     alt="Grapefruit slice atop a pile of other slices">

表格標籤

表格是由行和列組成的結構化數據集(表格數據)，它能夠使你簡捷迅速地查找某個表示不同類型數據之間的某種關係的值 。比如說，某個人和他的年齡，一天或是一周，當地游泳池的時間表 ；

image

  • 標籤：<table></table>
    • <thead></thead>：表頭
    • <tbody></tbody>：表單
    • <tr></tr>：表示一行
    • <th></th>：在表頭的欄位名稱
    • <td></td>：普通的單元格數據
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>gender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Hammer</td>
            <td>18</td>
            <td>male</td>
        </tr>
    </tbody>
</table>
</body>
</html>
屬性 說明
border 表格邊框
cellpadding 內邊距
cellspacing 外邊距
width 像素 百分比（最好通過css來設置長寬）
rowspan 單元格豎跨多少行
colspan 單元格橫跨多少列（即合併單元格） 
<body>
<table border="1" cellpadding="10px" cellspacing="5px" >
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>gender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Hammer</td>
            <td>18</td>
            <td>male</td>
        </tr>
    </tbody>
</table>
</body>

image

HTML特殊符號

符號 說明
&nbsp; 空格(牛逼的sp)
&gt; 大於號
&lt; 小於號
&amp; &符號
&yen; 羊角符￥
&copy; 版權符
&reg; 註冊商標 
<body>
<!--空格-->
<p>特殊符號1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;特殊符號2</p>
<hr>
<!--大於-->
<p>a&gt;b</p>
<!--小於-->
<p>a&lt;b</p>
<!--&符號-->
<p>&amp;</p>
<!--羊角符-->
<p>&yen;100000</p>
<!--版權符號-->
<p>&copy;版權</p>
<!--註冊商標-->
<p>&reg;</p>
</body>

image

布局標籤

<div></div>：用來佔位布局，屬於塊級標籤，可以無限制的嵌套塊級標籤或者行內標籤；

<span></span>：行內標籤；

image

注意：p標籤雖然是塊級別標籤，但是不能嵌套塊級標籤；

標籤的兩大重要屬性

  • id屬性：相當於個體查找
  • class屬性：群體查找
類似於python面向對象中的類的繼承
  	可以將多個標籤劃為一類
      <h1 class='c1'></h1>
      <p class='c1'></p>
    並且一個標籤可以有很多類
      <h1 class='c1 c2 c3'></h1>
      <p class='c1 c8 c9'></p>

【待續】

Tags:

VirMach 便宜 VPS

QNews

QNews