day42 前端-html入門

時間  2019-11-08
標籤 day42 day 前端 html 入門 欄目 HTML 简体版
原文   原文鏈接

Html

本身實現一個服務端

把瀏覽器當成一個客戶端來實現server端與客戶端的交互html

import socket 


server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
conn, addr = server.accept()
msg = conn.recv(1024)
print(msg)  #
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')  #若是想把瀏覽器做爲客戶端來訪問該服務端，服務端與瀏覽器交互須要知足HTTP協議的規範，HTTP協議的詳細內容會在Django基礎講解。
conn.send(b'OK')
conn.send(b'<h1>OK</h1>')  # 返回瀏覽器一個用<h1></h1>包裝過的OK，在瀏覽器段咱們會發現OK變得又大又粗了。
conn.close()

server.close()

 

HTML概述

  • HTML（Hypertext Markup Language）中文： 超文本標記語言。
  • 它不是一門編程語言，是一種描述性的標記語言（沒有編譯過程），用於描述超文本內容的顯示方式，好比：字體、顏色、大小等。
    • 超文本：超越文本，在文本之上更豐富，還能夠加超級連接，最多見的超連接內容有：視頻、圖片、音頻等。
    • 標記：<單詞或者字母>成爲標記，一個HTML頁面是由多個標記組成。
  • HTML中除了標籤（語義）其餘什麼都沒有　　
  • HTML內的常見內容（術語）：
    • 網頁：由各類標記組成的一個頁面就叫網頁。
    • 主頁(首頁) : 一個網站的起始頁面或者導航頁面。
    • 標記： <p>稱爲開始標記 ，</p>稱爲結束標記，也叫標籤。每一個標籤都規定好了特殊的含義。
    • 元素：<p>內容</p>稱爲元素。
    • 屬性：給每個標籤所作的輔助信息。

HTML基本數據結構

最基本的文本結構:前端

<!--doctype html 爲了告訴瀏覽器個人文件類型,html默認是意思是html5規則,這裏後期的學習不用改,必定記住了-->
<!DOCTYPE html>

<!--告訴瀏覽器我是英文,告訴瀏覽器是哪一種語言 "zh-cn" 是中文-->
<html lang="en">

<head>
    <!--網站配置-->
    <meta charset="UTF-8">
    <!--網站標題-->
    <title>Title</title>
</head>

<!--body是瀏覽器要顯示的內容-->
<body>
哈哈哈
<strong>哈哈哈</strong>
</body>
</html>

 

HTML經常使用標籤

<!DOCTYPE html>

  1. 每一個HTML文件須要有一個此標籤，來告知瀏覽器應該用那種規範來渲染HTML文件內容。
  2. <!DOCTYPE>必須在文檔的第一行，位於<html></html>以前。
  3. <!DOCTYPE>做爲了解部份內容連接：http://www.w3school.com.cn/tags/tag_doctype.asp

<head>內經常使用標籤

標籤 意義
<title></title> 網頁標題
 <meta/> 網頁基本信息
 <link/> 引入外部樣式 
 <script></script> 定義JS代碼或者引入外部JS文件 
 <style></style> 定義內部樣式表

<meta>html5

　　meta簡介:編程

  1. <meta>標籤爲自閉和標籤（ 單身標籤）。
  2. <meta>標籤位於文檔的頭部，不包含任何內容。
  3. <meta>標籤提供的內容是用戶不可見的。
  4. <meta>標籤 元素可提供有關頁面的原信息（meta-information）,針對搜索引擎和更新頻度的描述和關鍵詞。

　　meta的兩個屬性：瀏覽器

　　

　　　meta共有兩個屬性，分別是：http-equiv屬性和name屬性。不一樣的屬性擁有不一樣的參數值，這些不一樣的參數值實現了不一樣的頁面功能。服務器

  1. http-equiv屬性：至關於http的文件頭做用，它向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。
      
    <!--2秒後跳轉到對應的網址，注意引號-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文檔的編碼類型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告訴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="老男孩教育Python學院">

 

 <body> 內經常使用標籤

　　基本標籤:數據結構

　　

字體標籤

<font>不同意使用，html5中已經廢棄此標籤</font>app

<u>若是文本不是超連接，就不要對其使用下劃線</u>socket

<i>顯示斜體文本效果</i>編程語言

<b>粗體文本</b>根據 HTML5 規範，在沒有其餘合適標籤更合適時，才應該把 <b> 標籤做爲最後的選項

<strong>把文本定義爲語氣更強的強調的內容</strong>

<s>刪除文本</s>在HTML5中再也不支持，用<del>代替了

上標2<sup>1</sup>

