讀書筆記 --- [基礎知識點] 小結3

1. cookie與session的區別

  • 參考

  • cookie機制

Cookie是服務器在本地機器上存儲的小段文本,并隨每一次發送至同一個服務器。網絡服務器用HTTP頭向客戶端發送cookies,在客戶端中,瀏覽器解析這些cookies并將它們保存為一個本地文件,它會自動將同一服務器的任何請求束縛上這些cookies。

具體來說,cookie機制采用的是在客戶端保持狀態的方案.它是在客戶端的會話狀態的存儲機制,他需要用戶打開客戶端的cookie支持。cookie的作用就是為了解決HTTP協議無狀態的缺陷所作的努力。

正統的cookie分發是通過擴展HTTP協議來實現的,服務器通過HTTP的響應頭中加上一行特殊的指示,提示瀏覽器按照指示生成相應的cookie。然而存粹的客戶端腳本如JavaScript也可以生成cookie。而cookie的使用是由瀏覽器按照一定的原則在后臺自動發送給服務器的。瀏覽器檢查所有存儲的cookie,如果某個cookie所聲明的作用范圍大于將要請求的資源所在的位置,則把該cookie附在請求資源的HTTP請求頭部上發送給服務器

cookie的內容主要包括: 名字、值,過時間,路徑和域。路徑與域一起構成cookie的作用范圍。若不設置過期時間,則表示這個cookiedd的生命周期為瀏覽器會話期間,關閉瀏覽器窗口,cookie會消失。這種生命周期為瀏覽器會話器的cookie被稱為會話cookie。會話cookie一般不存儲在硬盤上而是保存在內存里,當然這種行為并不是規范規定的。若設置了過期時間,瀏覽器就會把cookie保存到硬盤上,關閉后再次打開瀏覽器,這些cookie仍然有效直到超過設定的過期時間。存儲在硬盤上的cookie可以在不同的瀏覽器進程間共享,比如兩個IE窗口。而對于保存在內存里的cookie,不同的瀏覽器有不同的處理方式…

session機制

session機制是一種服務器端的機制,服務器使用一種類似于散列表的結構來保存信息

當程序需要為某個客戶端的請求創建一個session時,服務器首先檢查這個客戶端的請求里是否已包含了一個session標識,如果已包含則說明以前已經為此客戶端創建過session,服務器會按照session id把這個session檢索出來使用,如果客戶端請求不包含session id,則為此客戶端創建一個session并且生成一個與此session相關聯的session id, session id的值應該是一個既不會重用又不容易找到規律以仿造的字符串,這個session id將在本次響應中返回給客戶端保存.

cookie與session的區別

比較值cookiesession
存取方式只能保管ASCII字符串; Unicode字符需轉義; 不能直接存取Java對象能夠存取任何類型的數據;可看做是JAVA的一個容器類
隱私策略存儲在客戶端的閱讀器上,對客戶端是可見的存儲在服務器上,對客戶端是透明的
有效期可以給Cookie的過期時間屬性設為一個很大很大的數字Session保存在服務器內存中,如果過期時間設置久了,會導致內存泄漏
服務器壓力不占服務器資源.如果閱讀的用戶十分多,推薦使用Cookie每個用戶都會產生一個Session,并發訪問的用戶十分多,會產生大量session,耗費大量內存
瀏覽器支持需要瀏覽器支持,如果用戶禁用了瀏覽器支持,則cookie不生效若客戶端瀏覽器不支持cookie,則需要用到session和URL重寫.否則會失去用戶的信息跟蹤
跨域支持支持跨域名訪問不支持跨域名訪問
存儲位置客戶端服務器

2. cookie、sessionStorage和localStorage的區別

比較對象cookiesessionSoragelocalStorage
有效期根據設置的過期時間,過期則消失;未過期,瀏覽器關閉也不會消失存儲在瀏覽器的內存中,退出瀏覽器環境即消失存儲在客戶端硬盤中,不主動刪除不會消失
作用域在同源窗口中是共享的在不同的瀏覽器窗口中是不共享的在同源窗口中是共享的
數據大小不能超過4K5M左右5M左右
http請求每次都會攜帶在http頭部僅在瀏覽器中保存僅在瀏覽器保存
應用場景主要用于識別用戶登錄存儲一些頁面中傳遞的參數存儲一些頁面中傳遞的參數

