Python的平凡之路（14）

一、什么是HTML

HTML（Hyper Text Mark-up Language ）

即超文本标记语言，是 WWW 的描述语言，由 Tim Berners-lee提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。这样，你只要使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由 HTML命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。

二、开发者的任务

1、HTML规则(编码规范）

https://segmentfault.com/a/1190000002465212

2、开发后台程序

（1）、写HTML文件（充当模板的作用）

（2）、数据库获取数据，然后替换到HTML文件的指定位置（web框架）

（3）、HTML书写规范

https://segmentfault.com/a/1190000002465212

三、本地测试

1、找到文件路径，直接浏览器打开

2、pycharm打开测试

四、编写HTML文件

1、什么是doctype?

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
 
<body>
文档的内容......
</body>
</html>

2、什么是html标签？

标签就是<head>、<body>、<table>等被尖括号“<”和“>”包起来的对象，绝大部分的标签都是成对出现的，如<table></talbe>、<form></form>。当然还有少部分不是成对出现的，如<br>、<hr>等。标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。给每一个标签所做的辅助信息称为属性。

3、如何添加注释？

<!— —>

五、标签分类

0、标签备注

(1)所有的浏览器默认情况下都会忽略空格和空行

(2）每个标签都有私有属性，也都有公有属性

(3）HTML表示长度的单位都是像素，HTML只有一种单位就是像素

(4)属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来

1、标签分类

(1）头标签

<title>：指定整个网页的标题，在浏览器最上方显示。
<base>：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
<meta>：提供有关页面的基本信息
<body>：我们所写的代码必须放在此标签內。
<link>：定义文档与外部资源的关系。
例子：<meta http-equiv=“refresh" content="3;http://www.baidu.com”> 3秒之后，自动跳转到百度页面。

(2）排版标签 p br hr center pre div span <!— —>

<p>This is a paragraph</p>

<p>This is another paragraph</p>

This<br>is a para<br>graph with line breaks

<p>标签和<br>标签的区别在于：<p>标签会在段落的前后自动插入一个空行，而<br>标签没有空行；而且<br>标签没有属性。注意<br> 没有结束标签，把<br>标签写为 <br/> 是经得起未来考验的做法

<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的

<div>

标签1

</div>

<div>

标签2

</div>

<span>

标签3

</span>

<span>

标签4

</span>

(3) 字体标记 h1 font b u sup sub

<h1 align="center">This is center</h1>

<h3 align="right">This is right</h3>

(4) 超链接

(5）图片标签 img

2、自闭和标签

举例：<meta charset=“UTF-8”>

3、主动闭合标签

举例：<title>老男孩</title>

六、Head标签

1、<meta >

2、<title>

*3、<link />

*4、 <style />

*5 、<script>

七、body标签

1、图标 &nbsp &gt &lt

2、p标签

3、br标签换行

八、标签小结

1、块级标签：（div，H系列（加大加粗），p标签（段落和段落之间有间距）

2、行内标签：span标签、a标签

3、标签之间可以嵌套

4、标签存在的意义？美化页面

九、标签详解

1、div标签

<div> 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

2、span标签

<span> 标签被用来组合文档中的行内元素。

<p><span>some text.</span>some other text.</p>

3、input + form标签

input type='text'     - name属性，value="赵凡"
input type='password' - name属性，value="赵凡"
input type='submit' - value='提交' 提交按钮，表单
input type='button' - value='登录' 按钮
input type='radio'    - 单选框 value，checked="checked"，name属性（name相同则互斥）
input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据）
input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data"
input type='rest'     - 重置

4、<texaarea>标签

5、select标签

select 元素可创建单选或多选菜单。

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

6、a标签

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

7、img标签

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" title="这是帅哥"/>

8、列表标签

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：

Coffee
Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器显示如下：

Coffee
Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

浏览器显示如下：

Coffee: Black hot drink
Milk: White cold drink

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

9、table标签

<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

<table border="1">

  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

10、label标签

<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

11、fieldsset标签

fieldset 元素可将表单内的相关元素分组。<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。<fieldset> 标签没有必需的或唯一的属性。<legend> 标签为 fieldset 元素定义标题。

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

12、form标签

<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。rm 元素是块级元素，其前后会产生折行

<form>

<input type="radio" name="sex" value="male" checked>Male

<br>

<input type="radio" name="sex" value="female">Female

</form>

十、CSS部分

0、认识css

css就是层叠样式表，简称样式表，是制作网页的新技术。CSS工作量。精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动

1、标签上设置style属性

height: 48px;
…

2、编写CSS样式

(1）、标签的style属性

(2）、写在head里面， style标签中写样式

- id选择区
                  #i1{

                    height: 48px;
                  }

- class选择器 ******

                  .名称{
                    ...
                  }

                  <标签 class='名称'> </标签>

- 标签选择器
                    div{
                        ...
                    }


                    所有div设置上此样式

- 层级选择器（空格） ******
                   .c1 .c2 div{

                   }
- 组合选择器（逗号） ******
                    #c1,.c2,div{

                   }

- 属性选择器 ******
                   对选择到的标签再通过属性再进行一次筛选
                   .c1[n='alex']{ width:100px; height:200px; }

PS:
- 优先级，标签上style优先，编写顺序，就近原则

(3)、css样式也可以写在单独文件中

(4)、css注释

/* */

(5)、边框

- 宽度 border: 4px

- 样式 dotted

- 颜色 red

(6)、其他

height，        高度百分比
width，          宽度像素，百分比
text-align:ceter, 水平方向居中
line-height，垂直方向根据标签高度
color、    字体颜色
font-size、字体大小
font-weight 字体加粗

（7）、float

让标签飞起来，块级标签也可以堆叠

老子管不住：

（8）、display

display: none; -- 让标签消失
display: inline;块级标签转行内
display: block;行内标签转块级标签
display: inline-block;具有inline,默认自己有多少占多少，具有block，可以设置无法设置高度，宽度，padding margin
******
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin

（9）、内边距 padding 外边距 margin(0,auto)

十一、课上例子代码

t1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 网站编码 -->
    <meta charset="UTF-8">
    <!-- 网站关键词收录 -->
    <meta name="keywords" content="JJ YY PP XX">
    <!-- 网站描述 -->
    <meta name="description" content="This is a test page!">
    <!-- 自动刷新、跳转 -->
    <meta http-equiv="Refresh" content="3;Url=http://www.baidu.com">
    <!-- link icon 自己练-->
    <title>第一个页面</title>
</head>
<body>
     <a href="http://www.we.com">WE 理财</a>
</body>
</html>

t2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- &nbsp代表空格 -->
    <a href="http://www.oldboyedu.com">老&nbsp;&nbsp;&lt;&gt;&nbsp;&nbsp;男&nbsp;&nbsp;&lt;&gt;&nbsp;&nbsp;孩&nbsp;&nbsp;&lt;&gt;&nbsp;&nbsp;</a>
    <!-- h标签加大加粗,p段落之间有间距 -->
    <p><h1>www</h1><br/><h2>oldboy</h2><br/><h3>.com</h3><br/></p>
    <!-- span就是一个白板 -->
    <span>line1</span>
    <span>line2</span>
    <span>line3</span><br/><br/>
    <div>line6</div><br/>
    <div>line7</div><br/>
    <div>line8</div><br/>
    <div id="Tesla">
        HELLO,TESLA
    </div>
</body>
</html>

t3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML练习</title>
</head>
<body>
    <form action="http://localhost:8888/index" method="POST">
        <input type="text" name="user"/>
        <input type="text" name="email"/>
        <input type="password" name="pwd" />
        <input type="button" value="登录1" />
        <input type="submit" value="登录2" />
    </form>
    <br/>
    <form action="http://localhost:8888/index" method="GET">
        <input type="text" name="user"/>
        <input type="text" name="email"/>
        <input type="password" name="pwd" />
        <input type="button" value="登录1" />
        <input type="submit" value="登录2" />
    </form>
    <br/>
 
</body>
</html>

t4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML练习</title>
</head>
<body>
    <!-- 搜索框跳转 -->
    <form action="https://www.sogou.com/web">
        <input type="text" name="query"/>
        <input type="submit" value="搜索" />
    </form>
    <br/>
 
</body>
</html>

t5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML练习</title>
</head>
<body>
    <form>
        <div>
            <!-- size参数代表允许的数量multiplec参数提供多选功能 -->
            <select name="city" >
                <option value="1">北京</option>
                <option value="2">上海</option>
                <!-- selected是默认值的参数 -->
                <option value="3" selected="selected">广东</option>
                <option value="4">南京</option>
                <option value="5">广州</option>
            </select>
            <input type="text" name="user" />
            <p>--请选择性别--</p>
            男: <input type="radio" name="gender" value="1" />
            女: <input type="radio" name="gender" value="2" />
            alex: <input type="radio" name="gender" value="3" />
            <p>--爱好--</p>
            篮球:<input type="checkbox" name="favor" value="1" />
            足球:<input type="checkbox" name="favor" value="2" />
            <p>--技能--</p>
            <!-- checked="checked"默认选项 -->
            撩妹: <input type="checkbox" name="skill" checked="checked" />
            写代码:<input type="checkbox" name="skill" value="2"/>
            <p>--上传文件--</p>
            <input type="file" name="fname" />
        </div>
        <textarea name="memo">ASDF</textarea>
        <input type="submit" value="提交"/>
        <input type="reset"  value="重置" />
    </form>
 
</body>
</html>

t6.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>
 
    <div id="i1" style="height:800px;">第一章的内容</div>
    <div id="i2" style="height:800px;">第二章的内容</div>
    <div id="i3" style="height:800px;">第三章的内容</div>
    <div id="i4" style="height:800px;">第四章的内容</div>
 
</body>
</html>

t7.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <table border="2">
        <thead>
                <th>主机名</th>
                <th>端口</th>
                <th>操作</th>
        </thead>
        <tbody>
            <tr>
                <td>1.1.1.1</td>
                <td>80</td>
                <td>
                    <a href="t2.html">查看详细</a>
                    <a href="#">修改</a>
                </td>
            </tr>
            <tr>
                <td>1.1.1.1</td>
                <td>80</td>
                <td>第二行,第3列</td>
            </tr>
        </tbody>
    </table>
    <table  border="2">
         <thead>
            <tr>
                 <th>1</th>
                 <th>2</th>
                 <th>3</th>
                 </tr>
        </thead>
        <tbody>
            <tr>
                 <td>1</td>
                 <td colspan="3">1</td>
            </tr>
            <tr>
                 <td rowspan="3">1</td>
                 <td>1</td>
                 <td>1</td>
                 <td>1</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

t8.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- font-size字体大小, font-weight字体加粗 -->
    <div style="height: 50px;width: 80%; border:2px solid red;text-align: center;line-height:50px;font-weight: bold">www</div>
</body>
</html>