下標2<sub>1</sub>
排版標籤 <h1>~<h6><p><div><span><br><hr>
超連接標籤 <a>
圖片標籤 <img>

　　特殊字符：

　　

&nbsp 空格
&lt <
&gt >
&qout "
&apos '

　　這些是最經常使用的。

　　須要瞭解的有：

  • &amp;：符號&
  • &copy;：版權©
  • &trade;：商標™

　　其餘字符參照表：http://tool.chinaz.com/Tools/HtmlChar.aspx

 

a標籤的用法

超連接:

 

返回頂部和返回底部:

 

鏈接到指定文件:

img標籤的用法

 

 

 

 p標籤(段落標籤)的用法

p標籤自帶行間距

 

div標籤(段落標籤)的用法

沒有行間距,只是單純的換行

 

span標籤的用法

 

 

沒有行間距,沒有換行,只是單純的空格

 

table標籤的用法

 

表格標籤也是很是經常使用的標籤。

生活中的一個表格（table）是由 行（tr） 和（td） 列組成的。

可是在前端中一個表格（table）是由行（tr）組成，行（tr）是由單元格（td）組成。

  
<table>
    <tr>
        <td>姓名</td>
        <td>性別</td>
        <td>年齡</td>
        <td>愛好</td>
    </tr>
    <tr>
        <td>大娃</td>
        <td>不詳</td>
        <td>不詳</td>
        <td>舉重</td>
    </tr>
    <tr>
        <td>二娃</td>
        <td>不詳</td>
        <td>不詳</td>
        <td>聽、看</td>
    </tr>
    <tr>
        <td>三娃</td>
        <td>不詳</td>
        <td>不詳</td>
        <td>扎本身，撞本身</td>
    </tr>
</table>
 

這個時候咱們發現，這裏的表格沒有邊框呀。別急，邊框在表格的屬性中能夠設置。

table（表格）的屬性：

  •  border：邊框單位是像素。 
    border-style:dotted solid double dashed; 點、線、雙線、虛線
  • style="border-collapse:collapse;"：單元格的線與邊框線合併。
  • width：寬度，單位是像素。
  • bordercolor：邊框的顏色。
  • align：表格的水平對齊方式，屬性值：left、right、center。
  • background：表格的背景圖片。
  • bgcolor：表格的背景顏色。
  • cellpadding：單元格的文字距離四條邊的距離，單位是像素，默認距離左邊那條線的距離爲0，若是想更改其默認距離右邊的距離爲0的話，設置屬性dir="rtl"
  • cellspacing：單元格和單元格之間的距離，單位是像素，默認值爲0。切記：若使用此屬性，請刪除 style="border-collapse:collapse;"。

帶一些屬性的代碼及效果圖：

<table  border="10px" cellspacing="10px" width="500px" height="500" bordercolor="#836FFF" bgcolor="#EEA9B8" >

 

 

表格的行 tr

咱們剛纔說過前端中的表格（table）僅且只有行（tr）組成。

表格的行也具備本身的屬性：

  • dir：決定此行單元格的排列方式，默認是從左到右（ltr），可更改成：從右到左（rtl）。
  • bgcolor：設置這一行的單元格的背景顏色。（tr沒有background屬性了，想要實現給這一行增長一個背景圖片的效果，能夠經過CSS來實現）。
  • height：行高。
  • align：本行水平對齊方式，能夠是left、right、center
  • valign：本行的垂直對齊方式，能夠是top、middle、bottom

表格的單元格 td

咱們剛纔說過前段中行（tr）中是單元格（td），沒有列的概念。

 

單元格也具備本身的屬性：

  • width：寬，單位像素/百分比，例如width="50%"指此列的全部單元格佔整張表的50%寬度。
  • height：高，單位像素/百分比，例如height="50%"指此行的全部單元格佔整張表的50%高度。
  • align：水平對齊方式，能夠是left、right、center。
  • valign：垂直對齊方式，能夠是top、middle、bottom。
  • bgcolor：背景顏色。
  • background：背景圖片。

合併單元格

excel中的合併單元格就是把多個單元格合併成一個，在前段中合併單元格也是這樣的。

單元格合併能夠從一下兩個方向出發（單元格的屬性）：

  • colspan：橫向合併，例如colspan="2"表示此單元格水平方向上要佔據兩個單元格。
  • rowspan：縱向合併，例如rowspan="2"表示此單元格垂直方向上要佔據兩個單元格。

