HTML 概要
HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
HTML 的关键是标签，其作用是指示将出现的内容。
HTML 简介
什么是 HTML？
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
实例
1 <html> 2 <body> 3 4 <h1>我的第一个标题</h1> 5 6 <p>我的第一个段落。</p> 7 8 </body> 9 </html>
例子解释
- <html> 与 </html> 之间的文本描述网页
- <body> 与 </body> 之间的文本是可见的页面内容
- <h1> 与 </h1> 之间的文本被显示为标题
- <p> 与 </p> 之间的文本被显示为段落
基本的 HTML 标签
HTML 标题
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
实例 <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
HTML 段落
HTML 段落是通过 <p> 标签进行定义的。
实例 <p>This is a paragraph.</p>
<hr/> <p>This is another paragraph.</p>
<br/>
<p>This is another paragraph.</p>
p 标签换行：style="word-wrap: break-word"
<br/> 标签在HTML 页面中是换行
<hr /> 标签在 HTML 页面中创建水平线。
HTML 链接
HTML 链接是通过 <a> 标签进行定义的
实例 <a href="http://www.baidu.com">This is a link</a>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<div id="i1" style="height: 800px">第一章的内容</div>
<div id="i2" style="height: 800px">第二章的内容</div>
HTML 图像
HTML 图像是通过 <img> 标签进行定义的。
实例 <img src="1.png" style="50px;height: 60px"/>
HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| <p> | This is a paragraph | </p> |
| <a href="default.htm" > | This is a link | </a> |
| <br /> |
注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
嵌套的 HTML 元素
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成
HTML 文档实例 <html> <body> <p>This is my first paragraph.</p>
<div>
<li>131231231</li> 带点
</div>
</body>
</html>
HTML 列表
定义列表--自定义列表不仅仅是一列项目，而是项目及其注释的组合。 <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> 无序列表--无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记 <ul> <li>Coffee</li> <li>Milk</li> </ul> 有序列表--同样，有序列表也是一列项目，列表项目使用数字进行标记。 <ol> <li>Coffee</li> <li>Milk</li> </ol>
HTML 属性
<h1 align="center"> 拥有关于对齐方式的附加信息。 style="height: 300px; 300px; border: 2px solid red" 边框 + 红
下面列出了适用于大多数 HTML 元素的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名（classname） |
| id | id | 规定元素的唯一 id |
| style | style_definition | 规定元素的行内样式（inline style） |
| title | text | 规定元素的额外信息（可在工具提示中显示） |
如需更多关于标准属性的信息，请访问：
HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释是这样写的：
实例 <!-- This is a comment -->
HTML 样式实例
style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法
background-color 属性为元素定义了背景颜色： <html> <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading</h2> <p style="background-color:green">This is a paragraph.</p> </body> </html>
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸： <html> <body> <h1 style="font-family:verdana">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>
HTML 样式实例 - 文本对齐 text-align 属性规定了元素中文本的水平对齐方式： <html> <body> <h1 style="text-align:center">This is a heading</h1> <p>The heading above is aligned to the center of this page.</p> </body> </html>
文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本。 |
| <big> | 定义大号字。 |
| <em> | 定义着重文字。 |
| <i> | 定义斜体字。 |
| <small> | 定义小号字。 |
| <strong> | 定义加重语气。 |
| <sub> | 定义下标字。 |
| <sup> | 定义上标字。 |
| <ins> | 定义插入字。 |
| <del> | 定义删除字。 |
| <s> | 不赞成使用。使用 <del> 代替。 |
| <strike> | 不赞成使用。使用 <del> 代替。 |
| <u> | 不赞成使用。使用样式（style）代替。 |
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
border:如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格
表格的表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1,cell 1</td> <td> <!--字符 只能用a表情 做超链接--> <a href="www.baidu.com">修改</a> </td> </tr> <tr> <td> </td> <td>row 2,cell 2</td> </tr> <tr> <td>row 3,cell 1</td> <td>row 3,cell 2</td> </tr> </table>
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。
注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
合并单元格
<table border="1"> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> <tr> <td>row 1,cell 1</td> <td>row 1,cell 2</td> <td> <!--字符 只能用a表情 做超链接--> <a href="www.baidu.com">修改</a> </td> </tr> <tr> <td colspan="2">row 2,cell 1</td> <td rowspan="2">row 2,cell 1</td> </tr> <tr> <td >row 3,cell 1</td> <td>row 3,cell 2</td> </tr> </table>
form表单
<form enctype="multipart/form-data"> <!-提交后台标签-后台传送文件 必须在 form 中添加 enctype="multipart/form-data"--> <fieldset> <legend>登录</legend> <!--把登录包起来--> <label for="username">用户名：</label><input id="username"> <!-- label的for和 input的id是对应关系保持一致--> </fieldset> <div> <lable> 日期属性--日历格式 </lable> <input type="date"><input type="month"><input type="week"><input type="time"> </div> <div> <!--/*下拉框*/--> <select> <option value="1">北京</option> <option value="2" selected="selected">上海</option> <!--selected 默认选中 --> </select> <!--/*size 展示个数*/--> <select name="cito" size="2" multiple="multiple"> <option>广州</option> <option>东莞</option> </select> <!--/*阶梯展示*/--> <select> <optgroup label="河北"> <option>张家口</option> <option>廊坊</option> </optgroup> <optgroup label="山西"> <option>大同</option> <option>忻州</option> </optgroup> </select> <!--选择框-圆圈--> <p>选择性别</p> 男：<input type="radio" name="gender" value="1"> 女：<input type="radio" name="gender" value="2"> <!--选择框-方框--> <p>爱好</p> 篮球：<input type="checkbox" name="favor" value="1"> 足球：<input type="checkbox" name="favor" value="2"> 网球：<input type="checkbox" name="favor" value="3"> <!-- 默认选择--> <p>技能</p> 写代码：<input type="checkbox" name="ski"> 撩妹：<input type="checkbox" name="ski" checked="checked"> <p>上传文件</p> <input type="file"> <textarea name="meno">请输入</textarea> </div> <input type="reset" value="重置"> <input type="submit" value="提交"> </form>
flask render_template 实现前后端交互
# -*- coding:utf-8 -*- from flask import Flask from flask import request from flask import render_template app = Flask(__name__) @app.route('/login',methods=['GET','POST']) def login(): if request.method == 'GET': print(11111) return render_template("s1.html") elif request.method == 'POST': print(22222) print(request.form.get('user'),request.form.get('pwd')) return render_template("s1.html",message='Bad username or password') # 方法默认寻找 templates 文件下的html if __name__ == '__main__': app.run(host='0.0.0.0',port=5001)
html
<form action="http://0.0.0.0:5001/login" method="post"> <label for="username">用户名</label> <input type="text" id="username" name="user"> <label for="password">密码</label> <input type="text" id="password" name="pwd"> <input type="button" value="登录1"> <input type="submit" value="登录2">
<h3>{{message}}</h3>
</form>