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

么是瀑布流式頁面布局

下面看幾個現實的案例：

小紅書中的瀑布流式頁面布局

手機淘寶中的瀑布流式頁面布局：

介紹

瀑布流式布局頁面是什么？

頁面上給人一種參差不齊的多欄布局，其中元素大部分為圖片，圖片的寬度是統一固定的，但是由于高度不一樣，第一行圖片排滿之后，新的圖片會插入到第一排中高度最低的圖片下面，并更新高度，如此循環，最終達到瀑布流式的效果。

優點：

吸引眼球： 瀑布流布局的不規則排列方式能夠引起用戶的興趣，使界面更吸引人。用戶會感到好奇，想要瀏覽所有的項目，因為每個項目都以不同的方式呈現。
有效利用空間： 瀑布流布局可以充分利用頁面空間，無論是橫向還是縱向滾動，都可以容納很多項目。這對于展示大量內容或產品非常有用。
適應性： 瀑布流布局可以適應不同屏幕大小和設備類型，因為它是響應式設計的一部分。這意味著它可以在桌面電腦、平板電腦和移動設備上都有良好的表現。
提高用戶參與度： 用戶通常更愿意探索頁面上的不同項目，因為每次滾動都可能帶來新的發現，從而增加了用戶的參與度和瀏覽時間。

缺點：

信息層次不明確： 由于項目的不規則排列，瀑布流布局可能會使用戶難以識別內容的層次和重要性。重要內容可能會被埋沒在次要內容中。
不適用于所有類型的內容： 瀑布流布局更適合視覺導向的內容，如圖片、照片、商品展示等。對于需要詳細信息或結構化內容的頁面，這種布局可能不夠合適。
加載時間問題： 當頁面包含大量項目時，瀑布流布局可能導致頁面加載時間變長，特別是在網絡連接較慢的情況下。這可能會影響用戶體驗。
有限的導航性： 用戶可能會發現導航和查找特定項目變得更加困難，因為項目的位置是不固定的。這可能會使用戶在頁面上迷失方向。

代碼實現

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js瀑布流</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- container容器用來存放box容器，一個box放一張圖片 -->
  <div id="container">
      <!-- 根據自己的需求添加圖片的數量 -->
    <div class="box">
      <div class="box-img"><img src="./img/1.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/2.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/3.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/4.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/5.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/6.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/7.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/8.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/9.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/10.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/1.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/2.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/3.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/4.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/5.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/6.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/7.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/8.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/9.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/10.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/1.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/2.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/3.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/4.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/5.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/6.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/7.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/8.jpg" alt=""></div>
    </div>
    <div class="box">
      <div class="box-img"><img src="./img/9.jpg" alt=""></div>
    </div>
  </div>

  <script type="text/javascript" src="waterfall.js">
    
  </script>
</body>
</html>

CSS：

*{
  margin: 0;
  padding: 0;
}

.box{
  float: left;
  padding: 5px;
}

.box-img{
  width: 165px;  // 圖片的寬度，他會決定一行能放多少張圖片
  padding: 5px;
  border: 1px solid #ccc;
}

img{
  width: 100%;
}

JS：

// 讀取用戶屏幕第一行放了多少張圖
// 操作下一張圖，找到上一行最矮的高度，將圖片排放到其下方

