01-HTML基礎

来源:https://www.cnblogs.com/OnlyOnYourself-lzw/archive/2022/07/31/16537226.html
-Advertisement-
Play Games

HTML基礎 1、HTML的概念和作用 概念 HTML（Hyper Text Markup Language）：超文本標記語言 超文本：不僅包含普通文本，還可以包含圖片、視頻、音頻、超鏈接、表格等內容 標記語言：由標簽構成的語言 HTML的作用 編寫網頁 2、W3C標準 網頁主要由三部分組成 HTM ...


HTML基礎

1、HTML的概念和作用

  • 概念
    • HTML（Hyper Text Markup Language）：超文本標記語言
      • 超文本：不僅包含普通文本，還可以包含圖片、視頻、音頻、超鏈接、表格等內容
      • 標記語言：由標簽構成的語言
  • HTML的作用
    • 編寫網頁

2、W3C標準

  • 網頁主要由三部分組成
    • HTML：用於製作網頁基礎內容和基本結構
    • CSS：用於網頁樣式美化效果
    • JavaScript：用來製作數據驗證、交互行為效果，可以動態 操作網頁的元素增刪改查

3、HTML的組成

  • 標簽
    • 標簽可以用於設置文本樣式、圖片樣式、超鏈接樣式等等。用<>表示
    • 例如：<h1>標簽，代表一級標簽。我們可以使用開始標簽和結束標簽包圍文字，這些文字就以標題形式顯示
  • 屬性
    • 標簽中還可以擁有屬性，屬性可以位標簽提供更多的信息
    • 屬性只能添加到開始標簽中。格式為：屬性名=屬性值
    • 例如：align屬性，表示對齊方式。我們可以在開始標簽中添加該屬性，就能讓內容顯示在不同位置
    • eg

4、初始HTML頁面屬性說明

  • <!DOCTYPE.html>：HTML的文檔聲明
  • <html lang="en">: 根標簽，一個文件中只能有一個根標簽，lang屬性表示網頁使用的語言，預設是en，可以修改成zh
  • <head>：頭部標簽
  • <meta charset="UTF-8">：設置字元集，建議使用UTF-8
  • <title>：文檔標題，顯示在瀏覽器標簽上
  • <body>：身體標簽，包含所有的文檔內容

5、HTML基礎語法

5.1、文本標簽

  • h1~h6
    • 用於文章標題，一共有6級
    • 1級最大，6級最小
    • 這是塊級標簽，自帶換行的功能
    • 常用屬性
      • align：標簽對齊的方式
      • center居中、right右對齊、left左對齊
  • hr
    • 水平線，即可在此畫一條水平線
    • <hr width="400" color="red" size="5">
    • 常用屬性
      • width：設置水平線的寬度（長度）
      • size：大小（粗細）
      • color：線的顏色
  • font
    • 設置字體、顏色、字型大小等
    • PS
      • 在HTML5中已經不推薦使用
    • 內聯標簽，沒有換行功能
    • 常用屬性
      • color：字體顏色
      • size：字體大小
      • face：字體，如：宋體
  • b
    • bold加粗，與strong功能一樣
  • i
    • italic斜體
  • br
    • 換行
  • p
    • 每個p標簽代表一個自然段
    • paragraph，前後有一定間隔，首行沒有縮進
    • 常用屬性
      • title：用於滑鼠移上去顯示提示文字信息

5.2、有序列表和無序列表

  • ol-li（有序列表）
    • type屬性
      • 1：數字列表，預設值
      • a，A：字母列表，包含大小寫
      • i，I：羅馬數字編號
  • ul-li（無序列表）
    • type屬性
      • disc：黑心圓，預設樣式
      • circle：空白圓
      • square：黑色正方體

5.3、特殊字元

  • 什麼是特殊字元
    • 在HTML中，像<> “ ’ 空格 & 都是特殊字元，它們是語法本身的一部分。
  • 常用特殊字元
  • 特殊字元格式
    • 以&開頭，以分號結尾，如&nbsp;表示空格

5.4、div和span

  • 標簽 作用 特點
    span 容器，可以包裹其他內容 是內聯標簽，不帶換行功能，用於小範圍的內容劃分
    div 容器，可以包裹其他內容 是塊標簽，不帶換行功能，用於小範圍的內容的劃分，通常網頁佈局使用div將網頁分成不同塊

