HTML HTML 超文本標記語言 HTML特征: 對換行和空格不敏感 空白摺疊 1.1 HTML標簽 標簽也稱為標記。 標簽的種類： 1.雙閉合標簽 2.單閉合標簽 1.1.1 head標簽 meta 提供基本網站元信息的標簽 title 顯示網站的標題 link 鏈接css資源文件、網站圖標 s ...
HTML
HTML 超文本標記語言
HTML特征:
- 對換行和空格不敏感
- 空白摺疊
1.1 HTML標簽
標簽也稱為標記。
標簽的種類：
- 1.雙閉合標簽
- 2.單閉合標簽
1.1.1 head標簽
meta 提供基本網站元信息的標簽
<meta charset="UTF-8"> <!--標簽的屬性：使用的編碼—'utf-8'-->title 顯示網站的標題
link 鏈接css資源文件、網站圖標
<link rel="stylesheet" href="css/index.css">script 鏈接腳本js(JavaScript)文件
<script src="js/index.js">style 內嵌樣式
1.1.2 body標簽
1.1.2.1 標題標簽
h1~h6標題標簽
例：
標題1
1.1.2.2 段落標簽
p標簽 段落標簽
<p>
人們感動於老英雄淡泊名利無私奉獻的精神，敬佩老黨員一輩子深藏功名、堅守初心的境界大家紛紛表示。
</p> ；空格字元
1.1.2.3 超鏈接標簽
a （anchor 錨點）超鏈接標簽
- href :
- 鏈接到一個新的地址
- 回到頂部
- 跳轉郵箱
- 下載文件
- title 滑鼠懸浮上的標題
- style 行內樣式
- target 目標
- 預設是_self ，在當前頁面中打開新的鏈接
- _blank 在新的空白頁面打開新的鏈接
<a href="https://www.apeland.cn" style="text-decoration:none;color:red; " title="小圓圈">小猿圈</a>
<!--text-decoration:none 去掉鏈接的下劃線--><h6 id="top"></h6>
<a href="#top">回到頂部</a> <--跳轉到 id="top" 處-->1.1.2.4 圖片標簽 img
- src 鏈接的圖片資源的地址
- title 滑鼠懸浮時顯示的標題
- style
- alt 圖片載入失敗的時候顯示的標題
<img src="images/timg.jpg" alt="校花" width="200" height="300"><--width 圖片寬度，height 圖片高度-->
圖片可以和超鏈接合用 a + img:
<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%A0%A1%E8%8A%B1&step_word=&hs=2&" title="美眉">
<img src="images/timg.jpg" alt="校花" width="200">
</a>1.1.2.5 字體標簽
<u> </u> 下劃線
<b> </b> 加粗
<strong> </strong> 加粗
<em> </em> 斜體
<i> </i> 斜體
1.1.2.6 特殊字元
：空格 （non-breaking spacing，不斷打空格）<：小於號（less than）>：大於號（greater than）&：符號&"：雙引號'：單引號©：版權©™：商標™
1.1.2.7 列表標簽
1.ul無序列表標簽
ul — unordered list
它的子標簽是li
type屬性：（預設實心圓）
- square 方形
- circle 圓心
<h3>我的teacher</h3> <ul type="square"> <li> <a href="">小米手機</a> </li> <li>女神</li> <li>太白</li> <li>mjj</li> <li>江老闆</li> </ul>
2.ol有序列表標簽
ol — ordered list
- 它的子標簽也是li
- type屬性：(預設1，2，3……)
- a
- A
- i
- I
- start屬性：定義開始的位置
<h3>我的課程</h3> <ol type="i"> <li>python</li> <li>web前端</li> <li>java</li> <li>linux</li> </ol>
1.1.2.8 表格標簽 table
- th定義表頭
- tr定義表行
- td定義表單元格數據
<!--border 外邊框，cellspacing外邊框間的間隙，width寬度填充整個屏幕-->
<table border="1" cellspacing="0" width="100%">
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
<td>sex</td>
</tr>
<tr>
<td>1</td>
<td>沛齊</td>
<td>19</td>
<td>女</td>
</tr>
</table>1.1.2.9 表單標簽form
<1.>form表單
action 定義表單被提交時發生的動作,提交給伺服器處理程式的地址(ip、埠);如果是空的字元串，它表示當前伺服器地址
method
作用：定義表單提交數據時的方式
提交的方式：
get
預設值，明文提交，所提交的數據是可以顯示在地址上，安全性低
提交數據有大小限制，最大為2KB
post
隱式提交-所提交的內容，不會顯示到地址欄上，安全性高
無大小限制
<2.>表單控制項分類
(1).input 組元素
1.type 控制項的類型
text 單行文本輸入框，明文顯示用戶輸入的數據
<p id="username"> <input type="text" name="name" value=""> </p>password 密碼框，密文顯示用戶輸入的數據
<p id="password"> <input type="password" name="pwd"> </p>radio 單選框
- 產生互斥效果，給每個單選按鈕設置相同的name屬性值
- 如何預設選中，給單選按鈕添加checked屬性
<p> <input type="radio" name="sex" checked = 'checked'>男 <input type="radio" name="sex">女 </p>checkbox 多選框
預設選中添加checked屬性
<p> <input type="checkbox" name="a" value="唱歌"> 唱歌 <input type="checkbox" name="b" value="跳舞"> 跳舞 <input type="checkbox" name="c" value="音樂"> 音樂 </p>file 上傳文件所用
<input type="file">datetime
submit 功能固定化，負責將表中的表單控制項提交給服務端 — 提交按鈕
<!--預設為提交按鈕--> <input type="submit"> <--登錄按鈕--> <input type="submit" value="登錄">
2.name 控制項的名稱，提交伺服器的鍵值對的 name
3.value 控制項的值，提交伺服器的鍵值對的 value
（2).select 下拉列表 ： multiple
name 下拉列表的名字
預設選中添加checked屬性
option value
<select name="fav" multiple> <option value="smoke">吃飯</option> <option value="drink" selected>睡覺</option> <!--預設選中項--> <option value="tangtou">打豆豆</option> <option value="tangtou">唱</option> <option value="tangtou">跳</option> <option value="tangtou">rup</option> <option value="tangtou">音樂</option> <option value="tangtou">燙頭</option> <option value="tangtou">燙頭</option> </select>
(3).textarea標簽
textarea 標簽定義多行的文本輸入控制項。
文本區中可容納無限數量的文本，其中的文本的預設字體是等寬字體（通常是 Courier）。
可以通過 cols 和 rows 屬性來規定 textarea 的尺寸
- name
value - cols 列
- rows 行
<textarea name="" id="" cols="30" rows="10"></textarea>1.1.2.10 div標簽
div（division：分割）標簽稱為盒子標簽
div標簽：把網頁分割成不同的獨立的邏輯區域
<div class="top_l">
<a href="#">小米商城</a>|
<a href="#">MIUI</a>|
<a href="#">lot</a>
</div>如何讓文本垂直和水平居中？
- 讓行高等於盒模型的高度實現垂直居中
- 使用text-align:center；實現文本水平居中
<style>
div{
width:200px;
height: 60px;
background-color: red;
text-align:center;
line-height: 60px;
}
</style>
<div>
wusir
</div>1.1.2.11 span標簽
span標簽: 小區域標簽,在不影響文本正常顯示的情況下，單獨設置對應的樣式
<div class="top_l">
<a href="#">小米商城</a>
<span class="sep">|</span>
<a href="#">MIUI</a>
<span class="sep">|</span>
<a href="#">lot</a>
<span class="sep">|</span>
<a href="#">雲服務</a>
</div><style>
span.active{
font-weight:bold;
}
</style>
<p>
<span class='active'>央視網消息</span>（新聞聯播）：中共中央總書記、國家主席28日上午在北京人民大會堂親切會見出席第九屆世界華僑華人社團聯誼大會和中華海外聯誼會五屆一次理事大會的全體代表，代表黨中央、國務院向大家表示熱烈歡迎和衷心祝賀，向世界各地華僑華人致以誠摯問候。
</p>1.1.2.12 lable標簽
lable標簽：它中的for屬性跟表單控制項的id屬性有關聯
<form action="">
<label for="username">用戶名：</label>
<input type="text" id="username">
<label for="pwd">密碼：</label>
<input type="text" id="pwd">
</form>1.1.2.13 br標簽、hr標簽
<br> 換行標簽
<hr> 分割線標簽
1.2 HTML標簽的嵌套關係
1.塊級標簽（又叫行級標簽）
- 1.獨占一行
- 2.可以設置寬高，如果不設置寬，預設是父標簽的100%寬度
常用的塊級標簽有: h1~h6 、ul 、ol 、li 、form 、table 、tr 、p 、div
2.行內標簽（也叫內聯元素）
- 1.在一行內顯示
- 2.不可以設置寬高，如果不設置寬高，預設是字體的大小
常用的行內標簽有: b 、strong 、i 、em 、a 、td 、span
3.行內塊標簽
行內塊是屬於行內標簽的
- 1.在一行內顯示
- 2.可以設置寬高
行內塊標簽：input 、img
4.在網頁中：行內轉塊和行內塊是非常實用的
- 我們可以通過display屬性進行強制修改規則。
- 顯示方式 display :
- inline 顯示行內
- inline-block 顯示行內塊
- block 顯示塊
<style>
.box{
width: 200px;
height: 200px;
background-color: yellow;
display: inline;
}
a{
width: 100px;
height: 40px;
background-color: red;
/*顯示方式： block 顯示塊，inline 顯示行內 inline-block 顯示行內塊*/
display: inline-block;
/*文本排列方式：left-靠左 center-居中 right-靠右*/
text-align: center;
/*行高：一行的高度。當行高=盒子模型的高度 實現垂直居中*/
line-height: 40px;
/*文本修飾：none-無修飾(去除下劃線)，underline-下劃線 ，line-through 刪除線 ，over line-上劃線*/
text-decoration: underline;
color: #333333;
}
</style>
<body>
<p class="box">wusir</p>
<a href="">百度一下</a>
<del>aaaaa</del> /*刪除線*/
</body>5.嵌套關係：
- 1.塊級標簽可以嵌套塊級和行內以及行內塊
- 2.行內標簽儘量不要嵌套塊級
- 3.p標簽不要嵌套div，也不要嵌套p，可以嵌套 a / img / 表單控制項
