前端學習日記 (一)

時間  2019-11-07
標籤 前端 學習 日記 简体版
原文   原文鏈接

前端介紹

前端開發是建立WEB頁面或APP等前端界面呈現給用戶的過程,經過HTML、CSS、JavaScript以及衍生出來的各類技術、框架、解決方案,來實現互聯網產品的用戶界面交互。它從網頁製做演變而來,名稱上有很明顯的時代特徵。css

HTML用於展示網頁的內容、CSS用於展示網頁的外觀、JavaScript用於實現一些網頁動做。html

 

WEB框架的本質

瀏覽器輸入網址回車後都發生了什麼?前端

瀏覽器(客戶端)給服務端發送了一個消息,服務端在拿到了消息以後,服務端返回消息,瀏覽器展現頁面瀏覽器

 

客戶端和服務端的消息格式要一致,所以就有了HTTP協議來約束兩邊的消息格式。app

咱們能夠寫一個服務端來訪問自定義的網頁:框架

import socket
sk = socket.socket()
sk.bind(('127.0.0.1',8000))
sk.listen(4)

while 1:
    conn,addr = sk.accept()
    data = conn.recv(1024)                      #接收消息
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
    conn.send(b'Hello World!')                  #發送消息

    conn.close()

執行代碼後再打開瀏覽器去訪問127.0.0.1:8000這個網址,就能夠看到下面的頁面:socket

改變程式碼:jsp

conn.send(b'<h1>Hello world!</h1>\n')

這樣字體就發生了改變:字體

發送多行的HTML代碼網站

咱們能夠新建一個txt文件,把要執行的HTML代碼放到裏面 

服務端經過文件讀取HTML代碼展示頁面:

import socket
sk = socket.socket()
sk.bind(('127.0.0.1',8000))
sk.listen(4)

while 1:
    conn,addr = sk.accept()
    data = conn.recv(1024)                      #接收消息
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
    with open('h.txt','rb') as f:
        msg = f.read()
    conn.send(msg)
    conn.close()

txt文檔:

那最後的展示結果和上面是一致的

展現圖片:

在網上隨便找一張圖片去拿到它的圖片地址,而後在txt檔中寫下這段代碼:

<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFC_UkJ_78k9qpn5-JoC16WAa-phw7hF8lGsT8AVumfen3FghR&s'>

執行服務端代碼再刷新網頁:

增長一個連接

<a href='https://ieeexplore.ieee.org/Xplore/home.jsp'>Open Website!</a>

執行服務端代碼再刷新網頁:

WEB開發的本質:服務端、瀏覽器、HTML文件

一樣若是要將txt檔裏的文件變動爲html檔,也是能夠有相同的執行效果

服務端:

import socket
sk = socket.socket()
sk.bind(('127.0.0.1',8000))
sk.listen(4)

while 1:
    conn,addr = sk.accept()
    data = conn.recv(1024)                      #接收消息
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
    with open('h.html','rb') as f:
        msg = f.read()
    conn.send(msg)
    conn.close()

 

經常使用標籤

HTML是一個標準它規定了你們怎麼寫網頁

像'<標籤名>...</標籤名>'這種格式的語言是標記語言,好比XML、HTML。標籤能夠分爲單標籤和雙標籤。

那像前面所寫的HTML語句並非規範的語句,接下來對它進行改進:

<!DOCTYPE html>     <!--聲明這是一個HTML5的文件-->
<html>      　　　　 <!--HTML格式-->
    <head>      <!--用來展現瀏覽器相關的一些信息(標題、引用的文件)-->

    </head>
    <body>      <!--放文件-->
        <h1>Hello world!</h1>
        <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFC_UkJ_78k9qpn5-JoC16WAa-phw7hF8lGsT8AVumfen3FghR&s'>
        <a href='https://ieeexplore.ieee.org/Xplore/home.jsp'>Open Website!</a>
    </body>
</html>

標籤分析

