HTML基礎(chǔ)

paulli3 發(fā)布于2019-08-01 15:58 / 495人閱讀

摘要：是什么官方給出的答案超文本標(biāo)記語言。很多人看了這個解釋后，還是懵了。請在需要突出顯示文本時使用此標(biāo)簽。屬性間用空格分開。注意以及元素等元素沒有前面的屬性。自定義屬性是由用戶自己定義，只要符合屬性的格式就會生效。

HTML是什么？官方給出的答案：超文本標(biāo)記語言。很多人看了這個解釋后，還是懵了。其實也沒有這么復(fù)雜，你直接把HTML理解成是瀏覽器能識別的語言就行了。

第一個例子

新建index.html，并輸入以下代碼：




  
  Document

這個就是最簡單的html結(jié)構(gòu)

代碼說明

1、所有的HTML文檔都應(yīng)該有一個標(biāo)簽
2、標(biāo)簽可以包含兩個部分：和
3、標(biāo)簽包含整個文檔的一般信息，比如：title、meta、link等
4、頁面上能看到的內(nèi)容都是放在標(biāo)簽里

標(biāo)簽介紹

1、有些標(biāo)簽是成對形式出現(xiàn)，有些是自閉合形式出現(xiàn)。如：

、等
2、究竟哪些標(biāo)簽是成對出現(xiàn)，哪些是自閉合，這就需要平時我們死記了
3、根據(jù)換行效果，可把標(biāo)簽元素劃分為：行內(nèi)元素和塊級元素

塊級元素

div - 常用塊級容易，也是css layout的主要標(biāo)簽

p - 段落

ul - 非排序列表

table - 表格

h1 - 大標(biāo)題

h2 - 副標(biāo)題

h3 - 3級標(biāo)題

h4 - 4級標(biāo)題

h5 - 5級標(biāo)題

h6 - 6級標(biāo)題

form - 交互表單

hr - 水平分隔線

pre - 格式化文本

dl - 定義列表

ol - 排序表單

div元素

段落元素

這是一個段落

列表元素



 Coffee
 Milk

瀏覽器效果：

Coffee

Milk

有序列表元素



 Coffee
 Milk

瀏覽器效果：

Coffee

Milk

行內(nèi)元素

a - 錨點

br - 換行

cite - 引用

code - 計算機代碼(在引用源碼的時候需要)

em - 強調(diào)

i - 斜體

img - 圖片

input - 輸入框

kbd - 定義鍵盤文本

label - 表格標(biāo)簽

select - 項目選擇

small - 小字體文本

span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊

strong - 粗體強調(diào)

textarea - 多行文本輸入框

HTML5新增標(biāo)簽

header - 定義一個頁面或一個區(qū)域的頭部

footer - 定義一個頁面或一個區(qū)域的頁腳

nav - 定義導(dǎo)航鏈接

section - 定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分

article - 定義獨立的內(nèi)容，如論壇帖子、報紙文章、博客條目、用戶評論等內(nèi)容

aside - 定義兩欄或多欄頁面的側(cè)邊欄內(nèi)容，如聯(lián)系我們、客服、網(wǎng)站公告等內(nèi)容

audio - 定義音頻內(nèi)容，如音樂或其他音頻流

canvas - 定義圖形，如圖表和其他圖像

aside - 定義兩欄或多欄頁面的側(cè)邊欄內(nèi)容，如聯(lián)系我們、客服、網(wǎng)站公告等內(nèi)容

command - 標(biāo)記定義一個命令按鈕，比如單選按鈕、復(fù)選框或按鈕

datalist - 定義選項列表，需與 input 元素配合使用，通過input 元素的 list 屬性來綁定，用來定義 input 可能的值

details - 用于描述文檔或文檔某個部分的細(xì)節(jié)。

embed - 定義外部的可交互的內(nèi)容或插件。

figure - 定義一組媒體內(nèi)容（圖像、圖表、照片、代碼等）以及它們的標(biāo)題

hgroup - 定義文件中一個區(qū)塊的相關(guān)信息，使用 hgroup 標(biāo)簽對網(wǎng)頁或區(qū)段（section）的標(biāo)題進(jìn)行組合

mark - 定義有標(biāo)記的文本。請在需要突出顯示文本時使用此標(biāo)簽。

元素的屬性

元素的屬性就是元素本身的東西。格式：屬性名="值"。屬性間用空格分開。

說明

1、html屬性分為：標(biāo)準(zhǔn)屬性和用戶自定義屬性。
2、標(biāo)準(zhǔn)屬性是由系統(tǒng)定義的，比如：id、class、style、title。
（注意：base、head、html、meta、param、script、style 以及 title 元素等元素沒有前面的屬性。）
3、自定義屬性是由用戶自己定義，只要符合屬性的格式就會生效。
在HTML5中添加了data-*的方式來自定義屬性。比如：data-name="主容器"