5.5、HTML案例-公司介紹

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公司簡介</title>
</head>
<body>
<!--
    需求分析：
    - 1.將文本素材內容放入其中
    - 2.使用<h1>標簽設置標題，修飾“公司介紹”
    - 3.使用<hr>標簽加入水平線
    - 4.使用4個<p>標簽加入水平線
    - 5.使用&nbsp;設置第一個段落首行文本縮進6個空格
    - 6.使用<font>標簽，設置第一段“黑馬程式員”字體顏色為紅色
    - 7.使用<i> <b>標簽，設置第一段“傳智教育“斜體與加粗
    - 8.使用<span>標簽，設置其他段”黑馬程式員“字體顏色為紅色
    - 9.價格部分使用無序列表：ul-li
    - 10.使用<br>標簽實現換行，在最後一段公司與版權中間實現
    - 11.設置最後一段樣式：文本居中，字體大小14px，顏色gray
    - 12.使用版權特殊字元實現©顯示
-->
<div>
    <h1>公司介紹</h1>
    <hr color="red" size="5"/>
    <p>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <font color="red">黑馬程式員</font>
        是<i><b>傳智教育旗</b></i>
        下的高端IT教育品牌，現已開設JavaEE、產品經理、HTML&JS+前端、C/C++、
        新媒體+短視頻直播運營、Python+人工智慧、大數據、UI/UE設計、軟體測試、Linux雲計算+運維開發、
        拍攝剪輯+短視頻製作、智能機器人軟體開發、電商視覺運營設計等培訓學科，直營分校遍佈北京、
        上海、廣州、深圳、武漢、鄭州、西安、長沙、濟南、重慶、南京、杭州、成都、石家莊、合肥、
        太原、廈門、沈陽、天津等城市。
    </p>

    <p>
        <span style="color: red">黑馬程式員</span>
        是傳智教育旗下高端IT教育品牌，致力於服務各大軟體企業，解決當前軟體開發技術飛速發展，而企業招不到優秀人才的困擾。我們的價值觀:
        <ul>
            <li>責任，對教學質量精益求精全心全意教授好每一位學生。</li>
            <li>務實，誠信待人，高效做事，不弄虛作假腳踏實地做好本職工作。</li>
            <li>創新，勇於創新，在工作中不斷突破，為學生提供更優質的教學資源與服務。</li>
            <li>育人，在傳授學生知識和技能的同時，言傳身教，正面引導學生實現人生應有的價值追求。</li>
        </ul>
    </p>

    <p><span style="color: red">黑馬程式員</span>
        不僅著重培養學員的基礎理論知識，更註重培養項目實施管理能力，並密切關註技術革新，不斷引入先進的技術，研發更新技術課程，
        確保學員進入企業後不僅能獨立從事開發工作，更能給企業帶來新的技術體系和理念。
    </p>
    <hr/>
    <center><font size="2" color="gray">江蘇傳智播客教育科技股份有限公司版權所有Copyright&copy;2006-至今, All Rights
        Reserved 蘇ICP備16007882
    </font></center>
</div>
</body>
</html>

5.6、圖像標簽

  • img標簽的作用

    • 在網頁中顯示圖片

  • img標簽格式

    • <img src="圖片文件路徑"/>

  • 常用屬性

    • img標簽顯示圖片 作用
      src 圖片地址
      width 寬度，如果只指定寬度，高度會按等比例縮放
      height 高度
      alt 如果圖片丟失，出現的替代文字

    • PS：src不能寫絕對路徑

    • audio：定義音頻。（MP3、WAV、OGG）

      • src：規定音頻的URL
      • controls：顯示播放控制項

    • video：定義音頻格式：如MP4、WebM、OGG

      • src：規定視頻的URL
      • controls：顯示播放控制項

5.7、鏈接標簽

  • 鏈接標簽的作用

    • 跳轉到其他頁面

  • 鏈接標簽的格式

    • <a href="跳轉的目的地">內容</a>
  • 標簽名 作用 備註
    a 超鏈接跳轉頁面功能 1.href屬性，表示超鏈接跳轉指向的url地址；2.target屬性，頁面打開方式，_self表示當前頁，_blank表示新標簽頁

  • 小結

    • 超鏈接標簽跳轉頁面的功能
      • <a href="跳轉頁面地址">...</a>
    • 超鏈接屬性target的含義
      • 表示設置跳轉頁面的打開方式
      • target="_self"表示在當前頁面跳轉
      • target="_blank"表示在新建標簽頁跳轉

