Python3学习之路~14 html基础

一 HTML本质

我们把html比作一个赤裸裸的人的话，css就是给这个人穿上华丽的衣服，js就是让这个人想怎么动就怎么动。

WEB框架本质：对于所有的web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。
一段socket服务端代码：

#Author:Zheng Na
import socket

def handle_request(client):
    buf = client.recv(1024)
    client.send(b"HTTP/1.1 200 ok \r\n\r\n")
    client.send(b"Hello Seven")

def main():
    sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
    sock.bind(("localhost",8000))
    sock.listen(5)

    while True:
        connection,address = sock.accept()
        handle_request(connection)
        connection.close()

if __name__ == '__main__':
    main()

#启动后在浏览器输入localhost:8000就可看消息：Hello Seven
#WEB框架本质：对于所有的web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。
#所有的web服务器本质上都是以上这20行代码
socket_server.py

代码运行后在浏览器输入localhost:8000就可看消息：Hello Seven。所有的web服务器本质上都是以上这20行代码。

我们修改一下以上代码，给返回的数据修饰一下。
将client.send(b"Hello Seven")
改为client.send(b"<h1 style='background-color:red'>Hello Seven</h1>")
此时浏览器端返回如下图所示：

由上我们得知：
1.客户端跟服务器端交互的时候，服务器端返回的永远都是赤裸裸的字符串；
2.而服务端返回的字符串中如果恰好有浏览器认识的格式的话，浏览器就可以将其解析出来，使数据以各种效果在页面上显示。
所以，HTML本质上就是一套规则，一套浏览器认识的规则。
接下来，为了方便，我们可以将服务器端发送的包含HTML规则的数据放在一个html文件中。
但是，如果一个浏览器有成千上万个网页，那我们岂不是要写成千上万个HTML？太麻烦了。
所以，我们可以想办法写一个HTML模板，每次发送数据时都可以套用同一个模板，这样就方便多了。
比如下面代码：

#Author:Zheng Na
import socket

def handle_request(client):
    buf = client.recv(1024)
    client.send(b"HTTP/1.1 200 ok \r\n\r\n")
    f = open('index.html','r')
    data = f.read()
    f.close()
    client.send(bytes(data,encoding='UTF-8'))

def main():
    sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
    sock.bind(("localhost",8000))
    sock.listen(5)

    while True:
        connection,address = sock.accept()
        handle_request(connection)
        connection.close()

if __name__ == '__main__':
    main()
socket_server2.py
<h1 style='background-color:red'>Hello Seven</h1>
index.html

因此，作为开发者，需要做的就是：
1.学习HTML规则
2.开发后台程序
3.写HTML文件（充当模板的作用）
4.数据库获取数据，然后替换到HTML文件的指定位置（web框架）

其实，当我们学习HTML时，如果想要查看显示效果，不需要提前写一个服务端代码这么麻烦。
以下2种方法均可以简单地进行本地测试：
1.找到html文件路径，直接浏览器打开
2.pycharm打开测试，如下图所示

 

二 HTML简介

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

</body>
</html>

1.<!DOCTYPE html>：doctype对应关系，指遵循一套统一的HTML规范。
2.标签：标签内部可以写属性。一个页面只能有一个html标签，一个head标签，一个body标签。
3.注释：<!-- xxx --> 在pycharm中按住ctrl+?可自动注释或者释放本行。
4.标签分类：自闭合标签（非常少）、主动闭合标签（pycharm可以帮你自动补全）。
5.自闭合标签：后面可以有/也可以没有/。比如<br>与<br />、<meta>与<meta />是一样的。但是推荐后面写/。
6.标签不区分大小写。
7.所有标签分为：
块级标签：H系列、P标签、div标签（白板）等。
行内标签：span（白板）等。
8.标签之间可以互相嵌套。
9.标签存在的意义：定位，方便css操作、js操作。
10.chorme审查元素的使用：1.定位 2.查看样式。

 

三 HTML的head内标签

1.meta(metadata information)标签：提供有关页面的元信息。自闭合。
功能：页面编码（告诉浏览器是什么编码）、刷新和跳转、关键字、描述、IE兼容（X-UA-Compatible）等。
X-UA-Compatible：IE6采用的是微软内部标准，与行业标准不一样，导致很多网站在其他浏览器运行正常，但是一到了IE6就不行了。但是当时IE6有很大的客户群，导致写前端的人既要兼容遵循行业标准的浏览器，又要兼容IE6，非常痛苦。后来微软出了IE8，IE8就厉害了，既可以遵循内部标准，又可以遵循行业标准。那么问题又来啦，IE浏览器没那么智能，可以区分用哪个模式打开比较好，而且现在所有的网站都放弃了兼容IE6，因此就在代码中加入这个设置，使IE8主动以行业标准的模式进行渲染。