3. http狀態碼分類

分類分類描述
1**信息,服務器收到請求,需要請求者繼續執行操作
2**成功,操作并成功接收并處理
3**重定向,需要進一步的操作以完成請求
4**客戶端錯誤,請求包含語法錯誤或無法完成請求
5**服務端錯誤,服務器在處理請求的過程中發生了錯誤

4. http狀態碼列表

狀態碼描述中文描述
100Continue繼續,客戶端應繼續其請求
101Switchin Protocols切換協議,服務器根據客戶端的請求切換協議.
200OK請求成功,一般用于GET與POST
201Created已創建,成功請求并創立了新的資源
202Accepted已接受,已經接收請求,但未完成處理
203Non-Authoritative Information非授權信息,請求成功,但返回的mate信息不在原始服務器上
204Not Content無內容,服務器成功處理,但未返回內容
205Reset Content重置內容,服務器處理成功,用戶終端應重置文檔視圖
206Partial Content部分內容,服務器成功處理了部分GET請求
300Mutiple Choise多種選擇,請求的資源可包括多個位置
301Moved Permanently永久移動,請求的資源被永久的移動到新URL上
302Found臨時移動,資源臨時被移動.客戶端應繼續使用原有的URL
303See Other查看其他地址.
304Not Modified未修改,所請求的資源瀏覽器返回緩存(未過期)的資源
305Use Proxy使用代理,所請求的資源必需通過代理訪問
306Unused已經被廢棄的HTTP狀態碼
307Temporary Redirect臨時重定向,使用GET請求重定向
400Bad Request客戶端請求的語法錯誤,服務器無法理解
401Unauthorized請求要求用戶的身份認證
402Payment Required保留,將來使用
403Forbidden服務器理理解客戶端的請求,但是拒絕執行此請求
404Not Found服務器無法找到客戶端請求的資源
405Method Not Allowed客戶端請求的方法被禁止
406Not Acceptable服務器無法根據客戶端請求的內容特性完成請求
407Proxy Authentication Required請求要求代理的身份認證,請求者應當使用代理進行授權
408Request Time-out服務器等待客戶端發送的請求時間過長,超時
409Conflict服務器處理請求時發生了沖突
410Gone客戶端請求的資源已經不存在(永久的刪除,并不是更改了URL)
411Length Requried服務器無法處理客戶端發送不帶Content-Length的信息
412Precondition Failed客戶端請求信息的先決條件錯誤
413Request Entity Too Large請求的實體過大,服務器無法處理
414Request-URL Too Large請求的URL過長,服務器無法處理
415Unsupported Media Type服務器無法處理請求附帶的媒體格式
416Requested range not satisfiable客戶端請求的范圍無效
417Expectation Failed無服務無法滿足Expect的請求頭信息
500Interval Server Error服務器內部錯誤,無法完成請求
501Not Implemented服務器不支持請求的功能,無法完成請求
502Bad Gateway作為網關或代理工作的服務器嘗試執行請求時,從遠程服務器收到一個無效的響應
503Service Unvailable超荷或系統維護導致服務器暫時無法處理客戶端的請求
504Gateway Time-out網關(或代理服務器)未能從遠端服務器獲取請求
505HTTP Version not supported服務器不支持請求的HTTP協議的版本

5. http常用的請求頭

