前端知識

時間 2020-06-29

標籤前端知識简体版

原文原文鏈接

前端知識

web服務的本質：css

基於B/S網絡架構，瀏覽器和服務端的交互html

瀏覽器發送請求，服務端接收請求，服務端響應請求，服務端吧HTML文件內容發給瀏覽器，瀏覽器渲染頁面前端

發送請求經過OSI網絡七層模型：應用層，表示層，會話層，傳輸層，網絡層，數據鏈路層，物理層html5

1、HTML介紹

html是超文本標記語言，用於建立網頁的標記語言web

本質是瀏覽器能識別的規則，不過容易出現瀏覽器的兼容問題致使渲染效果不一樣chrome

網頁文件的拓展名：.html或htm編程

注：html不是編程語言，只是一種標記語言；標記語言是不存在邏輯的瀏覽器

一、html文檔結構

html文件的建立：網絡

在pycharm中建立html文件，找到html文件直接建立架構

在其它編譯軟件中建立html文件，和在pycharm中相似

手動建立就先先建立一個.txt文件，而後把文件後綴名改爲.html文件，而後在文件中寫入固定格式

1.<!DOCTYPE html>聲明文件爲html5文檔
2.<html></html>是文檔的開始標記和結束標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）
3.<head></head>定義了HTML文檔的開頭部分，他們之間的內容不會在瀏覽器的窗口直接顯示。包含了文檔的元（meta）數據，配置信息等，是給瀏覽器的用的，用戶看到的直接效果是body裏面寫的。
4.<title></title>定義了網頁標題，在瀏覽器的標題欄顯示。
5.<body></body>之間的文本是可見的網頁主體內容

注：在中文網頁須要使用<meta charset="utf-8">聲明編碼，不然會出現亂碼。有些網站的默認編碼是gbk，因此把utf-8改爲gbk便可

二、html標籤格式

html的標籤格式是嚴格封閉的

html的標籤是成對出現的
全封閉標籤
    標籤的開始是尖括號<>加關鍵字
    標籤的結尾是尖括號和斜槓</>加關鍵字
    例：<p></p>、<div></div>
    這種標籤叫全封閉標籤
自封閉標籤
	只有單獨的前面部分
	例：<img>、<hr>、<br>
全封閉標籤還有另外一種寫法，就是在前半部分的>前面加一個斜槓
	例：<span />

三、html經常使用標籤

<title></title>：定義網頁標題
<style></style>：定義內部樣式
<script></script>：引入js代碼或引入外部js文件
<link />：引入外部樣式文件
<meta/>：定義網頁原信息

meta標籤的三個參數

name="keywords"：搜索關鍵字

name="description"：顯示欄後面的介紹內容

http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"：在2秒後頁面自動跳轉到百度

<meta name="keywords" content="30期">
<meta name="description" content="體彩">
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">

四、瀏覽器的內核

　　瀏覽器內核：

　　　　瀏覽器內核

　　　　IE trident

　　　　chrome blink

火狐 gecko

　　　　Safari webkit

注：瀏覽器內核是瀏覽器採用的渲染引擎，宣言引擎決定了瀏覽器如何顯示網頁內容以及頁面的格式信息。渲染引擎也是兼容性問題出現的根本緣由

五、body內經常使用的標籤

（1）塊級標籤（行外標籤）：塊級標籤單獨用頁面一快空間，單獨佔用一行空間可設置寬度和高度

（2）內聯標籤（行內標籤）：內斂標籤不會單獨佔用一塊空間，不能單獨佔用一行空間沒法設置寬度和高度

內聯標籤
    <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>線

（3）特殊字符


空格
>	>
<	<
&	&
￥	¥
版權標識符（）	©
註冊（®）	®

（4）div標籤：div標籤是塊級標籤，經過塊級標籤能夠對塊以極快內的元素進行樣式的修改與設定

（5）span標籤：span標籤是內聯標籤，可進行鍼對段落的微調與設定

