前端基礎之HTML

時間 2019-12-02

標籤前端基礎 html 欄目 HTML 简体版

原文原文鏈接

前端學習之路

什麼是前端：任何與用戶直接打交道的操做界面都是前端html

什麼是後端：幕後的數據操做者，不和用戶打交道前端

Web服務本質

四個字：請求 + 響應web

瀏覽器中輸入網址，回車的時候發生了哪些事？（面試題）面試

朝指定的服務器發送請求
服務器接收到請求並處理
返回相應的響應
瀏覽器接收響應展現在網頁中

那麼客戶端請求的方式有什麼呢？數據庫

請求方式

get請求編程

朝指定的服務器要資源後端

好比說訪問 www.baidu.com瀏覽器

get請求也能夠攜帶數據，跟在url的後面：安全

ip:port?xxx=yyy&zzz=qqq
1. get可以攜帶的參數大小有限制，1KB左右很小
2. 數據直接可見，顯示在地址欄，不安全，不能攜帶敏感信息

post請求

朝指定的服務器發送、提交數據

好比說登陸功能

HTTP協議

什麼是HTTP協議呢？

http協議 ：超文本傳輸協議。規定了服務器與瀏覽器數據傳輸的數據格式

咱們直接用瀏覽器去鏈接咱們的套接字服務端，若是你直接send二進制數據，瀏覽器會報錯，可是已經接收到了咱們發送的內容，只是讀不懂咱們發送的內容，那麼咱們必須有一套公用協議，這就是httpp協議。

統一接口的思想：就好比不少語言能夠鏈接數據庫，咱們就統一使用SQL語句，無論誰來都要使用SQL。只要經過瀏覽器訪問服務端都要遵循這套協議，除非你開發本身客戶端和服務端，好比QQ，是你本身的一個東西，那麼你想怎麼搞都行。

HTTP協議四大特性

基於 TCP/IP 協議做用於應用層之上的協議
基於請求響應
無狀態

是指服務端對於客戶端每次發送的請求都認爲它是一個新的請求，上一次會話和下一次會話沒有聯繫，服務端不會保存用戶的狀態。
無鏈接

指的是每次鏈接只處理一個請求，服務端處理完客戶端一次請求，等客戶端作出迴應以後便斷開鏈接。

PS：針對無鏈接，有時候須要鏈接，websocket至關於HTTP協議的一個大的補丁，它支持長時間的鏈接，好比企業的通信工具，聊天室等都使用websocket

HTTP協議數據格式

請求數據格式：

請求首行（標識HTTP協議版本和請求方式）
請求頭（一大堆K,V鍵值對）
\r\n （注意這裏必須有一行空白行，重點）
請求體（攜帶一些敏感信息，好比密碼，身份證號）

響應數據格式：

響應首行（標識HTTP協議版本和響應狀態碼）
響應頭（一大堆K,V鍵值對）
\r\n （注意這裏必須有一行空白行，重點）
響應體（返回給瀏覽器頁面的數據，一般響應體都是html頁面）

HTTP協議響應狀態碼

用一段簡單的數字來表示一些負載的狀態或提示信息

1XX：服務端已經成功接收了數據正在處理，你能夠繼續提交額外的數據
2XX：服務端成功響應你想要的數據（請求成功200）
3XX：重定向（當你在訪問一個須要登陸以後才能訪問的頁面你會發現窗口會自動跳到登陸頁面 301 302）
4XX：請求錯誤，資源不存在404，請求不合法或權限不夠403
5XX：服務器內部錯誤 500

什麼是HTML？

超文本標記語言（Hypertext Markup Language, HTML）是一種用於建立網頁的標記語言，搭建網頁骨架，使用標籤來描述網頁，不是一種編程語言

HTML的註釋

通常狀況下html的註釋用來劃分區域。

<!--單行註釋-->

<!--
多行註釋
多行註釋
...
-->

<!--導航條開始-->
... 
<!--導航條結束-->

<!--側邊欄開始-->
...
<!--側邊欄結束-->

HTML的文檔結構