協議頭說明
Accept可接受的內容類型(Content-Types)
Accept-Charset可接受的字符集
Accept-Encoding可接受的響應內容的編碼方式
Accept-Language可接受的響應內容語言列表
Accept-Datetime可接受按照時間來表示的響應內容版本
AuthorizationHTTP協議中需要認證資源的認證信息
Cache-Control指定當前的請求/回復中,是否使用緩存機制
Connection客戶端優先使用的連接類型
Cookie服務器通過Set-Cookie設置的一個HTTP協議Cookie
Content-Length請求體的長度(8進制表示)
Content-MD5數字簽名,以Base64編碼的結果表示
Content-Type請求體的MIME類型(用于POST和PUT請求中)
Date發送該消息的日期和時間
Expect客戶端要求服務器做出特定的行為
From發起此請求的用戶的郵箱地址
Host服務器的域名及端口號
If-Match客戶端的實體與服務器上對應的實體相匹配時,才進行相應的操作
If-Modified-Since對應的資源未修改,返回304
If-None-Match對應的內容未被修改的情況下返回304 Not Modified
If-Range如果實體未被修改,則返回所缺少的哪一個或多個部分
If-Unmodified-Since僅當該實體自某個特定時間以來未被修改的情況下,才發送回應
Max-Forwards限制該消息可被代理及網關轉發的次數
Origin發起一個針對跨域資源共享的請求
Pragma與具體的實現相關,這些字段可能在請求/回應鏈中的任何時候產生
Proxy-Authorization用于向代理進行認證的認證信息
Range表示請求某個實體的一部分,字節偏移以0開始
Refer表示瀏覽器所訪問的前一個頁面
TE瀏覽器預期接受的傳輸時的編碼方式
User-Agent瀏覽器的身份標識字符串
Upgrade要求服務器升級到一個高級版本協議
Via告訴服務器請求是由哪些代理發出的
Warning一個一般性的警告,表示在實體內容中可能存在錯誤

6. 強緩存與協商緩存

參考 - 瀏覽器緩存機制

概述

良好的緩存策略可以降低資源的重復加載提高網頁的整體加載速度

通常瀏覽器的緩存策略分為兩種: 強緩存和協商緩存

  • 基本原理
    • 瀏覽器在加載資源時,根據請求頭部的expirescache-control判斷是否命中強緩存,若是強緩存,則直接從緩存讀取資源,不會發送請求到服務器
    • 如果沒有名中強緩存,瀏覽器會發送一條請求給服務器,服務器會根據last-modifiedetag驗證資源是否命中協商緩存.如果命中,服務器會返回 304(Not Modified)給瀏覽器,瀏覽器會使用緩存中的資源進行顯示,并且修改expirescache-control
    • 否則,服務器會返回新的數據資源.

注意點

  • 強緩存字段有expirescache-control,如果同時存在,cache-control的優先級會高于expires
  • 協商緩存的相關字段:Last-Modified/If-Modified-Since,Etag/If-None-Match
服務器決策
服務器決策
200
304
瀏覽器請求
有緩存
是否過期
Etag?
從緩存讀取
向web服務器請求帶If-None-Match
Last-Modified
向Web服務器請求帶If-Modified-Since
200 or 304
向web服務器請求
請求響應,緩存協商
呈現

7. 常見的http狀態碼

狀態碼描述中文描述
200Ok請求成功
201Created已經創建,成功請求并創建了新的資源
202Accepted已經接受請求,但是未處理
206Partial Content部分內容,服務器已經處理了部分GET請求
301Moved Permanently永久重定向,域名跳轉
302Found臨時重定向,讓未登錄的用戶訪問用戶中心
304Not Modified資源未修改,告訴瀏覽器可以使用本地緩存
307Temporary Redirect臨時重定向
400Bad Request服務器不能理解服務端的請求
401Unauthorized需要客戶端提供驗證信息
403Forbiden一般是客戶端提交的數據無法通過服務端的驗證,拒絕訪問
404Not Found服務器通過URL無法找到對應的資源
500Interval Server Error服務器收到了請求,但是服務器執行的時候發送了錯誤

8. 前端優化

  • 降低請求量: 合并資源,減少HTTP請求數, minify / gzip壓縮, webP, lazyLoad
  • 加快請求速度: 預解析DNS,減少域名數,并行加載,CDN分發
  • 緩存: HTTP協議緩存請求,離線緩存manifest,離線數據緩存localStorage
  • 渲染: JS/CSS優化,加載順序,服務端渲染,pipline

9. GET和POST的區別

屬性GETPOST
安全性不安全比較安全(也不是那么安全)
參數長度被瀏覽器限制了長度長度一般無限制
參數是否被緩存可以在瀏覽歷史記錄里看到不會被保留
TCP數據包產生1個TCP數據包產生2個TCP數據包
編碼格式只能進行url編碼支持多種編碼方式

10. 畫一個三角形

利用邊框的均分原理

div {width: 0px;height: 0px;border-top: 10px solid red;border-right: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid transparent;
}

