前端之 HTML

前端

什麼是前端

前端就是網站的前臺部分，運行在瀏覽器上展現給用戶瀏覽的網頁。

廣義前端：所有用戶可以直接看見並交互的界面
狹義前端：瀏覽器上運行的用戶交互的界面

技術棧

HTML

超文本標記語言Hyper Text Markup Language，負責完成頁面的結構，文件的後綴爲：.html .htm

CSS

級聯樣式表Cascading Style Sheet，負責頁面風格的設計，樣式，美觀，文件後綴爲：.css

JavaScript

瀏覽器腳本語言，可以編寫運行在瀏覽器上的程序，負責編寫頁面特效，調用瀏覽器的API(BOM)、操作改變頁面(DOM)，從後端獲取數據(Ajax)，渲染頁面等。文件後綴爲：.js

瀏覽器輸入網址發送了幾件事？

1.輸入網址
2.朝服務端發送請求
3.服務器接收請求並查詢瀏覽器想要的數據返回給瀏覽器
4.瀏覽器拿到數據展示頁面

HTML

什麼是HTML

HTML 是用來描述網頁的一種語言。

HTML 指的是超文本標記語言: Hyper Text Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標籤 (markup tag)，HTML 使用標記標籤來描述網頁
HTML 文檔包含了HTML 標籤及文本內容，HTML文檔也叫做 web 頁面

HTML 標籤

HTML 標記標籤通常被稱爲 HTML 標籤 (HTML tag)。

HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>
HTML 標籤通常是成對出現的，比如 <b> 和 </b>
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤，開始和結束標籤也被稱爲開放標籤和閉合標籤

標籤的語法：

<標籤名屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標籤名>
<標籤名屬性1=“屬性值1” 屬性2=“屬性值2”…… />

幾個很重要的屬性：

id：定義標籤的唯一ID，HTML文檔樹中唯一
class：爲html元素定義一個或多個類名（classname）(CSS樣式類名)
style：規定元素的行內樣式（CSS樣式）

<!DOCTYPE html>
<html>
    <head>
        head存放的內容用戶是看不到的，主要是給瀏覽器和搜索引擎看的
        <meta charset="UTF-8"> 
        <title>我是頁面標題</title> 
    </head>
    <body>
        用戶能夠看見的內容都在body裏面
        <h1>我是第一個標題</h1> 
		<p>我是第一個段落。</p> 
        <!--這是單行註釋-->
    <!--
    這是多行註釋
    -->
    </body>
</html>

說明：

DOCTYPE 聲明瞭文檔的類型,DOCTYPE 聲明是不區分大小寫的
<html> 標籤是HTML頁面的根元素，該標籤的結束標誌爲 </html>
<head>標籤包含了文檔的元（meta）數據，如<meta charset=“utf-8”>定義網頁編碼格式爲utf-8。該標籤的結束標誌爲</head>
<title>標籤定義文檔的標題，該標籤的結束標誌爲</title>
<body> 標籤定義文檔的主體，即網頁可見的頁面內容，該標籤的結束標誌爲 </body>
<h1> 標籤作爲一個標題使用，該標籤的結束標誌爲 </h1>
<p> 標籤作爲一個段落顯示，該標籤的結束標誌爲 </p>

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://www.linwow.com">
<!--告訴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="簡介信息">

HTML 標題

HTML 標題（Heading）是通過h1~h6：標籤來定義的。

HTML 段落

HTML 段落是通過標籤 <p> 來定義的，P 是英文paragraph段落的縮寫，經常被用來創建一個段落。

HTML 鏈接

HTML 鏈接是通過標籤 <a> 來定義的.a標籤，也叫anchor（錨點）元素，既可以用來鏈接到外部地址實現頁面跳轉功能，也可以鏈接到當前頁面的某部分實現內部導航功能。在 href 屬性中指定鏈接的地址。target 屬性用來控制是否在當前頁面跳轉，默認是_self當前頁，也可以指定成_blank新建頁面跳轉

<a href="要跳轉的網址">這是一個鏈接</a>

HTML 圖像