最基本的HTML文檔

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>定義標題</title>
</head>
<body>
    網頁文字內容
</body>
</html>

<!DOCTYPE html>：聲明爲HTML5文檔。
<html> </html>：文檔的開始和結束標記。
<head> </head>：定義了HTML文檔的開頭部分，給瀏覽器看的。
<title> </title>：定義了網頁的標題，在瀏覽器標題欄顯示。
<body> </body>：網頁內容，給用戶看。

注意：對於中文網頁須要使用聲明編碼，不然會出現亂碼。有些瀏覽器會設置 GBK 爲默認編碼，則你須要設置爲

前端標籤以及分類

第一種分類：單標籤 和 雙標籤

雙標籤，自閉合標籤（h1~h六、a、p、div、span、table、ul、ol、dl）
單標籤（br、hr、img、input）

第二種分類：塊級標籤 和 行內標籤

塊級標籤，獨佔瀏覽器一行（div、p、h1~h6）
行內標籤，文本自身多大就佔多大（span、b、s、i、u）

PS：

塊級標籤內能夠嵌套其餘塊級標籤和行內標籤
P標籤雖然是塊級標籤，可是內部不能嵌套任何塊級標籤，只能嵌套行內標籤
行內標籤不能嵌套行內和塊級標籤

標籤一般應該有三個屬性：

id：每一個標籤都應該有id值，惟一，不能重複
class：類屬性，每一個標籤能夠有多個屬性，擁有多個樣式
style：支持在標籤內直接寫css代碼，屬於行內樣式，優先級最高

head標籤

標籤	意義
`<title></title>`	定義網頁標題
`<style></style>`	定義內部樣式表
`<script><script/>`	應以JS代碼或引入外部JS文件
`<link/>`	引入外部樣式表文件或網站圖標
`<meta/>`	定義網頁原信息

例如定義網頁原信息：

引用外部js文件代碼
<script src="first.js"></script>

<meta name="keywords" content="定義搜索的關鍵字">

<meta name="description" content="定義網站的描述信息">

body標籤

標籤	意義
b	加粗
i	斜體
u	下劃線
s	刪除
p	段落標籤
h1~h6	標題標籤
br	換行
hr	水平線

特殊符號

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

div標籤和span標籤

div 標籤用來定義一個塊級元素

span 標籤用來定義行內元素

這兩個標籤是前期構建網頁的基本骨架。

a 標籤

超連接標籤，指的是從一個網頁指向另外一個目標網站的鏈接關係，

跳轉功能

href參數控制跳轉的地址

默認在當前窗口跳轉，能夠指定新建窗口打開

target = "_self" 當前窗口跳轉

target = "_blank" 新建窗口打開

<a href="https://www.baidu.com" target="_blank">點我點我點我</a>

錨點功能

給a標籤設置id值，而後在href中書寫對應的a標籤id值，點擊便可跳轉到對應的位置。

<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: red;height: 1000px"></div>
<div style="background-color: green;height: 1000px"></div>
<div style="background-color: orange;height: 1000px"></div>
<a href="#a2">回到中部</a>
<br>
<a href="#a1">回到頂部</a>

img 圖片標籤

參數：

src：源圖片地址
alt：當圖片加載不出來的時候展現的提示信息
title：鼠標懸浮上去以後展現的提示信息

width 和 height：默認等比例縮放，只需設置一個參數便可。

<img src="http://b-ssl.duitang.com/uploads/item/201208/30/20120830173930_PBfJE.jpeg" alt="圖片不見了" title="鼠標懸浮在這裏的文字信息" width="10">

列表標籤

無序列表

type 參數：

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

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

有序列表

type 參數：

1：數字列表，默認
A：大寫字母
a：小寫字母
I：大寫羅馬數字
i：小寫羅馬數字

<ol type="A">
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ol>

標題列表

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

表格標籤

展現數據通常用到表格標籤

<table>
    <thead>
        <tr>
            <th>user</th>
            <th>pwd</th>
        </tr>
    </thead>
    <boday>
        <tr>
            <td>qinyj</td>
            <td>123</td>
        </tr>
    </boday>
</table>