02>>>body标签补充、正则表达式

02.body标签补充、正则表达式

  首先再来补充一些HTML标签相关的知识。

02>>>body标签补充、正则表达式

 

 

body标签补充

特殊符号

  在HTML中,特殊不好并不能直接按下对应的按键就能书写出来,而是需要通过各自的代码才能实现。

>    大于号
<    小于号
   空格
&   &符号
¥   ¥符号
reg;    商标
copy;   版权

02>>>body标签补充、正则表达式

02>>>body标签补充、正则表达式

 

常用标签

<img src="" alt="">图片标签
src参数后面写图片地址,可以是网络的也可以是本地的。alt参数则是对这张图片的描述。
例:
<img src="C:\Users\2\Desktop\头像.jpg" alt="头像">

02>>>body标签补充、正则表达式

  很不幸,我的电脑flash插件有些问题,最后图片没能显示出来只能看到注释,大家理解个意思就好^_^

<div>页面布局标签</div>
所有网页中出现频率最高的,内部可以无限制地嵌套其他任意标签。
例:
<div>
    <b>一二三</b>
    <p></p>
    <i>四五六</i>
    <p></p>
    <u>七八九</u>
    <p></p>
</div>

02>>>body标签补充、正则表达式

<span>页面文本标签</span>
是所有网页中涉及到文字时可能会出现的标签。频率并不是太高。
例:
<span>
    一二三四五,上山打老虎
</span>

02>>>body标签补充、正则表达式

列表标签

  在网页上看似有规则排列的横向或竖向的内容基本都是用列表标签完成的。

  举个例子:

<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
</ul>

02>>>body标签补充、正则表达式

 

表格标签

  想要在html上创建一张表格?当然没问题,不过需要特定的格式:

<table>
    <thead>  <!--填写表头数据(类似字段名)-->
        <tr>  <!--一个tr就是一行列表-->
            <th>序号</th>  <!--定义一个个字段名-->
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>joe</td>
            <td>18</td>
        </tr>  <!--一段tr标签只能写一行数据,要些第二条就得另写一段tr标签-->
        <tr>
            <td>2</td>
            <td>simon</td>
            <td>20</td>
        </tr>
    </tbody>  <!--书写表单数据(类似真实数据)-->
        <td></td>
</table>

02>>>body标签补充、正则表达式

  正如这张表格的语法结构一样,在涉及到展示多条相同格式数据时可以考虑使用表格标签(效果类似excel)。通过搭配其他关键字,可以对表格的展现形式进行优化。

表单标签(了解)

  在涉及到用户数据的获取时一般都需要使用表单标签。

<form action="">
    <div>username:  <!--添加描述:获取用户名-->
        <input type="text">  <!--设置一个输入框,输入数据的类型是文本类型-->
    </div>
    <div>password:  <!--添加描述:获取密码-->
        <input type="password">  <!--设置一个输入框,输入的数据类型是加密的-->
    </div>
    <div>email:  <!--添加描述:获取邮箱-->
        <input type="email">  <!--设置一个输入框,输入的数据类型是email地址-->
    </div>
    <div>birth:  <!--添加描述:获取生日-->
        <input type="date">  <!--设置一个输入框,可以通过万年历选择日期-->
    </div>
    <div>gender:  <!--添加描述:获取性别-->
        <input type="radio" name="gender">男  <!--设置一个选项,“男”,性别最多只能选一个-->
        <input type="radio" name="gender">女  <!--设置一个选项,“女”,性别最多只能选一个-->
        <input type="radio" name="gender">其他  <!--设置一个选项,“其他”,性别最多只能选一个-->
    </div>
    <div>hobby:  <!--添加描述:获取爱好-->
        <input type="checkbox">篮球  <!--设置一个选项,“篮球”,可多选-->
        <input type="checkbox">足球  <!--设置一个选项,“足球”,可多选-->
        <input type="checkbox">网球  <!--设置一个选项,“网球”,可多选-->
    </div>
    <div>file:
        <input type="file">  <!--上传单个文件-->
    </div>
    <div>file_multiple:
        <input type="file" multiple>  <!--上传多个文件-->
    </div>
    <div>
        <input type="submit">
        <input type="reset">
        <input type="button" value="按钮">
    </div>
    <div>choice  <!--单选下拉框-->
        <select name="" id="">
            <option value="">左</option>
            <option value="">中</option>
            <option value="">右</option>
        </select>
    </div>
    <div>choice_multiple  <!--多选下拉框-->
        <select name="" id="" multiple>
            <option value="">上</option>
            <option value="">中</option>
            <option value="">下</option>
        </select>
    </div>
    <p></p>
    <div>
        输入你想说的话吧
        <textarea name="" cols="30" rows="10"></textarea>
    </div>
</form>

02>>>body标签补充、正则表达式

  上面的例子虽然比较直观但有点繁杂,那么总结一下:

input标签
    type参数类型
        text 普通文本
        password 密文展示
        email 邮箱格式
        date 日期格式
        radio 单选
        checkbox 多选
        file 文件
        submit 提交按钮
        reset 重置按钮
        button 普通按钮
select标签
    option子标签 创建下拉框
    textarea标签 获取大段文本

标签的特性(重点)

  打开一个成型的网站的源代码,里面都会有海一样的特性直接铺满视野,光是看一眼就头晕眼花了,更别说想在其中筛选数据了。所以这就成了一个大问题:应该怎么筛选出需要的标签呢?

  答案是通过标签的属性。

  举个栗子:

<a href=‘‘ id=‘‘ class=‘‘></a>

  例子中的id、class等都称之为a标签的属性。

02>>>body标签补充、正则表达式

标签两大核心属性

  id类似于标签的身份证号码,用于唯一标识标签。在同一个html文档中,id不能重复。

  class类似于标签的种群(类别),用于区分不同的类。在用一个html文档中class值可以重复,表示属于同一个类别。

  还不太好理解?那就打个比方好了:id相当于通过学生证号码查询某个学生,class则是通过班级号查找一群学生。

  具体到标签上:

<p class=c1></p>
<a class=c1></a>
<div class=c1></div>

  如果我想在日后快速查找几条互相关联的标签,可以把他们统一归类到一个类中。

注意:一个标签可以含有多个class值

<span class=c1 c2 c3></span>

  也就是说,在这句例句中,span既可以归类为c1,也可以归类为c2,还可以归类为c3,真是个多面间谍。

标签还可以自定义任意的属性

  标签除了id和class之外,还可以插入额外的数据。

  如何理解这句话?我们试着在html文件的末尾插入这么一句话:

<a id=‘‘ class=‘‘ username=joe pwd=123></a>

02>>>body标签补充、正则表达式

  然后在浏览器打开html文件,在前端是看不到的,需要右键点选检查才能找到。

02>>>body标签补充、正则表达式

标签之间的关系描述

  这个用语言不太好解说,直接用代码来解释更方便:

<div>只要是div内部的标签都可以称之为div的后代
    <a>上一级div的儿子</a>
    <p>上一级div的儿子
        <span>上一级p的儿子,上上一级div的孙子</span>
    </p>
    <div>上一级div的儿子
        <a>上一级div的儿子,上上一级div的孙子</a>
    </div>
    <span>上一级div的儿子</span>
</div>

 

正则表达式

前戏

  现在老板提出了一个需求,需要我们用python写一个判断手机号的程序,应该怎么做?

  学习过了python的课程之后,我们可以写出一个比较简单的手机号判断程序了:

# 1.获取用户手机号
phone = input(请输入手机号>>>:).strip()
# 2.先判断长度是否是11位
if len(phone) == 11:
# 3.再判断是否是纯数字
    if phone.isdigit():
# 4.最后判断开头是否是13 14 15 18
        if phone.startswith(13) or phone.startswith(14) or phone.startswith(15) or phone.startswith(18):
            print(是一个合法的手机号)  #.startwith()可用于判断变量开头是否是指定的数据
        else:
            print(手机号格式错误)
    else:
        print(手机号必须是纯数字)
else:
    print(手机号必须是11位)

  这样的程序当然是没问题的,能够顺利运行,也能满足老板的需求。不过对于程序员大佬来说,就显得有些繁杂了,他给我们露了一手开开眼界:

import re
number = input(请输入手机号>>>:)
if re.match(^(13|14|15|18)[0-9]{9}$,number):  # 对number进行判断:必须是13/14/15/18开头,之后还要有九位,且都得是数字
    print(是合法的手机号码)
else:
    print(不是合法的手机号码)

  只用了6行代码,就写出了我们的15代码,节省了三分之二的代码量!而程序员大佬使用的方法,便是正则表达式。

  使用正则表达式可以极大的简化数据筛选和校验的步骤。

正则表达式之字符组

  首先从基础的字符组说起。字符组在匹配内容时是单个单个字符进行匹配。

[0123456789] 匹配0到9之间的任意一个数字(包括首尾),可简写为[0-9]
[a-z] 匹配小写字母a到z之间的任意一个字母包括首尾
[A-Z] 匹配大写字母A到Z之间的任意一个字母包括首尾
[0-9a-zA-Z] 匹配数字或者小写字母或者大写字母

正则表达式之特殊符号

  使用符号匹配内容时是单个单个字符地进行匹配。

  这里推荐一个可以练习正则表达式的网站:tool.chinaz.com/regex/

02>>>body标签补充、正则表达式

.   匹配除换行符以外的任意字符
\w  匹配字母或数字或下划线
\d  匹配数字
^   匹配字符串的开始。eg:^j  只匹配开头的j,后面的j不匹配,如果开头是非j的字符也不能匹配
$   匹配字符串的结尾。eg:6$  只匹配结尾的6,前面的6不匹配,如果结尾是非6的字符也不能匹配
a|b 匹配字符a或者字符b
()  给正则表达式分组,本身没有任何意义
[...]   匹配字符组中的字符
[^...]  匹配除了字符组中字符的所有字符(即取反)

  现在问题来了:如果我想要匹配完整的单词,比如说匹配到simon这个单词呢?

  直接输入simon就好了,不需要加别的东西。