<!--1.页面编码（告诉浏览器是什么编码）-->
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--2.刷新：每30秒刷新一次-->
<meta http-equiv="Refresh" content="30">
<!--3.跳转：5秒后跳转到百度首页-->
<meta http-equiv="Refresh" content="5;Url=http://www.baidu.com">
<!--4.关键字-->
<meta name="keywords" content="测试,IT,software">
<!--5.描述-->
<meta name="description" content="本页面主要介绍了...">
<!--6.IE兼容-->
<meta http-equiv="X-UA-Compatible" content="IE9;IE8">

2.title标签：网页标题。

<title>Title Name</title>

3.link和style标签：这2个标签一般都是结合css使用，很重要，讲css时再具体说吧。

<link rel="short_icon" href="image/favicon.ico">
<style></style>

 

四 HTML的body内标签

1.特殊符号。更多

&nbsp; 不断行的空白
&lt;   <
&gt;   >

2.p标签：段落（段落和段落之间有间距）

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

3.br标签：换行

<p>换行<br/>换行</p>

4.h系列：标题（加大加粗）

<h1>标题1最大</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6最小</h6>

5.span标签：行内标签，白板。既然它是一个白板，那我们为什么要学它呢？是为了学css的时候，在一块白板上面我们可以任意画来画去。

<span>白板不换行</span>
<span>白板不换行</span>

6.div标签：块级标签，白板，用的最多。通过div+css可以构造出几乎所有的标签。

<div>白板换行</div>
<div>白板换行</div>

7.input系列：
input type="text"             - name属性，value属性（默认值）
input type="password"   - name属性，value属性（默认值）
input type="button"         - value="登录"，按钮
input type="submit"　　 - value="提交"，提交按钮，结合form表单
input type="radio"           - 单选框，value属性，name属性（name相同则互斥），checked="checked"（默认被选中）
input type="checkbox"    - 复选框，value属性，name属性（批量获取数据），checked="checked"（默认被选中）
input type="file"              - 依赖form表单的一个属性enctype="multipart/form-data"（意思是把文件一点一点的删除到服务器）才能上传文件
input type="reset"           - 重置

<!--1.单行文本输入、密码、按钮、提交-->
<form>
    <input type="text" name="name" value="默认值"/>
    <input type="password" name="psd"/>
    <input type="button" value="登录1"/>
    <input type="submit" value="登录2"/>
</form>

<!--2.单选框-->
<form>
    <div>
        <p>请选择性别：</p>
        男：<input type="radio" name="gender" value="0" checked="checked"/>
        女：<input type="radio" name="gender" value="1"/>
    </div>
    <input type="submit" value="提交"/>
</form>


<!--3.多选框-->
<form>
    <div>
        <p>请选择爱好：</p>
        篮球：<input type="checkbox" name="favor" value="1" checked="checked"/>
        足球：<input type="checkbox" name="favor" value="2"/>
        台球：<input type="checkbox" name="favor" value="3"/>
        网球：<input type="checkbox" name="favor" value="4"/>
    </div>
    <input type="submit" value="提交"/>
</form>

<!--4.上传文件-->
<form enctype="multipart/form-data">
    <div>
        <p>上传文件：</p>
        <input type="file" name="fname"/>
    </div>
    <input type="submit" value="提交"/>
</form>

<!--5.重置-->
<form>
    <div>
        <input type="text" name="name" value="默认值"/>
        <input type="password" name="psd"/>
    </div>
    <input type="reset" value="重置"/>
</form>
inputexample.html

8.textarea标签：多行文本输入，默认值在标签中间，name属性用于后台获取数据。

<form>
    <div>
        <p>多行文本输入：</p>
        <textarea name="myresult">默认值</textarea>
    </div>
    <input type="submit" value="提交"/>
</form>

9.select标签：name属性，内部option标签（value属性）提交到后台，size设置显示多少，multiple设置多选。

