web 前端 基礎HTML知識點

来源:https://www.cnblogs.com/am0304/archive/2022/07/17/16486799.html
-Advertisement-
Play Games

web系統架構體系 B/S（Browser/Server）：瀏覽器實現 優點： 規範、使用方便、本身實現成本低 容易升級、便於維護 缺點： 沒有網路，無法使用 保存數據量有限，和伺服器交互頻率高、耗費流量 安全性差一點 C/S（Client/Server）：客戶端實現 優點： 可以在無網路環境下使用 ...


web系統架構體系

  • B/S（Browser/Server）：瀏覽器實現
    • 優點：
      • 規範、使用方便、本身實現成本低
      • 容易升級、便於維護
    • 缺點：
      • 沒有網路，無法使用
      • 保存數據量有限，和伺服器交互頻率高、耗費流量
      • 安全性差一點
  • C/S（Client/Server）：客戶端實現
    • 優點：
      • 可以在無網路環境下使用
      • 和伺服器交互相對頻率低、省流量
      • 安全性高一點
    • 缺點：
      • 需要安裝客戶端
      • 升級麻煩，維護成本高
      • 開發成本高

什麼是HTML

html是超文本標記語言（Hyper Text Markup Language），是一種使用標記標簽來描述網頁的語言。

超文本

用超鏈接的方法將各種不同空間的文字信息組織在一起的網狀文本。可以用來鏈接圖片，音頻，視頻，動態圖片等

W3C標準

結構化標準語言（XHTML、XML）

表現標準語言（CSS）

行為標準（DOM、ECMAScript）

HTML標簽

標簽一般成對存在，如<html></html>

結構體標簽

<!DOCTYPE html>

說明html5中文檔的類型是html文檔

html標簽

<!--html的根標簽-->
<html></html>

title標簽

<!--設置網頁標題-->
<title>我的網頁</title>

meta標簽

<!-- meta標簽，charset 設置網頁字元集編碼-->
<meta charset="utf-8">
<meta name="keywords" content="關鍵字">
<meta name="description" content="描述">

body標簽

<!--體標簽，網頁呈現的內容-->
<body>內容</body>

文本標簽

註釋

<!-- 註釋的內容 -->

標題

<!-- 數字範圍：1 ~ 6，數字越大，字體越小-->
<h數字>標題<h數字>

字體

<!-- font標簽 -->
<!-- 屬性color：文字顏色（英文單詞、#+6位16進位的顏色值、rgb(,,)）-->
<!-- 大小seize：選值1-7，預設是3 -->
<!-- 字體face：選擇字體名稱 -->
<font color=red>HelloWorld</font>

換行

<!-- 單標簽，換行 -->
<br/>

水平分割線

<!-- hr標簽，分割線，單標簽
    屬性
    color：顏色
    width：可以使用像素（px）或者百分比
    align：水平對齊方式，預設居中
-->
<hr color="blue" width="80%" aligin=left>

加粗

<b></b>

傾斜

<i></i>

下劃線

段落

<p></p>

居中

<center></center>

下標

<sub></sub>

上標

<sup></sup>

圖片標簽

<img src="地址" 
width="寬度" 
height="高度" 
align="圖文混排時，對齊方式，居中：middle" 
alt="圖片說明，當圖片載入失敗顯示"
title="滑鼠懸停說明"/>

相對路徑："../"代表上一層目錄，同一層目錄可以直接訪問

絕對路徑：1、網路圖片，直接寫圖片地址；2、本機磁碟地址"盤符:/圖片名"

超鏈接

<a href="地址或#+錨鏈接名" target="打開新視窗的位置">鏈接名或圖片</a>

target = "_self"：當前視窗打開

target = "_blank"：新視窗打開

target = "_top"：在頂層頁面所在位置打開

target = "_parent"：在父頁面的視窗位置打開

target = "_iframeName"：在iframe位置打開

使用錨鏈接需要給目標標簽加屬性id，唯一的標記

