前端DAY01-HTML

来源:https://www.cnblogs.com/tender-81/archive/2022/08/01/16541631.html
-Advertisement-
Play Games

DAY01 電腦的介紹 特點: 1.可以進行數值計算,可以進行邏輯計算 2.具有存儲記憶功能 硬體:看得見,摸得著的 顯示器,主機,存儲器 軟體:看得見,摸不著的 系統軟體:操作系統:windows、Linux、UNIX等 應用軟體:各類app C/S架構和B/S架構 1.C/S架構:需要安裝 a ...


DAY01

電腦的介紹
特點:
	1.可以進行數值計算,可以進行邏輯計算
	2.具有存儲記憶功能
硬體:看得見,摸得著的 顯示器,主機,存儲器
軟體:看得見,摸不著的
	系統軟體:操作系統:windows、Linux、UNIX等
	應用軟體:各類app
C/S架構和B/S架構
1.C/S架構:需要安裝 app
	C:client 客戶機 由伺服器S提供的信息
	S:server 伺服器 (數據來源)
	優點:安全性更高
	缺點:對用戶來說需要安裝更新維護
2.B/S架構:不需要安裝 網頁
	B:browser 瀏覽器由伺服器S提供的信息
	S:server 伺服器 (數據來源)
	優點:對用戶友好,對設備要求低,不必安裝維護
	缺點:安全性低
網站的建設流程
一、註冊功能變數名稱(網址):www.baidu.com
二、租用伺服器:一臺電腦用來存儲數據
三、網站製作:
	以前的流程:
		1.產品經理提需求
		2.UI根據需求設計網頁
		3.前端把UI設計的網頁以代碼的形式運行到瀏覽器
		4.後臺:數據處理,功能的實現
		5.測試:測試問題
		6.上線
	現在的流程:(前後端分離)
		1.產品經理提需求
		2.UI和前端及後臺同時工作
		3.聯調
		4.測試:測試問題
		5.上線
四、推廣:1.免費推廣:從代碼上進行一些處理
		2.付費推廣:廣告,視頻(抖音,b站...) 百度推廣...
五、維護
前端和後臺:
前端:客戶端,離用戶比較近,所做的工作是用戶看得到的
後臺:服務端,所做的工作是用戶並不能直接看到的
前端和後臺的關係:
	前端發出請求給伺服器,後臺根據前端發出的請求進行響應,把結果反饋給前端,顯示在前端界面上
Web網站和網頁
web:全稱 world wide web;萬維網、廣域網、互聯網
網站:是無數個網頁的集合
網頁的組成:
	網頁的結構html:超鏈接、音頻、視頻、圖片、文本...搭建的網頁結構;
	網頁的表現css:修飾結構,讓結構更好看;
	網頁的行為javascript:實現和網頁的交互效果;
瀏覽器的介紹
網頁需要在瀏覽器中運行
瀏覽器的相容:瀏覽器解析代碼的結果不一樣的情況,相容主流瀏覽器;
主流瀏覽器:IE、firefox、Safari、Chrome、opera、edge
內核:(四大瀏覽器內核)
	Trident  不能跨平臺	IE
	Gecko  開源	firefox
	webkit 輕量級	(Safari 、蘋果瀏覽器、谷歌瀏覽器(舊版))
	webkit–>blink 	(由webkit衍生而來的) (谷歌、opera)
	Presto(Opera前內核) (已廢棄)	(opera)
Web標準
代碼需要標準化
Web標準:
	結構:html5
	表現:css
	行為:js
	結構和表現的語言標準是由W3C制定的
	行為標準是由ECMA制定的
html+css
	xhtml(html4.01)+css2.0
	h5+c3
編輯器的使用
1.安裝插件
2.打開文件夾,創建文件夾和文件
3.項目里存在的基本的文件和文件夾
	css文件夾:存放css文件;
	html文件夾:存放除index.html文件的html文件;
	js文件夾:存放index.html文件;
	images文件夾:存放圖片;
	index.html 表示首頁;
編輯器中常用的快捷鍵
1.顯示html5基本結構的快捷鍵:!  回車
2.alt+shift+下	複製
文件的命名規則
1.小寫英文字母,或者英文字母、數字、連接符、下劃線的組合;
2.其中不得包含漢字、空格和特殊字元;必須以英文字母開頭;
3.不可以數字開頭;
	註:只要是語法上的標點符號,都要使用英文輸入法的符號;
