day14 前端基礎 HTML

時間  2019-12-14
標籤 day14 day 前端 基礎 html 欄目 HTML 简体版
原文   原文鏈接

從今天開始，學習前端基礎。css

前端，就是HTML CSS JS 等html

對於咱們這種初學者，並不知道這些專業術語都是什麼，給你們舉一個形象的例子：前端

HTML  就是一我的，赤裸裸的人python

CSS    就是衣服，用來給人裝扮的衣服，能夠裝扮的很漂亮web

JS       就是讓人動起來，否則人就是一個木頭人，沒法動彈，只有經過這個纔可讓這我的變得活動起來。chrome

 

 

想知道前端和後端是如何交互的嗎？數據庫

我也是第一次知道，感受很好玩，我給你們作個demo 來演示一下客戶端是如何經過瀏覽器和服務器交互的小程序

服務器端：後端

#!/usr/bin/env python3
# Author: Shen Yang
import socket

def handle_request(client):
    buf = client.recv(1024)
    client.send(bytes("HTTP/1.1 200 OK\r\n\r\n",encoding='utf-8'))
    f = open('index.html', 'r', encoding='utf-8')
    data = f.read()
    f.close()
    import time
    r = str(time.time())
    data.replace('@@@@@',r)
    re=data.encode()
    client.send(re)

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('192.168.1.27', 8000))
    sock.listen(5)
    while True:
        connection, address = sock.accept()
        handle_request(connection)
        connection.close()

if __name__ == '__main__':
    main()

 

 

很好，咱們完成了一個最基本的socket server 端瀏覽器

 

 

 

好了，說了這些，相信你們已經能理解了。下面從HTML 開始

HTML 就是一套規則，是瀏覽器認識的規則,瀏覽器會根據相應的標籤，來渲染對應方式的網頁。

若是想開發HTML 網頁，就要學習這套規則，咱們寫html 寫好一個模板，而後經過後端程序去查詢數據庫把獲取的結果放到對應的位置，這樣就成了動態網頁了。

 

HTML 怎麼測試呢？很簡單，寫好文件直接使用瀏覽器打開便可，也能夠經過pycharm 來打開這個頁面，效果都同樣。

一個HTML 文件都有什麼呢？

1 頭部 head，和人同樣，須要有頭

2 身體 body，同上

 

 記住，一個HTML 文件只有一個html 標籤，第一行的意思是要說明這個html文件遵循的是什麼標準，由於瀏覽器不少，因此有不少不一樣的標準，可是目前你們都遵循這個標準，因此之後寫html就寫上這一行就能夠了。

 

這個標籤裏的意思是html 的屬性，lang 是說使用en 語言

head 標籤裏的內容是一些特殊的屬性：

<meta charset='UTF-8'>  指定字符集
在head 標籤寫的東西外面都是不可見的除了title 標籤
 

body 裏寫網頁的主題內容，就是咱們人類可見的信息。

 

html 註釋的方法是 ：

<!DOCTYPE html>
<!-- 這裏是註釋
相似於html 這種尖括號的東西叫作標籤，裏面的東西就是標籤的屬性 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com">百度一下</a>
</body>
</html>

 

 其實html 標籤按大的分類 分爲兩種：

1 自閉合標籤

2 主動閉合標籤

 

可是之後建議寫標籤的時候全寫爲主動閉合標籤，這樣在查找和修改的時候是很方便的。

 

先說自閉合標籤：

1 指定字符集

   <meta charset='UTF-8'>  

2 刷新和跳轉

 這個不經常使用，很差，看不到有幾秒  救急用

< meta http-equiv=「Refresh」 Content=「30″>

< meta http-equiv=」Refresh「 Content=」5; Url=http://www.autohome.com.cn「 />

3 關鍵詞

< meta name="keywords" content="星際2,星際老男孩,專訪,F91,小色,JOY" >

4 描述

例如：cnblogs

5 X-UA-Compatible 兼容IE 的設置，若是不關心IE 下的效果的就不用寫

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

6 icon  網站在瀏覽器中的小圖標

 

自閉合標籤基本就這些，下面開始學習重要的主動閉合標籤，這些標籤是咱們最經常使用的標籤，咱們在寫html的時候用的最多的就是這些標籤：

1 <p></p>  段落標籤 佔一行

   <br>   換行 放在段落裏雖然是換行，可是這個段落仍是一個段落
 
2 <h1></h1>   最大的 標題 最小h6

 

3 <span></span>  標籤，是行內標籤，不換行

 