發送郵件

<a herf="mailto:郵箱地址">連接名或圖片</a>

下載

<a herf="只可以是zip文件">連接名或圖片</a>

表格標簽

<!--table代表表格標簽，tr代表行，td代表列-->
<table>
    <tr>
        <td>編號</td>
        <td>名稱</td>
        <td>價格</td>
    </tr>
    <tr>
        <td>001</td>
        <td>蘋果</td>
        <td>12</td>
    </tr>
    <tr>
        <td>002</td>
        <td>香蕉</td>
        <td>18</td>
    </tr>
</table>

屬性

表格的屬性（table）

border = "邊框線條粗細"

cellspacing = "單元格間隙的值"

align = "表格水平對齊方式"

width = "表格的寬度"

height = "表格的高度"

bgcolor = "表格的背景色"

background = "背景圖片地址"

行的屬性（tr）

height = "行高"

align = "水平對齊方式"

valign = "垂直對齊方式"middle、top、bottom

bgcolor = "行的背景色"

background = "行背景圖片地址"

單元格的屬性（td）

width = "寬度"會影響整個列

align = "水平對齊方式"

valign = "垂直對齊方式"middle、top、bottom

bgcolor = "單元格的背景色"

合併單元格

1、找到要合併單元格的開始位置

2、清除合併的是行還是列

3、合併幾行或幾列

4、除開始位置的單元格外，被合併的單元格進行刪除

<!-- 合併開始的單元格 -->
<td colspan\rowspan="合併的列（橫向）、行數">除開始的單元格、其餘刪除</td>

表單標簽

<form method="get\post" action="表單提交的目標地址">
    賬號:<input name="lname"/><br />
    密碼:<input type="password" name="psw"/><br />
    <button type="submit">登錄</button>
</form>

form標簽的屬性

method = "get\post提交方式"

  • 預設的提交方式是get,地址欄可以看到的，post方式地址欄不可見
  • get方式相對post不安全
  • get方式提交的數據量有限制的，而post理論上沒有限制

action = "表單提交的目標地址"

文本框標簽（<input> </input>）屬性

name = "提交參數名稱"

type = "input標簽樣式"

  • type="text" 普通文本框
    • maxlength = "最大字元個數"
  • type="password" 密碼框
  • type="radio" 單選框
    • value = "值"
    • checked = "checked"預設選擇
  • type="date" 日期框
  • type="email" 郵箱文本框(自帶針對郵箱的校驗)
  • type="file" 文件文本框(可以選擇各種文件，比如說圖片，文件)
  • type="checkbox" 多選框
    • value = "值"
    • checked = "checked"預設選擇
  • type="hidden" 隱藏文本框
  • type="color" 顏色選擇框
  • type="number" 數字選擇框
  • type="button\submit\reset" 按鈕
  • type="image" 圖形化按鈕，功能相當於submit

placeholde = "提示文字"

按鈕標簽（<button></button>）屬性

type = "按鈕功能"

  • type="submit" 按鈕（自帶提交功能）
  • type="button" 按鈕（不帶提交功能，就是一個最普通的按鈕）
  • type="reset"按鈕（重置功能）

下拉框標簽

<select>
    <option>下拉框列表標簽</option>
    <option selected="selected">預設選中</option>
</select>

文本域標簽

<textarea></textarea>

列表標簽

有序列表

<ol type="1">
  <li></li>
  <li></li>
  <li></li>
</ol>

type：序號類型

  • 1：數字（預設）
  • A：大寫字母
  • I：大寫羅馬數字
  • a：小寫字母
  • i：小寫羅馬數字

無序列表

有符號無序列表

<ul type="circle">
  <li></li>
  <li></li>
  <li></li>
</ul>

type：符號類型

  • circle：空心圓
  • discs：實心圓（預設）
  • quare：實心方形

無符號無序列表

