柚子快報(bào)激活碼778899分享:關(guān)于HTML5的基礎(chǔ)學(xué)習(xí)內(nèi)容
柚子快報(bào)激活碼778899分享:關(guān)于HTML5的基礎(chǔ)學(xué)習(xí)內(nèi)容
HTML5的學(xué)習(xí)之web的介紹
我們重新開(kāi)始學(xué)習(xí)了HTML,相當(dāng)于是開(kāi)始重新認(rèn)識(shí)這門高級(jí)語(yǔ)言,作為一個(gè)真正快要步入設(shè)計(jì)或者程序員的門檻的學(xué)習(xí)者,現(xiàn)在開(kāi)始認(rèn)真的記錄每天的學(xué)習(xí)成果!
關(guān)于HTML的第一步
一、認(rèn)識(shí)HTML
Web開(kāi)發(fā)
????????Web開(kāi)發(fā)是指創(chuàng)建和維護(hù)網(wǎng)站和應(yīng)用程序的過(guò)程。它涉及使用各種編程語(yǔ)言、技術(shù)和工具來(lái)設(shè)計(jì)、構(gòu)建和部署網(wǎng)站。Web開(kāi)發(fā)涵蓋了前端開(kāi)發(fā)、后端開(kāi)發(fā)和數(shù)據(jù)庫(kù)管理等方面。那如今我們需要使用各種編程語(yǔ)言和技術(shù)創(chuàng)建、設(shè)計(jì)、來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)初始化和一些網(wǎng)頁(yè)的美化設(shè)計(jì)。
? ? ? ? 目前來(lái)說(shuō)web開(kāi)發(fā)早已成為各大公司首選的一種開(kāi)發(fā)開(kāi)源項(xiàng)目。
了解網(wǎng)頁(yè)
? ? ? ? 網(wǎng)頁(yè)是網(wǎng)站的基礎(chǔ)和基本單位,也就是簡(jiǎn)單的web網(wǎng)頁(yè)。網(wǎng)頁(yè)主要是由文字,圖片和鏈接組成,而且還有其他一些多媒體組成。
網(wǎng)頁(yè)的形成
? ? ? ? 主要是通過(guò)編輯器對(duì)代碼進(jìn)行一系列的一些代碼分析、用css對(duì)網(wǎng)頁(yè)設(shè)計(jì)渲染、添加交互元素,之后在瀏覽器中真正的顯示效果,來(lái)真正顯示網(wǎng)頁(yè)的形成結(jié)果。
二、瀏覽器
主要的瀏覽器
? ? ? ? 國(guó)際上常用的瀏覽器有:
Edge瀏覽器谷歌(Chrome)瀏覽器safari瀏覽器火狐(Firfox)瀏覽器.Opera瀏覽器
瀏覽器的組成部分
? ? ? ? 這里主要是瀏覽器引擎(渲染引擎)和JS解釋器來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行一系列渲染和顯示。
三、Web標(biāo)準(zhǔn)
Web 標(biāo)準(zhǔn)構(gòu)成
????????主要包括結(jié)構(gòu)(Structure)、表現(xiàn)(Presentation)和行為(Behavior)三個(gè)方面。
Structure結(jié)構(gòu)是推崇使用語(yǔ)義化的HTML標(biāo)簽來(lái)描述網(wǎng)頁(yè)的內(nèi)容結(jié)構(gòu),使網(wǎng)頁(yè)的結(jié)構(gòu)清晰明了,有助于搜索引擎優(yōu)化和可訪問(wèn)性。Presentation遵循web標(biāo)準(zhǔn)意味著使用層疊樣式表來(lái)定義網(wǎng)頁(yè)的外觀和布局,確保網(wǎng)頁(yè)在不同瀏覽器和設(shè)備上的一致表現(xiàn)。Behavior主要是通過(guò)代碼來(lái)進(jìn)行對(duì)交互功能的編寫和使用,來(lái)提高網(wǎng)頁(yè)的性能和交互效果。
????????結(jié)構(gòu)主要是在HTML文件中進(jìn)行編寫代碼,表現(xiàn)主要是使用CSS來(lái)進(jìn)行渲染效果,最后行為是用JavaScript來(lái)進(jìn)行交互功能編寫。
四、主要的編寫工具(VScode)
VSCode的基本使用
????????Visual Studio Code (簡(jiǎn)稱 VS Code / VSC) 是由微軟開(kāi)發(fā)的一款開(kāi)源源代碼編輯器,免費(fèi)開(kāi)源的現(xiàn)代化輕量級(jí)代碼編輯器,支持插件擴(kuò)展,通過(guò)使用插件擴(kuò)展來(lái)更方便的使用。我們主要是用來(lái)編寫網(wǎng)頁(yè)的主要代碼。
五、HTML簡(jiǎn)介
HTML名叫“超文本標(biāo)記語(yǔ)言”(Hyper Text Markup Language )。 超文本標(biāo)記語(yǔ)言,主要可以跟各種各樣的多媒體進(jìn)行鏈接使用,因此稱為超文本,但它并非一種編程語(yǔ)言,而是一種標(biāo)記語(yǔ)言,主要還是應(yīng)用于文本(我是這樣理解的)。下面就是HTML主要的結(jié)構(gòu)標(biāo)記了,創(chuàng)建文件后綴是.html的文件就是我們的超文本標(biāo)記語(yǔ)言的文檔了。
文檔結(jié)構(gòu) /*主要的根標(biāo)記,也是最大的標(biāo)記*/
/*這是頭標(biāo)記,主要展示主要信息*/完整的文檔結(jié)構(gòu) /*主要聲明文檔格式*/
/*主要的編碼格式utf-8*/
? ? ? ? 注意一代meta中的編碼格式utf-8是所有國(guó)家都使用的編碼格式,而且也避免使用其他編碼展示網(wǎng)頁(yè)時(shí)出現(xiàn)亂碼。
????????3.HTML屬性
? ? ? ? 用于為HTML元素(Element)提供附加信息或配置的鍵值對(duì)。屬性位于HTML元素的開(kāi)始標(biāo)簽中,并以鍵值對(duì)的形式呈現(xiàn),其中鍵是屬性的名稱,值是屬性的內(nèi)容,根據(jù)不同的元素和需求,可以使用更多的屬性來(lái)實(shí)現(xiàn)特定的功能和效果。
六、HTML常用標(biāo)簽
了解和熟悉正確使用這些簡(jiǎn)單的標(biāo)簽來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行一系列的渲染,和交互功能的啟用,正確展示web網(wǎng)頁(yè)的內(nèi)容。
一、標(biāo)題標(biāo)簽
?標(biāo)題標(biāo)簽 head h
? ?注意:一個(gè)HTML中只能有一個(gè)且存在一個(gè)一級(jí)標(biāo)記!
一級(jí)標(biāo)題 :只能有一個(gè)
二級(jí)標(biāo)題
三級(jí)標(biāo)題
四級(jí)標(biāo)題
五級(jí)標(biāo)題
六級(jí)標(biāo)題
效果展示?
?段落標(biāo)記paragraph p
????????形成一個(gè)文本塊可以在其中添加內(nèi)容,最終在網(wǎng)頁(yè)中顯示。
這是一個(gè)段落標(biāo)記
?水平線 horizonal hr
? ? ? ? 形成一條水平線來(lái)區(qū)分上下標(biāo)記渲染的內(nèi)容,是網(wǎng)頁(yè)更加清晰。
/*而且hr是單標(biāo)記*/
換行標(biāo)記符 break br
? ? ? ? 使用會(huì)使文檔內(nèi)容進(jìn)行換行。
/*換行標(biāo)記也是一個(gè)單標(biāo)記*/
?div標(biāo)簽 division
? ? ? ? div標(biāo)記是一個(gè)塊標(biāo)記,主要是對(duì)一塊的文檔內(nèi)容進(jìn)行一系列的渲染和功能編寫。而且
div標(biāo)記獨(dú)占一行!塊級(jí)元素,包裹獨(dú)立的塊內(nèi)容使用請(qǐng)使用div標(biāo)記標(biāo)簽。。?。
span標(biāo)簽? span
????????span 跨度 行內(nèi)元素 包裹文本文字的都可以使用span。一定要注意與div的區(qū)別。
span元素1
span元素2
span元素3
span元素4
span元素5
二、文本格式化標(biāo)簽
文本標(biāo)簽
b:blodstrong:Strong?加粗,粗體 strong具有語(yǔ)氣強(qiáng)調(diào)!i:italic?em:Emphasized斜體強(qiáng)調(diào)語(yǔ)氣!u:underlineins:insert下劃線。s:strikethroughdel:delete刪除線。
加粗,粗體
加粗,粗體
斜體
斜體強(qiáng)調(diào)
刪除
刪除線
下劃線插入
下劃線插入
?
?img圖像標(biāo)簽
? ? ? ? 通過(guò)img標(biāo)記標(biāo)簽可以使選中的圖片,圖像在網(wǎng)頁(yè)中顯示。注意事項(xiàng)也在代碼中。
src是圖像與圖片的路徑alt設(shè)置提示信息width設(shè)置圖片的寬度height設(shè)置圖片的高度title設(shè)置圖片的標(biāo)題
鏈接標(biāo)簽anchor
? ? ? ? 主要是引用其他鏈接來(lái)跳轉(zhuǎn)網(wǎng)頁(yè)。這里有一個(gè)小彩蛋,可以通過(guò)在網(wǎng)頁(yè)地址后輸入/favicon.ico來(lái)獲取某網(wǎng)頁(yè)的標(biāo)題圖標(biāo)、logo。而且超鏈接會(huì)直接添加下劃線和顏色,而且不僅可以添加鏈接還能添加多媒體等。
icon圖標(biāo) ico后綴的圖像
? ? ? ? 在head里添加link來(lái)對(duì)ico的圖像進(jìn)行添加。
?例如這里我們使用wzry的ico小圖標(biāo),呈現(xiàn)出的效果。
特殊字符
? ? ? ? 特殊字符有很多,但是我們現(xiàn)在能運(yùn)用到的比較少,就列舉幾個(gè)常用的,還要注意兩個(gè)空格的區(qū)別。
從歷史上看,無(wú)論是CPI報(bào)告還是美聯(lián)儲(chǔ)政策決議,在公布的當(dāng)日都常常會(huì)攪得市場(chǎng)動(dòng)蕩不安,但這兩大事件其實(shí)很少在同一天發(fā)生。根據(jù)道瓊斯市場(chǎng)的數(shù)據(jù),自2008年以來(lái)長(zhǎng)達(dá)16年的時(shí)間里,CPI報(bào)告和美聯(lián)儲(chǔ)政策決議在同一天出爐的情況,總共也只有13次。
從歷史上看,無(wú)論是CPI報(bào)告還是美聯(lián)儲(chǔ)政策決議,在公布的當(dāng)日都常常會(huì)攪得市場(chǎng)動(dòng)蕩不安,但這兩大事件其實(shí)很少在同一天發(fā)生。根據(jù)道瓊斯市場(chǎng)的數(shù)據(jù),自2008年以來(lái)長(zhǎng)達(dá)16年的時(shí)間里,CPI報(bào)告和美聯(lián)儲(chǔ)政策決議在同一天出爐的情況,總共也只有13次。
< >
©
 半角空格&emsp全角空格<less-than 小于號(hào)>greater-than 大于號(hào)©??版權(quán)字符號(hào)
?七、標(biāo)簽的分類
單標(biāo)簽 例如
水平線 、< br> 換行雙標(biāo)簽 例如
段落
、?八、標(biāo)記間具有的關(guān)系
嵌套關(guān)系
并列關(guān)系
/*這里注意head和body是并列關(guān)系,div和span是并列關(guān)系*/
????????ok,我對(duì)今天HTML的學(xué)習(xí)總結(jié)就到這里了,之后還會(huì)有一些更細(xì)的學(xué)習(xí)內(nèi)容。
柚子快報(bào)激活碼778899分享:關(guān)于HTML5的基礎(chǔ)學(xué)習(xí)內(nèi)容
推薦鏈接
評(píng)論可見(jiàn),查看隱藏內(nèi)容
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明,如有侵權(quán),聯(lián)系刪除。