HTML 圖像是通過標籤 <img> 來定義的。使用img元素來爲你的網站添加圖片，使用 src 屬性指向一個圖片的具體地址，即可以是網絡上的圖片地址也可以是本地的圖片地址。<img> 標籤是自關閉元素，不需要結束標籤。img元素具有 alt 屬性。 alt 屬性中的文本用於屏幕閱讀器以提高可訪問性，並且如果圖像無法加載，則會顯示。 title 屬性是鼠標懸停在圖片上時顯示的文本。圖片調節長寬的時候只需要調節一個另外一個參數自動等比例縮放

<img src="圖片的路徑" width="104" height="142" alt="對圖片的描述">

HTML 換行

在 HTML 語言中， <br >標籤定義爲一個換行符，它可以理解爲簡單的輸入一個空行，而不是用來對內容進行分段。

HTML 文本格式化標籤

標籤	描述
<b>	定義粗體文本
<em>	定義着重文字
<i>	定義斜體字
<small>	定義小號字
<strong>	定義加重語氣
<sub>	定義下標字
<sup>	定義上標字
<ins>	定義插入字
<del>	定義刪除字

特殊字符

內容	對應代碼
空格
>	>
<	<
&	&
¥	¥
版權	©
註冊	®

HTML 表格

表格由<table>標籤來定義。每個表格均有若干行（由<tr> 標籤定義），每行被分割爲若干單元格（由<td>標籤定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

屬性:

border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素百分比.（最好通過css來設置長寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合併單元格）

標籤	描述
<table>	定義表格
<th>	定義表格的表頭
<tr>	定義表格的行
<td>	定義表格單元
<caption>	定義表格標題
<colgroup>	定義表格列的組
<col>	定義用於表格列的屬性
<thead>	定義表格的頁眉
<tboday>	定義表格的主體
<tfoot>	定義表格的頁腳

<table border="1"> 
    <!--border不設置或設置爲0，則沒有邊框-->
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>hobby</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>lonwow</td>
            <td>19</td>
            <td rowspan="2">學習</td>
        </tr>
        <tr>
            <td>lin</td>
            <td>20</td>
            <!--<td>喫飯</td>-->
        </tr>
        <tr>
            <td>wow</td>
            <!--<td>22</td>-->
            <td colspan="2">睡覺</td>
        </tr>
    </tbody>
    <!--
	通過rowspan和colspan進行跨行的操作
	-->

HTML 列表標籤

1.無序列表

<ul type="disc">
  <li>第一項</li>
  <li>第二項</li>
</ul>

type屬性：

disc（實心圓點，默認值）
circle（空心圓圈）
square（實心方塊）
none（無樣式）

2.有序列表

<ol type="1" start="2">
  <li>第一項</li>
  <li>第二項</li>
</ol>

type屬性：

1 數字列表，默認值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬

3.標題列表

<dl>
  <dt>標題1</dt>
  <dd>內容1</dd>
  <dt>標題2</dt>
  <dd>內容1</dd>
  <dd>內容2</dd>
</dl>

標籤	描述
<ol>	定義有序列表
<ul>	定義無序列表
<li>	定義列表項
<dl>	定義列表
<dt>	自定義列表項目
<dd>	定義自定義列表的描述

HTML 區塊元素

大多數 HTML 元素被定義爲塊級元素或內聯元素。

HTML塊級元素

塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。<div> 標籤可以把文檔分割爲獨立的、不同的部分。HTML <div> 元素是塊級元素，它是可用於組合其他 HTML 元素的容器。<div> 元素的另一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法。

實例: <h1>, <p>, <ul>, <table>

HTML內聯元素

內聯元素在顯示時通常不會以新行開始。HTML <span> 元素是內聯元素，可用作文本的容器。
實例: <b>, <td>, <a>, <img>

HTML 表單

表單是一個包含表單元素的區域。表單元素是允許用戶在表單中輸入內容，比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。表單使用表單標籤 <form> 來設置:

HTML 表單 - 輸入元素

多數情況下被用到的表單標籤是輸入標籤（<input>）。<input> 元素是最重要的表單元素。輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：

文本域（Text Fields）

文本域通過<input type=“text”> 標籤來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。

密碼字段

密碼字段通過標籤<input type=“password”> 來定義。密碼字段字符不會明文顯示，而是以星號或圓點替代。

