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 1、迴圈:重覆執行代碼 特征:有規律性的重覆執行相似代碼 為什麼要使用迴圈? 主要是為了減少頁面代碼 for迴圈: 語法: for(表達式1;表達式2;表達式3){ 代碼 } 表達式1:初始值,定義在for迴圈中需要用的變數 表達式2:判斷條件,判斷初始值是否滿足該 ...
  • Javascript基礎Day2 1、***自增自減運算符: ++、-- ++或--在變數之前時,先給當前變數做加1或減1的操作,然後在把計算結果做其他操作; ++或--在變數之後時,先拿當前變數去做其他操作,然後在給該變數做加1或減1的操作; 2、進位:也稱為進位計數制,常見的進位有二進位,八進位 ...
  • 1 Vite項目目錄 用Vscode打開創建的項目,看到下麵的目錄結構: 通過運行 npm install 初始化項目後生成兩個初始化文件:node_modules和 package-lock.json 2 SFC 語法規範 *.vue 件都由三種類型的頂層語法塊所組成:<template>、<sc ...
  • Javascript基礎Day1 1、js的書寫位置: 行內式(不推薦): 情況1: <div onclick="alert(123)">hello</div> <p onclick="alert(123)">hello</p> 情況2: <a href="javascript:alert(4567 ...
  • 1.安裝nodejs(建議最新版本) 下載地址:下載 | Node.js 中文網 在安裝的過程中建議不要裝在C盤,安裝完成配置環境變數,並且建議講緩存路徑更改。 安裝完成後通過查看nodejs版本和npm版本,在終端輸入 npm --version 和node --version,如下圖所示: 2. ...
  • BOM 原生對象:成為js中的內置對象,就是由 js 中的構造函數創建的對象就被稱為原生對象:Object、Number、Array、Date、String。。。。 宿主對象:web運行環境,也就是windows操作系統和瀏覽器這些被稱為宿主,有這些宿主提供的對象,就叫宿主對象。 *BOM:瀏覽器對 ...
  • JavaScript基礎 1、JavaScript概述 W3C標準:網頁主要由三部分組成 HTML:用來製作網頁基礎內容和基本結構 CSS:用來網頁樣式美化效果 JavaScript:用來製作數據驗證,和用戶交互 JavaScript概念 JavaScript是一門跨平臺、面向對象的腳本語言,運行在 ...
  • CSS 基礎 1、CSS介紹 CSS概念 Cascading Style Sheet層疊樣式表,通過不同的樣式可以讓網頁更漂亮,樣式也可疊加得到最終的效果。CSS用於渲染html元素進行樣式控制的語言 CSS作用 網頁美化 HTML與CSS的區別 HTML:網頁結構的創建 CSS:網頁美化 2、CS ...
一周排行
    -Advertisement-
    Play Games
  • 一、引言:什麼是 JSON JSON (Java Script Object Notation) 是一種很常用的數據格式,它常常用在 web 應用程式中。它可以表示結構化的數據。 下麵是常見的 JSON 文件結構 { "name": "Kamishiro Rize", "age": "22", "o ...
  • 前言 大家好,我是蝸牛,在上一篇中,我們介紹了不同版本的HTTP區別和發展背景,這篇文章我們來聊聊HTTP的缺點,HTTP缺點大致總結有以下三點: 通信使用明文(不加密),內容可能會被竊聽。 不驗證通信方的身份,因此有可能遭遇偽裝(客戶端和服務端都有可能) 無法證明報文的完整性,有可能會被篡改。 其 ...
  • resultMap處理欄位和屬性的映射關係 如果欄位名與實體類中的屬性名不一致,該如何處理映射關係? 第一種方法:為查詢的欄位設置別名,和屬性名保持一致 下麵是實體類中的屬性名: private Integer empId; private String empName; private Integ ...
  • 大家在看到這篇文章前,為了有一個舒適的c++IDE,一定感受到了Dev-c++的廉價感,Clion功能的多餘,VS的臃腫。他們也有自己的優點,但糟點太多,令人十分難受。而VS Code,可以取長補短。下麵的配置內容,可以讓你在刷題時,享受絲滑的動畫,體會集成終端的方便,讓你覺得Coding不再枯燥。 ...
  • 給定一個不含重覆數字的數組 nums ,返回其 所有可能的全排列 。你可以 按任意順序 返回答案。 示例 1: 輸入:nums = [1,2,3] 輸出:[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 示例 2: 輸入:nums = [0,1] 輸 ...
  • 設計模式的目的 編寫軟體過程中,程式員面臨著來自 耦合性,內聚性以及可維護性,可擴展性,重用性,靈活性 等多方面的 挑戰,設計模式是為了讓程式(軟體),具有更好 代碼重用性 (即:相同功能的代碼,不用多次編寫) 可讀性 (即:編程規範性, 便於其他程式員的閱讀和理解) 可擴展性 (即:當需要增加新的 ...
  • 本文講解了決策樹的創鍵的過程,包括熵,信息增益的計算,還有決策樹的創建,以及使用matplotlib讓決策樹可視化的詳細過程 ...
  • ♠ use C++11 倍數 若 $a,b,k \in \mathbb N$,且 $a \times k=b$,那麼 $b$ 是 $a$ 的倍數,稱 $a$ 整除 $b$,記作 $a \mid b$。 $[1,n]\in \mathbb N$ 中 $x \in \mathbb N$ 的倍數有 $\l ...
  • LinkList可以定義指向List的指針 1.當函數參數為LinkList L時,意味著只改變或操作List的內容,而不需要改變L這個指針 如 Status GetElem(LinkList L,int i,ElemType) 2.當參數為LinkList &L時,意味著需要改變或操作L這個指針本 ...
  • Spring 5框架 一、Spring概念 1、Spring是輕量級的JavaEE框架 2、Spring可以解決企業應用開發的複雜性 3、Spring有兩個核心部分:IOC和AOP ​ 1)IOC:控制反轉,把創建對象過程交給Spring進行管理 ​ 2)AOP:面向切麵,不修改源代碼進行功能增強 ...