11. 狀態碼304和200

  • 狀態碼200: 請求已成功,請求所希望的響應頭或數據體將隨此響應返回.即返回的數據未全量的數據,如果文件不通過GZIP壓縮的話,文件是多大,則要有多大傳輸量

  • 狀態碼304: 如果客戶端發送了一個帶條件的GET請求且該請求已被允許,而文檔的內容(自上次訪問以來或者根據請求的條件)并沒有改變,則服務器應當返回這個狀態碼。即客戶端和服務器端只需要傳輸很少的數據量來做文件的校驗,如果文件沒有修改過,則不需要返回全量的數據

12. 說一下瀏覽器的緩存

  • 分為強緩存和協商緩存

    • 瀏覽器根據IP地址獲取資源時,首先在緩存種查找是否含義該資源,如果有且未過期則從緩存種獲取,不請求瀏覽器而直接返回資源,這種返回的資源稱為強緩存資源

    • 如果過期了:

      • 如果帶有Etag,則會向服務器請求(帶If-None-match),服務器根據客戶端傳入的信息,判斷客戶端中的緩存是否過期,若過期則返回新資源(200),否則返回狀態碼304,不帶有資源
      • 如果不帶Etag,則會檢查是否帶Last-Modified,如果有,則向服務器請求(帶If-Modified-Since),服務器根據客戶端傳入的信息,判斷客戶端中的緩存是否過期,若過期則返回新資源(200),否則返回狀態碼304,不帶有資源
      • 如果不帶Last-Modified則直接向服務器直接申請新資源
  • 強緩存,是根據是否過期判斷的,協商緩存是通過服務器判斷的.

13. HTML5新增的元素

  • 語義化:新增了 header,footer,nav,aside,section等語義化標簽
  • 表單: 新增加了color,email,data,range等類型
  • 存儲: 提供了sessionStorage, localStorage 和離線緩存
  • 多媒體: 音頻(audio) 和 視頻(vedio)
  • 其他: 地理定位,canvas畫布、拖放(drag)、多線程(Web Worker)

14. 在地址欄輸入一個URL到這個頁面呈現出來,中間會發生什么

  • 輸入url后,首先會根據域名去尋找對應的ip

    • 瀏覽器首先會去尋找緩存,查看緩存中是否有記錄,緩存的查找記錄為: 瀏覽器緩存 --> 系統緩存 --> 路由緩存,
    • 緩存中沒有則查找hosts文件中是否有記錄
    • hosts文件中沒有記錄則查詢DNS服務器,得到ip地址
  • 得到ip地址后,瀏覽器會根據這個ip以及相應的端口號,構造一個http請求

    • 請求報文包括
      • 請求方法
      • 請求說明
      • 請求附帶的數據
  • 然后,瀏覽器將http請求封裝在一個tcp包中

    • 這個tcp包會一次經過: 傳輸層、網絡層、數據鏈路層、物理層
  • tcp請求到達服務器,服務器請求并返回資源

  • 瀏覽器得到html文檔后,第一次會根據html生成一個DOM樹,其中遇到異步(如CSS和JS的加載),會將異步任務放到異步隊列中去(開一個線程去獲取)

  • 當同步任務執行完畢后,會去任務隊列中去尋找已經完成資源,然后進行事件循環(每次讀取隊首完成的任務到棧內存中執行,執行完畢在去任務隊列中獲取).

  • 事件循環過后,所有CSS加載完成,會生成一棵CSSOM規則.然后瀏覽器會將DOM樹和CSSOM規則合并成一棵渲染樹,主要是排除非視覺節點(Script、meta..)

  • 緊接著進行回流(Layout): 根據渲染樹,計算出它們在視口(viewPort)中的準確位置和大小.

  • 然后重繪(Painting): 根據Render樹和回流得到的幾何信息,得到絕對像素點

  • Display: 將像素點發送給GPU進行渲染

15. 常見的http的頭部

  • 首部可以分為:
    • 通用首部
      • 一些通用的信息: 如date表示報文創建時間
    • 請求首部
      • 請求報文中獨有的: cookie, 和緩存相關的如 if-Modified-Since
    • 響應首部
      • 響應報文中獨有的: 如set-cookie,和重定向相關的location
    • 實體首部
      • 用來描述實體部分, allow用來描述可執行的請求方法,content-type描述主體類型,content-Encoding描述主體的編碼方式

