Python中的html服务

一 html

超文本标记语言，标准通用标记语言下的一个应用。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（Head）、和“主体”部分（Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容

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

</body>
</html>

<body>里面的部分就是网页将要显示的内容

二基本的标签

1）文本标签

最常见的文本标签：

标题标签: h1-h6
段落标签: p
加粗标签: b, strong
斜体标签: i
下划线标签: u
删除标签: s
&nbsp:  代表一个空格

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

<h1>第一章</h1>
<p style="color: red">原价： <s>100</s></p>
<p style="color: green; font-size: x-large">现价： 10</p>
<p>
    弹性盒子是 <b>CSS3</b> 的一种新的布局模式。
</p>

<p>
    CSS3 弹性盒（ <strong>Flexible Box 或 flexbox</strong>），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
    </p>
<p>
<u>引入弹性盒布局模型的目的</u>是提供一种更加有效的方式来对一个容器中的子元素进行<i>排列、对齐和分配空白空间</i>。
</p>
<h2>2级</h2>
<h3>3级</h3>
<h4>4级</h4>
<h5>5级</h5>
<h6>6级</h6>


</body>
</html>

执行的结果：

还有一些标签，比如：

换行标签: br-----(没有成对出现的标签)
水平分隔符标签: hr-----(没有成对出现的标签)
预格式化文本标签(保留文本的原有格式): pre标签
上标和下标: sup， sub
块引用标签: blockquote
普通的文本: span --- 行内标签
普通文本的标签:div------

<!DOCTYPE html>

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

<h1 style="color: green">标题1</h1>

<p>hello</p>

<hr>
<p>world</p>



hello <br> <br><br>world
<h1 style="color: blueviolet">标题2</h1>

<pre>
击壤歌

先秦：佚名
日出而作，日入而息。
凿井而饮，耕田而食。
帝力于我何有哉！
</pre>

<span>hello</span><span>world</span>
<div>hello</div><div>world</div>


<blockquote style="color: blueviolet">
    击壤歌

先秦：佚名
日出而作，日入而息。
凿井而饮，耕田而食。
帝力于我何有哉！

</blockquote>

x<sup>2</sup>+2x+3 = 5
<br/>
这个方程的解： x<sub>1</sub>=3 x<sub>2</sub>=5



</body>
</html>

执行的结果：

2）超链接标签

超链接标签：<a> </a>

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

<!--1. 跳转到指定的url地址-->
<a href="http://www.baidu.com"> 百度</a>
<a href="http://www.baidu.com" target="_parent"> 百度</a>

<!--新建一个浏览器窗口并打开-->
<a href="http://www.baidu.com" target="_blank"> 百度</a>


<!--2. 跳转到当前页面的指定位置（锚点）-->

<a href="#C1">第一个标题 </a>
<a href="#C2">第2个标题 </a>
<a href="#C3">第3个标题 </a>
<a href="#C4">第4个标题 </a>




<h1><a name="C1">第一个标题</a></h1>

<h1><a name="C2">第2个标题</a></h1>

<h1><a name="C3">第3个标题</a></h1>

<h1>第4个标题</h1>

</body>
</html>

执行的结果：

3）图片标签

插入图片时：

src指定图片的位置，可以是url地址，也可以是本地的图片

alt: 如果图片不能正常加载，则显示alt里面的文字

在设置图像的对齐方式（html）中已弃用，通过css样式实现功能

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

图片标签: <img  align="top" src="img01.jpg" alt="img01.jpg">
<br>
图片标签: <img align="middle" src="img01.jpg" alt="img01.jpg" >
图片标签: <img align="bottom" src="img01.jpg" alt="img01.jpg" >

</body>
</html>

执行的结果：

将图像链接<a>标签和<img>标签结合在一起

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

<a href="http://www.westos.org"> 图片标签</a>
<a href="http://www.csdn.net"> <img src="img01.jpg"></a>

