TITLE：HTML學習筆記
為初學者准備的：HTML速成
HTML Crash Course For Beginners
Part Ⅰ
超文本標記語言
不是編程語言
告訴瀏覽器如何構造網頁
<p>Lorem ipsum dolor sit amet</p>
起始標簽+內容+結束標簽
Part Ⅱ
<!DOCTYPE html> ——> 用來解釋文檔的類型
<html>
<head>
</head>
<body>
</body>
</html>
Part Ⅲ
塊級元素
在頁面以塊的形式展現
出現在新的一行
占全部寬度
<div></div>
<h1>...
<p>
內聯元素
通常在塊級元素內
不會導致文本換行
只占必要的部分寬度
<a>
<img>
<em>
<strong>
<a href="url" target="_blank">Lorem</a>
列表
list
<!---無序列表-->
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
<li>list item4</li>
<li>list item5</li>
</ul>
<!---有序列表-->
<ol>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
<li>list item4</li>
<li>list item5</li>
</ol>
表格
<table>
<thead>
<th>first name</th>
<th>last name</th>
<th>age</th>
</thead>
</table>
JavaWeb教程-HTML零基礎入門
第一節 html簡介
什么是html
超文本標記語言
html能做什么
通過標記標簽描述網頁
html書寫規范
標簽是以尖括號包圍的關鍵字
格式：屬性=‘屬性值’ //多個屬性之間空格隔開
不區分大小寫，建議全小寫
第二節 結構標簽
網頁基本結構
<html>:根標簽
<head>:網頁頭標簽
<title></title>:頁面的標題
</head>
<body></bodybody>:網頁正文
嵌套結構
帶/的是結束部分，沒有/是開始部分
| 屬性名 | 代碼 | 描述 |
|---|---|---|
| text | 設置網頁正文中所有文字的顏色 | |
| bgcolor | 設置網頁的背景色 | |
| background | 設置網頁的背景圖 |
顏色的兩種表示方式
01.英文單詞 eg：res
02.16進制表示顏色 eg：#000000
demo 01
<!DOCTYPE html>
<html>
<head>
<!--用來設置編碼方式，“UTF-8”涵蓋中文字符-->
<title></title> <!--標題-->
</head>
<body text="red" bgcolor="bisque" background="C:\Users\86152\Downloads\HBuilderX.3.1.12.20210428\HBuilderX\readme\logo.png">
hello，world！
</body>
</html>
第三節 RGB顏色和相對路徑
demo 01
<!DOCTYPE html>
<html>
<head>
<!--用來設置編碼方式，“UTF-8”涵蓋中文字符-->
<title></title> <!--標題-->
</head>
<body text="red" bgcolor="#ff" background="adress">
hello，world！
</body>
</html>
地址：..表示向上一級去找父目錄 eg：../pic/logo.png
程序員計算器
HEX——十六進制
DEC——十進制
OCT——八進制
BIN——二進制
第四節 排版標簽
可用於實現簡單的頁面布局
注釋標簽：
換行標簽：
段落標簽：
文本文字
特點：段與段之間有空行
屬性：align對齊方式（left、center、right）
水平線標簽:
屬性
——width：水平線的長度（兩種：第一種-像素表示；第二種-百分比表示）
——size：水平線的粗細（像素表示，eg：10px）
——color：水平線的顏色
——align：水平線的對齊方式
demo 02
<!DOCTYPE html>
<html>
<head>
<title>排版標簽</title>
</head>
<body>
<!--換行-->
換<br>行
<!--段落-->
<p>段落1</p>
<p align="center">段落2</p>
<p align="right">段落3</p>
<!--水平線-->
<hr width="50%" align="left" color="#f00" size="7">
</body>
</html>
第五節 塊標簽和文字標簽
demo 03
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>div標簽1<font color="#f00" size="5">div標簽1</font></div>
<div>div標簽2</div>
<div>div標簽3</div>
<!--div寬度默認是其外層容器的寬度-->
<span>span標簽1</span>
<span>span標簽2</span>
<span>span標簽3</span>
</body>
</html>
使用CSS+div是現下流行的一種布局方式
| 標簽 | 代碼 | 描述 |
|---|---|---|
| div | 行級塊標簽，獨占一行，換行 | |
| span | 行內塊標簽，所有內容都在同一行 |
，處理網頁中文字的顯示方式
| 屬性名 | 代碼 | 描述 |
|---|---|---|
| size | 用於設置字體的大小、最小1號，最大7號 | |
| color | 用於設置字體的顏色 | |
| face | 用於設置字體的樣式 |
第六節 文本格式化標簽和標題標簽
文本格式化標簽
使用標簽實現標簽的樣式處理
| 標簽 | 代碼 | 描述 |
|---|---|---|
| b | 粗體標簽 | |
| strong | 加粗 | |
| em | 強調字體 | |
| i | 斜體 | |
| small | 小號字體 | |
| big | 大號字體 | |
| sub | 上標標簽 | |
| sup | 下標標簽 | |
| del | 刪除線 |
標題標簽
隨着數字增大文字逐漸變小，字體是加粗的，內置字號，默認占據一行
| 標簽 | 代碼 | 描述 |
|---|---|---|
| h1 | 1號標題，最大字體 | |
| h2 | 2號標題 | |
| h3 | 3號標題 | |
| h4 | 4號標題 | |
| h5 | 5號標題 | |
| h6 | 6號標題，最小字體 |
demo 04
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<b>粗體</b><Strong>粗體</strong>
<br>
<em>斜體</em><i>斜體</i>
<big>大號</big><small>小號</small>
上標：5m<sup>2</sup> 下標：H<sub>2</sub>O
<br>
<del>刪除</del>
<h1>最大</h1>
<h2>二</h2>
<h3>三</h3>
<h4>四</h4>
<h5>五</h5>
<h6>六</h6>
</body>
</html>
第七節 列表標簽
無序列表：使用一組無序的符號定義，
<ul type>
<li></li>
</ul>
| 屬性值 | 描述 | 用法舉例 |
|---|---|---|
| circle | 空心圓 |
|
| disc | 實心圓 |
|
| square | 黑色方塊 |
|
有序列表：使用一組有序的符號定義，
<ol type="a" start="1">
<li></li>
</ol>
| 屬性值 | 描述 | 用法舉例 |
|---|---|---|
| 1 | 數字類型 |
|
| A | 大寫字母類型 |
|
| Ⅰ | 大寫羅馬數字類型 |
|
| a | 小寫字母類型 |
|
| i | 小寫羅馬數字類型 |
|
demo 05
<!DOCTYPE html><html> <head> <title></title> </head> <body> 無序列表<br> <ul type="circle"> <li>規格嚴格</li> <li>功夫到家</li> </ul> 有序列表<br> <ol type="i" start="4"> <li>哈工大</li> <li>哈哈哈0</li> <li>哈哈哈1</li> <li>哈哈哈2</li> <li>哈哈哈3</li> <li>哈哈哈4</li> </ol> 嵌套列表<br> 無序列表<br> <ul type="circle"> <li>規格嚴格</li> <ol type="i" start="4"> <li>哈工大</li> <li>哈哈哈0</li> <li>哈哈哈1</li> <li>哈哈哈2</li> <li>哈哈哈3</li> <li>哈哈哈4</li> </ol> <li>功夫到家</li> </ul> </body></html>
第八節 圖形標簽
在頁面指定位置處中引入一幅圖片，
| 屬性名 | 描述 |
|---|---|
| src | 引入圖片的地址 |
| width | 圖片的寬度 |
| height | 圖片的高度 |
| border | 圖片的邊框 |
| align | 與圖片對齊顯示方式 |
| alt | 提示信息 |
| hspace | 在圖片的左右設定空白 |
| vspace | 在圖片的上下設定空白 |
demo 06
第九節 鏈接標簽
第十節 基本表格標簽
第十一節 基本form表單
第十二節 input標簽
第十三節 select標簽和textarea標簽介紹
第十四節 框架集