前端之 HTML

HTML

Web服務本質

import socketsk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)while True:conn, addr = sk.accept()data = conn.recv(8096)conn.send(b"HTTP/1.1 200 OK\r\n\r\n")conn.send(b"<h1>Hello world!</h1>")conn.close()

瀏覽器發請求 -->?HTTP協議 --> 服務端接收請求 --> 服務端返回響應 --> 服務端把HTML文件內容發給瀏覽器 --> 瀏覽器渲染頁面

HTML是什么？

  • 超文本標記語言（Hypertext Markup Language, HTML）是一種用于創建網頁的標記語言。
  • 本質上是瀏覽器可識別的規則，我們按照規則寫網頁，瀏覽器根據規則渲染我們的網頁。對于不同的瀏覽器，對同一個標簽可能會有不同的解釋。（兼容性問題）
  • 網頁文件的擴展名：.html或.htm

HTML不是什么？

  • HTML是一種標記語言（markup language），它不是一種編程語言。
  • HTML使用標簽來描述網頁。

HTML文檔結構

最基本的HTML文檔：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>css樣式優先級</title>
</head>
<body></body>
</html>
  1. <!DOCTYPE html>聲明為HTML5文檔。
  2. <html>、</html>是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。
  3. <head>、</head>定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據。
  4. <title>、</title>定義了網頁標題，在瀏覽器標題欄顯示。
  5. <body>、</body>之間的文本是可見的網頁主體內容。

注意：對于中文網頁需要使用?<meta charset="utf-8">?聲明編碼，否則會出現亂碼。有些瀏覽器會設置 GBK 為默認編碼，則你需要設置為?<meta charset="gbk">。

HTML標簽格式

  • HTML標簽是由尖括號包圍的關鍵字，如<html>,?<div>等
  • HTML標簽通常是成對出現的，比如：<div>和</div>，第一個標簽是開始，第二個標簽是結束。結束標簽會有斜線。
  • 也有一部分標簽是單獨呈現的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
  • 標簽里面可以有若干屬性，也可以不帶屬性。

標簽的語法：

  • <標簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標簽名>
  • <標簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />

幾個很重要的屬性：

  • id：定義標簽的唯一ID，HTML文檔樹中唯一
  • class：為html元素定義一個或多個類名（classname）(CSS樣式類名)
  • style：規定元素的行內樣式（CSS樣式）

HTML注釋

<!--注釋內容-->

<!DOCTYPE> 標簽

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前。?聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。

HTML常用標簽

head內常用標簽

head內的內容通常不會顯示在網頁，但是對瀏覽器解釋網頁內容有一定幫助

標簽意義
<title></title>定義網頁標題
<style></style>定義內部樣式表
<script></script>定義JS代碼或引入外部JS文件
<link/>引入外部樣式表文件
<meta/>定義網頁原信息

Meta標簽

Meta標簽介紹：

  • <meta>元素可提供有關頁面的元信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
  • <meta>標簽位于文檔的頭部，不包含任何內容。
  • <meta>提供的信息是用戶不可見的。

meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。

1.http-equiv屬性：相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。

<!--2秒后跳轉到對應的網址，注意引號-->
<meta http-equiv="refresh" content="2;URL=https://https://blog.csdn.net/fenglepeng/article/list">
<!--指定文檔的編碼類型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告訴IE以最高級模式渲染文檔-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name屬性: 主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。

<!--關鍵字-->
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> 
<!--網頁描述-->
<meta name="description" content="lepeng blog">

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標簽用來定義一個塊級元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現。
  • span標簽用來定義內聯(行內)元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現。

塊級元素與行內元素的區別：

所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門為定義CSS樣式而生的。

注意：

  • 關于標簽嵌套：通常塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
  • p標簽不能包含塊級標簽，p標簽也不能包含p標簽。

img標簽

<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">

a標簽

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

<a href="https://blog.csdn.net/fenglepeng/article/list" target="_blank" >點我</a>

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

  • 絕對URL - 指向另一個站點（比如 href="http://www.jd.com）
  • 相對URL - 指當前站點中確切的路徑（href="index.htm"）
  • 錨URL - 指向頁面中的錨（href="#top"）

target：

  • _blank表示在新標簽頁中打開目標網頁
  • _self表示在當前標簽頁中打開目標網頁

列表

1.無序列表

<ul type="disc"><li>第一項</li><li>第二項</li>
</ul>

type屬性：

  • disc（實心圓點，默認值）
  • circle（空心圓圈）
  • square（實心方塊）
  • none（無樣式）

2.有序列表

<ol type="1" start="2"><li>第一項</li><li>第二項</li>
</ol>

type屬性：

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

3.標題列表

<dl><dt>標題1</dt><dd>內容1</dd><dt>標題2</dt><dd>內容1</dd><dd>內容2</dd>
</dl>

表格

表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里可以包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。

表格最重要的目的是顯示表格類數據。表格類數據是指最適合組織為表格格式（即按行和列組織）的數據。

表格的基本結構：

