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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類