HTML的基本語法以及如何使用HTML來創建網頁

一部分：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有所幫助，讓你能夠開始創建自己的網頁。繼續學習和實踐，你將成為一個熟練的網頁開發者。

i列表排序

<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#ul1 {background:green;}
#ul2 {background:yellow;}
</style>
<script>
window.onload=function (){
    var oUl1=document.getElementById('ul1');
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function (){
    var aLi=oUl1.getElementsByTagName('li');
    //aLi.sort(); 此方法不可行,因為aLi是元素集合,不是數組,sort()只能用于數組排序
    var arr=[];

    for(var i=0;i<aLi.length;i++){
    arr[i]=aLi[i]; //aLi元素集合轉換為數組
    }

    arr.sort(function (li1, li2){ //自定義排序函數
    var n1=parseInt(li1.innerHTML); //將字符串轉換為整數
    var n2=parseInt(li2.innerHTML);
    return n1-n2;
    });
    //alert(arr[0].innerHTML);
    for(var i=0;i<arr.length;i++){
    //alert('該把'+arr[i].innerHTML+'插入到最后');
    oUl1.appendChild(arr[i]);
    }
    };
};
</script>
</head>
<body>
<input id="btn1" type="button" value="排序" />
<ul id="ul1">
<li>34</li>
<li>25</li>
<li>9</li>
<li>88</li>
<li>54</li>
</ul>
</body>
</html>

appendChild()方法理解:

target.appendChild(newnode)

1.先把元素從原有父級上刪掉

2.添加到原有的父級元素下, 起到了移動子元素的作用。

SS中的浮動（Floats）、定位（Positioning）和顯示（Display）屬性是前端工程師掌握頁面布局的關鍵。本文將深入探討這些屬性的工作原理和使用場景，幫助開發者更好地理解和運用它們來構建響應式和精確的網頁布局。

浮動（Float）

浮動是CSS中用于實現元素排列的一種方式，它可以讓元素脫離正常的文檔流，并可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動元素的邊緣。

.element {
  float: left; /* 或者 'right' */
}

使用場景

文字環繞圖片。
創建水平導航欄。
無網格系統時的列布局。

注意事項

清除浮動（Clearing Floats）：使用clear屬性可以防止元素被浮動元素覆蓋。

.clear-element {
  clear: both; /* 可以是 'left', 'right', 或 'both' */
}

包含浮動（Containing Floats）：浮動元素的父容器可能不會擴展以包含浮動的子元素，可以通過清除浮動或使用其他技術（如overflow）來解決這個問題。
浮動塌陷（Float Collapse）：浮動元素不占據空間，可能導致父元素高度塌陷。

定位（Position）

定位屬性允許你控制元素的位置，它可以是相對于它的正常位置、相對于最近的已定位祖先元素、相對于視口或絕對位置。

.element {
  position: static | relative | absolute | fixed | sticky;
}

使用場景

相對定位（Relative Positioning）：元素相對于其正常位置進行偏移。

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

絕對定位（Absolute Positioning）：元素相對于最近的已定位父元素進行定位。

.absolute-element {
  position: absolute;
  top: 0;
  right: 0;
}

固定定位（Fixed Positioning）：元素相對于視口進行定位，即使頁面滾動也不會移動。

.fixed-element {
  position: fixed;
  bottom: 0;
  left: 0;
}

粘性定位（Sticky Positioning）：元素基于用戶的滾動位置在相對和固定定位之間切換。

.sticky-element {
  position: sticky;
  top: 10px;
}

注意事項

定位元素可能會脫離文檔流，影響周圍元素的布局。
z-index屬性可以控制堆疊順序。
絕對定位元素的容器應有position: relative;，以便正確定位。

顯示（Display）

display屬性是CSS中最重要的用于控制布局的屬性之一，它定義了元素如何顯示在頁面上。

.element {
  display: block | inline | inline-block | flex | grid | none;
}

使用場景

