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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類