16. http2.0特性

  1. 內容安全: 基于https,天然具有安全性,通過http2.0的特性可以避免單純使用https的性能下降
  2. 二進制格式: http1.x的解析是基于文本的, http2.0將所有的傳輸信息分割為更小的消息和幀,并對他們采用二進制格式編碼,基于二進制可以讓協議有更多的擴展性,比如引入了幀來傳輸數據和指令
  3. 多路復用,這個功能相當于是長連接的增強,每個request請求可以隨機的混雜在一起,接收方可以根據request的id將request再歸屬到各自不同的服務端請求里面,另外多路復用中也支持了流的優先級,允許客戶端告訴服務器哪些內容是更優先的資源,可以優先輸出.

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

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

相關文章

SPI接口比IIC速度快的理解

http://bbs.21ic.com/icview-279512-1-1.html I2C 的長處是超級低廉,而且是協議簡單的總線。spi是端口,不是總線。 USB協議復雜。I2C因為跨電平的標準,所以是OC 上拉的,上拉高電平驅動能力很弱,所以決定了他跑不快。但…

運維基礎測試題

運維基礎測試題 一、選擇題 1、管道符 ”|” 的作用是 A 將前一個命令的標準輸入作為后一個命令的標準輸出 B 將前一個命令的標準輸出作為后一個命令的標準輸入 2、終止一個后臺進程需要用到哪個命令 A cp B kill C ctrlc D mv 3.Linux查看文件的命令,若希望…

解決phpmyadmin 遇見的問題

1、phpmyadmin4.8.3 上傳到網站目錄后提示解決phpmyadmin mysqli_real_connect(): (HY000/2002): No such file or directory的錯誤, 解決方法把phpmyadmin目錄中的配置文件config.sample.inc.php改成config.inc.php,并把 $cfg[Servers][$i][host] loc…

javascript --- 對象屬性的深層次獲取

現有對象如下 let obj {a: {b:{c:{d:Marron}}} }想通過一個方法,輸入該對象和路徑a.b.c.d獲取Marron的值 【思路】: 首先使用split數據,將a.b.c.d變為[a, b, c, d]然后使用shift()方法每次取出最前面的屬性名,存放在prop中新建一個res對象,讓res res[prop] 現假設有一函數…

淺談mysql

因為本地mysql服務的命名是mysql57,所以在終端啟動和關閉mysql的時候,我們這么寫, net stop mysql57 ;net start mysql57;如圖所示 接著輸入mysql -u -root -p; 然后輸入自己的密碼; 查看有多少個庫 show database…

HTTP --- HTTP2小結

參考 HTTP發展史 HTTP/0.9 - 單行協議 問世于1990年,那時的HTTP非常簡單: 只支持GET方法; 沒有首部; 只能獲取純文本 HTTP/1.0 - 搭建協議的框架 1996年,HTTP正式被作為標準公布,版本為HTTP/1.0。1.0版本增加了首部、狀態碼、權限、緩存、長連接(默認短連接)等規范,可以說搭建…

藤條生長為字母的動畫

https://www.youtube.com/watch?vLshPEGiHsqc Blender Tutorial: Vine Animation Text 需要使用插件Add Curve: IvyGen, 進入用戶設置,找到并溝選該插件. 建模:立體文字, [Alt C] 轉換為網格mesh;選中網格文字,新建藤蔓:[Shift A], Curve\Add Ivy to Mesh左邊工具欄下方的IvyG…

RDS Mysql中binlog日志查看

1、在阿里云下載下載的binlog 文件 如:mysql-bin.000217 2、想在本機解析出來,在本機安裝mysql5.7版本(注意系統版本要比RDS mysql 版本高才行) 3、 cmd進入本機mysql\bin目錄 e: cd E:\mysql5.7\bin mysqlbinlog -vv --base64-o…

讀書筆記 --- 再次閱讀回流與重繪

