html學習之路

2021-10-01 08:47:11 字數 3839 閱讀 8021

容器語義話容器元素

元素包含關係

html: hypertext markup language 超文字標記語言;定義網頁中有什麼;html5(2023年標準制定出來)

css: cascading style sheets 層疊樣式表;定義網頁中的東西長什麼樣子

name

description

web網際網路

w3c全球資訊網聯盟,非盈利性的組織

瀏覽器核心

ietrident

firfox

gecko

chrome

webkit(之前)/ blink

safari

webkit

opear

presto(之前)/ blank

推薦安裝谷歌瀏覽器(將chrome設定為預設瀏覽器)

設定編輯器的語言,按f1輸入configure display language;然後選擇zh-ch即可

我們現在安裝一些外掛程式;control + shift + x;打卡擴張;安裝下面的外掛程式【vscode-icons】【live server】【markdown preview enhanced】

markdown 語法在標題後面加上將會在目錄中隱藏該標題

快速新增alt + control + v ;將複製的插入到這裡

元素 = 起始標記(begin tag)+ 結束標記(end tag) + 元素內容 + 元素屬性

屬性 = 屬性名 + 屬性值

屬性分類屬性

描述全域性屬性

所有元素通用

區域性屬性

某些元素特有的屬性

href

="">

>

空元素

有些元素沒有結束標記,這樣的元素叫做空元素

charset

="utf-8"

>

祖先元素、父元素、子元素、兄弟元素(擁有同乙個父元素的兩個及以上的元素)

lang="en"全域性屬性,表示該元素內部使用的文字是哪一種語言書寫而成的 ;中文可以使用lang="cmn-hans

所有元素與展示效果無關(元素展示效果應該由css決定)

為了搜尋引擎優化(seo;在搜尋引擎抓取頁面時候,對排名更友好)

為了瀏覽器更好理解網頁(在某些瀏覽器外掛程式中發揮的更好;如閱讀模式會忽略一些廣告;或者在給盲人閱讀時的重音)

換到下一行control + enter換到上一行control + shift + enter批量生產亂數假文lorem實體字元

頁面展示效果

<

<

>

>

空 格½½

1 em空格

½ em 空格&&

更多實體字元可以搜尋html entity mdn

跳轉位址

跳轉錨點(錨鏈結)

執行js**觸發某個功能

絕對路徑(url位址)(訪問本站和本站以外資源都可以用該方式)

協議名://主機名:埠號/路徑

相對路徑(常用於本站資源)

./表示當前目錄;../表示上一級目錄

屬性

描述controls="controls"顯示控制項

autoplaymutedloop

某些屬性只有兩種狀態;不寫 ;或者取值為屬性名,這種屬性叫做布林屬性;

布林屬性在html5中可以不寫屬性值

針對相容性可以這樣寫

controls

autoplay

loop

style

="width

: 600px;

">

src=

"media/*.mp4"

>

src=

"media/*.webm"

>

>

>

video

>

列表

有序列表(取值,在法律或者特別重要的,以type裡面的值決定,否則建議使用csslist-style-type去控制;reversed倒序顯示)

type

=「」>

>

li>

>

li>

ol>

無序列表(常用與製作選單)

>

>

li>

>

li>

ul>

定義列表

dl定義列表

dt定義列表的標題

dd定義列表的描述

>

>

titledt

>

>

descriptiondl

>

dl>

容器元素:該元素代表乙個塊區域,內部用於放置其它元素
元素

含義header通常表示頭部,也可以用於文章的頭部

footer通常用於表示頁尾,也可以用於文章的尾部

article通常用於整篇文章

section通常用於表示一篇文章的章節

aside通常用於表示側邊欄

以前:塊級元素可以包含行級元素,行級元素不可以包含塊級元素,a元素除外;
容器元素中可以包含任何元素

a元素幾乎可以包含任何元素

某些元素有固定的子元素(ul>li, ol>li, dl>dt+dd)

標題元素和段落元素不能相互巢狀,並且不能包含容器元素

HTML5學習之路( )

1 設定電子郵件連線 163郵箱 2 a標籤中的 bland 和 self 分別表示在新視窗中開啟和在當前視窗顯示超連結內容 3 熱點區域 circle coords 10,10,100 href 原形 coords 分別表示圓心座標和半徑畫素 poly coords 10,10,100,100 2...

HTML5學習之路(1)

html5是html最新的修訂版本,2014年10月由全球資訊網聯盟 w3c 完成標準制定。html5的設計目的是為了在移動裝置上支援多 移除過時標籤 部分過時的html4標記被移除,其中包括純粹顯示效果的標記如和,它們已被css所取代。新特性 以上就是html5簡要說明 下面來簡要說明幾個html...

我的HTML學習之路02

這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落 這是另乙個段落 這個 段落演示了分行的效果 字型 這個文字是加粗的這個文字是加粗的這個文字字型放大 這個文字是斜體的 這個文字是斜體的 這個文字是縮小的 這個文字包含 下標這個文字包含 上標 標籤描述 b 定義粗體文字 em 定義著重文字 i ...