HTML（上）

来源:https://www.cnblogs.com/yanjiayi098-001/archive/2019/10/10/11649395.html
-Advertisement-
Play Games

[TOC] HTML（上） 瀏覽器 瀏覽器也是一個客戶端 瀏覽器不通過服務端也可以渲染文本 HTML 什麼是HTML HTML全稱HyperText Markup Language，超文本標記語言，是一種描述性的標記語言。 超文本：音頻、視頻、圖片 標記：稱為標記，一個HTML頁面都是由各種標記組成 ...


目錄

HTML（上）

瀏覽器

  • 瀏覽器也是一個客戶端
#這是一個伺服器，我們通過瀏覽器就可以訪問的到伺服器發送的"hello"
import socket
sk = socket.socket()
sk.bind(('127.0.0.1',8080))
sk.listen(5)
while True:
    conn,addr = sk.accept()
    data = conn.recv(1024)
    conn.send(b"HTTP/1.1 200 ok\r\n\r\n")  #必須要加上這一句，不然瀏覽器不認識
    conn.send(b"hello")
    conn.close()
  • 瀏覽器不通過服務端也可以渲染文本

HTML

什麼是HTML

HTML全稱HyperText Markup Language，超文本標記語言，是一種描述性的標記語言。

  • 超文本：音頻、視頻、圖片
  • 標記：<英文單詞或者字母>稱為標記，一個HTML頁面都是由各種標記組成。

HTML的作用

負責描述文檔語義的語言

編寫HTML的規範

1）所有標記元素都要正確的嵌套，不能交叉嵌套。eg：

<h1><a></a></h1>

2）所有標記都必須小寫

3）所有標記都必須關閉

  • 雙標簽：<h></h1>
  • 單標簽：<img src=“URL” />

4）所有屬性值必須加引號。eg：<h1 id="head"></h1>

5）所有屬性必須有值：<a href="02.html" target="_blank">首頁</a>

HTML結構

用pycharm新建一個HTML文件，文件會自動生成如下代碼的一個HTML模板

<!DOCTYPE html>
<!--文檔聲明頭，告訴瀏覽器它應該用什麼版本的html去解析以下代碼-->

<html lang="en">
<!--文檔的開始標記和結束標記，lang="en"表示用英語或者其他國家的語言，在它們之間是文檔的頭部（head）和主體（body）-->
<head>
<!--定義了HTML文檔的開頭部分，不會再瀏覽器的文檔視窗顯示-->
    <meta charset="UTF-8">
    <!--HTML的編碼格式-->
    <title>Title</title>
    <!--網頁標題，在瀏覽器標題欄顯示-->
</head>
<body>
<!--文本主體，他們之間的文本是可見的網頁主題內容-->

</body>
</html>

HTML常用標簽

head內常用標簽

基本標簽
標簽 意義
<title></title> 定義網頁標題
<style></style> 定義內部樣式表
<script></script> 定義JS代碼或引入外部JS文件
<link/> 引入外部樣式表文件
<meta/> 定義網頁原信息
meta標簽
<meta http-equiv="refresh" content="2;URL = https://www.cnblogs.com/yanjiayi098-001/">
<!--2秒過後跳到 https://www.cnblogs.com/yanjiayi098-001 網頁-->

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<!--對網頁並沒有什麼影響，就是給網頁關鍵字,便於搜索引擎機器人查找信息和分類信息用的-->

<meta name="description" content="老男孩教育Python學院">
<!--這個也沒有什麼影響，就是給網頁一個描述,便於搜索引擎機器人查找信息和分類信息用的-->

<meta http-equiv="content-Type" charset=UTF8">
<!--指定文檔的編碼類型-->
                                             
<meta http-equiv="x-ua-compatible" content="IE = edge">
<!--告訴IE以最高級模式渲染文檔-->

body內常用標簽

基本標簽
<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s>

<p>段落標簽，寫在這個標簽內的東西就是一個段落</p>

<h1>1號標題</h1>
<h2>2號標題</h2>
<h3>3號標題</h3>
<h4>4號標題</h4>
<h5>5號標題</h5>
<h6>6號標題</h6>

