html入門基礎(詳解）
一、HTML
1.HTML：是一種用于創建網頁的超文本標記語言(Hyper Text Markup Language)
-
“超文本”就是指頁面可以包含圖片，鏈接，甚至音樂，視頻，程式等非文字元素，
-
HTML語言是Web的基礎，可以說Internet是建立在HTML基礎之上的，
-
HTML5是新一代HTML標準，大部分瀏覽器已經支持，
二、HTML5基本結構
<!DOCTYPE html>//html5網頁宣告
<html lang="en"> //<html>元素是HTML頁面根元素
//lang屬性：宣告當前頁面的語言型別，“en"英文，”zh“中文
<head>
<meta charset="utf-8" />//<meta />設定網頁編碼格式位utf-8
<title>檔案標題</title>//<title>設定檔案標題
</head>
<body>
....頁面內容（各種標簽）
</body>
</html>
三.基本標簽
1、div和span
<div>標簽：塊級元素，可用于組合其他HTML元素的容器- div沒有特定的含義，通常用于對檔案結構進行邏輯上的分塊
- div的前后會換行
<span>標簽：
-
行內元素（行內元素），可用作文本的容器
-
span沒有特點的含義
-
span的前后不會換行
-
span示例
<p>她有一雙 <span style="color:blue">藍色</span> 的眼睛</p>
2、文本相關
- 標題標簽：
<h1>-<h6>
<h1 align="center">歡迎光臨我的主頁</h1>
<h2 style="text-align:center;">歡迎光臨我的主頁</h2>
<h3>歡迎光臨我的主頁</h3>
<h4>歡迎光臨我的主頁</h4>
<h5>歡迎光臨我的主頁</h5>
<h6>歡迎光臨我的主頁</h6>
- 段落標簽，換行標簽，label 標簽：
段落標簽：<p align="center/left/right"> 一段文字 </p>
換行標簽：<br> 或者 <br/>
特別提醒：不要在<p>里嵌套塊級元素，如嵌套p或div
<label> 標簽：
<label for="…"> 標簽文字 </label>
for屬性：系結一個控制元件id值，當用戶點擊label標簽內文本，就會將焦點
切換到系結的控制元件上，
<label for="username">用戶名</label>
<input type="text" id="username" />
- 點擊"用戶名"時，文本框將獲得焦點
嵌套寫法：嵌套時可省略 for 屬性
<label> 用戶名<input type="text" /> </label>
格式標簽：部分
粗體：<b> 斜體：<i> 下劃線：<u> 洗掉線：<strike>
下標：<sub> 上標：<sup>
小號字：<small> 大號字：<big>
強調(加粗)：<strong> 強調(斜體)：<em>
突出顯示(黃色背景)：<mark>
**HTML注釋： <!-- 注釋文字 -->**
3.圖片
<img src="url"width="寬度值" height="高度值"alt="說明" />
無法載入影像時顯示alt資訊
寬度值和高度值單位是像素點px
<img src="https://s3.pstatp.com/toutiao/static/img/logo.271e845.png" alt="今日
頭條" height="50px" width="200px">
運行截圖：
4. 超鏈接
超鏈接標簽： <a href="url"> 鏈接文字 </a>
<a> 標簽定義超鏈接，用于從一張頁面鏈接到另一張頁面，
<a> 元素最重要的屬性是 href 屬性，它指示鏈接的目標，
<a href="http://www.wust.edu.cn" target="_blank" >武漢科技大學</a>
target="_blank"新開視窗打開頁面
運行截圖：
超鏈接的 URL，可能的值：
- 絕對 URL - 指向另一個站點（比如 href=“http://www.example.com/index.htm”）
- 相對 URL - 指向站點內的某個檔案（href=“index.htm”）
- 錨 URL - 指向頁面中的錨（href="#top"）
5、串列
- 無序串列ul
<ul>
<li><a href="http://www.wust.edu.cn">武漢科技大學</a></li>
<li><a href="http://www.hust.edu.cn">華中科技大學</a></li>
<li><a href="http://www.whu.edu.cn">武漢大學</a></li>
</ul>
運行截圖：
- 有序串列ol
默認序號從1開始
<ol start="100">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
運行截圖：
6.HTML表格
border邊框厚度，width/height表格寬度/高度
rowspan="2"表格單元橫跨兩行的表格：
colspan="2"表格單元橫跨兩列的表格
<table border="1" width="值"height="=值">
<caption>
<!--表格標題-->
</caption>
<tr>
<th> </th> <th> </th><!--表頭行-->
</tr>
<tr>
<td> </td> <td> </td><!--資料行-->
</tr>
</table>
表格示例
<table border=1 width=600>
<caption>學生名單</caption>
<tr>
<th>學號</th> <th>姓名</th> <th>院系</th>
</tr>
<tr>
<td>2017001</td> <td>張無忌</td> <td>計算機學院</td>
</tr>
<tr>
<td>2017002</td> <td>令狐沖</td> <td>計算機學院</td>
</tr>
</table>
運行截圖：
<table border=1 width=600>
<caption>專業設定表及在校人數表</caption>
<tr>
<th>錄名</th> <th colspan="4">專業人數</th>
</tr>
<tr>
<th rowspan="6">計算機學院</th>
<th colspan="4">計算機科學技術專業</th>
</tr>
<tr>
<th>16級</th><th>17級</th><th>18級</th>
<th>19級</th>
</tr>
<tr>
<th>150人</th> <th>150人</th> <th>200人</th> <th>220人</th>
</tr>
<tr>
<th colspan="4">軟體工程專業</th>
</tr>
<tr>
<th>16級</th><th>17級</th><th>18級</th>
<th>19級</th>
</tr>
<tr>
<th>80人</th> <th>80人</th> <th>90人</th> <th>90人</th>
</tr>
<tr>
<th rowspan="3">外國語學院</th>
<th colspan="4">英語專業</th>
</tr>
<tr>
<th>16級</th><th>17級</th><th>18級</th>
<th>19級</th>
</tr>
<tr>
<th>60人</th> <th>80人</th> <th>90人</th> <th>90人</th>
</tr>
</table>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/145836.html
標籤：其他
上一篇：c語言字串的初始化