塊級元素（Block）：display: block;使元素表現為塊級，占據新的行。

.block-element {
  display: block;
}

內聯元素（Inline）：display: inline;使元素在文本行中顯示，不開始新行。

.inline-element {
  display: inline;
}

內聯塊元素（Inline-Block）：display: inline-block;允許元素并排排列，同時擁有塊級元素的寬度和高度屬性。

.inline-block-element {
  display: inline-block;
}

彈性盒子（Flex）：display: flex;創建了一個彈性容器，其子元素可以靈活地在容器內排列。

.flex-container {
  display: flex;
}

網格（Grid）：display: grid;創建了一個網格容器，可以定義行和列以及在網格內放置元素。

.grid-container {
  display: grid;
}

隱藏元素（None）：display: none;將元素隱藏，且不為元素保留空間。

.hidden-element {
  display: none;
}

注意事項

使用display: none;與visibility: hidden;的區別在于后者仍保留元素占據的空間。
display: flex;和display: grid;為現代布局提供了更多控制，通常比浮動和定位更優。

示例

HTML結構

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="header">
  <div class="logo">Logo</div>
  <div class="navigation">Navigation</div>
</div>

<div class="main-content">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

<div class="footer">Footer</div>

<div class="fixed-element">Fixed Element</div>

</body>
</html>

CSS樣式

/* Reset some default styles */
body, h1, p {
  margin: 0;
  padding: 0;
}

/* Header styles */
.header {
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px;
  overflow: hidden; /* Clearfix for floated elements */
}

.logo {
  float: left;
  font-size: 24px;
}

.navigation {
  float: right;
  font-size: 18px;
}

/* Main content styles */
.main-content {
  padding: 20px;
}

.sidebar {
  float: left;
  width: 200px;
  background-color: #ddd;
  padding: 10px;
}

.content {
  margin-left: 220px; /* Make space for the sidebar */
  background-color: #eee;
  padding: 10px;
}

/* Footer styles */
.footer {
  background-color: #f8f8f8;
  border-top: 1px solid #e7e7e7;
  text-align: center;
  padding: 10px;
  position: relative; /* For demonstration purposes */
  top: 20px; /* Move the footer down a bit */
}

/* Fixed element styles */
.fixed-element {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  z-index: 1000; /* Ensure it stays on top */
}

/* Clearfix hack */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

在這個例子中，我們創建了一個包含頭部、側邊欄、主要內容和頁腳的基本布局。我們使用浮動來對齊頭部的Logo和導航，以及創建一個側邊欄。我們還使用了相對定位來稍微下移頁腳，并使用固定定位為頁面添加了一個始終可見的固定元素。最后，我們使用了overflow: hidden;來清除頭部中浮動元素的影響。

結語

浮動、定位和顯示屬性是CSS中構建復雜布局的強大工具。通過深入理解和正確應用這些屬性，前端工程師可以創建出既美觀又功能強大的網頁。隨著Web標準的不斷發展，我們也需要不斷學習和適應新的CSS特性，以保持我們技能的前沿性。

在線咨詢

上一篇：數據采集代碼實戰
下一篇：僅需 5 步，用 JavaScript 直接通過前端發送電子郵件

您的項目需求

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

整合營銷服務商

HTML的基本語法以及如何使用HTML來創建網頁

一部分：HTML簡介

什么是HTML？

HTML的基本結構

HTML標簽和元素

HTML注釋

第二部分：HTML基本元素

文本

圖像

鏈接

列表

無序列表

有序列表

定義列表

第三部分：HTML表單

<form>元素

輸入字段

文本框

密碼框

單選按鈕

復選框

下拉列表

第四部分：HTML樣式和CSS

內聯樣式

外部樣式表

總結

浮動（Float）

使用場景

注意事項

定位（Position）

使用場景

注意事項

顯示（Display）

使用場景

注意事項

示例

HTML結構

CSS樣式

結語

您的項目需求