5.8、表格標簽

  • 表格標簽的作用

    • 用來顯示多條數據
    • 用於一些頁面的佈局，後期會使用div佈局

  • 表格佈局其他標簽與屬性

    • 標簽名 作用
      table 表格容器，包含其他元素
      tr 表示一行， table row
      th 列標題，加粗，居中，table head
      td 普通單元格
      caption 表格的標題
      thead 在邏輯上將表格層分為三個部分：表格頭部
      tbody 在邏輯上將表格層分為三個部分：表格的主題（PS：如果沒有寫tbody，瀏覽器運行時會自動加上tbody）
      tfoot 在邏輯上將表格層分為三個部分：表格尾部
    • 屬性名 作用
      width 表格寬度
      border 外邊框的粗細
      align 對齊方式：用在table標簽上是表示整個表格在父容器標簽中居中；用在tr標簽上表示表格這一行內容居中；用在td標簽上表示這個單元格內容居中
      rowspan 跨幾行（將某幾行融合為一行）
      colspan 跨幾列（將某幾列融合為一列）
      cellspacing 單元格之間的間距
      cellpadding 單元格邊框與內容之間的間距

5.9、表單標簽

  • 表單的作用

    • 接收用戶輸入數據，並提交數據給伺服器

  • form表單格式

    • <form method="提交數據的方式" action="數據提交的目的地">
  手機數據標簽
</form>

  • 常用屬性

    • form常用屬性 作用
      action 提交給伺服器的地址
      method 提交的方式

  • 提交方法

    • 提交方法 特點
      GET 預設值，參數在地址欄顯示
      POST 參數不會顯示，更加安全

  • 註意事項

    • action
      • 規定當提交表單的時候向何處發送表單數據， URL
    • method：規定用於發送表單數據的方式
      • GET：瀏覽器會將數據直接附在表單的action URL 之後。大小有限制
      • POST：瀏覽器會將數據放到http請求消息體中，大小沒有限制。
    • 表單數據要想提交必須滿足兩個要求
      • 1.必須使用form標簽將表單項標簽包起來
      • 2.表單項標簽必須要有name屬性

6、用戶註冊案例

  • 用戶註冊案例顯示效果
  • 實現細節

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Javascript基礎Day3
    Javascript基礎Day3 1、迴圈：重覆執行代碼 特征：有規律性的重覆執行相似代碼 為什麼要使用迴圈？ 主要是為了減少頁面代碼 for迴圈： 語法： for(表達式1;表達式2;表達式3){ 代碼 } 表達式1：初始值，定義在for迴圈中需要用的變數 表達式2：判斷條件，判斷初始值是否滿足該 ...
  • Javascript基礎Day2
    Javascript基礎Day2 1、***自增自減運算符： ++、-- ++或--在變數之前時，先給當前變數做加1或減1的操作，然後在把計算結果做其他操作； ++或--在變數之後時，先拿當前變數去做其他操作，然後在給該變數做加1或減1的操作; 2、進位：也稱為進位計數制，常見的進位有二進位，八進位 ...
  • Vue3系列2--項目目錄介紹及運行項目
    1 Vite項目目錄 用Vscode打開創建的項目，看到下麵的目錄結構： 通過運行 npm install 初始化項目後生成兩個初始化文件：node_modules和 package-lock.json 2 SFC 語法規範 *.vue 件都由三種類型的頂層語法塊所組成：<template>、<sc ...
  • Javascript基礎Day1
    Javascript基礎Day1 1、js的書寫位置： 行內式（不推薦）： 情況1： <div onclick="alert(123)">hello</div> <p onclick="alert(123)">hello</p> 情況2： <a href="javascript:alert(4567 ...
  • Vue3系列1--配置環境和創建項目
    1.安裝nodejs（建議最新版本） 下載地址：下載 | Node.js 中文網 在安裝的過程中建議不要裝在C盤，安裝完成配置環境變數，並且建議講緩存路徑更改。 安裝完成後通過查看nodejs版本和npm版本，在終端輸入 npm --version 和node --version，如下圖所示： 2. ...
  • BOW/DOM（上）
    BOM 原生對象：成為js中的內置對象，就是由 js 中的構造函數創建的對象就被稱為原生對象：Object、Number、Array、Date、String。。。。 宿主對象：web運行環境，也就是windows操作系統和瀏覽器這些被稱為宿主，有這些宿主提供的對象，就叫宿主對象。 *BOM：瀏覽器對 ...
  • 03-JavaScript基礎
    JavaScript基礎 1、JavaScript概述 W3C標準：網頁主要由三部分組成 HTML：用來製作網頁基礎內容和基本結構 CSS：用來網頁樣式美化效果 JavaScript：用來製作數據驗證，和用戶交互 JavaScript概念 JavaScript是一門跨平臺、面向對象的腳本語言，運行在 ...
  • 02-CSS基礎
    CSS 基礎 1、CSS介紹 CSS概念 Cascading Style Sheet層疊樣式表，通過不同的樣式可以讓網頁更漂亮，樣式也可疊加得到最終的效果。CSS用於渲染html元素進行樣式控制的語言 CSS作用 網頁美化 HTML與CSS的區別 HTML：網頁結構的創建 CSS：網頁美化 2、CS ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類