單選按鈕（Radio Buttons）

<input type=“radio”> 標籤定義了表單單選框選項。

複選框（Checkboxes）

<input type=“checkbox”> 定義了複選框. 用戶需要從若干給定的選擇中選取一個或若干選項。

獲取文件

<input type=“file” >選擇本機文件進行上傳。

日曆

<input type=“date”>提供日曆進行選擇’

下拉選擇框(select)

默認是單選的，可以通過multiple參數將單選變爲多選，一個option就是一個選項。select 元素可創建單選或多選菜單。當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表，並且在將 <select> 表單數據提交給服務器時包括 name 屬性。

文本域(Textarea)

<textarea name=“info” id="" cols=“30” rows=“10”></textarea>用戶可在文本域中寫入文本。可寫入字符的字數不受限制。

提交按鈕(Submit Button)

<input type=“submit”> 定義了提交按鈕。當用戶單擊確認按鈕時，表單的內容會被傳送到服務端。如果不想通過input標籤來觸發提交動作那麼可以直接寫一個 <button>button按鈕</button>

重置按鈕(reset)

<input type=“reset”>重置form表單內容。

普通按鈕(button)

<input type=“button” >定義一個普通的按鈕，可以自己綁定對應的事件。

input屬性說明:

name：表單提交時的“鍵”，注意和id的區別
value：表單提交時對應項的值
- type=“button”, “reset”, "submit"時，爲按鈕上顯示的文本年內容
- type=“text”,“password”,"hidden"時，爲輸入框的初始值
- type=“checkbox”, “radio”, “file”，爲輸入相關聯的值
checked：radio和checkbox默認被選中的項
readonly：text和password設置只讀
disabled：所有input均適用

select屬性說明：

multiple：布爾屬性，設置後爲多選，否則默認單選
disabled：禁用
selected：默認選中該項
value：定義提交時的選項值

代碼展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="refresh" content="10;url=https://blog.csdn.net/linwow">-->
    <title>我的第一個網頁</title>
    <a href="" id="a1"></a>

</head>
<body>
<div style="height: 100px; background: #caffd0"></div>
<h3>用戶註冊</h3>
<form action="">
    <p>username: <input type="text" name="username"></p>
    <p>password: <input type="password" name="password"></p>
    <p>birthday: <input type="date" name="birthday"></p>
    <p>gender:
        <input type="radio" name="gender" value="0">男
        <input type="radio" name="gender" value="1">女
        <input type="radio" name="gender" checked="checked" value="2">保密
    </p>
    <p>habby
        <input type="checkbox">籃球
        <input type="checkbox">足球
        <input type="checkbox">雙色球
    </p>
    <p>province默認單選:
        <select name="province" id="">
            <option value="beijin">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
        </select>
    </p>
    <p>province多選:
        <select name="" id="" multiple>
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">深圳</option>
        </select>
    </p>
    <p>province歸屬選項:
        <select name="" id="">
            <optgroup label="北京">
                <option value="">朝陽區</option>
                <option value="">海淀區</option>
                <option value="">昌平區</option>
            </optgroup>
            <optgroup label="上海">
                <option value="">浦東新區</option>
                <option value="">靜安區</option>
                <option value="">徐彙區</option>
            </optgroup>
            <optgroup label="深圳">
                <option value="">南山區</option>
                <option value="">寶安區</option>
                <option value="">福田區</option>
            </optgroup>
        </select>
    </p>
<p>文本框
    <textarea name="info" id="t1" cols="30" rows="10"></textarea>
</p>
<p>文件
    <input type="file" name="file">
</p>
    <input type="submit" value="提交">
    <input type="button" value="沒用">
    <input type="reset" value="重置">
    <button>button</button>
</form>


<h1>這是一級標題</h1>
<h6>這是六級標題</h6>
<p>這是一個段落</p><br>
<a href="https://blog.csdn.net/linwow">點我一下試試</a><br>
<img src="https://www.bing.com/th?id=OGC.59a001c80cb085d03ff52eaf34bd132c&pid=1.7&rurl=http%3a%2f%2fatt.bbs.duowan.com%2fforum%2f201405%2f19%2f2015461v0s48j05j8je2i0.gif&ehk=6ZVeno%2bXyeqNMnv7dcz%2fAQ"
     width="500" height="250"
     title="誇你呢"
     alt="沒事，誇你呢"><br>

