HTML學習(一)
內容預覽
1.HTML的概念與基本用法
2.HTML的一些擴充套件
百度百科:
HTML: Hyper Text Markup Language 超文字標記語言
說人話:
HTML就是一款功能比".txt"檔案更強大的語言,它自定義了一些標籤可以使頁面做到純文字語言做不到的事情。比如:<image>標籤可以內嵌圖片,又如<table>標籤可以展示表格資料。
大家都用過.txt檔案,它是一個純文字語言,裡面只能使用一些中文語言、英文語言以及一些常見的符號,不能插入圖片、不能使用連結等等。而HTML就是功能比純文字語言更強大的語言,這就是“超文字”的來源。
其次,HTML自定義了一些標籤,如<image>、<table>標籤等,可以在頁面內展示圖片資料表格資料等,這就是“標記”的來源。因此HTML是一個“超文字標記語言”。
1.2.HTML的作用是什麼?
記住這幾句話:
HTML: 決定了頁面的框架 -------》 用來展示資料 ---------》相當於一堆傢俱隨意堆砌的房子
CSS: 用來美化我們的頁面 -------》 用來美化頁面 --------》讓房子內的傢俱有條理的擺放
JS: 提高使用者的互動體驗--------》使頁面具有簡單的動態效果 --------》智慧傢俱,住的更舒適
1.3.HTML語法規範
<!DOCTYPE html>
<html>
<head>
<title>文件的標題</title>
</head>
<body>
文件的內容......
</body>
</html>
1. 最上面是一個文件宣告
2. 根標籤 html
3. html檔案主要包含兩部分. 頭部分和體部分
頭部分 : 主要是用來放置一些頁面資訊
體部分 : 主要來放置我們的HTML頁面內容
4. 通過標籤來對內容進行描述,標籤通常都是由開始標籤和結束標籤組成
5. 標籤不區分大小寫, 官方建議使用小寫
注意:
1.3.1 .關於'<!DOCTYPE>'的定義
'<!DOCTYPE>' 宣告必須是 HTML 文件的第一行,位於 <html> 標籤之前。
'<!DOCTYPE> 宣告不是 HTML 標籤;它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。
在 HTML 4.01 中,<!DOCTYPE> 宣告引用 DTD,因為 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則,這樣瀏覽器才能正確地呈現內容。
HTML5 不基於 SGML,所以不需要引用 DTD。
提示:請始終向 HTML 文件新增 <!DOCTYPE> 宣告,這樣瀏覽器才能獲知文件型別。
1.3.2.HTML 4.01 與 HTML5 之間的差異
在 HTML 4.01 中有三種 <!DOCTYPE> 宣告。在 HTML5 中只有一種:
<!DOCTYPE html>
2.1 字型擴充套件
b : 加粗
i : 斜體
strong: 加粗, 帶語義標籤
em: 斜體, 帶語義
2.2 檔案路徑擴充套件
-
相對路徑
./ 代表的是當前路徑 ../ 代表的上一級路徑 ../../ 上上一級路徑
2.3 表格擴充套件
表格標籤table
table標籤:
常用的屬性:
bgcolor : 背景色
width : 寬度
height : 高度
align : 對齊方式
tr 標籤
td 標籤
合併單元格:
colspan : 跨列操作
rowspan : 跨行操作
注意: 跨行或者跨列操作之後,被佔掉的格子需要刪除掉
表格的巢狀:
在td中可以巢狀一個表格
<!--
表單標籤
action : 直接提交的地址
method :
get 方式 預設提交方式 ,會將引數拼接在連結後面 , 有大小限制 ,4k
post 方式 會將引數封裝在請求體中, 沒有這樣的限制
input :
type: 指定輸入項的型別
text : 文字
password : 密碼框
radio : 單選按鈕
checkbox : 複選框
file : 上傳檔案
submit : 提交按鈕
button : 普通按鈕
reset : 重置按鈕
hidden : 隱藏域
date : 日期型別
tel : 手機號
number : 只允許輸入數字
placeholder : 指定預設的提示資訊
name : 在表單提交的時候,當作引數的名稱
id : 給輸入項取一個名字, 以便於後期我們去找到它,並且操作它
textarea : 文字域, 可以輸入一段文字
cols : 指定寬度
rows : 指定的是高度
select : 下拉列表
option : 選擇項
-->