參考 - 強烈推薦看看,這個作者寫了很多特別好的文章. 瀏覽器渲染過程 解析HTML,生成DOM樹; 解析CSS生成CSSOM樹將DOM樹和CSSOM樹合并,生成渲染(Render)樹Layout(回流): 根據生成的渲染樹,視口(viewport),得到節點的幾何信息(位置、大小)Painting(重繪): 根據渲染樹和幾何信息…

2017-2018 ACM-ICPC, Asia Daejeon Regional Contest

C 有n個節點和m邊條,求一條最長的路徑,該路徑(c1,c2,c3...cn)滿足 不出現重復的節點,ci 和ci1是鄰居節點,且 ci 的鄰居節點數量小于ci1的鄰居節點數量。 記憶DFS遍歷,每次遞歸計算的值都保存在數組里,這樣復…

javascript --- 將DOM結構轉換成虛擬DOM 虛擬DOM轉換成真實的DOM結構

虛擬DOM的實現 使用虛擬DOM的原因: 減少回流與重繪 將DOM結構轉換成對象保存到內存中 <img /> > { tag: img} 文本節點 > { tag: undefined, value: 文本節點 } <img title"1" class"c" /> > { tag: img, data: { title "1&q…

swap(a,b)值交換的4種方法

方法一&#xff1a;int tmp 0; tmp b;b a; a tmp; 方法二&#xff1a;a ab; b a-b; a a-b;方法三&#xff1a;a ^ b ^ a^ b;方法四&#xff1a;a ab-(ba);轉載于:https://www.cnblogs.com/vocaloid01/p/9514126.html

裝系統工具

安裝如果失敗,注意是不是工具的版本太老導致 系統分區工具: DiskGeniusPortable 刻錄工具: UlraISO rufus https://rufus.ie/ win32diskimager 轉載于:https://www.cnblogs.com/jiangfeilong/p/9937164.html

小程序WXML基本使用

數據綁定 <!--wxml--> <view> {{message}} </view> // page.js Page({data: {message: Hello MINA!} }) 列表渲染 <!--wxml--> <view wx:for"{{array}}"> {{item}} </view> // page.js Page({data: {array: [1, 2, 3, 4, 5]} })…

javascript --- vue中簡單的模板渲染

一層的渲染 將下面的模板中的mustache語法使用給定數據渲染. 模板如下 <div id"root"><div><div><p>{{name}} - {{message}}</p></div></div><p>{{name}}</p><p>{{msg}}</p> </div>數據如…

tomcat 虛擬路徑 與 虛擬主機配置

虛擬路徑配置 方法一&#xff1a;此方法需要重啟服務 打開下面文件 在host里面添加context標簽 <Context docBase"D:\test" path"/testServlet/aaaaa" reloadable"true" /> 瀏覽器訪問&#xff1a;http://172.16.6.103:1080/testServlet/a…

20172328 2018-2019《Java軟件結構與數據結構》第八周學習總結

20172328 2018-2019《Java軟件結構與數據結構》第八周學習總結 概述 Generalization 本周學習了二叉樹的另一種有序擴展&#xff1f;是什么呢&#xff1f;你猜對了&#xff01;ヾ(???)&#xff89;&#xff9e;就是堆。本章將講解堆的鏈表實現and數組實現&#xff0c;以及往…

javascript --- 函數的柯里化 Vue 2.x中柯里化的使用

函數式編程部分重點 參考資料: 函數式編程 柯里化 只傳遞給函數一部分參數來調用它,讓它返回一個函數去處理剩下的參數 var add function (x) {return function(y) {return x y} }var increment add(1) var addTen add(10)increment(2) // 3addTen(10) // 12判斷元素:V…

MYSQL重置ROOT密碼

背景 mysql 服務器長時間未使用&#xff0c;管理員當時設置的root 密碼忘記&#xff0c;需要重置 root 密碼&#xff0c;并加以妥善保存。 步驟 關閉 mysql 服務以跳過密碼驗證的方式啟動 mysql 服務mysqld --skip-grant-tables本地登陸后設置新的root 密碼 update mysql.user …

javascript --- Vue初始化 模板渲染

不帶響應式的Vue縮減實現 模板 現有模板如下: <div id "app"><div class"c1"><div titlett1 id"id">{{ name }}</div><div titlett2 >{{age}}</div><div>hello3</div></div><ul>…