<div>
    <span>
        <b>我是粗體</b>
    </span>
    <span>
        <em>我是着重體</em>
    </span>
    <span>
        <small>我是小字體</small>
    </span>
    <span>
        <strong>我是加重語氣的</strong>
    </span>
    <span>
        <ins>這是插入字</ins>
    </span>
    <span>
        <i>我是斜體</i>
    </span>
    <span>
        <sub>我在下邊</sub>我是正常的<sup>我在上邊</sup><br>
    </span>
    <span>
        <del>這是刪除字</del>
    </span>
    <span>
        <s>這也是刪除字</s>
    </span>
</div>


<table border="1">
    <caption>這是標題</caption>
    <thead>
    <tr>
        <th>name</th>
        <th>age</th>
        <th>pwd</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>lin</td>
            <td>23</td>
            <td>132</td>
        </tr>
        <tr>
            <td>wow</td>
            <td>22</td>
            <td>321</td>
        </tr>
        <tr>
            <td>linwow</td>
            <td>21</td>
            <td>888</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>666</td>
            <!--<td>666</td>-->
            <!--<td>666</td>-->
        </tr>
    </tfoot>
</table>
 <ul type="disc">
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
 </ul>
<ol type="1" start="2">
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ol>
<dl>
    <dt>標題一</dt>
    <dd>內容一</dd>
    <dt>標題二</dt>
    <dd>內容二</dd>
    <dt>標題三</dt>
    <dd>內容三</dd>
</dl>


	<a href="#a1">bottom</a>

</body>
</html>

HTML 統一資源定位器(Uniform Resource Locators)

Web瀏覽器通過URL從Web服務器請求頁面。當您點擊 HTML 頁面中的某個鏈接時，對應的 <a> 標籤指向萬維網上的一個地址。一個統一資源定位器(URL) 用於定位萬維網上的文檔。

scheme://host.domain:port/path/filename

說明:

scheme - 定義因特網服務的類型。最常見的類型是 http
host - 定義域主機（http 的默認主機是 www）
domain - 定義因特網域名
:port - 定義主機上的端口號（http 的默認端口號是 80）
path - 定義服務器上的路徑（如果省略，則文檔必須位於網站的根目錄中）。
filename - 定義文檔/資源的名稱

以下是一些URL scheme：

Scheme	訪問	作用
http	超文本傳輸協議	以 http:// 開頭的普通網頁。不加密。
https	安全超文本傳輸協議	安全網頁，加密所有信息交換。
ftp	文件傳輸協議	用於將文件下載或上傳至網站。
file		自己計算機上的文件。

主要知識總結

前端HTML
		超文本標記語言
	註釋
		<!--單行註釋-->
		<!--
		多行註釋
		-->
		ps:寫HTML的時候，註釋一般都是成雙成對的
		即
		<!--xx功能開始-->
		<!--xx功能結束-->
	文件的後綴名(給用戶看的)
head內常用標籤(不是給用戶看的)
	title：定義網頁標題
	style：內部寫css樣式代碼
	link：引入外部css樣式文件
	script：可以在內部直接寫js代碼也支持src屬性
		    導入外部js文件
	meta：定義網頁原信息
		name='keywords' content="......"
		name='description' content="......"