</body>
</html>

执行的结果：

4）序列化标签

1. 无序标签<ul>和<li>：水平形式

无序标签的基本参数：

list-style-type: none  ---- 去掉圆点
display: inline-block   ---- 变为行内元素， 并且可以设置高度和宽度
width:              -----可以使用300px表示， 也可以用百分比来表示； 20%
background:        ------表示的是背景的颜色

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

<ul style="list-style-type: none">
    <li style="display: inline-block; width: 20%; background: azure;">
        <a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
    </li>
    <li style="display: inline-block; width: 20%; background: azure;">CSS</li>
    <li style="display: inline-block; width:20%; background: azure;">JS</li>
    <li style="display: inline-block; width: 20%; background: azure;">python</li>
</ul>

</body>
</html>

执行的结果：

2.无序标签<ui>和<li>：竖直形式

display: block   ---- 设置为不变为行内元素， 并且可以设置高度和宽度

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

<ul style="list-style-type: none">
    <li style="display: block; width: 20%; background: azure;"></li>
    <li style="display: block; width: 20%; background: azure;">CSS</li>
    <li style="display: block; width:20%; background: azure;">JS</li>
    <li style="display: block; width: 20%; background: azure;">python</li>
</ul>

</body>
</html>

执行的结果：

3.有序标签<ol>和<li>

有序标签的基本参数：

type可以指定有序列表符号的类型
text-decoration: none;  ---去掉原有标签的文本装饰
color: black： 设置字体颜色为黑色

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

<ol type="A">
    <li>
        <a href="http://www.baidu.com" style="text-decoration: none; color: black">
            html </a>
    </li>
    <li><a href="#"> CSS </a></li>
    <li><a href="#"> JS </a></li>
    <li><a href="#"> Python </a></li>
</ol>

</body>
</html>

执行的结果：

4.嵌套标签<dl>、<dt>和<dd>

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

<dl>
    <dt>HTML</dt>
        <dd>li</dd>
        <dd>span</dd>
        <dd>div</dd>
        <dd>hr</dd>
        <dd>sub</dd>
    <dt>CSS</dt>
        <dd>text-decoration</dd>
        <dd>color</dd>
</dl>

</body>
</html>

执行的结果：

5）表格标签

1. 最普通的表格

表格标签的基本参数：

1. table：代表一个表格
2. caption：表格的标题
3. th:自动加粗，居中
4. td:一列内容
5. tr: 一行内容
6. cellpadding="3" :设置表格的内边距
7. cellspacing="5" :设置表格的外边距

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

<table style="width: 80%; text-align: center;" cellpadding="3" border="1px"

       cellspacing="5">
    <caption>课程表</caption>
    <tr>
        <th>周一</th>
        <th>周2</th>
        <th>周3</th>
        <th>周4</th>
        <th>周5</th>
    </tr>
    <tr>
        <td>周一</td>
        <td>周2</td>
        <td>周3</td>
        <td>周4</td>
        <td>周5</td>
    </tr>

    <tr>
        <td>周一</td>
        <td>周2</td>
        <td>周3</td>
        <td>周4</td>
        <td>周5</td>
    </tr>
    <tr>
        <td>周一</td>
        <td>周2</td>
        <td>周3</td>
        <td>周4</td>
        <td>周5</td>
    </tr>
</table>

</body>
</html>

执行的结果：

2. 合并列单元格

指令参数：

colspan="3"

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

<table style="width: 80%; text-align: center;" cellpadding="0" border="1px">
    <tr>
        <td>主机名</td>
        <td colspan="3">IP</td>
    </tr>
    <tr>
        <td>server1</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>
    <tr>
        <td>server1</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>
    <tr>
        <td>server1</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>

</table>


</body>
</html>

执行的结果：

3.合并行单元格

指令参数：

rowspan="3"

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


