HTML概述:HTML 的全名是“超文字標記語言”(HyperText Markup Language),它是網頁使用的語言,定義了網頁的結構和內容。瀏覽器訪問網站,其實就是從伺服器下載 HTML 程式碼,然後渲染出網頁。
1。HTML之父
李爵士(Tim Berners-Lee)
李爵士發明了WWW、HTML、HTTP和URL。
李爵士是全球資訊網的開創者,他寫了世界上第一個網頁瀏覽器(WorldWideWeb)和第一個網頁伺服器(
httpd
),同時也建立了世界上第一個網站“http://info。cern。ch/”,該網站於1991年8月6日執行,它解釋了全球資訊網是什麼,並教會我們該如何使用網頁瀏覽器和如何建立一個網頁伺服器。
2。HTML起手式
快捷鍵:感嘆號 ! + Tab鍵
<!DOCTYPE html>
//文件型別為HTML
<
html
lang
=
“zh-CN”
>
//網頁語言為簡體中文
<
head
>
<
meta
charset
=
“UTF-8”
/>
//字元編碼為UTF-8
<
meta
name
=
“viewport”
content
=
“width=device-width, initial-scale=1。0”
/>
//禁止縮放,相容手機
<
title
>
我的網頁
title
>
//網頁標題
head
>
<
body
>
Hello World! //網頁內容
body
>
html
>
3。章節標籤
表示文章/書的層級
標題 h1~h6
:h1~h6標題級數依次遞減,h1級別為最高
章節 section
:
比較而言,
更適用於組織頁面使其按功能(比如迷你地圖、一組文章標題和摘要)分塊。一般的最佳用法是:以標題作為開頭;也可以把一篇
分成若干部分並分別置於不同的
中,也可以把一個區段
分成若干部分並分別置於不同的
中,取決於上下文。
段落 p:
元素表示文字的一個段落,也被稱為HTML段落元素,該元素通常表現為一整塊與相鄰文字分離的文字,或以垂直的空白隔離或以首行縮排。此外,
是塊級元素(塊級元素中可以包含塊級元素和行內元素,總是從新的一行開始,高度、寬度都是可控的,寬度在沒有設定時,預設為100%)。
article 文章:
header 頭部:
footer 腳部 :
定義了頁尾,通常包含版權或法律宣告,有時還包含一些連結。在部分的情況下,頁尾可能包含切片內容的釋出日期,許可證資訊等
,
,
,和
可以有自己的
。儘管有其名稱,但頁尾不一定位於頁面或節的末尾。(©;版權宣告符號)
main 主要內容:
存放每個頁面獨有的內容。每個頁面上只能用一次
,且直接位於
中。最好不要把它巢狀進其它元素。
aside 旁支內容:
包含一些間接資訊(術語條目、作者簡介、相關連結,等等)。
div 劃分:<div>元素
(或
HTML 文件分割槽元素
) 是一個通用型的流內容容器,在不使用CSS的情況下,其對內容或佈局沒有任何影響。
程式碼示例
<
body
>
<
header
>
頂部內容
header
>
<
div
>
<
main
>
<
h1
>
HTML入門學習
h1
>
<
section
>
<
h2
>
第一章
h2
>
<
p
>
應該如何學習HTML,首先要了解章節標籤和內容標籤,然後要熟記並反覆練習。
p
>
<
section
>
<
h3
>
第一節
h3
>
<
p
>
HTML中的章節標籤有“標題h1~h6,章節section,段落p,文章article,頭部header,腳部footer,
主要內容main,旁支內容aside以及劃分div“。
p
>
section
>
section
>
main
>
<
aside
>
補充知識點:李爵士被稱為網際網路之父
aside
>
div
>
<
footer
>
©;
版權宣告
footer
>
body
>
效果對照
4。全域性屬性
所有標籤都有的屬性
class
:以空格分隔的元素的類名列表
class“=”效果展示
class多屬性匹配
contenteditable:
可以讓所有元素可編輯。
使用者可透過自己在頁面編輯改變文件風格
hidden
:隱藏,比display:block優先順序高
id:
全域性唯一屬性,謹慎使用,不會報錯
style
:html 的屬性,不是 css 的樣式,也可以透過 js 設定,js 會覆蓋 html 的 style(js 優先順序最高,js>html>css)。
tabindex:
控制Tab鍵訪問的順序。(0 是最後訪問,-1 是不允許訪問,優先順序1>2>。。。。。)
<
div
class
=
”middle bordered“
tabindex
=
1
>
title:
包含了表示諮詢資訊文字,和它屬於的元素相關。這個資訊通常存在,但絕不必要,作為提示資訊展示給使用者。可用於溢位省略。
滑鼠移動到頂部內容時會出現title中的內容
5。常用的內容標籤
清除樣式(寫在開頭的head之間)
<
style
>
*
{
margin
:
0
;
padding
:
0
;
box-sizing
:
border-box
;}
*
::
after
,
*
::
before
{
box-sizing
:
border-box
;}
h1
,
h2
,
h3
,
h4
,
h5
,
h6
{
font-weight
:
normal
;}
a
{
color
:
inherit
;
text-decoration
:
none
;}
ul
,
ol
{
list-style
:
none
;}
table
{
border-collapse
:
collapse
;
border-spacing
:
0
;
}
style
>
ol+li:
有序列表,ol不能含有除li外的任何子元素
ul+li:
無序列表
dl+dt+dd:
dl是描述的列表,dt是描述的物件,dd是描述的內容
。
pre:
顯示文字中的空白符
code:
包裹的字型等寬,可以與pre搭配寫程式碼
hr:
分割線
br:
換行
a:
超連結
target=”_blank“
用於開啟新視窗(常用於國內)
em:
強調,預設樣式為斜體(語氣)
strong:
重要,預設樣式為加粗(本身內容)
quote:
內聯引用
blockquote:
塊級引用