[2] Web前後端基礎

《目錄》

前端

html

後端

概念

關係運算

SQL語句

前端

html

製作一個自己的網站，在《Web通信原理》中，我們搭建了 Web環境。

但使用的是 CMS(快速建站系統) 模板建成的，自己的網站最好是自己DIY的，因此，我們今天就手工打磨一個QQ空間的網站。

首先，百度一下知道了：網站都是由 html 語言寫成的，html 語言類似於積木。

鼠標右鍵點擊檢查就可以看到網頁的源代碼，開頭就是 html。

實驗環境：任何系統自帶的文本編輯器，但自帶的文本編輯器並不支持 html 高亮。

所以，在Mac環境下，我使用的是 Sublime Tex，Mac版下載參見《工具》；

在Windows環境下，安利使用 notepad++。

這是一份自我介紹的網頁，源碼：

<!DOCTYPE HTML>
<HTML>

<HEAD>
<META CHARSET = "UTF-8">
<TITLE>Debroonee的首頁</TITLE>
</HEAD>

<BODY>
<H1>1.1、HTML-編寫簡單的自我介紹網站</H1>
<P>Please allow me to introduce myself.  I'm Debroonee.</P>
<p>Nice to meet you. @everyone</p>
</BODY>

</HTML>

您可以把TA複製到文本編輯器裏，文件後綴改成 .html 或 .htm 放到桌面，再用瀏覽器打開即可。

以圖片對照源碼，再讀讀源碼的<英文>，就可以找到其中大致的聯繫了。

html語言又叫超文本標記語言，您看一下源碼，每行html語句都有標籤： <xxx>，而且 html 語言不止於文本，像圖片、視頻音樂等等都可以處理，因此叫超文本標記語言。

所有標籤都是成對出現的， <xxx> 代表開始標籤，</xxx> 代表結束標籤。

<!DOCTYPE HTML>
表示這是一個 html 文檔

html語言主要分爲倆部分，頭標籤<HEAD></HEAD> 和身體標籤<BODY></BODY>。

頭標標籤：網頁的標題、網頁支持的字符集、網頁的簡介。

<META CHARSET = "UTF-8">
設置網頁的字符集是 utf-8，像爬蟲時是需要以utf-8爲標準，否則會亂碼

<TITLE>Debroonee的首頁</TITLE>
效果如下圖

身體標籤：網頁的內容，如文章一般都是由標題 + 內容組成。

比如，源碼的<H1></H1>標籤就如 CSDN 博客的 H1 圖標，是最大的標題，H2 次之，H3最小：

<H1>1.1、HTML-編寫簡單的自我介紹網站</H1>

頭標籤的 <title></title>標籤裏面的內容就如這篇博客的名字，Web前後端基礎。

<H2></H2>等也是如此，因此啊，html 語言用起來和寫博客是差不多的；不過 html 語言語法更多，功能也更強。

<P>Please allow me to introduce myself.  I'm Debroonee.</P>
<p>Nice to meet you. @everyone</p>

<p></p> 表示一個段落。

如果需要實現一個html版的 QQ空間，需要掌握更多的 html 語言的標籤。

標籤	格式	舉例
標題標籤	<h1> - <h6>	<h3>xxx</h3>
超級鏈接	<a>	<a href = "www.baidu.com"></a>, href等寫在標籤裏的，都是此標籤的屬性。
圖片鏈接	<img>	<img src="圖片的鏈接" width="100px" height="50px"> width和height分別是圖片的寬度、高度，可省略。
換行標籤	<br/>	此標籤沒有屬性，也不是成對出現，只是用來換行，分別閱讀。
表格	<table>	<table>xxx</table>
表頭	<th>	<th>xxx</th>
行	<tr>	<tr>xxx</tr>
單元格	<td>	<td>xxx</td>
表單	<form>	主要有 3 種標籤單行輸入標籤：<input> 選擇框標籤：<select> 文本域標籤：<textarea>

實現 QQ空間，表單是重點。

因爲表單可以向服務器提供內容，因此，表單的單行輸入標籤有許多屬性：

左邊是 html標籤，右邊是 html標籤運行後的樣子。

最後是，列表

有序列表	<ol>xxx</ol>，裏面一般是列表項
無序列表	<ul>xxx</ul>，裏面一般是列表項
列表項	<li>xxx</li>

有/無序列表如，CSND博客的：

效果如下：

以上面的知識，實現 QQ空間：

<!DOTYPE HTML>

<HTML>
       <HEAD>
          <META CHARSET ="UTF-8">
          <TITLE> QQ空間登陸... </TITLE>
            <a href = "www.baidu.com">快速登陸通道，點“我”</a>
       </HEAD>
<br/>
       <BODY>
          <img src="https://qzonestyle.gtimg.cn/qzone/qzactStatics/imgs/20171122191630_ff8fef.jpg" style="width: 1062.4444444444443px; height: 707px; left: -223.22222222222217px;/>
          <!-- 註釋：不會顯示在網頁， 有一個圖片覆蓋問題 -->
<br/>
            賬號
          <input type = "text">
<br/>       密碼
          <input type = "password">
<br/>
          <input type = "checkbox">
         紅色
         <input type = "checkbox">
         綠色
         <input type = "checkbox">
         黃色
<br/>
          <input type = "radio">男
          <input type = "radio">女
<br/>
          <input type = "submit">
          <input type = "reset">
<br/>
          <input type = "hidden">
<br/>    
            <H2>
         驗證碼
         <textarea></textarea>
         </H2>
         機器類型
          <select>
                        <option>iOS</option>
                        <option>android</option>
                        <option>Macintosh</option>
                        <option>Linux</option>
                        <option>Windons</option>
                        <option>iPad</option>
<br/>
       </BODY>
</HTML>

效果如下：