<table style="width: 80%; text-align: center;" cellpadding="0" border="1px">
    <tr>
        <td>主机名</td>
        <td>server1</td>
        <td>server2</td>
        <td>server3</td>
    </tr>


    <tr>
        <td rowspan="3">IP</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>

    <tr>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>
    <tr>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>

</table>

</body>
</html>

执行的结果：

6）表单标签

表单标签<form>的基本用法

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

<h1>个人信息</h1>
<form  method="get">
    <!--文本域-->
    <span>用户名: </span><input type="text"><br/>
    <!--密码域-->
    <span>密码:</span><input type="password">
    <br/>
    <!--文本域-->
    <span>个人简介:</span><textarea>
    </textarea><br/>
    <!--提交文件-->
    <span>个人简历：</span><input type="file"><br/>

    <!--日期-->
    <span>出生日期:</span><input type="date">

    <!--提交按钮-->
    <input type="submit" value="登陆">
    <input type="reset" value="重置">
</form>

</body>
</html>

执行的结果：

一些特殊的表单标签

单元按钮、多选按钮、下拉列表、围有数据的标签

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

<h2>详细信息</h2>

<!--单选按钮-->
<span>性别:</span>
<!--name和value是为了将用户选择的信息传递给服务器， gender=1-->
<span style="font-size: small">男</span><input type="radio" name="gender" value="1">
<span style="font-size: small">女</span><input type="radio" name="gender" value="2">
<br/>

<!--多选按钮-->
<span>你喜欢的书籍:</span>
<ul>
    <li><input type="checkbox" name="java"><span>java</span></li>
    <li><input type="checkbox" name="python1"><span>python1</span></li>
    <li><input type="checkbox"><span>python2</span></li>
    <li><input type="checkbox"><span>python3</span></li>

</ul>
<!--下拉列表-->
<select>
    <option>--选择省份--</option>
    <option>陕西</option>
    <option>山西</option>
    <option>河南</option>
    <option>河北</option>
</select>



<!--围绕数据的标签-->
<fieldset>
    <legend>个人简介</legend>
    <h1>用户登陆</h1>
    <hr/>
    用户名: <input type="text"><br/>
    <input type="submit" value="登陆">
</fieldset>

</body>
</html>

执行的结果：

三标签的基本应用

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


<h1 align="center">个人信息</h1>
<table width="50%" border="1px" cellpadding="5" cellspacing="0"
       style=" margin: 0 auto; background: snow">
    <tr>
        <td>姓名</td>
        <td><input style="width: 95%; " type="text"></td>
        <td>性别</td>
        <td>
            <select style="width: 95%">
                <option>男</option>
                <option>女</option>
            </select>

        </td>
    </tr>
    <tr>
        <td>手机号码</td>
        <td><input style="width: 95%; " type="tel"></td>
        <td>电子邮箱</td>
        <td><input style="width: 95%; " type="email"></td>
    </tr>
    <tr>
        <td>教育程度</td>
        <td><input style="width: 95%; " type="text"></td>
        <td>工作职位</td>
        <td><input style="width: 95%; " type="text"></td>
    </tr>
    <tr>
        <td>工作城市</td>
        <td><input style="width: 95%; " type="text"></td>
        <td>期望工资</td>
        <td><input style="width: 95%; " type="text"></td>
    </tr>
    <tr>
        <td>自我介绍</td>
        <td colspan="3"><input type="text" style="width: 98%"></td>

    </tr>
    <tr>
        <td>特长</td>
        <td colspan="3"><input style="width: 95%; " type="text"></td>

    </tr>
    <tr>
        <td>地址</td>
        <td colspan="3"><input style="width: 95%; " type="text"></td>

    </tr>
    <tr>
        <td colspan="4"><br/></td>

    </tr>
    <tr>
        <td colspan="4" align="right">
            <input type="submit" value="添加">
            <input type="reset" value="关闭">
        </td>

    </tr>
</table>


</body>
</html>

执行的结果：

猜你喜欢