body內常用標籤(body內標籤纔是給用戶看的)
	基本標籤
		h1~h6 p u i s b br hr 
	特殊符號
		&nbsp;
		&lt;
		&gt;
		&copy;
		&reg;
		&amp;
		&yen;
	常用標籤
		div
		span
		a	
			href='url'：跳轉到指定網址。
			錨點功能：一個a調到另一個a標籤。具體案例:回到頂部
			target：默認是在當前頁面跳轉 _self，指定成_blank新建頁面跳轉。		
		img
			src：放圖片地址(可以是本地的也可以是網絡上的)
			alt：當圖片加載失敗時可以指定顯示的提示信息
			title：鼠標懸停上之後顯示的提示信息
			width：長寬在設置的時候只需要設置一個另一個自動等比例縮放
			heigth
	列表標籤
		無序列表
			ul>li：可以通過ul內type屬性來控制無序的標識
		有序列表
			ol>li：可以通過ul內type屬性來控制有序的標識(1,a,A,I,i)
		標題列表
			dl：
				dt：標題
				dd：內容
	表格標籤
		table標籤內可以設置的屬性
			type：可以通過type參數設置邊框
			cellspacing：設置單元格與邊框之間的距離
			cellpadding：設置文本值域單元格之間的距離
		單元格標籤可以設置的屬性
			rowspan：垂直方向
			colspan：水平方向
	form表單
		以用戶註冊爲例
		input：type屬性可以變化的值
				text
				password
				date
				radio：checked   如果屬性名和屬性值相等那麼可以簡寫
				checkbox：checked
				file：form表單上傳文件需要修改兩個參數的值
						1.將method由默認的get改爲post
						2.將enctype編碼格式由默認的urlencoded改爲formdata
				submit：提交按鈕 觸發form表單提交數據的動作
				button：上面功能都沒有。就是一個普通按鈕
				reset：重置用戶填寫的信息
		select :選擇標籤，默認是單選的，可以通過設置multiple參數改爲多選
				一個個的option就是一個個的選項
		textarea:大段文本框
		button標籤:也可以出發form表單的提交動作
	總結:
		1 獲取用戶輸入的標籤都必須有一個name屬性
			用戶輸入的值會被存放到標籤的value屬性中
			你可以理解爲name屬性對應是字典的key
			用戶輸入的被value屬性獲取的到值是字典的value
		2 label標籤
			通常是和input標籤組合使用
			<form action="">
				<label for="i1">username:<input type="text" id="i1" name="username"></label>
				<label for="i2">password: <input type="password" name="pwd" id="i2"></label>
				<input type="submit">
			</form>
	請求方法:
		get請求:朝服務端獲取資源(可以攜帶參數供服務端校驗)
			get請求攜帶的參數是有大小限制的，大概4KB。可以攜帶一些不重要的參數，不推薦攜帶敏感型的參數。
		post請求:朝服務端提交數據，敏感性的信息都應該採用post提交方式
標籤分類1:
	雙標籤:h1~h6 a p div span table ul ol dl 
	自閉和標籤: img br hr input
標籤分類2:
	塊級標籤
		獨佔一行
		塊級標籤可以嵌套塊級標籤和行內標籤
		p標籤雖然是塊級標籤但是不能嵌套任何的塊級標籤只能嵌套行內標籤
		可以設置長寬
	行內標籤
		大小取決於內容大小
		不能設置長寬

文章目錄

前端

什麼是前端

技術棧

瀏覽器輸入網址發送了幾件事？

HTML

什麼是HTML

HTML 標籤

Meta標籤

HTML 標題

HTML 段落

HTML 鏈接

HTML 圖像

HTML 換行

HTML 文本格式化標籤

特殊字符

HTML 表格

HTML 列表標籤

HTML 區塊元素

HTML塊級元素

HTML內聯元素

HTML 表單

HTML 表單

HTML 表單 - 輸入元素

代碼展示

HTML 統一資源定位器(Uniform Resource Locators)

主要知識總結

Shell/Python中的用戶名獲取

前端之 CSS選擇器、樣式

認識DRF(Django REST framework) 及部分源碼分析

Django 之 ORM基本操作

前端之 JavaScript基礎

Django 之 form組件、cookie、session

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

前端 之 HTML

文章目錄

前端

什麼是前端

技術棧

瀏覽器輸入網址發送了幾件事？

HTML

什麼是HTML

HTML 標籤

Meta標籤

HTML 標題

HTML 段落

HTML 鏈接

HTML 圖像

HTML 換行

HTML 文本格式化標籤

特殊字符

HTML 表格

HTML 列表標籤

HTML 區塊元素

HTML塊級元素

HTML內聯元素

HTML 表單

HTML 表單

HTML 表單 - 輸入元素

代碼展示

HTML 統一資源定位器(Uniform Resource Locators)

主要知識總結

前端之 HTML