function imgLocation(parent,content){  // 當前有多少圖片要擺放

  // 獲取到大盒子cparent(大盒子內存放了很多個box，其中每一個box盒子存放著一張圖片)
  var cparent = document.getElementById(parent)
  // 將大盒子cparent中所有的box盒子存放在一個數組ccontent中
  var ccontent = getChildElement(cparent,content) 
  // 獲取到第一張圖片的寬度(已知每一張圖片的寬度都相同)
  var imgWidth = ccontent[0].offsetWidth
  // 其中num計算后為頁面一行能存放圖片的張數，也就是一行能放多少個box盒子
  // document.documentElement.clientWidth 獲取整個屏幕的寬度
  var num = Math.floor(document.documentElement.clientWidth/imgWidth)  
  cparent.style.cssText = `width: ${imgWidth*num}px`

  // 創建一個數組用來存放第一行每個圖片的高度(此處高度會隨著新圖片的插入而變大)
  var BoxHeightArr = []
  for(var i=0; i<ccontent.length; i++){
    if(i<num){
      // 先將第一行放滿
      BoxHeightArr[i] = ccontent[i].offsetHeight
    }else{   // 要操作的圖
       
      /* 找到高度最小值圖片對應的下標 */
      // 獲取到第一行中的高度最小值
      // apply為借用前面的Math.min方法給數組，不能直接使用Math.min找到數組中的最小值
      var minHeight = Math.min.apply(null,BoxHeightArr) 
      // 找到高度最小值對應在數組BoxHeightArr中的下標
      var minIndex = BoxHeightArr.indexOf(minHeight)
      /* 找到高度最小值圖片對應的下標 */
     

      /* 新插入的圖片進行定位 */
      // 將新要插入的圖片設置為絕對定位
      ccontent[i].style.position = 'absolute'
      // 將新要插入的圖片的頂部到頁面頂部的距離設置為找到的最小的高度值
      ccontent[i].style.top = minHeight +'px'
      // 將新要插入的圖片的左邊到頁面左邊的距離設置和最小高度圖片的左邊到頁面的距離相同，
      // 使兩張圖片左邊對齊
      ccontent[i].style.left = ccontent[minIndex].offsetLeft+'px'
      /* 新插入的圖片進行定位 */

      // 更新這一列的高度(這里很關鍵，因為數組中只會存放num（一行放圖片的數目）個元素，
      // 所以插入新圖片后原來高度最小值就未必是最小了)
      BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight
    }
  }
}


// 定義一個函數獲取一個容器內中某個容器的數目(此處為獲取所有container容器內的box容器)
function getChildElement(parent,content){
  var contentArr = []
  var allContent = parent.getElementsByTagName("*")
  for(var i=0;i<allContent.length;i++){
    if(allContent[i].className == content){
      contentArr.push(allContent[i])
    }
  }
  return contentArr
}


imgLocation('container','box')

最終代碼實現效果

圖片只有8張時（正好放在一行）

多放幾張圖片

圖片多到排滿整個頁面

作者：全糖奶茶不加糖
鏈接：https://juejin.cn/post/7294852698460438540

lass屬性 - 定制化網頁設計的強大武器

在HTML中,Class屬性是一個非常強大而又靈活的工具。它可以讓您為網頁中的各種元素賦予獨特的樣式和功能,從而打造出與眾不同的視覺效果和交互體驗。本文將為您解密Class屬性的魔力,教您如何利用它來實現個性化的網頁設計。

1. Class屬性的基本用法

Class屬性允許您為HTML元素指定一個或多個類名。這些類名可以在CSS中定義樣式規則,從而影響元素的外觀。

<div class="header">
  <h1 class="title">歡迎來到我的網站</h1>
  <p class="description">這里是網站的簡介信息</p>
</div>

.header {
  background-color: #f2f2f2;
  padding: 20px;
}

.title {
  color: #333;
  font-size: 24px;
}

.description {
  color: #666;
  font-size: 16px;
}

2. Class屬性的進階用法

除了基本的樣式定制,Class屬性還可以用于更復雜的場景。您可以為同一個元素指定多個類名,實現更細致的樣式控制。

<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>

.btn {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

3. Class屬性與JavaScript的結合

Class屬性不僅可以用于樣式定制,還可以與JavaScript進行聯動,實現各種交互效果。您可以通過JavaScript動態地添加、修改或刪除元素的類名,從而改變它們的外觀和行為。

<div id="box" class="box">這是一個盒子</div>

const box = document.getElementById('box');

box.classList.add('active'); // 添加類名
box.classList.remove('box'); // 刪除類名
box.classList.toggle('hidden'); // 切換類名

4. Class屬性的最佳實踐

在使用Class屬性時,有幾個需要注意的最佳實踐:

類名要具有描述性,方便理解和維護
避免過多的類名,保持CSS規則的簡潔性
利用CSS預處理器如SASS/LESS來管理類名和樣式規則
結合BEM或OOCSS等命名方法論,提高代碼的可讀性和可維護性

總之,HTML Class屬性是一個非常強大的工具,它可以幫助您定制化網頁設計,打造出獨一無二的視覺效果和交互體驗。只要掌握好它的用法,相信您一定能創造出令人驚嘆的網頁作品。

在線咨詢

上一篇：弱電接地的真實情況是這樣的，別聽不靠譜的電工瞎掰
下一篇：網頁在線視頻播放代碼大全

您的項目需求

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

整合營銷服務商