HTML介绍

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="width: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; width: 300px; border: 2px solid red" 边框 + 红

下面列出了适用于大多数 HTML 元素的属性：

属性值描述
class classname 规定元素的类名（classname）
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式（inline style）
title text 规定元素的额外信息（可在工具提示中显示）

如需更多关于标准属性的信息，请访问：

HTML 标准属性参考手册

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>&nbsp;</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>

 





 






        

            posted on 
2018-08-15 14:53 
Baylor_Chen 
阅读(268) 
评论(0) 
编辑 
收藏 
举报

        

    











    
    

    
    

    

        

    

        

            
                
                
            
        

    

        

            
                
            
        

    

    

    





	






	
		
		

导航