<form>
    <div>
        <p>select标签：</p>
        <select name="city1">
            <option value="1" selected="selected">上海</option>
            <option value="2">北京</option>
            <option value="3">广州</option>
        </select>
        
        <select name="city2" size="10">
            <option value="1" selected="selected">上海</option>
            <option value="2">北京</option>
            <option value="3">广州</option>
        </select>
        
        <select name="city3" size="10" multiple="multiple">
            <option value="1" selected="selected">上海</option>
            <option value="2">北京</option>
            <option value="3">广州</option>
        </select>
        
        </select>
        <select name="city4">
            <optgroup label="山东省">
                <option value="1">济南</option>
                <option value="2">青岛</option>
            </optgroup>
            <optgroup label="河北省">
                <option value="1">石家庄</option>
                <option value="2">邯郸</option>
            </optgroup>
        </select>
    </div>
    <input type="submit" value="提交"/>
</form>
selectexample.html

注意：可以把数据提交到后台的标签：input、textarea和select标签。
仅仅将input标签的type属性改为submit是不能实现把内容提交到后台的，要想把内容提交到后台必须加上form标签。此时点击submit按钮会将表单内容（input、textarea和select标签内容）全部提交给后台。
表单提交方式默认为get，get方式会将内容拼接到URL后面发送给后台，如下图所示；
如果把提交方式改为post（<form method="post"></form>），就会直接把内容发送到后台而不会将其拼接到URL。

10.a标签：
功能1：跳转，href="www.baidu.com" target="_blank"（新窗口打开）
功能2：锚，href="#某个标签的ID"，标签的ID不允许重复

<!--1.跳转-->
<a href="www.baidu.com">百度</a>
<a href="www.baidu.com" target="_blank">百度</a>

<!--2.锚-->
<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>
aexample.html

11.img标签：src（显示图片）,title（鼠标放在图片时上显示）,alt（图片无法加载时显示）属性

<img src="1.jpg">
<img src="1.jp" title="这是一个机器猫" style="height: 200px;width: 200px;" alt="机器猫">
<a href="http://www.baidu.com">
    <img src="1.jpg" style="height: 200px;width: 200px;">
</a>

12.列表（知道即可，用的不多）：ul + li、ol + li、dl + dt&dd

<!--列表1：每行之前显示黑点-->
<ul>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
</ul>

<!--列表2：每行之前显示序号-->
<ol>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
</ol>

<!--列表3：有标题及缩进-->
<dl>
    <dt>aaaa</dt>
    <dd>bbbb</dd>
    <dd>bbbb</dd>
    <dd>bbbb</dd>
</dl>
<dl>
    <dt>aaaa</dt>
    <dd>bbbb</dd>
    <dd>bbbb</dd>
    <dd>bbbb</dd>
</dl>
uloldlexample.html

13.表格：table thead tr th tbody tr td
合并单元格：colspan = '' 、rowspan = ''

<!--1.不规范的写法-->
<table border="1">
    <tr>
        <td>主机</td>
        <td>端口</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1.1.1.1</td>
        <td>80</td>
        <td>修改</td>
    </tr>
    <tr>
        <td>1.1.1.2</td>
        <td>80</td>
        <td>
            <a href="index.html">查看</a>
        </td>
    </tr>
</table>

<!--2.规范的写法-->
<table border="1">
    <thead>
    <tr>
        <th>主机</th>
        <th>端口</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1.1.1.1</td>
        <td>80</td>
        <td>修改</td>
    </tr>
    <tr>
        <td>1.1.1.2</td>
        <td>80</td>
        <td>
            <a href="index.html">查看</a>
        </td>
    </tr>
    </tbody>
</table>

<!--3.合并单元格-->
<table border="1">
    <thead>
    <tr>
        <th>表头1</th>
        <th>表头1</th>
        <th>表头1</th>
        <th>表头</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td colspan="3">1</td>
        <td>1</td>
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    </tbody>
</table>
tableexample.html

14.label标签：用于点击文件，使关联的标签获取光标

<!--通过label标签的for属性与input标签的id进行关联，使用户点击label时，input获取光标，进入编辑状态-->
<label for="username">用户名：</label>
<input id="username" type="text" name="user"/>

15.fieldset标签：框框框起来

<fieldset>
    <legend>登录</legend>
    <label for="username">用户名：</label>
    <input id="username" type="text" name="user"/>
    <br/>
    <label for="pwd">密码：</label>
    <input id="pwd" type="password" name="pwd"/>
</fieldset>

 

posted @ 2024-07-02 19:38  zhengna  阅读(33)  评论(0)  编辑  收藏  举报