<br>
<!--這是一個換行標簽-->

<hr>
<!--這是一個水平線標簽-->
特殊字元
&nbsp;
<!--空格-->

&gt;
<!--大於號(>)-->

&lt;
<!--小於號(<)-->

&amp;
<!--&符號-->

&yen;
<!--人民幣(￥)符號-->

&copy;
<!--版權符號-->

&reg;
<!--註冊符號-->
div標簽和span標簽
div標簽:
<div>
    <!--塊級標簽，無意義，通過CSS樣式為其賦予不同的表現-->
</div>


span標簽:
<span>
    <!--內聯標簽，無意義，通過CSS樣式為其賦予不同的表現-->
</span>

**塊級標簽與內聯標簽的區別**
塊級標簽：另起一行開始渲染元素
內聯標簽：不需要另起一行
如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響，他們是專門為定義CSS樣式而生的

註意：

​ 塊級標簽可以嵌套內聯標簽或者某些塊級標簽

​ 內聯標簽不能嵌套塊級標簽

​ ==p標簽不能嵌套塊級標簽，也不能嵌套p標簽==

img標簽
<img src="圖片的路徑" alt="圖片未載入成功時的提示" title="滑鼠懸浮時提示信息">
<img src="https://goss.veer.com/creative/vcg/veer/800water/veer-132444248.jpg" alt="故宮" title="美麗的故宮" >
a標簽

a標簽又叫做超鏈接標簽

所謂的超鏈接是指從一個網頁指向一個目標的連接關係，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程式

我們就先拿另一個網頁舉例

href屬性指定目標網頁地址。該地址可以有幾種類型：

絕對URL - 指向另一個站點（比如 href="http://www.jd.com）
相對URL - 指當前站點中確切的路徑（href="index.htm"）
錨URL - 指向頁面中的錨（href="#top"）
<a href="https://www.cnblogs.com/yanjiayi098-001/" target="_blank">點我會跳轉哦！</a>
<!--target="_blank"表示重新打開一個網頁進行跳轉-->


<a href="https://www.cnblogs.com/yanjiayi098-001/" target="_self">點我會跳轉哦！</a>
<!--target="_self"表示就在當前網頁進行跳轉-->


<a href="https://www.cnblogs.com/yanjiayi098-001/">點我會跳轉哦！</a>
<!--預設target="_self"-->


<a href="#b1">點我回到加粗</a>
<!--b1是id屬性，#b1表示回到id屬性為b1的這個位置，這個位置就是<b id = "b1">加粗</b> -->


<a href="body內常用標簽.html">點我轉到這個網頁哦！</a>
<!--他會跳到 body內常用標簽.html 網頁-->
列表
無序列表<ul></ul>
<ul type="disc">
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ul>

type屬性：

  • type="disc"(實心圓點，預設值)
  • type="circle"(空心圓圈)
  • type="square"(實心方塊)
  • type="none"(無樣式)
有序列表<ol></ol>
<ol type="1" start="3">
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ol>

type屬性：

  • 1 數字列表，預設值
  • A 大寫字母
  • a 小寫字母
  • Ⅰ大寫羅馬
  • ⅰ小寫羅馬

start屬性：

start="3"只能寫數字，表示從第3個開始

標題列表<dl></dl>
<dl>
    <dt>標題1</dt>
        <dd>內容</dd>
    <dt>標題2</dt>
        <dd>內容1</dd>
        <dd>內容2</dd>
</dl>
表格
<table>
    <thead>
    <tr>
        <th>序號</th>
        <th>姓名</th>
        <th>愛好</th>
    </tr>
    </thead>
    <tr>
        <td>1</td>
        <td>yjy</td>
        <td>跳舞</td>
    </tr>
     <tr>
        <td>2</td>
        <td>wwb</td>
        <td>唱歌</td>
    </tr>
</table>