說到這裏咱們能夠爲全部的標籤根據是否佔一行來分類：

1 塊級標籤，無論多少字都佔一行          例如： h 系列   b 標籤

2 行內標籤，只佔用本身大小的位置       例如： span 標籤

咱們來寫一個簡單的文件看一下他們的區別：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>個人小站</title>
</head>
<body>
<p>這裏是一個段落<br/>這是一個段落</p>
<p>新的段落</p><p>新的段落2</p>
<h1>最大的標題，無論標題文字多少，都佔用一行</h1>
<h2>第二大標題，無論標題文字多少，都佔用一行</h2>
<span>行內標題，標題多大佔用多大</span>
</body>
</html>

 

繼續說主動閉合標籤：

4 <div></div> 是一個白板，可是是塊級標籤   用的最多， 經過css 能夠來回轉換爲span 等

  <span></span>  也是一個白板，可是是行內標籤

 

還有，標籤之間是能夠鑲嵌的：

 

標籤存在的意義就是查找特定標籤
定位的時候好定位，這樣咱們在使用 js css 裝飾html的時候直接找id 就行

 

讓咱們來個小結：

 

寫了這麼多全是看得見的東西，讓咱們寫一個能夠輸入的東西吧，寫一個登錄的小程序：

<body>
    <input type="text" name="user"/>
    <input type="text" name="email"/>
    <input type="password" name="pwd"/>
    <input type="submit" value="提交"/>
</body>

打開是這樣的:

能夠輸入信息，能夠點提交，可是咱們並不知道要提交到哪裏，並不能看到如何和服務器交互。

其實想和服務器交互是須要提交數據給服務器的，html 會把這裏的數據以一個字典的形式發送給服務器。

因此咱們須要把這段代碼用form 包裹起來，並指定要提交的服務器及提交的方式：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://192.168.16.35:8888/index" method="POST">
    <input type="text" name="user"/>
    <input type="text" name="email"/>
    <input type="password" name="pwd"/>
    <input type="submit" value="提交"/>
    </form>

</body>
</html>

這樣咱們看到的網頁是這個樣子的，當點擊提交之後會出現一個表單數據，是以一個字典方式提交的，服務器就是從這裏取數據的。　　

提交用 submit 
默認button 什麼功能也沒有

 

加入請求方式 POST

若是是GET  會把提交的數據拼接到url 中提交到服務器中

就是把數據放到了請求頭中發送

POST 就會把數據放到請求信息中，即放到內容中
 
 
請記住一點：
GET POST 只是體現形式不同 ， 沒有安全不安全一說

 

寫一個helloworld 服務端和客戶端，使用chrome 來請求，讓咱們看下服務器是如何和瀏覽器交互的：

server：

import tornado.ioloop
import tornado.web
# pip3 install tornado
class MainHandler(tornado.web.RequestHandler):
    def get(self):
        print(111)
        u = self.get_argument('user')
        e = self.get_argument('email')
        p = self.get_argument('pwd')
        if u == 'yang' and p == '123' and e == 'yang@qq.com':
            self.write("OK")
        else:
            self.write("滾")
    def post(self, *args, **kwargs):
        u = self.get_argument('user',None)
        e = self.get_argument('email',None)
        p = self.get_argument('pwd',None)
        print(u,e,p)
        self.write('POST')
application = tornado.web.Application([
    (r"/index", MainHandler),
])
if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

啓動

 

客戶端網頁：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://192.168.1.27:8888/index" method="GET">
    <input type="text" name="user"/>
    <input type="text" name="email"/>
    <input type="password" name="pwd"/>
    <input type="submit" value="提交"/>
    </form>
</body>
</html>

 

打開這個網頁，輸入數據，提交

GET 方式：

能夠看到數據是從url 中提交的：

 

服務器端的響應：

 

使用POST 提交：

服務端相應：

 

 

input 系列：
 input type='text'          #文本
 input type='password'  #密碼
 input type='submit'      #提交按鈕，提交表單
 input type='button'       #按鈕

 

固然表單也是能夠提交給別人的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Yang 搜索！搜天下</h1>
    <form action="https://www.sogou.com/web">
            <input type="text" name="query"/>
            <input type="submit" value="搜索" />
    </form>
</body>
</html>

 

這樣作出的網頁是直接用搜狗搜索的

 

input 框寫value 是默認值

 

radio選擇：
單選框
name 都同樣就不能全選了

服務器沒法識別到底選擇的是哪一個
加入value  才能夠識別

 

多選框：
checkbox

 