<table><thead>  <!--表頭 --><tr><th>序號</th><th>姓名</th><th>愛好</th></tr></thead><tbody>  <!--表格 --><tr><td>1</td><td>Egon</td><td>杠娘</td></tr><tr><td>2</td><td>Yuan</td><td>日天</td></tr></tbody>
</table>

屬性:

  • border: 表格邊框.
  • cellpadding: 內邊距
  • cellspacing: 外邊距.
  • width: 像素 百分比.（最好通過css來設置長寬）
  • rowspan: 單元格豎跨多少行
  • colspan: 單元格橫跨多少列（即合并單元格）

?

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/454018.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/454018.shtml
英文地址，請注明出處：http://en.pswp.cn/news/454018.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

接入指南

接入指南

接入概述 接入微信公眾平臺開發&#xff0c;開發者需要按照如下步驟完成&#xff1a; 1、填寫服務器配置 2、驗證服務器地址的有效性 3、依據接口文檔實現業務邏輯 下面詳細介紹這3個步驟。 第一步&#xff1a;填寫服務器配置 登錄微信公眾平臺官網后&#xff0c;在公眾平臺官網…
閱讀更多...
艾賓浩斯記憶表格excel_Excel全年學習復習計劃表(艾賓浩斯遺忘曲線)

艾賓浩斯記憶表格excel_Excel全年學習復習計劃表(艾賓浩斯遺忘曲線)

最近準備考在職博士&#xff0c;刷刷學歷&#xff0c;不得不又拿起必考的英語來&#xff0c;發現由于這幾年敲代碼&#xff0c;日常生活詞匯忘了很多&#xff0c;只好買本考博詞匯背誦&#xff0c;不過三十而立的人背起來確實費勁了&#xff0c;所以開始尋找好的背誦方法。又想…
閱讀更多...
七個幫助你處理Web頁面層布局的jQuery插件

七個幫助你處理Web頁面層布局的jQuery插件

1.UI.Layout jQuery UI布局插件官方網站&#xff1a;http://layout.jquery-dev.com/index.cfm使用大小可折疊的嵌套面板和大量選項創建高級UI布局。布局可以創建任何你想要的UI外觀; 從簡單的標題或側邊欄到具有工具欄&#xff0c;菜單&#xff0c;幫助面板&#xff0c;狀態欄…
閱讀更多...
前端之 CSS

前端之 CSS

CSS介紹 CSS&#xff08;Cascading Style Sheet&#xff0c;層疊樣式表)定義如何顯示HTML元素。 當瀏覽器讀到一個樣式表&#xff0c;它就會按照這個樣式表來對文檔進行格式化&#xff08;渲染&#xff09;。 CSS語法 CSS實例 每個CSS樣式由兩個組成部分&#xff1a;選擇器…
閱讀更多...
在Window下編譯OpenH323

在Window下編譯OpenH323

前言&#xff1a; 本文只提供VC6.0的編譯說明&#xff0c;如果想知道VC.Net下的編譯過程請參看原文。 原文 &#xff1a; http://www.voxgratia.org/docs/pwlib_windows.html#msvc_headers 作者 &#xff1a;Craig Southeren 翻譯 &#xff1a; Richard 原文…
閱讀更多...
shell中的條件判斷和比較

shell中的條件判斷和比較

1 shell 的$! ,$?, $$,$ $n $1 the first parameter,$2 the second... $# The number of command-line parameters. $0 The name of current program. $? Last command or functions return value. $$ The programs PID. $! …
閱讀更多...
matlab立體坐標定位_無懼密集建筑，小天才立體定位技術帶來最強定位體驗

matlab立體坐標定位_無懼密集建筑，小天才立體定位技術帶來最強定位體驗

如今&#xff0c;在可穿戴設備市場中&#xff0c;智能手表占據相當大一部分。而作為核心功能之一的定位&#xff0c;在智能手表中發揮著不可替代的作用&#xff0c;尤其是對于兒童電話手表而言。并且&#xff0c;在技術飛速進步&#xff0c;產品迭代加快的當前&#xff0c;兒童…
閱讀更多...
vue學習問題總結（一）

vue學習問題總結（一）

使用comopontent組件報錯錯誤信息&#xff1a;vue.js:491 [Vue warn]: Unknown custom element: <todo-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.代碼&#xff1a;<p>使用…
閱讀更多...
前端之 JavaScript 基礎

前端之 JavaScript 基礎

JavaScript 概述 ECMAScript 和 JavaScript的關系 1996年11月&#xff0c;JavaScript 的創造者 Netscape(網景) 公司&#xff0c;決定將 JavaScript 提交給國際標準化組織 ECMA &#xff0c;希望這門語言能夠成為國際標準。次年&#xff0c;ECMA發布262號標準文件&#xff08…
閱讀更多...
TCPMP0.72RC1的編譯與移植以及自己另外做UI完整方法

TCPMP0.72RC1的編譯與移植以及自己另外做UI完整方法

