2、第九周 - WEB框架应用 - HTML的初步认识及标签的使用

初步认识HTML结构，及常用的标签

一、HTML结构的认识

1、HTML 结构如下：

<!DOCTYPE html>  <!-- 定义使用的类型 -->
<html lang="en"> <!-- 定义html标签，起始位置 lang="en"叫标签内部属性-->
<head> <!-- 头部 -->
    <meta charset="UTF-8">
    <title>博客园</title> <!-- title定义标题 -->
</head>
<body><!-- 定义文章内容 -->

</body>
</html> <!-- 定义html标签，结束位置 -->

二、HTML中结构标签介绍

认识HTML中标签

标签分为：

-- 自动闭合标签 ：
     如: <meta charset="UTF-8">   
          <link>

-- 自动闭合标签： 
     如：<a></a>

A、 head 头部中常用标签中：

--- <meta > 功能：字符编码、页面定时刷新、URL跳转、关键字定义、网站描述、IE兼容（重点）
          <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;IE=IE7;"> IE浏览器兼容的模式
--- <title>标签
--- <link> 给网站加图标
          <link rel="shortcut icon" href='图片路径'>
--- <style> 在页面中书写的样式
           CS样式中会进行讲解
--- <script> 引进文件
           JS样式中会进行讲解

举例：

<!DOCTYPE html>  <!-- 定义使用的类型 -->
<html lang="en"> <!-- 定义html标签，起始位置 lang="en"叫标签内部属性-->
<head> <!-- 头部 -->
    <meta charset="UTF-8">
    <meta http-equiv="Refresh" content="3"> <!-- 默认3s刷新一次 -->
    <meta http-equiv="Refresh" content="3;Url=https://www.google.com" /> <!-- 通过meta定义页面跳转-->
    <meta name="Keywords" content="百度、谷歌" > <!-- 关键字，搜索引擎使用 -->
    <meta name="description" content="ffadsfadfadfadfadsf"／> <!-- 文档描述 -->
    <meta http-equiv="X-UA-Compatible" content="IE=IE7"> <!-- 按IE7的标准模式打开 （了解IE浏览器的发展历史）） -->
    <title>博客园</title> <!-- title定义标题 -->
</head>

<body><!-- 定义文章内容 -->
</body>
</html> <!-- 定义html标签，结束位置 -->

B、body 标签中常用的标签(重点)：

标签的使用可以参考：http://www.w3school.com.cn/tags/，里面有介绍每个标签的用法。

1、-- 符号图标
　　HTML 往网页中输入特殊字符，需在html代码中加入以&开头的字母组合或以&#开头的数字。请参考链接：https://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html 　　

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="fdfd">chen &lt; chang &copy; qing</a> #特殊符号在a标签中嵌套，&lt;表示小于号，&copy 表示版权符号
</body>
</html>
<!-- 符号图标不要刻意去记，用到的时候打开链接，查看对应的符号>

效果：

2、-- P 标签：更换段落，空格换行

<body>
    <p style="background: red">1</p>  #style添加的是属性，这里添加的底色颜色
    <p>2</p>
    <p>3</p>
    <p style="background: green">4</p>
</body>
<!--  P标签是更换段落，空格换行使用 上行与下行是有间距的，中间会有相隔开来>

效果：

3、-- br 标签，用于行内换行，使用如下：

<body>
    <p style="background: red">1jaafadhafhasdfjasdhjfajdfsdf <br />hajsdfhaklsdfhakdf</p>
    <p>2</p>
    <p style="background: green">3</p>
</body>

效果：

4、-- <h1>到<h6>标签，是表示字体由大到小 H标签最多也只是到 6

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>1</h1>
    <h2>2</h2>
    <h3>3</h3>
    <h4>4</h4>
    <h5>5</h5>
    <h6>6</h6>
</body>
</html>

效果：

5、-- span 标签，行内标签，不换行

<body>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
</body>

效果：

6、-- div 标签：

定义和用法：

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

用法：

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="color: blue"> #整个div下面的所有标签，都要执行这个属性，字体改为蓝色
        <h3>This is test</h3>
        <p>This is True</p>
    </div>
</body>
</html>

效果：

以上小结：