但要注意div與span使用時的嵌套關係，div內可多層嵌套使用div，也可以使用span，可是span內不能嵌套span或者div等塊級標籤

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

<a href="http://www.oldboyedu.com" target="_blank" >點我</a>
_blank：表示以新頁面打開連接
_self：表示在當前標籤頁中打開目標網頁

（7）列表

無序列表

type屬性：

disc（實心圓點，默認值）

circle（空心圓圈）

square（實心方塊）

none（無樣式）

有序列表

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

1數字列表，默認值

A 大寫字母

a 小寫字母

Ⅰ大寫羅馬

ⅰ小寫羅馬

無序列表
<ul type="disc">
	<li></li>
</ul>
有序列表
<ol>
	<li></li>
</ol>

標題列表
<dl>
	<dt></dt>
	<dd></dd>
</dl>

（8）表格

表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里能夠包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示錶格類數據。表格類數據是指最適合組織爲表格格式（即按行和列組織）的數據。
表格的基本結構：

<table border='1'>
  <thead> #標題部分
      <tr> #一行
        <th></th> #一個單元格,自動加粗
      </tr>
  </thead>
  <tbody> #內容部分
  <tr> #一行
    <td></td> #一個單元格
  </tr>
  </tbody>
</table>

屬性:

border: 表格邊框.

cellpadding: 內邊距（內邊框和內容的距離）

cellspacing: 外邊距.（內外邊框的距離）

width: 像素百分比.（最好經過css來設置長寬）

rowspan: 單元格豎跨多少行

colspan: 單元格橫跨多少列（即合併單元格）

（9）input標籤

type屬性	表現形式	代碼
text	單行輸入文本	<input type=text" />
password	密碼輸入框（不顯示明文）	<input type="password" />
date	日期輸入框	<input type="date" />
checkbox	複選框	<input type="checkbox" checked="checked" name='x' />
radio	單選框	<input type="radio" name='x' />
submit	提交按鈕	<input type="submit" value="提交" /> #發送瀏覽器上輸入標籤中的內容，配合form表單使用，頁面會刷新
reset	重置按鈕	<input type="reset" value="重置" /> #頁面不會刷新，將全部輸入的內容清空
button	普通按鈕	<input type="button" value="普通按鈕" />
hidden	隱藏輸入框	<input type="hidden" />
file	文本選擇框	<input type="file" /> （等學了form表單以後再學這個）

屬性說明:

name：表單提交時的「鍵」，注意和id的區別

value：表單提交時對應項的值

type="button", "reset", "submit"時，爲按鈕上顯示的文本年內容

type="text","password","hidden"時，爲輸入框的初始值

type="checkbox", "radio", "file"，爲輸入相關聯的值

checked：radio和checkbox默認被選中的項

readonly：text和password設置只讀

disabled：全部input均適用

(10)select標籤

<select name="city" id="city">
	<option value="1"></option>
    <option selected="selected" value="2"></option> #默認選中，當屬性和值相同時，能夠簡寫一個selected就好了

</select>

屬性說明：

multiple：布爾屬性，設置後爲多選下拉框，不然默認單選

disabled：禁用

selected：默認選中該項

value：定義提交時的選項值

（11）label標籤

　　定義：標籤爲 input 元素定義標註（標記）。若是不用這個label給input標籤一個標記，input會變黃，不影響使用，只是提示你，別忘了給用戶一些提示，也就是這個label標籤。

說明：label 元素不會向用戶呈現任何特殊效果。可是點擊label標籤裏面的文本，那麼和他關聯的input標籤就得到了光標，讓你輸入內容;<label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。

<label for="username">用戶名</label>  # 只能是id屬性
<input type="text" id="username" name="username">

（12）textarea多行文本

可設置是否容許手動拉伸：resize: none;

<textarea name="memo" id="memo" cols="30" rows="10">
</textarea>

屬性說明：

name：名稱

rows：行數 #至關於文本框高度設置

cols：列數 #至關於文本框長度設置

disabled：禁用

maxlength：顯示字符數，例如：maxlength='10' 最多輸入十個字符

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。