<!--
看到 <table> 就說明接下來是一個表格
<thead>是表格的表頭
<tr>表示一行，而在這一行中又有<th>
<th>表示表頭的內容，表示整個一列的屬性，eg：姓名
同理<tr>中的<td>就表示表格內容，按照<th>的要求寫就行了，eg：姓名就寫人名
-->

屬性：

  • border: 表格邊框 eg：border="6"
  • cellpadding: 內邊距 eg：cellpadding="8"
  • cellspacing: 外邊距 eg：cellspacing="2"
  • width: 像素 百分比 eg：width="100%"

以上這些屬性要在<table>中設置

  • rowspan: 單元格豎跨多少行（上下合併單元格） eg：rowspan="3"
  • colspan: 單元格橫跨多少列（左右合併單元格） eg：colspan="2"

以上這些屬性要在<td>中設置

HTML標簽速記

塊級標簽

標題 h1 h2 h3 h4 h5 h6
列表 ul ol li dl dt dd
排版標簽 p div hr center pre
表格 table
表單 form

內聯標簽

字體 b i sup sub u
排版 span br
超鏈接 a
圖片 img

補充

  • 文本級標簽：p、span、a、b、i、u、em。
  • 容器級標簽：div、h系列、li、dt、dd

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

-Advertisement-
Play Games
更多相關文章
  • iOS開發進階(唐巧)讀書筆記(一)
    如何提高iOS開發技能 1、閱讀博客： "https://github.com/tangqiaoboy/iOSBlogCN" 40多位iOS開發博主的博客地址 2、讀書：每年閱讀一本高質量的iOS開發書籍 3、看WWDC視頻 4、看蘋果的官方文檔 5、看開源項目的代碼 6、多寫代碼，多思考 7、多和 ...
  • Jetpack系列：Paging組件幫你解決分頁載入實現的痛苦
    相信很多小伙伴們在項目實戰中，經常會用到界面的 、`載入更多`等功能。需要針對具體功能做針對性開發和調試，耗時耗力。 Paging組件的使用將這部分的工作簡化，從而讓開發者更專註於業務的具體實現。下麵我們一起來學習下Paging組件的使用方法。 首先來看下使用Paging組件實現的分頁載入和刷新效果 ...
  • Android JSON解析插件
    JSON是一種輕量級的數據格式，用於數據的交互。 Android交互數據主要兩種方式：JSON和 XML。XML格式比JSON格式數量略大，所以大多都使用Json數據格式。 在Android開發的過程中，數據訪問 JSON解析就顯得尤為重要。 示例JSON 添加插件GsonFormat 添加依賴 g ...
  • 前端函數式編程中的各種概念
    函數式編程？利用函數把運算過程封裝起來，通過組合各種函數來計算結果。 ...
  • 淺談個人對客戶端JavaScript同步、非同步、執行順序等概念的理解
    一.同步和非同步的概念。 同步：即按代碼的順序執行任務。 在下列代碼中，按照同步概念，則是先列印1後列印2。 非同步：即執行一個任務的同時執行另一個任務。如果按照此概念執行上面代碼，則是同時列印出1和2。 二.客戶端JavaScript中代碼的執行順序 首先，不管是核心JavaScript還是客戶端Ja ...
  • console的各種輸出格式
    ```html console.log('%c',CSS樣式)輸出css樣式 console.log('%s',字元串) 字元串格式化 %d%i 整數格式化； console.log('%o',節點) 可擴展的dom節點格式化,可擴展的javascript對象格式化 ``` ...
  • Turn.js 實現翻書效果(自適應單雙頁)
    來源：https://www.cnblogs.com/hellman/p/10683492.html在上面的來源基礎上增加頁碼顯示，自適應單雙頁PC端效果： 移動端展示： 源碼下載地址：http://www.luanxin.top/index.php/archives/30/ ...
  • 淺嘗https
    HTTPS http超文本傳輸協議，所以的東西都是明文傳輸，容易被攔截，被攻擊，我們希望能對通話內容進行加密，那麼因此而生，出現了https https：在http的基礎上新增加了SSL層 先放圖 // http 超文本傳輸協議// https 加密的超文本傳輸協議 // 對稱加密瀏覽器生成一個秘鑰 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類