咱們能夠直接建立一個新的HTML檔,裏面就有已經寫好的HTML結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<html lang="en">...</html>表示這個網頁的主要語言是英文,那若是是中文能夠改爲<html lang="zh-CN">...</html>

<meta charset="UTF-8">表示編碼方式爲UTF-8

<title>...</title>表示網頁的標題

<!--註釋內容-->表示註釋

<style>...</style>表示內部的樣式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My first HTML FILE</title>
    <style>
        a{
            color:red;
         }
    </style>
</head>
<body>
    <a href="">Hello world!</a>     
</body>
</html>

網頁結果:

<script>...</script>表示JS代碼或引入JS外部文件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My first HTML FILE</title>
    <style>
        a{
            color:red;
         }
    </style>
    <script>
        alert("Please wait...")
    </script>
</head>
<body>
    <a href="">Hello world!</a>
</body>
</html>

網頁結果:

<link/>引入外部樣式表文件,好比說把CSS寫入另一個文件中在經過link給引入進來 

先建立一個c.css文件再寫入代碼:

a{
    color : green;
}

再在html文件中引入這個css文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My first HTML FILE</title>
    <link rel="stylesheet" href="c.css">
</head>
<body>
    <a href="">Hello world!</a>
</body>
</html>

最後網頁上顯示:

<meta/>定義網頁元信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="html meta,meta properties,meta conclution">   <!--表示這個網頁的相關描述-->
    <meta name="keywords" content="The first HTML file.">                           <!--表示網頁的關鍵字-->
    <meta http-equiv="refresh" content="10;https://www.runoob.com/">                <!--表示這個網頁在十秒以後跳轉到另一個網站-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">                           <!--讓IE以最高模式渲染文檔-->
    <title>My first HTML FILE</title>
    <link rel="stylesheet" href="c.css">
</head>
<body>
    <a href="">Hello world!</a>
</body>
</html>

<h一、2..6>...</h一、2...6>之間的差別

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>This is h1!</h1>
    <h2>This is h2!</h2>
    <h3>This is h3!</h3>
    <h4>This is h4!</h4>
    <h5>This is h5!</h5>
    <h6>This is h6!</h6>
    This is h!
</body>
</html>

網頁效果:

<img src=" " alt=" " title=" ">src表示圖片的來源地址,alt表示當圖片失效後的一些處理,title表示圖片的提示

<a href=" " target="_blank">...</a>表示能夠保留當前的頁面下開啓一個新的頁面

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <a href='https://ieeexplore.ieee.org/Xplore/home.jsp' target="_blank">Open Website!</a>
</body>
</html>

製做到頂部到底部效果:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="GB2312">
</head>
<body>
    <a href="#a2" id="a1">到底部</a>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <h1>aaaaaaaaa</h1>
    <a href='https://ieeexplore.ieee.org/Xplore/home.jsp' target="_blank">Open Website!</a>
    <a href="#a1" id="a2">到頂部</a>
</body>
</html>

 

其餘經常使用標籤

1.<b>...</b>表示字體加粗

2.<i>...</i>表示斜體

3.<u>...</u>表示加下劃線

4.<s>...</s>表示加刪除線

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="GB2312">
</head>
<body>
    你好!
    <b>你好!</b>
    <i>你好!</i>
    <u>你好!</u>
    <s>你好!</s>
</body>
</html>

5.<p>...</p>表示一個段落

6.<br>表示換行

7.<hr>表示水平線

 

特殊字符

1.空格 &nbsp;

2.>　　&gt;

3.<　　&lt;

4.&　　&amp;

5.¥　　   &yen;

6.©　　&copy;

7.註冊 &reg;

 

div標籤和span標籤

div標籤:用於定義一個塊級元素,自己沒有其餘的特色,能夠經過CSS樣式去賦予不一樣的表現

span標籤:用來定義一個行內元素,自己沒有其餘的特色,能夠經過CSS樣式去賦予不一樣的表現

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="GB2312">
</head>
<body>
    <div>d第一行!</div>
    <div>d第二行!</div>
    <div>d第三行!</div>
    <span>s第一行</span>
    <span>s第二行</span>
    <span>s第三行</span>
