當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

HTMLCSS 超简单的前端设计入门-1!

發(fā)布時(shí)間：2023/12/4 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTMLCSS 超简单的前端设计入门-1! 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

第一個(gè)網(wǎng)頁(yè)

文章目錄

第一個(gè)網(wǎng)頁(yè)
- 注釋
- 元素(標(biāo)簽,標(biāo)記)
- 元素的嵌套
- 標(biāo)準(zhǔn)的文檔結(jié)構(gòu)
語(yǔ)義化
- 什么是語(yǔ)義化
- 為什么需要語(yǔ)義化?
文本元素
- h
- p
- span
- pre
HTML 實(shí)體
a元素
- href 屬性
- target屬性
路徑的寫法
- 站內(nèi)內(nèi)資源和站外資源
- 絕對(duì)路徑和相對(duì)路徑

Emmet

注釋

注釋不參與運(yùn)行
書寫方式(html)

元素(標(biāo)簽,標(biāo)記)

整體: element
element = 起始標(biāo)記(begin tag) + 結(jié)束標(biāo)記(end tag) + 元素內(nèi)容 + 元素屬性
屬性的分類
- 局部屬性: 某些元素特有屬性
- 全局屬性: 所有元素都有的屬性
空元素
<meta charset="UTF-8">

元素的嵌套

父元素,子元素, 后代元素,祖先元素, 兄弟元素

標(biāo)準(zhǔn)的文檔結(jié)構(gòu)

HTML: 頁(yè)面, html文檔
文檔聲明: 告訴瀏覽器當(dāng)前文檔使用的HTML標(biāo)準(zhǔn)為HTML5
- <!DOCTYPE html>
根元素: 一個(gè)頁(yè)面最多只有一個(gè),這個(gè)元素是其他元素的父元素或者祖先元素
- <html lang="en"> .........en --> English, zh-CN(cmn-hans) --> 漢語(yǔ) </html>
- lang屬性: language, 全局屬性, 表示該元素內(nèi)部使用的文字是使用哪一種自然語(yǔ)言書寫而成
文檔頭: 其內(nèi)部?jī)?nèi)容不會(huì)顯示在頁(yè)面上
- <head> ......... </head>
文檔的元數(shù)據(jù): 附加信息
- <meta><meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">內(nèi)核用edge<meta name="viewport" content="width=device-width, initial-scale=1.0">適配手機(jī)端
網(wǎng)頁(yè)標(biāo)題
- <title>Document</title>
文檔體:
- <body><a href="http://www.duyiedu.com" title="bsdcsjb">杜伊教育</a><h1 title="this is my first page.">第一個(gè)網(wǎng)頁(yè)</h1><img src="https://img2.baidu.com/it/u=3992703645,2278223385&fm=26&fmt=auto&gp=0.jpg"> </body>

語(yǔ)義化

什么是語(yǔ)義化

每一個(gè)html元素都有具體的含義

a元素: 超鏈接
p元素: 段落
h1元素: 一級(jí)標(biāo)題

所有元素與展示效果無(wú)關(guān)

元素展示到頁(yè)面中的效果完全由CSS決定
瀏覽器帶有默認(rèn)的CSS樣式, 所以每個(gè)元素有一些默認(rèn)樣式
選擇什么元素取決于內(nèi)容的含義, 而不是顯示出來(lái)的效果

為什么需要語(yǔ)義化?

為了搜索引擎優(yōu)化(SEO)

搜索引擎: 百度, Bing, Google
工作原理: 每隔一段時(shí)間抓取頁(yè)面的源代碼,

為了讓瀏覽器理解網(wǎng)頁(yè)

安裝插件:閱讀模式, 語(yǔ)音模式

文本元素

h

<h1> .... <h6>: 表示一級(jí)到六級(jí)標(biāo)題

p

段落
亂數(shù)假文: 沒(méi)有任何實(shí)際含義的文字

span

無(wú)語(yǔ)義, 僅用于樣式的設(shè)計(jì)
某些元素(塊級(jí)元素)顯示時(shí)會(huì)獨(dú)占一行, 某些元素(行級(jí)元素)不會(huì)

pre

pre:預(yù)格式化文本元素, (無(wú)語(yǔ)義)
空白折疊: 在源代碼中的空白字符包含: 空格, 換行, 制表, 在頁(yè)面顯示時(shí)會(huì)被折疊為一個(gè)空格
在pre元素中的內(nèi)容不會(huì)出現(xiàn)空白折疊
在pre元素中的內(nèi)容會(huì)按照源代碼展示, 通常用于顯示一些代碼在網(wǎng)頁(yè)上
pre元素功能本質(zhì): 有一個(gè)默認(rèn)的CSS屬性
code元素: 表示代碼區(qū)域, 一般套在 pre元素外面

HTML 實(shí)體

實(shí)體字符, HTML Entity
實(shí)體字符通常用于在頁(yè)面中顯示一些特殊符號(hào)
&單詞
&#數(shù)字
- 小于: < <
- 大于: > >
- 空格:  
- 版權(quán)符號(hào):© ?
- 分?jǐn)?shù): ¾ ?
- &符號(hào): &&

a元素

超鏈接

href 屬性

hyper reference : 通常用于表示跳轉(zhuǎn)地址
普通鏈接: 跳轉(zhuǎn)地址

</a>

錨鏈接: 跳轉(zhuǎn)到某個(gè)錨點(diǎn)