<dl>
  <dt></dt> <!-- 列表標題 -->
  <dd></dd>
  <dd></dd>
  <dd></dd>
</dl>

多媒體標簽：

視頻

<video width="320" height="240" controls> <!--controls為視頻播放控制鍵-->
    <source src="視頻地址" type="video/文件格式">
    您的瀏覽器不支持 HTML5 video 標簽。
</video>

音頻

<audio controls> 
    <source src="音頻地址" type="audio/文件格式">
    Your browser does not support this audio format.
</audio>

iframe框架標簽

<iframe src="引用頁面地址"></iframe>

屬性

width：寬度

height：高度

frameborder：邊框粗細

scrolling：滾動條 yes、no、auto

新頁面


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

-Advertisement-
Play Games
更多相關文章
  • Parallels Desktop 17安裝Windows11教程(pd17虛擬機安裝win11教程)
    許多有Mac的朋友問，Parallels Desktop 17能不能安裝Windows11呢？可以告訴你，非常的簡單。 如圖，安裝Windows 11出現問題，如圖： 這裡先事先說明一下：安裝win11必須是預覽版的，正式版的win11目前還不可以哦。 具體操作如下： 1、詳情虛擬機（M1和Inte ...
  • 告別輸入密碼，SSH記住密碼和設置別名
    還在尋找一款好用的終端模擬器？ZOC for Mac是一款適用於MAC平臺，眾所周知的telnet/SSH/SSH2客戶端和終端模擬器，ZOC Mac版的功能強大，如標簽會,鍵入命令歷史,回溯,多視窗的支持等等，和落到實處的模擬使它成為人們的首選工具！ 詳情：ZOC for Mac(最好用的終端模擬 ...
  • 索引的樹結構
    查找結構的進化 二分查找 二叉樹 二叉平衡樹 B-TREE ：二叉平衡樹的基礎上，使載入一次節點，可以載入更多路徑數據，同時把查詢範圍縮減到更小 缺點：業務數據的大小可能遠遠超過了索引數據的大小，每次為了查找對比計算，需要把數據載入到記憶體以及 CPU 高速緩存中時，都要把索引數據和無關的業務數據全部 ...
  • Mysql的知識梳理
    數據準備: --建表 create table customer_jia(CID int(4), Cname varchar(20), Csex varchar(2), Cage int(3), Cjob varchar(20), CCNO int(2) ); create table compan ...
  • 【前端面試】Vue面試題總結(持續更新中)
    Vue面試題總結(持續更新中) 題目參考鏈接 https://blog.csdn.net/weixin_45257157/article/details/106215158 由於已經有很多前輩深造VUE的某一塊知識，所以我也是大樹下好乘涼，進行總結與積累。 就有這篇博客，希望對各位面試求職的同學有所 ...
  • 初學者對html的認知
    首先是關於本人對一個新事物的理解路線 對html的認知： what:首先我得知道它是什麼?html是一門超文本標記語言，它不是一門編程語言 why:它為什麼會存在?它存在的意義是什麼？隨著互聯網的發展，人們通常通過手機、電腦等網路渠道獲取信息和生產生活，故它的存在是為了製作網頁 how:這門語言該怎 ...
  • java XML標記語言
    XML 可擴展標記語言（Extensive Markup Language），標簽中的元素名是可以自己隨意寫，可拓展是相對於html來說 標記語言：由一對尖括弧括起來<內容>，就稱為標記，標簽；代碼都是由標簽組成，就稱為標記語言 作用 用來當做配置文件 xml的配置文件和properties的配置文 ...
  • java Script
    JavaScript JavaScript（簡稱“JS”）是一種具有函數優先的輕量級，解釋型或即時編譯型的高級編程語言，弱類型，腳本語言 三大部分 核心（ECMAScript）：語法、類型、語句、關鍵字等 文檔對象模型（DOM）：專門用於完成網頁之間的交互 瀏覽器對象模型（BOM）：主要用於對瀏覽器 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類