代碼及效果展現：

  
<table  border="10px" cellspacing="10px" width="500px" height="500" bordercolor="#836FFF" bgcolor="#EEA9B8" >
    <tr>
        <td>姓名</td>
        <td>性別</td>
        <td>年齡</td>
        <td>愛好</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">大娃</td>
        <td>不詳</td>
        <td>不詳</td>
        <td>舉重</td>
    </tr>
    <tr>
        <td>二娃</td>
        <td>不詳</td>
        <td>不詳</td>
        <td>聽、看</td>
    </tr>
    <tr >
        <td width="50%" height="50%">三娃</td>
        <td>不詳</td>
        <td>不詳</td>
        <td>扎本身，撞本身</td>
    </tr>
</table>
 

 加粗版的單元格用th替代掉td便可（加粗的是單元格內的內容），其餘屬性與td同樣，不需修改，且單元格內的內容會居中顯示。

表格的<caption>、<thead>、<tbody>、<tfoot>

caption：表格的標題，與tr同級。

caption代碼示例及效果：

  
<table  border="10px" cellspacing="10px" width="500px" height="500" bordercolor="#836FFF" bgcolor="#EEA9B8" >
    <caption>葫蘆兄弟信息表</caption>
    <tr>
        <th>姓名</th>
        <td>性別</td>
        <td>年齡</td>
        <td>愛好</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">大娃</td>
        <td>不詳</td>
        <td>不詳</td>
        <td>舉重</td>
    </tr>
    <tr>
        <td>二娃</td>
        <td>不詳</td>
        <td>不詳</td>
        <td>聽、看</td>
    </tr>
    <tr >
        <td width="50%" height="50%">三娃</td>
        <td>不詳</td>
        <td>不詳</td>
        <td>扎本身，撞本身</td>
    </tr>
</table>
 

thead、tbody、tfoot

  •  thead：顧名思義，表格的頭
  • tbody：顧名思義，表格的身子
  • tfoot：顧名思義，表格的腳

若是以這三個標籤命名，在頁面中渲染會先渲染thead，再渲染tbody，再渲染tfoot。

若是有重複的thead、tbody、tfoot的話，則按會按照先頭再身子再腳的狀況顯示，多個頭則按前後順序顯示頭。

當表格內容很是大、很是多的時候，用thead、tbody、tfoot這種方式排版，數據就能夠一邊獲取一邊渲染，若是不，則等數據所有加載完再顯示整個表格。

代碼及效果演示：

  
<table border="10px" cellspacing="10px" width="500px" height="500" bordercolor="#836FFF" bgcolor="#EEA9B8">
    <caption>葫蘆兄弟信息表</caption>
    <tfoot>
    <td width="50%" height="50%">三娃</td>
    <td>不詳</td>
    <td>不詳</td>
    <td>扎本身，撞本身</td>
    </tfoot>
    <thead>
    <th>姓名</th>
    <td>性別</td>
    <td>年齡</td>
    <td>愛好</td>
    </thead>
    <tbody>
    <td>二娃</td>
    <td>不詳</td>
    <td>不詳</td>
    <td>聽、看</td>
    </tbody>
    <tbody>
    <td colspan="2" rowspan="2">大娃</td>
    <td>不詳</td>
    <td>不詳</td>
    <td>舉重</td>
    </tbody>

</table>
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

表格標籤也是很是經常使用的標籤。

生活中的一個表格（table）是由 行（tr） 和（td） 列組成的。

可是在前端中一個表格（table）是由行（tr）組成，行（tr）是由單元格（td）組成。

  
<table>
    <tr>
        <td>姓名</td>
        <td>性別</td>
        <td>年齡</td>
        <td>愛好</td>
    </tr>
    <tr>
        <td>大娃</td>
        <td>不詳</td>
        <td>不詳</td>
        <td>舉重</td>
    </tr>
    <tr>
        <td>二娃</td>
        <td>不詳</td>
        <td>不詳</td>
        <td>聽、看</td>
    </tr>
    <tr>
        <td>三娃</td>
        <td>不詳</td>
        <td>不詳</td>
        <td>扎本身，撞本身</td>
    </tr>
</table>
 

這個時候咱們發現，這裏的表格沒有邊框呀。別急，邊框在表格的屬性中能夠設置。

table（表格）的屬性：

  •  border：邊框單位是像素。 
    border-style:dotted solid double dashed; 點、線、雙線、虛線
  • style="border-collapse:collapse;"：單元格的線與邊框線合併。
  • width：寬度，單位是像素。
  • bordercolor：邊框的顏色。
  • align：表格的水平對齊方式，屬性值：left、right、center。
  • background：表格的背景圖片。
  • bgcolor：表格的背景顏色。
  • cellpadding：單元格的文字距離四條邊的距離，單位是像素，默認距離左邊那條線的距離爲0，若是想更改其默認距離右邊的距離爲0的話，設置屬性dir="rtl"
  • cellspacing：單元格和單元格之間的距離，單位是像素，默認值爲0。切記：若使用此屬性，請刪除 style="border-collapse:collapse;"。

