HTML补充知识

概要

  • 特殊符号

  • 常用标签

  • 列表标签

  • 表格标签

  • 表单标签

  • 标签特性

  • 正则表达式

详细

  • 特殊符号

由于特殊符号会和标签格式冲突,在HTML中需要进行转义
空格 &nbsp
> >
< &lt;
& &amp;
￥ &yen;
版权©  &copy;
注册®  &reg;

 

  • 常用标签

<!-- 1.链接标签 -->
<a href="https://www.baidu.com">点这里打开百度</a>
参数href是网址,点击即可跳转到该网页
​
<!-- 2.图片标签 -->
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.jq-school.com%2Fattached%2Fimage%2F20150603%2F20150603090357_0284.jpg&refer=http%3A%2F%2Fwww.jq-school.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634210485&t=980f995f3f5c0c24f9f6a139df5e9843" title="图片出来了吗" alt="图片出不来怎么办">
参数src是图片的地址,可以是本地的也可以是网络上的
参数alt是图片无法显示时替换显示的备用文本
参数title是鼠标悬浮在图片上显示的文本
​
<!-- 3.页面布局标签 -->
<div></div>
    是所有网页中出现频率最高的标签,其中可以无限制嵌套任意标签
​
<!-- 4.页面文本标签 -->
<span></span>
　　在网页中出现频率没有div标签高,用于显示文本

 

 

  • 列表标签

<!-- 网页上规则排列的横向/竖向内容由列表标签完成 -->
<ul>
    <li>00A</li>
    <li>00B</li>
    <li>00C</li>
</ul>
一般由ul标签与li标签配合使用

 

  • 表格标签

<!-- 用于显示相同格式的数据(表格形式) -->
<table border="2"><!-- 表格标签 -->
    <thead><!-- 表头(记录字段) -->
        <tr><!-- 一个tr就是一行 -->
            <th>书名</th><!-- 字段名 -->
            <th>作者</th><!-- 字段名 -->
            <th>出版社</th><!-- 字段名 -->
        </tr>
    </thead>
    <tbody><!-- 表体(记录数据) -->
        <tr><!-- 一个tr就是一行 -->
            <td>Python编程-从入门到实践</td><!-- 字段值 -->
            <td>埃里克.马瑟斯</td><!-- 字段值 -->
            <td>人民邮电出版社</td><!-- 字段值 -->
        </tr>
        <tr><!-- 一个tr就是一行 -->
            <td>Pyhton游戏-编程入门</td><!-- 字段值 -->
            <td>Jonathan S.Harbour</td><!-- 字段值 -->
            <td>人民邮电出版社</td><!-- 字段值 -->
        </tr>
    </tbody>
</table>
参数border设置边框厚度

 

  • 表单标签

<!-- 获取用户输入的数据需要使用表单标签 
                    一般放在用form标签中-->
1.输入框
<input type="">
参数type是输入的类型
text        普通文本
password    密文展示(用于输入各类密码)
email       邮箱格式
date        日期格式
radio       单选
checkbox    多选
file        文件
submit      提交按钮(提交表单数据的操作)
reset       重置按钮
button      自定义按钮
2.文本域
<textarea></textarea>
用于输入大段文本
3.选择标签
<select>
    <option></option> <!-- 选项 -->
</select>
​
<!-- eg:-->
<table border="5"><!-- 表格标签 -->
    <thead><!-- 表头(记录字段) -->
        <tr><!-- 一个tr就是一行 -->
            表单标签
        </tr>
    </thead>
    <tbody><!-- 表体(记录数据) -->
        <form>
            <input type="file" title="选择文件">
            <tr><!-- 一个tr就是一行 -->
                <td><input type="text">用户名</td>
                <td><input type="password">密码</td>
                <td><input type="email">邮箱地址</td>
            </tr>
            <tr><!-- 一个tr就是一行 -->
                <td><input type="date"></td>
                <td>单选:<!-- radio类型设为相同name即为单选 -->
                    <input type="radio" value="m" name="gender">男
                    <input type="radio" value="f" name="gender">女
                </td>
                <td>多选:
                    <input type="checkbox" >英雄联盟
                    <input type="checkbox" >穿越火线
                </td>
            </tr>
            <tr><!-- 一个tr就是一行 -->
                <td><input type="submit"></td>
                <td><input type="reset"></td>
                <td><input type="button" value="参数value显示在按钮上"></td>
            </tr>
            <tr>
                <select multiple="True">参数multiple=True为复选
                    <option>111</option> <!-- 选项 -->
                    <option>222</option>
                    <option>333</option>
                </select>
                <textarea>大段文本</textarea>
            </tr>
        </form>
    </tbody>
</table>

  • 标签特性

<a id='' class=''></a>
以a标签为例,id和class等称为该标签的属性
<!-- id和class是标签的两大核心属性 -->
<!-- 类似于某个学生的学号 -->
id     唯一标识某个标签,在同一个.html文件中不能重复
<!-- 类似于某些学生的班级 -->
class  给标签区分类别,用于同时查找多个标签,可重复
    eg:
         <p class='p1'></p>
         <a class='a1'></a>
         <div class='d1'></div>
         <!-- 一个标签可以含有多个class值 -->
        <span class='s1 s2 s3'></span>
<!-- 标签可以拥有自定义属性,一般用于携带额外数据 -->
<a username="Leoric" pwd="好好学习天天向上"></a>
<!-- 标签之间的关系 -->
<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流程控制实现手机号的校验"""
# 1.获取用户手机号
phone = input('phone num>>>:').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('是一个合法的手机号')
         else:
            print('手机号格式错误')
    else:
         print('手机号必须是纯数字')
else:
     print('手机号必须是11位')
"""太过繁琐！！！使用正则表达式可以简化步骤"""
# 引入正则表达式匹配文本的re模块
import re
phoneNum=input('请输入手机号:')
if re.match('^(13|14|15|18)[0-9]{9}$',phoneNum)
    print('手机号格式正确')
else:
    print('手机号格式错误')
# 当然,匹配内容精确时就直接书写具体内容即可

正则表达式字符组

字符组匹配内容时都是循环按单个字符匹配
[0123456789] 匹配0-9之间任意一个数字包括首尾
[0-9] 简写,同上
[a-z] 匹配小写字母a-z之间任意一个字母包括首尾
[A-Z] 匹配大写字母A-Z之间任意一个字母包括首尾
[0-9a-zA-Z]匹配数字或者小写字母或者大写字母

正则表达式符号

符号匹配内容时都是循环按单个字符匹配
.           匹配除换行符以外任意字符
\d          匹配数字
^           匹配字符串开始
[^....]      匹配除中括号内^后的字符组以外任意字符
[]          匹配中括号内的字符
$           匹配字符串结尾
a|b         匹配字符a或者字符b
()          给正则表达式分组,本身无含义

正则表达式量词

符号放在字符组后面可以指定匹配个数
# 不能单独使用
*       重复零次或更多次
+       重复一次或更多次
?       重复零次或一次
{n}     重复n次
{n,}    重复n次或更多次
{n,m}   重复n到m次
# 默认贪婪匹配,尽可能多地匹配字符
<script>123</script>
<.*>  匹配结果:一个结果 <script>123</script>
# 在量词后加一个问号皆可切换为非贪婪匹配
<.*?> 匹配结果:两个结果 <script>、</script>
posted @ 2021-09-14 21:15  Leguan001  阅读(47)  评论(0)    收藏  举报