[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>

效果如下：