所有标签分类：
　　块级标签：div（白板），H系列（加大加粗），P标签（段落于段落之间有间距）
　　行内(内敛)标签：span （白板)
　　白板可通过CSS定义为其他标签
标签之间可以嵌套
　　标签存在的意义，css操作，js操作

三、HTML Body 结构体中与后端代码有交互的标签

HTML Body 结构体中与后端代码有交互的标签（即前后端可以有交互的标签）

1、 -- input 标签

A、使用Python 的 web框架，Tornada 框架。可以参考链接：http://www.tornadoweb.org/en/stable/

#coding:utf-8

import tornado.ioloop
import tornado.web
from tornado.httpclient import AsyncHTTPClient
from tornado import gen

'''
 tornado框架参考 http://www.tornadoweb.org/en/stable/
'''
class MainHandler(tornado.web.RequestHandler):
    def get(self,*args,**kwargs):
        u = self.get_body_arguments('user')
        e = self.get_body_arguments('email')
        p = self.get_body_arguments('pwd')
        if u == 'chen' and p == '1203' and e == '[email protected]':
            self.write("OK")
            print(u,e,p)
        else:
            self.write("Error")

    def post(self,*args,**kwargs):
        u = self.get_body_arguments('user')
        e = self.get_body_arguments('email')
        p = self.get_body_arguments('pwd')
        print(u,e,p)
        self.write('POST')

if __name__ == "__main__":
    app = tornado.web.Application([
        (r"/index", MainHandler),
    ])
    app.listen(8888)
    tornado.ioloop.IOLoop.current().start()

B、定义HTML body的接收内容：注意定义的name值跟上面代码的值相对应。以下是Input 标签中的，几种定义方式。

<body>
   <from action='http://locahost:8888/index' method='GET'> #GET的形式放到的URL进行数据提交；post URL 看不到，数据放到body中发送到服务端
     <input type='test' name='user' > #根据User获取前段数据
     <input type='test' name='email' >
     <input type='password' name='pwd'>
     <input type='button' value="登录1" > #没有任何作用
     <input type='submit' value="登录2" >
   </from>
</body>

C、效果：

在流浪器URL地方，可以看到 HTML中，get的传输方式。

2、 -- input 标签（补充）

    input 常用系列
    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' - 用作表单数据重置

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            <p>1、个人资料:</p>
            姓名：<input type="text" name="user" />
            密码：<input type="password" name="pwd" />
            邮箱：<input type="email" name="mail" />
            <p>2、性别:</p>
            男<input type="radio" name="gender" value="1" checked="checked"/>  单选框，默认设置只能选择一个
            女<input type="radio" name="gender" value="2" />
            <p>3、爱好</p>
            足球：<input type="checkbox" name="favor" value="1" checked="checked"/> 复选框，默认设置可以是多个
            蓝球：<input type="checkbox" name="favor" value="2" />
            羽毛球：<input type="checkbox" name="favor" value="3" checked="checked"/>
            游泳：<input type="checkbox" name="favor" value="4" />
            <p>4、信息文档上传</p>
            文件上传：<input type="file" name="fname">
        </div>
        <input type="reset" value="重置">
        <input type="submit" value="提交">
    </form>
</body>
</html>

效果：(重置，会把信息清空)

3、 -- textarea 多行文本填写标签

textarea 标签主要应用文本编写的框中，例如，简介、描述等场景。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <div>
            <p>描述不少于50个字</p>
            <textarea >简介</textarea>
        </div>
        <input type="reset" value="重置">
        <input type="submit" value="提交">
</body>
</html>

效果：

4、 --select 标签下拉框

select应用比较广泛的，比如城市的选取

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <div>
            <p>请选取你的城市</p>
            <select name="city" size="10" multiple="multiple" >
                <option value="1" >北京</option>
                <option value="2" selected="selected">上海</option>
                <option value="3">广州</option>
                <option value="4">深圳</option>
                <option value="5">杭州</option>
            </select>
        </div>
        <input type="reset" value="重置">
        <input type="submit" value="提交">
</body>
</html>

备注：根据select 中定义的name获取城市的value值， multipe="multipe" 是可以表示多选；seize=10 列表框显示10个可选目标（默认为size=1） ;option 表中seleced 属性是，设定默认值。

效果如下：

