前端學習之 HTML

時間 2019-12-09

標籤前端學習 html 欄目 HTML 简体版

原文原文鏈接

一.HTML 介紹

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言,它不是一種編程語言。javascript

HTML使用標籤來描述網頁。不像python編程語言同樣，有邏輯什麼的，這個標記語言是沒有邏輯的.css

網頁文件的擴展名：.html或.htmhtml

二.HTML文檔結構

當建立一個初始的html文件時,會產生以下的內容:java

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

 

</body>

</html>

如下對上面結構進行解釋:python

1.<!DOCTYPE html>聲明爲HTML5文檔。編程

2.<html>、</html>是文檔的開始標記和結束的標記。瀏覽器

是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。安全

3.<head>、</head>定義了HTML文檔的開頭部分。其中lang="en"就是說，你整個文檔的內容以英文爲主爲主,若是整個內容與中文爲主可改成:lang="zh-CN"。服務器

它們之間的內容不會在瀏覽器的文檔窗口顯示。編程語言

包含了文檔的元（meta）數據，配置信息等，是給瀏覽器看的，你看到的是在body標籤裏面寫的。

4.<title>、</title>定義了網頁標題，在瀏覽器標題欄顯示。

（修改一下title中的內容，而後看一下瀏覽器，你就會發現title是什麼了）

5.<body>、</body>之間的文本是可見的網頁主體內容。

注意：對於中文網頁須要使用 <meta charset="utf-8"> 聲明編碼，不然會出現亂碼。有些瀏覽器會設置 GBK 爲默認編碼，則你須要設置爲 <meta charset="gbk">。

三.經常使用標籤介紹

標籤分類:

雙標籤(雙閉合)

<h1>dfdsfsdf</h1>

單標籤(單閉合)

<img>

1.註釋標籤

#找到一行內容ctrl+/就能註釋，註釋的內容不會在網頁上顯示出來，

這個標籤不影響網頁內容，起到註釋的做用。

2.head標籤以及head裏的標籤(網站的配置信息)

定義了HTML文檔的開頭部分。（在二有詳細介紹）

下面這些標籤可用在 head 部分：

<title>：定義文檔的標題。

如下是head標籤內有相關的標籤介紹：

3.body標籤以及body內的經常使用標籤

<body>、</body>之間的文本是可見的網頁主體內容。

<body> 元素包含文檔的全部內容（好比文本、超連接、圖像、表格和列表等等。）

(1)h系列(*)**

<hr> #就是單獨個一個水平線

h1-----h6

代碼例子：

<h1>個人第一個網頁</h1>

<h2>個人第一個網頁</h2>

<h3>個人第一個網頁</h3>

<h4>個人第一個網頁</h4>

<h5>個人第一個網頁</h5>

<h6>個人第一個網頁</h6>

效果圖：

(2)b標籤加粗

代碼例子：

字體沒有加粗

<b>字體加粗了</b>

<strong>字體加粗了</strong>

效果圖：

(3)u標籤下劃線;s和del 中劃線

<u> 標籤可定義下劃線文本。

<s> 標籤可定義加刪除線文本定義。

代碼例子：

<!--u標籤 下劃線-->

<u>字體下面有下劃線</u>

<br>

<!--s和del 中劃線-->

<s>字體下面有中劃線</s>

<br>

<del>字體下面有中劃線</del>

效果圖：

(4)上標<sup>和下標<sub>

<sup> 標籤可定義上標文本。

<sub> 標籤可定義下標文本。

代碼例子

4<sup>2</sup>

5<sub>3</sub>

效果:

(5)p標籤(*)**

<p> 標籤訂義段落。

段落：是英文paragraph的縮寫。

HTML標籤是分等級的。HTML將全部的標籤分爲兩種：

文本級標籤：p、span、a、b、i、u、em。文本標籤裏只能放文字、圖片、表單元素。

容器級標籤：div、h系列、li、dt、dd。容器級標籤裏能夠聽任何東西。

請死死記住：p標籤是一個文本級標籤，p裏面只能放文字、圖片、表單元素。其餘的一概不能放。

只能放文本/圖片/表單元素.

屬性：align='屬性值'：對齊方式。屬性值包括：left、center、right

代碼例子：

<p>

<div>

<a href="https://www.baidu.com">去百度</a>

<img src="pic3.jpg">

 

</div>

</p>

(6)div標籤(***)