帶一些屬性的代碼及效果圖：

<table  border="10px" cellspacing="10px" width="500px" height="500" bordercolor="#836FFF" bgcolor="#EEA9B8" >

 

 

表格的行 tr

咱們剛纔說過前端中的表格（table）僅且只有行（tr）組成。

表格的行也具備本身的屬性：

  • dir：決定此行單元格的排列方式，默認是從左到右（ltr），可更改成：從右到左（rtl）。
  • bgcolor：設置這一行的單元格的背景顏色。（tr沒有background屬性了，想要實現給這一行增長一個背景圖片的效果，能夠經過CSS來實現）。
  • height：行高。
  • align：本行水平對齊方式，能夠是left、right、center
  • valign：本行的垂直對齊方式，能夠是top、middle、bottom

表格的單元格 td

咱們剛纔說過前段中行（tr）中是單元格（td），沒有列的概念。

 

單元格也具備本身的屬性：

  • width：寬，單位像素/百分比，例如width="50%"指此列的全部單元格佔整張表的50%寬度。
  • height：高，單位像素/百分比，例如height="50%"指此行的全部單元格佔整張表的50%高度。
  • align：水平對齊方式，能夠是left、right、center。
  • valign：垂直對齊方式，能夠是top、middle、bottom。
  • bgcolor：背景顏色。
  • background：背景圖片。

合併單元格

excel中的合併單元格就是把多個單元格合併成一個，在前段中合併單元格也是這樣的。

單元格合併能夠從一下兩個方向出發（單元格的屬性）：

  • colspan：橫向合併，例如colspan="2"表示此單元格水平方向上要佔據兩個單元格。
  • rowspan：縱向合併，例如rowspan="2"表示此單元格垂直方向上要佔據兩個單元格。

代碼及效果展現：

  單元格合併代碼示例

 加粗版的單元格用th替代掉td便可（加粗的是單元格內的內容），其餘屬性與td同樣，不需修改，且單元格內的內容會居中顯示。

表格的<caption>、<thead>、<tbody>、<tfoot>

caption：表格的標題，與tr同級。

caption代碼示例及效果：

  caption屬性演示代碼

thead、tbody、tfoot

  •  thead：顧名思義，表格的頭
  • tbody：顧名思義，表格的身子
  • tfoot：顧名思義，表格的腳

若是以這三個標籤命名，在頁面中渲染會先渲染thead，再渲染tbody，再渲染tfoot。

若是有重複的thead、tbody、tfoot的話，則按會按照先頭再身子再腳的狀況顯示，多個頭則按前後順序顯示頭。

當表格內容很是大、很是多的時候，用thead、tbody、tfoot這種方式排版，數據就能夠一邊獲取一邊渲染，若是不，則等數據所有加載完再顯示整個表格。

代碼及效果演示：

  thead、tbody、tfoot代碼演示

 

 

 

列表(ul,ol)標籤的用法

ul無序列表

ul定義一個無序列表,經過type去改變無序列表的那個黑點,disc是實心黑點,默認是如此,square是方塊,circle是空心圓.

li是列表中的每個元素 

　　

　　ol有序列表

 ol定義一個有序列表,經過type去定義一個有序序號,能夠是1,A,a,I,i,有序列表中start屬性規定從哪一個序列號開始

li是列表中的一個元素

 

 dl二級菜單

 

 

 from表單的用法: 　　　

　　功能：

　　　　表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互

　　　　表單可以包含input系列標籤，好比文本字段、複選框、單選框、提交按鈕等等。

　　　　表單還能夠包含textarea、select、fieldset和 label標籤。

　　表單屬性

 

屬性 描述
accept-charset 規定在被提交表單中使用的字符集（默認：頁面字符集）。
action 規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete 規定瀏覽器應該自動完成表單（默認：開啓）。
enctype 規定被提交數據的編碼（默認：url-encoded）。
method 規定在提交表單時所用的 HTTP 方法（默認：GET）。
name 規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate 規定瀏覽器不驗證表單。
target 規定 action 屬性中地址的目標（默認：_self）。

 

 點擊提交按鈕，input中type=submit的那個按鈕，而後就會將form表單中全部用戶輸入的內容或者選擇的內容（{name屬性:值，}）都發給服務端（以咱們本身寫的那個socket舉例，打印一下接收的內容），可是全部的輸入標籤必須有一個叫作name的屬性。

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