补充，下拉框的分组操作，optiongroup 标签，主要应用到省份、城市，这种有包含的关系中。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            <p>请选取你的城市</p>
            <select name="city" >
                <option value="1" >北京</option>
                <option value="2" selected="selected">上海</option>
                <option value="3">广州</option>
                <option value="4">深圳</option>
                <option value="5">杭州</option>
            </select>
            <select>
                <optgroup label="广西省">
                    <option>南宁</option>
                    <option>柳州</option>
                </optgroup>
                <optgroup label="广东省">
                    <option>广州</option>
                    <option>深圳</option>
                </optgroup>
            </select>
        </div>

        <input type="reset" value="重置">
        <input type="submit" value="提交">
</body>
</html>

效果：

四、HTML body中超链接标签（a标签）

a标签使用，通常使用是两种方式：超链接；锚点（如根据目录书签跳转）href="#某个锚点的ID"，标签ID不允许重复

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
    <a href="#a1">第一章内容</a>
    <a href="#a2">第二章内容</a>
    <a href="#a3">第三章内容</a>
    <a href="#a4">第四章内容</a>
    <div id="a1" style="height: 300px;">第一章内容</div>
    <div id="a2" style="height: 300px;">第二章内容</div>
    <div id="a3" style="height: 300px;">第三章内容</div>
    <div id="a4" style="height: 300px;">第四章内容</div>
</body>
</html>

效果：（第一行有其他颜色的字体，可实现跳转）

五、HTML body img图片链接标签

img 标签中常用的功能是 src、title、alt

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://www.gm99.com">
        <img src="1535799057866.jpg"  title="原始图" style="height: 300px;width: 400px" alt="测试图片">
    </a>

</body>
</html>

效果：（点击图片，完成页面跳转；鼠标放到图片上，显示"原始图"字体；当图片丢失时，显示“测试图片”）

六、HTML body 列表及表格标签应用

1、列表，注意以下几种格式的使用：

列表：
    ul
         li
    ol
        li
    dl     
        dt
        dd

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>fasfasf</li>
        <li>fad</li>
        <li>fasff</li>
    </ul>
    <ol>
        <li>jljlkfasf</li>
        <li>uipopo</li>
        <li>ioiu;kl</li>
    </ol>
    <dl>
        <dt>chen</dt>
        <dd>uipopo</dd>
        <dd>ioiu;kl</dd>
        <dt>chang</dt>
        <dd>uipopo</dd>
        <dd>ioiu;kl</dd>
    </dl>
</body>
</html>

效果：

2、表格的制作方法

A、简单版（行列表示）

table
　　tr(行)
　　    td（列）

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
    <!-- border="1" 表示添加边框 -->
        <tr>
        <!-- 第一行 -->
            <td>第一行，第一列：</td>
            <td>第一行，第二列：</td>
            <td>第一行，第三列：</td>
        </tr>
        <tr>
        <!-- 第二行 -->
            <td>1</td>
            <td>2</td>
            <td>
                <a href="1535799057866.jpg">查看详情</a>
                <!-- 设置第三列做跳转 -->
            </td>
        </tr>
    </table>
</body>
</html>

效果：

B、原始表格制作方法及格式：

原始表格制作方法
	<table>
		<thead>
			<th>
				<tr>
		<tbody>
			<tr>
				<td>

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="2">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>出生年月</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>陈1203</td>
                <td>man</td>
                <td>2018/08/30</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

效果：

C、合并单元格

合并单元格
	横向 colsapn
	纵向 rowspan

举例：

把以上表格中，第二行 2 、3 列合并；把第2列中，第3、4行表格合并；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="2">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>出生</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td colspan="2">1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td rowspan="2">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>
</body>
</html>

效果：

七、HTML body 之 lable标签

-- label 标签用于点击文件，使得关联的标签获取光标。一般会结合input 标签使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="user">
</body>
</html>

效果：（主要解决的效果是当你的点击用户名或者边框，都会提示你输入文字）

补充：

-- fieldset 标签为文本框标签

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <fieldset>
        <legend>登录</legend>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="user">
        <br />
        <label for="pwd">密码：</label>
        <input type="text" id="pwd" name="user">
    </fieldset>
</body>
</html>

效果：（就是输入的文本框，放到框中）

~~ 以上~~

HTML 标签中，常用的已介绍完成。以上都需要重点记住，使用用法。

2、第九周 - WEB框架应用 - HTML的初步认识及标签的使用

猜你喜欢