塊級標籤,獨佔一行.頁面排版時,當作容器使用

<div>可定義文檔中的分區或節

(7)span標籤(***)

內聯標籤,做爲頁面提示信息使用

<span> 標籤被用來組合文檔中的行內元素。

<span>和<div>惟一的區別在於：<span>是不換行的，而<div>是換行的。

若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門爲定義CSS樣式而生的。或者說，DIV+CSS來實現各類樣式。

代碼例子1:

<div>

第一個div

</div>

<div>

第二個div

</div>

<span>第一個span</span>

<span>第二個span動力</span>

效果圖:

(8)pre標籤

定義預格式化的文本

就是將原來的格式輸出

<pre>

望廬山瀑布

做者：李白

日照香爐生紫煙，遙看瀑布掛前川。

飛流直下三千尺，疑是銀河落九天。

</pre>

效果:

(9)a標籤(*)文本級標籤**

超連接標籤,所謂的超連接是指從一個網頁指向一個目標的鏈接關係，這個目標能夠是另外一個網頁，也能夠是相同網頁上的不一樣位置，還能夠是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。

跳轉到指定地址

跳轉至錨點(name和id,注意一下)

跳轉至頂部(#)

寫靜態頁面是,建議給a加上 <a href="javascript:void(0);"

javascript:是僞協議，表示url的內容經過javascript執行。void(0)表示不做任何操做，這樣會防止連接跳轉到其餘頁面。這麼作每每是爲了保留連接的樣式，但不讓連接執行實際操做.

例子1:

<h1>個人第一個網頁</h1>

<h3 id="title-h3">個人第一個網頁</h3>

<p id="aaa">字體沒有加粗</p>

<a href="one.html">跳到one.html網頁</a>

<!--跳轉到百度-->

<a href="http://www.baidu.com">百度一下</a>

<!--跳轉到id = "#title-h3" 的標籤 -->

<a href="#title-h3">跳至h3</a>

<a href="#">跳至頂部</a>

<!--跳轉到id = "aaa" 的標籤-->

<a href="#aaa">跳至aaa</a>

例子2:

<a href="javascript:alert('hsz');" title="彈出框">不跳轉,顯示hsz</a>

<a href="javascript:void(0);">點擊2</a>

<a href="javascript:;">點擊3</a>

(10)img標籤(*)**

src 圖片的地址(url,絕對路徑,相對路徑)

寬和高,只設置一個時,會按照圖片的原始比例,進行縮放.

title 鼠標懸浮時,顯示的提示性的文本.

alt 圖片加載失敗時,提示信息.提升用戶的體驗度.

a標籤能夠包裹img,點擊img時,進行跳轉.

高矮不齊，底邊對齊

例子:(前提是在這個網頁的同一個文件夾下放pic3.jpg名字的圖片)

<img src="pic3.jpg" alt="走丟了" width="120" height="100" title="妖精的尾巴">

<img src="pic3.jpg" alt="走丟了" width="250" height="200" title="妖精的尾巴">

<img src="pic3.jpg" alt="走丟了" width="450" height="400" title="妖精的尾巴">

<img src="pi3.jpg" alt="走丟了" width="100" height="200" title="妖精的尾巴">

前三個只要將鼠標移動到圖片位置就會顯示"妖精的尾巴",第四個是沒有這個圖標,會返回alt的內容"走丟了"

(11)ul標籤(*)無序列表**

li標籤,不能單獨使用.容器級標籤.

通常會結合css,進行頁面排版.

type屬性：

disc（實心圓點，默認值）

circle（空心圓圈）

square（實心方塊）

none（無樣式）

例1:(注意不一樣屬性)

<ul type="disc">

<li>張三</li>

<li>李四</li>

<li>趙五</li>

</ul>

<ul type="circle">

<li>張三</li>

<li>李四</li>

<li>趙五</li>

</ul>

效果圖:

例2:(嵌套的ul)

<ul>

<li><b>北京</b>

<ul>

<li>朝陽區</li>

<li>東城區</li>

<li>西城區</li>

</ul>

</li>

</ul>

<ul>

<li><b>廣東</b>

<ul>

<li>廣州市</li>

<li>佛山市</li>

<li>深圳市</li>

</ul>

</li>

</ul>

效果圖:

(12)ol標籤有序列表

例1:(從第二項開始)

</ol>

設置type,自定製序號

type屬性： start是從數字幾開始

1 數字列表，默認值

A 大寫字母

a 小寫字母

Ⅰ大寫羅馬

ⅰ小寫羅馬

配合li標籤.

(13)dl標籤

定義列表

dt標籤,頂頭顯示.

dd標籤,在左側有縮進

例:

<dl>

<dt>第一條規則</dt>

<dd>不許睡覺</dd>

<dd>不許交頭接耳</dd>

 

<dt>第二條規則</dt>

<dd>能夠泡妞</dd>

<dd>能夠找妹子</dd>

</dl>

效果:

(14)table標籤

tr標籤,行

td標籤,列

th標籤,列(td+b)

thead標籤,表頭

tbody標籤,表內容

tfoot標籤,表頁腳.

合併單元格:

縱向合併rowspan

橫向合併colspan

例子:

<!--表格 3行4列-->

<table border="1" style="border-collapse:collapse;">

<tr>

<th>姓名</th>

<th>年齡</th>

<th>性別</th>

<td><b>地區</b></td> <!-- th至關於td+b -->

</tr>

<tr>

<td>夏波</td>

<td>22</td>

<td>男</td>

<td rowspan="2">中國</td>

</tr>

 

<tr>

<td>小嶽嶽</td>

<td>35</td>

<td>男</td>

<!-- <td>河南</td>-->

</tr>

<tr>

<td>鄧紫棋</td>

<td>33</td>

<!-- <td colspan="2">女</td> <!– 橫向 –>-->

<td>女</td>

<td>中國香港</td>

</tr>

</table>

效果圖:

(15)form表單(*)**

屬性:

- action 數據提交的服務器地址

- method 數據提交的方式,默認get,指定post,當你寫錯的時候,仍是按照get

input標籤

type:

- text, 默認,文本,用於輸入用戶名等信息(***)

- password, 用於用戶密文輸入密碼(***)

- radio , 單選框,必須name值一致.(***)

- CheckBox, 複選框,(***)

- button, 普通按鈕,配合js使用(***)

<button>按鈕</button>

View Code

- submit, 提交按鈕.(***)

- reset, 重置form表單內的內容

- file, 上傳文件(***)

<input type="file" value='上傳文件'>

View Code

- hidden, 隱藏的input標籤

默認選中,checked

(16)select標籤(*)**

name是提交過去的key,option的value屬性是提交過去的值.

option標籤 value屬性,

默認選中,selected

textarea標籤

多行文本輸入框

(17)label標籤(*)**

提升用戶的體驗度

for屬性,必須制定的對方的id值.

若是以get 的方式,比較不安全,由於輸入的信息在提交過程當中都顯示跳轉的網址上了,如下有個例子是爲了方便查看提交的信息全部先用get,

通常用post,post方式提交的信息在請求體,相對安全

例子:

<h3>用戶註冊</h3>
<!--method 通常用post,此處是爲了方便查看-->
<form action="https://www.baidu.com" method="get">

<p><label for="username">暱稱：</label><input type="text" name="username" id="username"></p>
<!--type="password"表示輸入的密碼爲密文顯示-->
<p>密碼：<input type="password" name="pwd"></p>
<p>性別：
<!--checked 若是沒有選擇默認選擇男-->
<input type="radio" name="sex" value="male" checked> 男
<input type="radio" name="sex" value="female"> 女
<input type="radio" name="sex" value="secret"> 保密
</p>
<p>愛好：
<input id="chui" type="checkbox" name="hobby" value="chui"> <label for="chui">吹管樂</label>
<input type="checkbox" name="hobby" value="la"> 拉二胡
<input type="checkbox" name="hobby" value="tan"> 彈吉他
<input type="checkbox" name="hobby" value="chang"> 唱京劇
</p>
<p>
學歷：
<select name="xueli" id="sel1" size="3" multiple>
<option value="g">高中</option>
<option value="d">大專</option>
<option value="b" selected>本科</option>
<option value="s">碩士</option>
</select>
</p>
<div>
<!--多行文本輸入框cols="40" rows="5" 5行40列-->
<p>個性簽名：
<textarea name="" id="" cols="40" rows="5"></textarea>
</p>
</div>
<!--hidden1 隱藏了不顯示-->
<input type="hidden" value="sdfsdfsdf">
<!--若是reset不寫value的值,默認爲重置-->
<input type="reset" value='重置'>
<input type="submit" value='註冊'>

</form>