02>>>body标签补充、正则表达式

  在需匹配内容很精确的情况下,可以直接写具体内容。

正则表达式之量词

  量词跟在正则表达式的后面使用,并且可以一次性匹配多个字符。

*       重复零次或更多次
+       重复一次或更多次
?       重复零次或一次
{n}     重复n次
{n,}    重复n次或更多次
{n,m}   重复n到m次

  如何理解?、+、*之间的区别?通过一张图可以比较简便地判断出来。

02>>>body标签补充、正则表达式

  另外,在练习网站中就能看到,如果单独写量词而前面不加东西的话就会飘红提示。

02>>>body标签补充、正则表达式

综合练习

  那么接下来我们就综合练习一下:

待匹配的文本:水果水壶水饺
正则   结果          分析
水.    水果/水壶/水饺 .可以匹配换行符之外的任意字符.所以水.查询到水果、水壶、水饺。
^水.   水果       ^限定了只能获取字符串的开头;.可以匹配任意字符。连起来就是查询字符串最开头水字和后面的任意字(果)水+果=水果。
水.$   水饺      .可以匹配任意字符;$限定了只能获取字符串的结尾。连起来就是水字和字符串末尾是任意字(饺)水+饺=水饺。
水.*   水果水壶水饺  .可以匹配任意字符;*代表字符匹配可重复零次或多次,在贪婪匹配下会尽可能多的选取匹配到的字符并且一口气呈现出来。
水.?   水果/水壶/水饺 .可以匹配任意字符;?代表字符匹配可重复零次或一次,而重复一次就代表重复整个正则表达式本身,所以水.?就等同于水.。所以水.?查询到水果、水壶、水饺。
水.+   水果水壶水饺  .可以匹配任意字符;+代表字符匹配可重复一次或多次,所以.+配合就意味着可以向后查询无限多个任意字符。水+果水壶水饺
水.{1,2} 水果水/水饺  .可以匹配任意字符;{1,2}代表字符匹配可重复1到2次,贪婪匹配默认为两次,也就是可以匹配2个字符(水XX)。水+果水、水饺

  在上面这些练习题中,尤其需要注意的是“水.?”以及“水.{1,2}”。?表示零次或一次,默认贪婪匹配即一次,其实就是正则表达式本身的一次。这也是初学者比较容易犯的错误。

  而“水.{1,2}”的逻辑,请参考下图:

02>>>body标签补充、正则表达式

贪婪匹配与非贪婪匹配

  既然"?"看起来没什么用,那为什么还有存在的必要呢?

  我们先来看看案例:

待匹配的文本:<script>123</script>
正则   结果
<.*>    <script>123</script>

  这个结果没什么好说的,<限定了开头,>限定了结尾,中间.*意思是可以无限地查询字符。

  按理说在匹配到"<script>"时就已经是一个查询结果了,但为什么最后是查询出来一整段字符串呢?

  这是因为正则默认启用了贪婪匹配。只要没有查询到最后一个>,匹配就会一直进行下去。所以最后结果就是匹配到一整段字符串。

  现在如果要克制食欲,让正则一个书名号一个书名号的进行匹配,那么?就派上用场了。

待匹配的文本:<script>123</script>
正则:<.*?>

  结果就是:

02>>>body标签补充、正则表达式

  这样的限制就被称为非贪婪匹配。

取消转义

  现在我们要匹配一条数据。

\n

02>>>body标签补充、正则表达式

  真奇怪,为什么匹配不了?

  这是因为\n是一个特殊符号,空格的意思。

  想要匹配\n这类特殊符号,就必须得通过取消转义操作。

\\n

02>>>body标签补充、正则表达式

  那么现在要匹配的数据是\\n,加一个斜杠还能用吗?02>>>body标签补充、正则表达式

  如果只加一个斜杠,那么新加入的斜杠抵消掉原有的一个斜杠还剩下一个斜杠存在,那么就变成了\n,仍旧是特殊符号。所以这个时候就必须要加两个斜杠抵消掉它自带的两个。

02>>>body标签补充、正则表达式

02>>>body标签补充、正则表达式

re模块

  了解了正则表达式之后,接下来就可以讲讲怎么在python中使用了。

  欲使用正则表达式,就需要先导入re模块。

import re  # 导入re模块
text = <script>123</script>  # 定义一段待匹配的字符串text
res = re.findall(<.*?>,text)  # 从text中查找所有符合正则表达式的内容
print(res)

02>>>body标签补充、正则表达式

02>>>body标签补充、正则表达式

上一篇:教你实现一个朴实的Canvas时钟效果


下一篇:js判断对象是否为空对象的几种方法