HTML介紹
HTML
HTML全稱 HyperText Mackeup Language ,超文本標記語言
什么是超文本
比如網頁的超鏈接、圖片、音頻、視頻都稱為超文本
HTML結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
打開pycharm, 我們可以新建一個HTML File文件, pycharm會自動為我們創建好HTML格式
接下來我們一點點剖析這段代碼
文檔聲明頭
准確的說,!DOCTYPE html並不是HTML標簽,它是指明了該頁面使用哪個HTML版本進行編譯
html標簽
<html></html>是文檔的開始標記和結束的標記.是HTML頁面的根元素,在它們之間是文檔的頭部(head)和主體(body)
head標簽
<head></head>定義了HTML文檔的開頭部分,它們之間的內容不會在瀏覽器的文檔窗口顯示.包含了文檔的元(meta)數據
title標簽
<title></title>定義了網頁標題，在瀏覽器標題欄顯示.
body標簽
<body></body> 之間的文本是可見的網頁主體內容 .
HTML的規范與注釋
HTML的規范
- HTML不區分大小寫
- HTML頁面的后綴名是html或者htm(win32時代，系統只能識別3位擴展名時使用的。現在一般都使用.html
- HTML的結構
- 聲明部分：主要作用是用來告訴瀏覽器這個頁面使用的是哪個標准,是HTML5標准
- head部分：將頁面的一些額外信息告訴服務器,不會顯示在頁面上
- body部分：我們所寫的代碼必須放在此標簽內
HTML注釋
<!--單行注釋-->
- 給自己看。隨着頁面的內容越多，高效的注釋能讓我們的代碼更易閱讀，並且關鍵性的代碼我們可以用注釋標注出來
- 給別人看。比如自己寫的html代碼，有的地方代碼需要說明一下，同時要轉給別人看和解讀分析的，這個時候就有必要使用html注釋
head中相關標簽
head標簽中的相關標簽是用戶看不到的,僅僅是對應用於網頁的一些基礎信息
head內常用標簽
| 標簽 | 意義 |
|---|---|
| <title></title> | 定義網頁標題 |
| <stytle></stytle> | 定義內部樣式表 |
| <script></script> | 定義JS代碼或引入內部JS文件 |
| <link/> | 引入外部樣式表文件或網站圖標 |
| <meta/> | 定義網頁原信息 |
meta標簽的組成
<meta>元素可提供有關頁面的元信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞<meta>標簽位於文檔的頭部，不包含任何內容<meta>提供的信息是用戶不可見的
meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。
1.http-equiv屬性：相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。
<!--指定文檔的編碼類型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒后跳轉到對應的網址，注意引號(了解)-->
<meta http-equiv="refresh" content="2;URL=https://https://www.cnblogs.com/2222bai">
<!--告訴IE以最高級模式渲染文檔(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2.name屬性: 主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="博客園是一家很實用IT學習網站">
body中相關標簽
body中基本標簽
<b>加粗</b>
<i>斜體</i>
<u>下划線</u>
<s>刪除線</s>
<p>段落標簽</p>
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
<!--換行-->
<br>
<!--水平分割線-->
<hr>
body中特殊字符
| 內容 | 對應代碼 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ￥ | ¥ |
| 版權 | © |
| 注冊 | ® |
div標簽和span標簽
div標簽用來定義一個塊級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現
span標簽用來定義內聯(行內)元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現
塊級元素和行內元素的區別:
所謂塊元素,是另起一行開始渲染的元素,行內元素則不需另起一行.如果單獨在網頁中插入這兩個元素,不會對頁面產生任何影響
這兩個元素是專門為定義CSS而生的
注意:
關於標簽嵌套:通常塊級元素可以包含內聯元素某些塊級元素,但內聯元素不能包含塊級元素,它只能包含其他內聯元素
p標簽不能包含塊級標簽,p標簽也不能包含p標簽
img標簽
<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">
a標簽
超鏈接標簽
所謂的超鏈接就是指從一個網頁指向一個目標的連接地址.這個目標可以是另一個網頁,也可以是相同網頁上的不同位置,還可以是一個圖片,一個電子郵件地址,一個文件,甚至是一個應用程序
鏈接功能:
<a href="www.baidu.com" target="_blank">點我</a>
target:
- _blank表示在新建標簽頁中打開網頁
- _self表示在當前標簽頁中打開網頁
錨點功能:
<!--<a href="" id="a1">文章開頭</a>-->
<!--<div style="background-color: red;height: 1000px"></div>-->
<!--<div style="background-color: green;height: 1000px"></div>-->
<!--<div style="background-color: orange;height: 1000px"></div>-->
<!--<a href="" id="a2">文章中部</a>-->
<!--<div style="background-color: black;height: 1000px"></div>-->
<!--<div style="background-color: green;height: 1000px"></div>-->
<!--<div style="background-color: orange;height: 1000px"></div>-->
<!--<a href="#a1">回到頂部</a>-->
<!--<a href="#a2">回到中部</a>-->
列表
無序列表
<ul type="disc">
<li>第一項</li>
<li>第二項</li>
</ul>
type屬性:
- disc（實心圓點，默認值）
- circle（空心圓圈）
- square（實心方塊）
- none（無樣式）
有序列表
<ol type="1" start="2">
<li>第一項</li>
<li>第二項</li>
</ol>
type屬性:
- 1 數字列表，默認值
- A 大寫字母
- a 小寫字母
- Ⅰ大寫羅馬
- ⅰ小寫羅馬
表格
表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里可以包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示表格類數據。表格類數據是指最適合組織為表格格式（即按行和列組織）的數據。
表格的基本結構:
<table border="1"> <!--表格邊框-->
<thead>
<tr >
<th>username</th>
<th>password</th>
<th>hobby</th>
<th>is_delete</th>
</tr>
</thead> <!--表頭-->
<tbody>
<tr >
<td rowspan="2">jason</td> <!--當前列向下合並2行數據-->
<td>123</td>
<td>study</td>
<td>0</td>
</tr>
<tr>
<!--<td>tank</td>-->
<td>444</td>
<td>DBJ</td>
<td>1</td>
</tr>
<tr>
<td>echo</td>
<td colspan="2">333</td> <!--當前行向后合並2列數據-->
<!--<td>movie</td>-->
<td>1</td>
</tr>
</tbody> <!--表數據-->
</table>
屬性:
- border: 表格邊框.
- cellpadding: 內邊距
- cellspacing: 外邊距.
- width: 像素 百分比.（最好通過css來設置長寬）
- rowspan: 單元格豎跨多少行
- colspan: 單元格橫跨多少列（即合並單元格）