作一個小總結：

默認值：

 

 

上傳文件：
input type='file'

 上傳文件依賴於form 的屬性 ，form 加上這個屬性

 

重置按鈕：
用戶選的不想選了能夠點重置，把本身寫的東西還原爲原來的樣子

實踐一個完整的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            用戶：<input type="text" name="user"/>
            密碼：<input type="text" name="pwd"/>
            <p>請選擇性別：</p>
            男：<input type="radio" name="gender" value="1" checked="checked"/>
            女：<input type="radio" name="gender" value="2"/>
            <p>愛好</p>
            籃球：<input type="checkbox" name="favor" value="1"/>
            足球：<input type="checkbox" name="favor" value="2"/>
            檯球：<input type="checkbox" name="favor" value="3"/>
            網球：<input type="checkbox" name="favor" value="4"/>
            <p>技能</p>
            撩妹：<input type="checkbox" name="skill" value="1"/>
            寫代碼：<input type="checkbox" name="skill" value="2"/>
            <p>上傳文件</p>
            <input type="file" name="fname"/>
        </div>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

效果：

 

多行數據：

 

下拉框：

<select>
          <option>上海</option>
           <option>上海</option>
           <option>上海</option>
</select>

 

 取數據：

能夠選擇size  就會變樣式，通常用於多選
多選 multiple

 

分組：

select 定義name  option 定義value 就能夠提交到後臺了

 

 實踐一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
           <select name="city">
                <option value="1">上海</option>
                <option value="2">北京</option>
                <option value="3">廣州</option>
            </select>
            用戶：<input type="text" name="user"/>
            密碼：<input type="text" name="pwd"/>
            <p>請選擇性別：</p>
            男：<input type="radio" name="gender" value="1" checked="checked"/>
            女：<input type="radio" name="gender" value="2"/>
            <p>愛好</p>
            籃球：<input type="checkbox" name="favor" value="1"/>
            足球：<input type="checkbox" name="favor" value="2"/>
            檯球：<input type="checkbox" name="favor" value="3"/>
            網球：<input type="checkbox" name="favor" value="4"/>
            <p>技能</p>
            撩妹：<input type="checkbox" name="skill" value="1"/>p
            寫代碼：<input type="checkbox" name="skill" value="2"/>
            <p>上傳文件</p>
            <input type="file" name="fname"/>
            <textarea name="meno">請文明發言，否則會封禁你的IP</textarea>
            <select name="df" multiple="multiple" size="2">
                <option>昌平</option>
                <option>昌平2</option>
                <option>昌平3</option>
            </select>
        </div>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

　　

 

 a標籤的跳轉屬性：

 

 a標籤有兩個做用：
1 跳轉
2 錨點
 
錨點 能夠指定打開的網頁位置

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <div>
            <select name="city">
                <option value="1">上海</option>
                <option value="2">北京</option>
                <option value="3">廣州</option>
            </select>
        </div>
        <a href="#i1">第1個目錄</a>
        <a href="#i2">第2個目錄</a>
        <a href="#i3">第3個目錄</a>
        <a href="#i4">第4個目錄</a>
        <div id="i1" style="height: 600px;">第1個</div>
        <div id="i2" style="height: 600px;">第2個</div>
        <div id="i3" style="height: 600px;">第3個</div>
        <div id="i4" style="height: 600px;">第4個</div>
    </form>
</body>
</html>

 

 

在html 中 id 是不能重複的，name 能夠重複

圖片標籤：

圖片跳轉： 
包到a標籤裏就好了

 

alt="沒有"        #沒有圖片會顯示：
title="大美女"   #鼠標放到圖片會顯示的標題

 

 

效果：

 

 

總結一下：

 

 

 
列表標籤：

 兩種：

效果：

表格：
<table>
</table>

 

 

實踐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <td>主機</td>
        <td>端口</td>
        <td>操做</td>
    </tr>
    <tr>
        <td>192.168.1.1</td>
        <td>80</td>
        <td>
            <a href="#">刪除</a>
            <a href="#">詳細</a>
        </td>
    </tr>
    <tr>
        <td>192.168.1.2</td>
        <td>88</td>
        <td>
            <a href="#">刪除</a>
            <a href="#">詳細</a>
        </td>
    </tr>
</table>
</body>
</html>

 

上面的不規範，規範的就是分表格的表頭和表身

 

 

單元格合併：
想佔幾格就寫幾
左右佔幾列：（橫向合併）

 

上下佔幾行：（縱向合併）

 