我叫張挺&#xff0c;雖然開博&#xff0c;除了轉了一篇黃色文章以外&#xff0c;技術文章從來沒有寫&#xff0c;所以呢&#xff0c;感到很不好意思&#xff01;于是決定還寫一篇在網上也留點痕跡。我這里主要是介紹TCPMP的移植以及如何把這個鳥鳥整到自己的界面中來&#xff…
閱讀更多...
svga文件如何查看_電腦隱藏文件？如何查看隱藏文件 方法簡單易學

svga文件如何查看_電腦隱藏文件？如何查看隱藏文件 方法簡單易學

大家好&#xff0c;我是小白一鍵重裝軟件的客服。如何查看隱藏文件呢&#xff1f;有時候不小心把文件夾勾選隱藏后文件就消失了&#xff0c;到底是怎么回事呢&#xff1f;其實這個是電腦上面一些設置開啟了文件隱藏的功能哦&#xff0c;那么下面小白系統帶你了解下如何查看隱藏…
閱讀更多...
jquery 的animate 的transform

jquery 的animate 的transform

$(function(){ var t 1000; $("#id").animate( {borderSpacing:180}, //180 指旋轉度數 { step: function(now,fix){ $(this).css(-webkit-transform,rotate(nowdeg)); $(this).css(-ms-transform,rotate(nowdeg)); $(this).css(-moz-transform,rotate(nowdeg)); $(…
閱讀更多...
前端之 BOM 和 DOM

前端之 BOM 和 DOM

前言 到目前為止&#xff0c;我們已經學過了JavaScript的一些簡單的語法。但是這些簡單的語法&#xff0c;并沒有和瀏覽器有任何交互。也就是我們還不能制作一些我們經常看到的網頁的一些交互&#xff0c;我們需要繼續學習BOM和DOM相關知識。 JavaScript分為 ECMAScript&…
閱讀更多...
如何給FLV文件加字幕

如何給FLV文件加字幕

如何給FLV文件加字幕關鍵字&#xff1a;FFMPEG　AVS　字幕 本文只是收集工作中的一點經驗和積累&#xff0c;如果你能從本文中得到收獲&#xff0c;或者得到啟發。那將是我最開心的事情。 本文面向的讀者是對FFMPEG以及AVS有一定基礎的&#xff0c;對電腦有一定基礎的&#xff…
閱讀更多...
化工圖紙中LISP_必備干貨丨石油化工安裝工程質量與成本控制研究

化工圖紙中LISP_必備干貨丨石油化工安裝工程質量與成本控制研究

對于整個石油化工工程來說&#xff0c;石油化工的安裝工程在其中是最重要并且最核心的一個環節&#xff0c;其對石油化工工程的質量有著決定性的作用。從客觀的角度來說&#xff0c;如果石油化工安裝工程在實際的施工過程中出現任何的問題&#xff0c;就會威脅到周邊人群的生命…
閱讀更多...
[原創]windows server 2012 AD架構 試驗 系列 – 15解決AD復制沖突

[原創]windows server 2012 AD架構 試驗 系列 – 15解決AD復制沖突

[原創]windows server 2012 AD架構 試驗 系列 – 15解決AD復制沖突 這節我詳細說下 ADDS使用stamp來作為解決沖突的依據 Stamp由三塊組成 Version, time stamp , source DC GUID (發生對象修改行為的源DC的GUID) 一般來說沖突分為幾下情況: 1-屬性沖突 你可以用repadmin來查看版…
閱讀更多...
Python全局變量和局部變量

Python全局變量和局部變量

全局變量和局部變量 定義在函數內部的變量擁有一個局部作用域&#xff0c;定義在函數外的擁有全局作用域。 　　局部變量只能在其被聲明的函數內部訪問&#xff0c;而全局變量可以在整個程序范圍內訪問。調用函數時&#xff0c;所有在函數內聲明的變量名稱都將被加入到作用域中…
閱讀更多...
前端之 jQuery 入門

前端之 jQuery 入門

jQuery介紹 jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互&#xff0c;能夠極大地簡化JavaScript編程。它的宗旨就是&#xff1a;“Write less, do more.“ jQuery的優勢 一款輕…
閱讀更多...
python劍指offer替換空格_迷人的算法-劍指offer面試題5：替換空格

python劍指offer替換空格_迷人的算法-劍指offer面試題5：替換空格

題目&#xff1a;請實現一個函數&#xff0c;把字符串中的每個空格替換成"%20"。例如&#xff0c;輸入"We are happy."&#xff0c;則輸出"We%20are%20happy."。此題看似簡單&#xff0c;實則坑還是比較多的。替換字符的長度有變化&#xff0c;由…
閱讀更多...
音頻視頻解決方案：GStreamer/ffmpeg/ffdshow/directshow/vfw

音頻視頻解決方案：GStreamer/ffmpeg/ffdshow/directshow/vfw

音頻視頻編程相關&#xff1a;GStreamer/ffmpeg/directshow/vfw linux和window下幾種流行的音頻視頻編程框架作一個總結&#xff0c;防止自己迷惘&#xff0c;免于暈頭轉向。 一、GStreamer GStreamer is a library that allows the construction of graphs of media-handlin…
閱讀更多...
最新文章

Copyright @ 2022~2023