HTML簡介
HTML簡介
Hyper Text Markup Language （超文本標記語言） 簡寫：HTML
HTML 通過標籤來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。
HTML 文件的書寫規範
<html> 表示整個html 頁面的開始
<head> 頭信息
<title>標題</title> 標題
</head>
<body> body 是頁面的主體內容
頁面主體內容
</body>
</html>
特例
<!DOCTYPE html><!-- 約束，聲明 -->
<html lang="en"><!-- html標籤標識html的開始 lang="zh_CN"表示中文 html標籤中一般分爲兩部分，分別是head和body -->
<head><!-- 表示頭部信息，一般包含三部分內容，title標籤 css樣式，js代碼 -->
<meta charset="UTF-8"><!-- 表示當前頁面使用UTF-8字符集 -->
<title>標題啊</title><!-- 標題 -->
</head>
<body><!-- body主體標籤是整個html頁面顯示的主體內容 -->
hello world
</body>
</html>
HTML 標籤介紹
1.標籤的格式:
<標籤名>封裝的數據</標籤名>
2.標籤名大小寫不敏感。
3.標籤擁有自己的屬性。
i. 分爲基本屬性：bgcolor="red" 可以修改簡單的樣式效果
ii. 事件屬性： onclick="alert('你好！');" 可以直接設置事件響應後的代碼。
4.標籤又分爲，單標籤和雙標籤。
i. 單標籤格式： <標籤名/> br 換行hr 水平線
ii. 雙標籤格式: <標籤名> ...封裝的數據...</標籤名>
★標籤的語法
<!-- ①標籤不能交叉嵌套-->
正確：<div><span>早安</span></div>
錯誤：<div><span>早安</div></span>
<hr />
<!-- ②標籤必須正確關閉-->
<!-- i.有文本內容的標籤： -->
正確：<div>早安</div>
錯誤：<div>早安
<hr />
<!-- ii.沒有文本內容的標籤： -->
正確：<br />
錯誤：<br>
<hr />
<!-- ③屬性必須有值，屬性值必須加引號-->
正確：<font color="blue">早安</font>
錯誤：<font color=blue>早安</font>
錯誤：<font color>早安</font>
<hr />
<!-- ④註釋不能嵌套-->
正確：<!-- 註釋內容--> <br/>
錯誤：<!-- <!-- 這是錯誤的html 註釋--> -->
<hr />
注意事項：
1.html 代碼不是很嚴謹。有時候標籤不閉合，也不會報錯。
標題標記
<h1>一級標題<h1> ,<h2>二級標題<h2> <h3>三級標題<h3> <h4>四級標題<h4> <h5>五級標題<h5> <h6>六級標題<h6>
字體標籤
font標籤是字體標籤,它可以用來修改文本的字體,顏色,大小(尺寸)
color屬性修改顏色
face屬性修改字體
size屬性修改文本大小
特殊字符
需求1：把 <br> 換行標籤 變成文本 轉換成字符顯示在頁面上
常用的特殊字符:
< ===>>>> <
> ===>>>> >
空格 ===>>>>
★超鏈接
a標籤是 超鏈接
href屬性設置連接的地址 "#"不跳轉
target屬性設置哪個目標進行跳轉
_self 表示當前頁面(默認值)
_blank 表示打開新頁面來進行跳轉
<a href="http://www.baidu.com" target="_blank">
★圖像標籤
需求1：使用img標籤顯示一張美女的照片。並修改寬高，和邊框屬性
img標籤是圖片標籤,用來顯示圖片
src屬性可以設置圖片的路徑
width屬性設置圖片的寬度
height屬性設置圖片的高度
border屬性設置圖片邊框大小
alt屬性設置當指定路徑找不到圖片時,用來代替顯示的文本內容
在JavaSE中路徑也分爲相對路徑和絕對路徑.
相對路徑:從工程名開始算
絕對路徑:盤符:/目錄/文件名
在web中路徑分爲相對路徑和絕對路徑兩種
相對路徑:
. 表示當前文件所在的目錄
.. 表示當前文件所在的上一級目錄
文件名 表示當前文件所在目錄的文件,相當於 ./文件名 ./ 可以省略
絕對路徑:
正確格式是: http://ip:port/工程名/資源路徑
錯誤格式是: 盤符:/目錄/文件名
<img src=""/>
★列表標籤
<ul>
<li> </li>
</ul>無序列表
<ol>
<li></li>
</ol>有序列表 其中li是列表項
★表格標籤
table 標籤是表格標籤
border 設置表格標籤
width 設置表格寬度
height 設置表格高度
align 設置表格相對於頁面的對齊方式
cellspacing 設置單元格間距
tr 是行標籤
th 是表頭標籤
td 是單元格標籤
align 設置單元格文本對齊方式
b 是加粗標籤
<table> 表格標籤
<tr>行標籤
<td> </td>單元格標籤
<th></th>表頭標籤
<tr>
</table>
加粗<b></b> align 設置單元格文本對齊方式
cellspacing = "0" 設置單元格間距
colspan ="2"屬性設置跨列
rowspan="2"屬性設置跨行
iframe 框架標籤(內嵌窗口)
<iframe src="demo.html" name="abc"></iframe>在頁面開闢一個空間，顯示另外的頁面
一般配合列表標籤使用。菜單欄選擇
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-NSQngtRk-1587052939119)(D:\YoudaoNote\data\weixinobU7VjkjF_n6Xv4vkiPhhSvWhZsk\f328d5b01b7942bc89b048d4779685ec\360截圖20200410180034096.jpg)]
★表單標籤
form標籤就是表單
input type=text 是文件輸入框 value設置默認顯示內容
input type=password 是密碼輸入框 value設置默認顯示內容
input type=radio 是單選框 name屬性可以對其進行分組 checked="checked"表示默認選中
input type=checkbox 是複選框 checked="checked"表示默認選中
input type=reset 是重置按鈕 value屬性修改按鈕上的文本
input type=submit 是提交按鈕 value屬性修改按鈕上的文本
input type=button 是按鈕 value屬性修改按鈕上的文本
input type=file 是文件上傳域
input type=hidden 是隱藏域 當我們要發送某些信息，而這些信息，不需要用戶參與，就可以使用隱藏域（提交的時候同時發送給服務器）
select 標籤是下拉列表框
option 標籤是下拉列表框中的選項 selected="selected"設置默認選中
textarea 表示多行文本輸入框 （起始標籤和結束標籤中的內容是默認值）
rows 屬性設置可以顯示幾行的高度
cols 屬性設置每行可以顯示幾個字符寬度
form標籤是表單標籤
action屬性設置提交的服務器地址
method屬性設置提交的方式GET(默認值)或POST
表單提交的時候，數據沒有發送給服務器的三種情況：
1、表單項沒有name屬性值
2、單選、複選（下拉列表中的option標籤）都需要添加value屬性，以便發送給服務器
3、表單項不在提交的form標籤中
GET請求的特點是：
1、瀏覽器地址欄中的地址是：action屬性[+?+請求參數]
請求參數的格式是：name=value&name=value
2、不安全
3、它有數據長度的限制
POST請求的特點是：
1、瀏覽器地址欄中只有action屬性值
2、相對於GET請求要安全
3、理論上沒有數據長度的限制
<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login" />
<h1 align="center">用戶註冊</h1>
<table align="center">
<tr>
<td> 用戶名稱：</td>
<td>
<input type="text" name="username" value="默認值"/>
</td>
</tr>
<tr>
<td> 用戶密碼：</td>
<td><input type="password" name="password" value="abc"/></td>
</tr>
<tr>
<td>性別：</td>
<td>
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" checked="checked" value="girl" />女
</td>
</tr>
<tr>
<td> 興趣愛好：</td>
<td>
<input name="hobby" type="checkbox" checked="checked" value="java"/>Java
<input name="hobby" type="checkbox" value="js"/>JavaScript
<input name="hobby" type="checkbox" value="cpp"/>C++
</td>
</tr>
<tr>
<td>國籍：</td>
<td>
<select name="country">
<option value="none">--請選擇國籍--</option>
<option value="cn" selected="selected">中國</option>
<option value="usa">美國</option>
<option value="jp">小日本</option>
</select>
</td>
</tr>
<tr>
<td>自我評價：</td>
<td><textarea name="desc" rows="10" cols="20">我纔是默認值</textarea></td>
</tr>
<tr>
<td><input type="reset" /></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
div - p -span標籤
div標籤 默認獨佔一行
span標籤 它的長度是封裝數據的長度
p段落標籤 默認會在段落的上方或下方各空出一行來（如果已有就不再空）
★結構元素
1.headery 頭部內容結構
2.nav 導航欄內容結構
3.<article> 標籤定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文本，或者是來自論壇的文本。亦或是來自其他外部源內容。
4.aside標籤定義 article 以外的內容。aside 的內容應該與 article 的內容相關
5.<section> 標籤定義文檔中的節（section）。比如章節、頁眉、頁腳或文檔中的其他部分。
6。footer標籤定義 section 或 document 的頁腳。典型地，它會包含創作者的姓名、文檔的創作日期以及/或者聯繫信息。
分組元素
1.figure與figcaption標籤用於對元素進行組合
2.hgroup
頁面交互元素
1.details與summary
2.progress （進度條） 搭配value：已完成工作量 max：總共工作量
3.meter用於投票等進度條
文本層次語義元素
1.time（時間日期）
2.mark 標記主要字體（添加底紋）
3.cite用於文檔參考文獻說明
全局屬性
1.draggable 可拖動圖片
2.hidden 隱藏域
3.spellcheck 文本確認檢查
4.contenteditable 設置可編輯內容（列表標籤）