HTML的發展史
XML:可擴展標記語言
HTML:超文本標記語言
XHTML:可擴展超文本標記語言
HTML的基本結構
<!DOCTYPE html>:文檔聲明,瀏覽器以html5版本來解析當前的代碼,必須放在第一行,不區分大小寫
<html></html>:根標簽,根元素
<html lang="en">:定義語言;“ch”中文
<title></title>:當前文件的標題
<head></head>:頭部區域,描述區
<body></body>:主體區
<meta charset = "UTF-8">:定義編碼格式,字元集
HTML5的語法
<標簽 屬性 = "屬性值" 屬性 = “屬性值1 屬性值2”></標簽>
說明:
	1.<>裡面的第一個單詞,稱之為標簽、標記、元素;
	2.標簽可以沒有屬性,也可以有多個屬性;
	3.標簽和屬性之間要用空格隔開;
	4.標簽有多個屬性時,屬性和屬性之間也要用空格隔開;
	5.屬性與屬性值用等號連接;
	6.屬性值必須卸載引號裡面(可以是“ ”,也可以是’ ‘);
	7.屬性有多個屬性值時,屬性值之間用空格隔開;

標簽的兩種類型:

	常規標記(雙標記):又開始標簽,也有結束標簽
	空標記(單標記):只有開始標簽,沒有結束標簽,自結束的<br/>可以不寫
HTML中標簽之間的關係
嵌套關係
併列關係
HTML4.01標簽-文本標簽,段落標簽,加粗標簽,傾斜標簽,下劃線標簽
1.文本標題標簽:
	<h1~h6>	一到六級標題
	h1一般放logo
	文本標題標簽和網頁標題標簽的區別:
		顯示位置不一樣
		代表的含義也不一樣
2.段落標簽:<p></p>自帶段間距
3.加粗標簽:<b></b>普通加粗	<strong></strong>語義化標簽,更具有強調的作用
4.傾斜標簽:<i></i>普通傾斜	<em></em>語義化標簽,更具有強調的作用
5.下劃線標簽:<u></u>普通下劃線	<ins></ins>語義化標簽,更具有強調的作用
6.刪除線標簽:<s></s>普通的刪除線	<del></del>語義化標簽,更具有強調的作用
7.上標:<sup></sup>	下標<sub></sub>
8.文本節點:<span></span>沒有預設的樣式
9.水平線標簽:<hr>是單標簽
10.強制換行標簽:<br>單標簽
11.轉義字元:
	&nbsp;空格
	&lt;	<
	&gt;	>
	&copy;	版權所有
	&reg;	註冊商標
瀏覽器更喜歡語義化標簽

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

-Advertisement-
Play Games
更多相關文章
  • 1.mysql資料庫備份與恢復 1.1 資料庫常用備份方案 資料庫備份方案: 冷備份:先把資料庫服務停掉,然後拷貝資料庫目錄下的文件進行備份 物理備份 溫備份: 熱備份:資料庫服務正常運行情況,直接對資料庫進行備份 全量備份:全部備份 增量備份:第一次全備,第二次在第一次全備更改的基礎上備份 差異備 ...
  • 一、Mysql的系統架構圖 二、Mysql存儲引擎 Mysql中的數據是通過一定的方式存儲在文件或者記憶體中的,任何方式都有不同的存儲、查找和更新機制,這意味著選擇不同的方式對於數據的存取有效率的差距。 這種不同的存儲方式在 MySQL中被稱作存儲引擎。 存儲引擎是Mysql資料庫系統的底層組件,數據 ...
  • mysql主從 1.主從原理 1.1 主從介紹 所謂mysql主從就是建立兩個完全一樣的資料庫,其中一個為主要使用的資料庫,另一個為次要的資料庫,一般在企業中,存放比較重要的數據的資料庫伺服器需要配置主從,這樣可以防止因資料庫伺服器宕機導致數據丟失,還能保證業務量太多、數據太多和訪問人數太多時服務的 ...
  • mysql 簡潔式安裝步驟 1. 設置全局變數 解壓mysql壓縮包到指定位置, 然後配置全局變數, 在 path 中添加全局變數, 值為 mysql 根目錄下 bin 目錄路徑, 比如: D:\code_space\environments\mysql-8.0.30\bin 然後保存即可 2. 配 ...
  • 常用命令 啟動redis服務(Windows) 在redis的目錄下執行命令: redis-server 啟動redis客戶端實例(Windows) 在redis的src目錄下執行命令: redis-cli 連接遠程redis伺服器:(Windows) redis-cli -h host -p po ...
  • 一、直播介紹 上期雅澤同學對ChengYing是什麼、有什麼樣的功能特性,如何快速入門做了介紹,本期海洋同學將會為大家分享ChengYing部署Hadoop集群實戰的相關內容,歡迎大家積极參与。 二、直播主題 ChengYing部署Hadoop集群實戰 三、直播時間 時間:2022年8月2日晚 19 ...
  • 我們都理解B+樹和Hash索引的區別有助於我們預測索引在不同的存儲引擎中是怎麼執行查詢的。 B+ TREE 索引特性B數是一種在資料庫索引中流行的樹數據結構。該結構始終保持排序,從而可以快速查找精確匹配。MySQL中使用的是B樹的一種變體,B+樹,這種類型的索引可用於大多數存儲引擎,例如InnoDB ...
  • 綠幕摳圖是影視製作過程中常見的技術手段,常用於視頻中摳除並替換背景,通過後期加工實現視頻剪輯製作的更多可能性。然而,綠幕摳圖技術製作成本費時費力,無法應用於日常生活。 華為視頻編輯服務近期上線目標分割能力,可通過AI智能摳圖精細化分割視頻中的目標物體,並且不局限於特定的物體類別,在主體明確、背景相對 ...