</body>
</html>

網頁效果:

標籤能夠分爲塊級標籤和行內標籤

塊級標籤(h1~h六、div、p、hr):

　　默認佔瀏覽器長度、能設置長和寬

行內標籤(a、img、u、s、i、b、span):

　　根據內容決定長度、不能設置長和寬

 

列表標籤

分爲有序列表、無序列表和標題列表

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="GB2312">
</head>
<body>
    <ul>
        <li>apple</li>
        <li>orange</li>
        <li>pear</li>
    </ul>

    <ol>
        <li>apple</li>
        <li>orange</li>
        <li>pear</li>
    </ol>
</body>
</html>

網頁效果:

 

無序列表<ul>...</ul>:

type屬性:

①disc(實心圓點,默認值)

②circle(空心圓圈)

③square(實心方塊)

④none(無樣式)

以實心方塊爲例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="GB2312">
</head>
<body>
    <ul type="square">
        <li>apple</li>
        <li>orange</li>
        <li>pear</li>
    </ul>
</body>
</html>

網頁效果:

 

有序列表<ol>...</ol>:

type屬性:

①1 數字列表,默認值

②A 大寫字母

③a 小寫字母

④I 大寫羅馬

⑤i 小寫羅馬

strat屬性(表示這個標籤的起始值)

以大寫羅馬爲例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="GB2312">
</head>
<body>
    <ol type="I" start="5">
        <li>apple</li>
        <li>orange</li>
        <li>pear</li>
    </ol>
</body>
</html>

網頁效果:

標題列表

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="GB2312">
</head>
<body>
    <dl>
        <dt>title1</dt>
        <dd>content1</dd>
        <dd>content1</dd>
        <dt>title2</dt>
        <dd>content2</dd>
        <dd>content2</dd>
    </dl>
</body>
</html>

網頁效果:

 

 

表格標籤

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="GB2312">
    <title>表格示例</title>
</head>
<body>
    <table border="1" cellpadding="10" cellspacing="0" width="0">
        <!--border表示邊框的像素 cellpadding表示內邊距 cellspacing表示外邊距 width表示像素的百分比-->
        <thead>             <!--thead能夠寫也能夠不寫-->
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>性別</th>
                <th>愛好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice</td>
                <td>18</td>
                <td rowspan="2">Male</td>   <!--rowspan表示單元格豎跨多少行(相似於合併單元格) colspan表示單元格橫跨多少列-->
                <td>Football</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>19</td>
                <td>Skiing</td>
            </tr>
            <tr>
                <td>Maria</td>
                <td>20</td>
                <td colspan="2">Female</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

網頁效果:

 

 

 

快捷寫法

1.h1*4+Tab

<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>

2.h1*4>a+Tab

<h1><a href=""></a></h1>
<h1><a href=""></a></h1>
<h1><a href=""></a></h1>
<h1><a href=""></a></h1>

3.h1*4>a{標籤$}+Tab

<h1><a href="">標籤1</a></h1>
<h1><a href="">標籤2</a></h1>
<h1><a href="">標籤3</a></h1>
<h1><a href="">標籤4</a></h1>

4.h1*4>a.c1{標籤$}+Tab

<h1><a href="" class="c1">標籤1</a></h1>
<h1><a href="" class="c1">標籤2</a></h1>
<h1><a href="" class="c1">標籤3</a></h1>
<h1><a href="" class="c1">標籤4</a></h1>

5.h1*4>a.c1[id=a$]{標籤$}+Tab

<h1><a href="" class="c1" id="a1">標籤1</a></h1>
<h1><a href="" class="c1" id="a2">標籤2</a></h1>
<h1><a href="" class="c1" id="a3">標籤3</a></h1>
<h1><a href="" class="c1" id="a4">標籤4</a></h1>

5.多行操做alt鍵+左鍵

 

總結

1.行內標籤不能嵌套塊級標籤

2.p標籤不能嵌套塊級標籤　　　　

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程