實踐：
合併行： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
        <tr>
            <td>主機</td>
            <td>端口</td>
            <td>操做</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">192.168.1.1</td>
            <td>80</td>
            <!--<td>-->
                <!--<a href="#">刪除</a>-->
                <!--<a href="#">詳細</a>-->
            <!--</td>-->
        </tr>
        <tr>
            <td>192.168.1.2</td>
            <td>88</td>
            <td>
                <a href="#">刪除</a>
                <a href="#">詳細</a>
            </td>
        </tr>
            <tr>
            <td>192.168.1.3</td>
            <td>99</td>
            <td>
                <a href="#">刪除</a>
                <a href="#">詳細</a>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

 

 合併列：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
        <tr>
            <td>主機</td>
            <td>端口</td>
            <td>操做</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">192.168.1.1</td>
            <td>80</td>
            <td>
                <a href="#">刪除</a>
                <a href="#">詳細</a>
            </td>
        </tr>
        <tr>
            <!--<td>192.168.1.2</td>-->
            <td>88</td>
            <td>
                <a href="#">刪除</a>
                <a href="#">詳細</a>
            </td>
        </tr>
            <tr>
            <td>192.168.1.3</td>
            <td>99</td>
            <td>
                <a href="#">刪除</a>
                <a href="#">詳細</a>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

 

label 標籤：
經過關聯id 實現點用戶名那個字也能輸入的效果

 點label 就會能輸入

 
 
HTML 到這裏基本差很少了，咱們再來搞點CSS：
 
 
咱們在製做網頁的時候首先要對網頁作分解，即：
一個網頁通常分爲三部分 ，頭部，身體 尾部

 

CSS 能夠給白板來着色：

顏色 RGB 顏色對照表
顏色可用經過chrome 查看別人的顏色也能夠選擇各類顏色的對應的代碼
 
 
先設置頭部效果：

 

 
CSS 有兩種寫的方式：
1 直接寫
 

 

2 頭部寫
 

 若是標籤是i1 就會應用這個樣式

 

 雖然這樣能夠，可是不規範，id都同樣了，在html 中 id 是不能同樣的！！

 

第三種方法：  {最最最經常使用}

 
而後標籤裏寫：
class

 

這裏又引出了一個名詞：

選擇器 {所有寫在head 中}
1 id選擇器     #
2  類選擇器    . 
3 標籤選擇器 dev
4 層級選擇器
5 組合選擇器

 

完整書寫方法：

 

 
 css 註釋 /*  */
 
 
 head裏寫：

意思是找到本頁全部的div 並設置對應的顏色，無論你在幾層裏，都會設置

 

 span 下面的全部div 標籤給渲染了

 

類和層級的混合選擇：

 意思是查找 class="c1" 的標籤下的 div 標籤

 

組合選擇器：

能夠選擇多個，class等都是這樣使用

 

 

屬性選擇器：

 

把type爲text 屬性的標籤所有渲染

屬性能夠自定義:

根據標籤裏的屬性再作一次篩選

 

總結：

 .

 

CSS  樣式的優先級：

 

 

 

引入文件中的樣式：
全部的其餘文件均可以引入這個文件，重用性最好的：

 

 

 默認給你把上下左右都加上了，也能夠單獨加不一樣的邊

 

 

指定長寬等：

固然，也能夠經過百分比來調整

 

水平居中：

 

水平和上下都居中，加上line-height

line-height 的意思爲設置文字在那個像素之間垂直居中

 

 加粗：

 

實踐：

<dev style="border: 2px solid deepskyblue;
            height: 48px;
            width: 200px;
            text-align: center;
            color: palevioletred;
            font-size: 25px;
            font-weight: bold;
            ">This is my name</dev>

效果：

 

float

飄起來,定義從哪裏飄，飄的位置：

也能夠另外一個從右邊開始飄，這樣中間就會留下一個空白

若是超過百分之多少就另起一行

 

重要的一點，飄起來後的結尾必定要添加：

<div style="clear: both;"></div>

否則就下不來了，出現錯版

 

 

 

 

 

改造div 或者span 爲想要的展現方式

效果：

 

注意：
行內標籤：
     沒法設置高度 寬度， padding  margin
塊級標籤：
     沒問題
 
 
讓指定的div消失：

這種就是默認display = none  當點的時候就會顯示：

 

離上邊的高度有多少：

針對內部的來看 是他的外部增長了多少

 

 

 

 
裏面的上面的邊距變粗了。。
內部仍是那樣 

 

 

 

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