一周排行
    -Advertisement-
    Play Games
  • public static void GetRegistData() { string name = "huishuangzhu"; //搜索到註冊表根目錄 RegistryKey hkml = Registry.ClassesRoot; //搜索到註冊表根目錄下的XXX文件夾。 RegistryK ...
  • 用acme.sh自動部署功能變數名稱證書 安裝ACME 目前使用量最大的免費SSL證書就是Let’s Encrypt,自2018-03開始,Let’s Encrypt官方發佈上線了免費的SSL泛功能變數名稱證書,目前通過DNS方式獲取比較快,國內可以通過鵝雲的DNSPod功能變數名稱API或者貓雲功能變數名稱API自動簽發Let’ ...
  • 經常看到有群友調侃“為什麼搞Java的總在學習JVM調優?那是因為Java爛!我們.NET就不需要搞這些!”真的是這樣嗎?今天我就用一個案例來分析一下。 昨天,一位學生問了我一個問題:他建了一個預設的ASP.NET Core Web API的項目,也就是那個WeatherForecast的預設項目模 ...
  • 1、環境搭建 1.1 依賴 <!-- nacos註冊中心 註解 @EnableDiscoveryClient --> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba- ...
  • ULID:Universally Unique Lexicographically Sortable Identifier(通用唯一詞典分類標識符) UUID:Universally Unique Identifier(通用唯一標識符) 為什麼不選擇UUID UUID 目前有 5 個版本: 版本1: ...
  • 虛基類/抽象類 抽象類:有純虛函數的類 虛繼承 通過修飾繼承方式, 如代碼2是虛繼承,被虛繼承的類稱為虛基類 虛繼承派生類的記憶體佈局方式 先是vbptr => 派生類的數據 =>基類的數據 , 對比代碼1和代碼2,發現原本基類數據在前面,派生類數據在後面,但是在虛繼承的時候 基類數據方式放到了後面, ...
  • 下麵給出 Kafka 一些重要概念,讓大家對 Kafka 有個整體的認識和感知,後面還會詳細的解析每一個概念的作用以及更深入的原理 • Producer:消息生產者,向 Kafka Broker 發消息的客戶端。 • Consumer:消息消費者,從 Kafka Broker 取消息的客戶端。 • ...
  • 前面介紹了對稱加密演算法,本文將介紹密碼學中另一類重要應用:消息摘要(Digest),什麼是消息摘要?簡單的定義是:對一份數據,進行一個單向的Hash函數,生成一個固定長度的Hash值,這個值就是這份數據的摘要,也稱為指紋。 ...
  • 弟弟最近要考試,臨時抱佛腳在網上找了一堆學習資料複習,這不剛就來找我了,說PDF上有水印,影響閱讀效果,到時候考不好就怪資料不行,氣的我差點當場想把他揍一頓! 算了,弟弟長大了,看在打不過他的份上,就不打他了~ 稍加思索,我想起了Python不是可以去水印?說搞就搞! 去除水印原理 去除方法: 用 ...
  • 作者:陳昌浩 1 導讀 if…else…在代碼中經常使用,聽說可以通過Java 8的Function介面來消滅if…else…!Function介面是什麼?如果通過Function介面介面消滅if…else…呢?讓我們一起來探索一下吧。 2 Function介面 Function介面就是一個有且僅有 ...