大綱

HTML是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言
- HTML指的是超文本標(biāo)記語(yǔ)言
- 不是一種編程語(yǔ)言,而是一種標(biāo)記語(yǔ)言
- 標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽
- 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
HTML標(biāo)簽
在某些場(chǎng)合也稱(chēng)為元素
標(biāo)簽必須在<>內(nèi)
標(biāo)簽可以嵌套
多數(shù)標(biāo)簽是成對(duì)出現(xiàn)的(比如img就是一個(gè),這種就不能嵌套)
標(biāo)簽中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽,第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
開(kāi)始和結(jié)束標(biāo)簽也稱(chēng)為開(kāi)放標(biāo)簽和閉合標(biāo)簽
-
常見(jiàn)標(biāo)簽
- div 作為布局容器
- a 可點(diǎn)擊的鏈接
- img 顯示圖片
- table,tr,td 表格
- ul,ol 列表
- h1-h6 1-6級(jí)標(biāo)題
- br/ 換行
- 表單類(lèi)
- input
如圖提交按鈕(sumlit代表的是提交鍵)
(value指的是按鈕內(nèi)的內(nèi)容).pngimage.pngcheckbox代表多選框,radio代表的是單選框.png -
textarea 多行文本框
如圖
-
select 下拉列表(下拉選擇選項(xiàng))
image.png效果如圖所示 -
form(可以真正地提交點(diǎn)擊表格內(nèi)容)
如圖
(可以在表格里填寫(xiě)內(nèi)容后點(diǎn)擊方框,可以提交內(nèi)容)
如圖
HTML屬性
-
為每個(gè)標(biāo)簽賦予特定的功能
如圖 公共屬性
1.id
2.class
3.title私有屬性
-
屬性總是以名稱(chēng)/值對(duì)的形式出現(xiàn),比如name=“value”
如圖 屬性總是在HTML元素的開(kāi)始標(biāo)簽中規(guī)定
-
屬性實(shí)例
-
HTML鏈接由<a>標(biāo)簽定義,鏈接的地址在href屬性中指定
<a >This is a link</a>
<u>如圖所示</u>(有屬性就可以點(diǎn)擊)如圖 <h1> 定義標(biāo)題的開(kāi)始。
<h1 align="center"> 擁有關(guān)于對(duì)齊方式的附加信息。<body> 定義 HTML 文檔的主體。
<body bgcolor="yellow"> 擁有關(guān)于背景顏色的附加信息。<table> 定義 HTML 表格。
<table border="1"> 擁有關(guān)于表格邊框的附加信息。
-
屬性和屬性值對(duì)大小寫(xiě)不敏感
屬性值影視中被包括在引號(hào)內(nèi),最常用的是雙引號(hào),部分用單引號(hào)
HTML完整結(jié)構(gòu)
* html
放head和body

* head
1. 描述文檔屬性,文檔說(shuō)明(title)
2. 聲明網(wǎng)頁(yè)編碼

* body
真正用來(lái)寫(xiě)內(nèi)容的

整體結(jié)構(gòu)框圖如圖所示

實(shí)戰(zhàn)
附:留言板表格雛形代碼













