08-HTML网页结构标签说明-1

网页结构与编辑器

HTML

  • 网页开发人员必须掌握：html、css、js、jquery、vue
  • 爬虫开发人员必须掌握：html、css、js
  • 测试开发人员必须掌握：html、css、js、jquery、vue
  • 数据可视化人员必须掌握：html、css、js

浏览器

  • 有技术：opera、firefox、IE-微软、safari-苹果、chrome-谷歌
  • 有广告：360浏览器、qq浏览器、uc浏览器
    • pc、移动端适配和兼容性问题

网页的基本结构

网页编辑工具

  • Hbuilder网页编辑工具
  • 官方地址：https://www.dcloud.io/hbuilderx.html
  • 下载后解压即可

练习题

  • 安装Firefox、Chrome浏览器并进行使用
  • 使用谷歌浏览器分析https://python-xp.com/login的网页结构
  • 下载安装Hbuilder编辑器
  • 创建自己第一个html文件

HTML基础

  • h1~h6标签
  • p、br、a标签， (空格符)
  • html手册查阅方法

HTML标签

内容标签

标签 标签内容
h1~h6 网页内容标题，数字表示内容重要性即标题大小
p 段落
br 换行
a 超链接
hr 水平分割线
  空格
href/target 与a标签配合使用，达到超链接效果
  • 完成课堂演示 练习
  • 在手册中查找ul、ol用法
  • 参照<<编辑器选择>>word文档编写html页面

UL、OL、LI列表标签

  • UL：无序列表
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul><!--默认是小圆点,改为none,则小圆点消失-->
           <li>Coffee</li>
           <li>Tea</li>
        </ul>
        <ul type="circle"><!--空心圆-->
           <li>Coffee</li>
           <li>Tea</li>
        </ul>
        <ul type="square"><!--方块-->
           <li>Coffee</li>
           <li>Tea</li>
        </ul>
        
    </body>
</html>
  • OL：有序列表
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ol>
           <li>Coffee</li>
           <li>Tea</li>
        </ol>
        <ol start="60">
           <li>Coffee</li>
           <li>Tea</li>
        </ol>
        <ol type="a">
           <li>Coffee</li>
           <li>Tea</li>
        </ol>
        <ol type="A">
           <li>Coffee</li>
           <li>Tea</li>
        </ol>
    </body>
</html>

    • 列表标签练习题目

 

    • 练习代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>PIP源说明</h1>
        <hr>
        <p>
        由于一些原因，国内访问外国一些站点资源会比较缓慢，通常国内一些企业或机构会在国内的服务器上构建这些站点的镜像，这样可以直接访问国内站点
        </p>
        <h2>pip国内清华源</h2>
        <a href="pypi.tuna.tsinghua.edu.cn/simple">https://pypi.tuna.tsinghua.edu.cn/simple</a>
        <h3>临时使用方法</h3>
        pip install flask -i https://pypi.tuna.tsinghua.edu.cn/simple
        <h3>永久生效</h3>
        <ol>
            <li>
                创建pip.conf文件，内容如下:
                <ul>
        [global]
        index-url=https://pypi.tuna.tsinghua.edu.cn/simple
                </ul>
            </li>
            <li>将pip.conf文件放置在:
                <ul>
        <li>mac：~/config/pip/pip.conf<br></li>
        <li>windows：c:\Users\你的用户名\下，或者windows目录下</li>
                </ul>
            </li>
        </ol>

        <h2>虚拟环境配置</h2>
        <ol>
            <li>创建目录：
            mkdir myweb（linux/windows通用）</li>
            <li>进入目录：
            cd myweb</li>
            <li>配置虚拟环境路径
                <ul>
                    <li>linux：export PIPENV_VENV_IN_PROJECT=1</li>
                    <li>windows：set PIPENV_VENV_IN_PROJECT=1（项目不能建在C盘）</li>
                </ul>
            </li>
            <li>创建虚拟环境
                <ul>
                    <li>pipenv install<br>
                    <li>通过pipenv安装模块：<br></li>
                    pipenv install flask --pypi-mirror https://pypi.tuna.tsinghua.edu.cn/simple<br></li>
                    <li>如果pipenv安装过程中出现lock错误，可以使用--skip-lock选项，跳过lock环节<br></li>
                </ul>
            </li>
        </ol>
    </body>
</html>
  • LI—定义列表中的一个列表项。
    • <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中

DL定义列表标签（方便爬虫）

  • dl标签
  • dt标签—对象选项
  • dd标签—属性说明
<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h2>虚拟环境配置</h2>
        <dl>
            <dt><b>创建目录：</b></dt>
            <dd>mkdir myweb（linux/windows通用）</dd>
            <dt><strong>进入目录：</strong></dt>
                <dd>cd myweb</dd>
            <dt><strong>配置虚拟环境路径</strong></dt>
                    <dd>linux：export PIPENV_VENV_IN_PROJECT=1</dd>
                    <dd>windows：set PIPENV_VENV_IN_PROJECT=1（项目不能建在C盘）</dd>
            <dt><strong>创建虚拟环境</strong></dt>
                    <dd>pipenv install</dd>
                    <dd>通过pipenv安装模块：pipenv install flask --pypi-mirror https://pypi.tuna.tsinghua.edu.cn/simple<br></dd>
                    <dd>如果pipenv安装过程中出现lock错误，可以使用--skip-lock选项，跳过lock环节<br></dd>
        </dl>
    </body>
</html>

table标签

  • table标签
    • 应用场合

  • tr标签—表格的行
  • th标签—表格的表头
  • td标签—表格的列
    • 习题：学生成绩数据报表
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="10" width="200">
        <!--border=1添加边框线;cellspacing="0"表示边距为0;cellpadding=10表示方框内留白部分增大;width=600表示宽度-->
        <tr><!--tr是行-->
        <td>Cell A</td><!--td是列,width可单独控制每一列的宽度-->
        <td>Cell C</td>
        </tr>
        <tr>
        <td>Cell B</td>
        <td>Cell D</td>
        </tr>
        </table>
    </body>
</html>
    • 习题代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- th 表格的表头，加粗居中 -->
        <table border="1" cellspacing="0" cellpadding="0" width="300">
        <caption>学生成绩数据报表</caption>
        <tr>
            <th>姓名</th><th>语文</th><th>数学</th><th>英语</th>
        </tr>
        <tr>
            <td>王小二</td><td>100</td><td>40</td><td>80</td>
        </tr>
        <tr>
            <td>张三</td><td>80</td><td>100</td><td>100</td>
        </tr>
        <tr>
            <td>李四</td><td>70</td><td>80</td><td>50</td>
        </tr>
        </table>
    </body>
</html>

    • 行列合并

      • 应用场合

 

      • <td rowspan="2">游泳</td>：行合并：rowspan="合并行数"
      • <td colspan="2">太极</td>：列合并：colspan="合并列数"
    •  习题代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 行列合并 -->
        <table border="4" cellspacing="0" cellpadding="0" width="450">
        <caption>健身安排</caption>
        <tr><th></th>
            <th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th><th>周日</th>
        </tr>
        <tr>
            <td>上午</td><td>游泳</td><td>骑自行车</td><td>太极</td><td>太极</td><td>跑步</td><td>登山</td><td>休息</td>
        </tr>
        <tr>
            <td>下午</td><td>游泳</td><td>钓鱼</td><td>跑步</td><td>登山</td><td>休息</td><td>登山</td><td>休息</td>
        </tr>
        </table>
        
        <table border="4" cellspacing="0" cellpadding="0" width="450">
        <caption>健身安排</caption>
        <tr><th>
            </th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th><th>周日</th>
        </tr>
        <tr>
            <td>上午</td><td rowspan="2">游泳</td><td>骑自行车</td><td colspan="2">太极</td><td>跑步</td><td rowspan="2">登山</td><td rowspan="2">休息</td>
        </tr>
        <tr>
            <td>下午</td>    <td>钓鱼</td><td>跑步</td><td>登山</td><td>休息</td>
        </tr>
        </table>
    </body>
</html>

    • 作业习题：课程表

    • 习题代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 行列合并 -->
        <table align="center" border="1" width="900" cellspacing="0">
            <tr>
                <caption>课程表</caption>
            </tr>
            <tr>
                <th colspan="2">时间</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
            <tr>
                <td rowspan="4">上午</td>
                <th>第一节课 8:00-8:40</th>
                <td rowspan="2">数据治理与智能决策</td>
                <td rowspan="3">大型数据库开发</td>
                <td rowspan="2">自习</td>
                <td rowspan="2">物联网应用设计</td>
                <td rowspan="2">算法设计与分析</td>
            </tr>
            <tr>
                <th>第二节课 8:45-9:25</th>
            </tr>
            <tr>
                <th>第三节课 9:55-10:35</th>
                <td rowspan="2">大学数学（上册）</td>
                <td rowspan="2">算法设计与分析</td>
                <td rowspan="2">管理学概论</td>
                <td rowspan="2">自习</td>
            </tr>
            <tr>
                <th>第四节课 10:40-11:20</th>
                <td>自习</td>
            </tr>
            <tr>
                <td rowspan="4">下午</td>
                <th>第五节课 14:00-14:40</th>
                <td rowspan="2">健美操</td>
                <td rowspan="2">专业英语</td>
                <td rowspan="2">离散数学</td>
                <td rowspan="3">日语</td>
                <td rowspan="2">自习</td>
            </tr>
            <tr>
                <th>第六节课 14:45-15:25</th>
            </tr>
            <tr>
                <th>第七节课 15:40-16:20</th>
                <td rowspan="2">形式与政策</td>
                <td rowspan="2">物联网应用设计</td>
                <td rowspan="2">食疗保健（选修课）</td>
                <td rowspan="2">大学数学（上册）</td>
            </tr>
            <tr>
                <th>第八节课 16:25-17:05</th>
                <td>自习</td>
            </tr>
        </table>
    </body>
</html>

form标签

  • form标签（表单接收用户输入）
    • form表单应用场景—表单用于向指定的 URL 传递用户数据

  • input标签（单行文本输入）
  • textarea标签（多行文本输入）
  • select标签（选择菜单）
  • radio标签（单选按钮）
  • checkbox标签（复选框）
  • submit标签（提交按钮）
    • 用法示例
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="" method="post">
            <!-- 单行文本输入 -->
            单行输入：<input type="text" value="" />
            <hr>
                <!-- 密码 -->
                密码输入：<input type="password" name="password" id="" value="" />
            <hr>
            <!-- 上传文件 -->
            选择文件：<input type="file" name="photo" id="" value="" />
            <hr>
                <!--新增输入类型：邮件、电话、日期
                <input type="email" name="" id="" value="" />-->
                <!-- 多行文本 -->
                <textarea rows="5" cols="20"></textarea><br>
            <hr>
            <!--单选按钮，相同的name为一组-->
            男<input type="radio" name="gender" id="" value="1" />
            女<input type="radio" name="gender" id="" value="0" />
            <hr>
                合适：<input type="radio" name="likely" id="" value="yes" />
                不合适：<input type="radio" name="likely" id="" value="no" />
            <hr>
            <hr>
                <!-- 多选 复选框，相同的name为一组-->
                钓鱼<input type="checkbox" name="hobby" id="" value="钓鱼" />
                太慢<input type="checkbox" name="hobby" id="" value="太慢" />
                骑马<input type="checkbox" name="hobby" id="" value="骑马" />
            <hr>
            <!-- 下拉菜单 -->
            <hr>
            <!--支持多选时，可以按照shift多选-->
            <!--<select name="city">此为单选项-->
                <select name="city" multiple="multiple">
                    <option value="1">苏州</option>
                    <option value="1">南京</option>
                    <option value="1">上海</option>
                    <option value="1">广州</option>
                </select>
            <hr>
            <!-- 提交按钮 -->
                <input type="submit" name="submit" id="" value="提交" />
        </form>
    </body>
</html>
    • form属性
属性描述45
action 定义一个 URL。当点击提交按钮时，向这个 URL 发送数据。 4 5
data 供自动插入数据。   5
replace 定义表单提交时所做的事情。   5
accept 处理该表单的服务器可正确处理的内容类型列表（用逗号分隔）。 4 5
accept-charset 表单数据的可能的字符集列表（逗号分隔）。默认值是 "unknown"。 4 5
enctype 用于对表单内容进行编码的 MIME 类型。 4 5
method 用于向 action URL 发送数据的 HTTP 方法。默认是 get。 4 5
name 为表单定义一个唯一的名称。不支持。用 id 代替。 4  
target 在何处打开目标 URL。 4 5
    • 习题：注册表单练习

    • 习题代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>欢迎注册有缘再见网</h1>
        <table align="center" border="1" width="500" cellpadding="0" cellspacing="">
            <tr>
                <th>姓名</th>
                <td><input type="text" name="name" id="" value="" /></td>
            </tr>
            <tr>
                <th>性别</th>
                <td>
                    男<input type="radio" name="gender" checked /><!--checked表示默认选项-->
                    女<input type="radio" name="gender" checked />
                </td>
            </tr>
            <tr>
                <th>上传照片</th>
                <td>选择文件：<input type="file" name="photo" id="" value="" /></td>
            </tr>
            <tr>
                <th>出生年月日</th>
                <td>
                    <select type="date" name="date">
                        <option value="1945-01-01">1945-01-01</option>
                        <option value="2021-02-19">2021-02-19</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>爱好</th>
                <td>
                    唱歌<input type="checkbox" name="hobby" id="" />
                    睡觉<input type="checkbox" name="hobby" id="" />
                </td>
            </tr>
            <tr>
                <th>手机号码</th>
                <td><input type="text" name="mobile" id="" value="" /></td>
            </tr>
            <tr>
                <th>登录密码</th>
                <td>
                    <input type="password" name="password" id="" value="" />
                </td>
            </tr>
            <tr>
                <th>确认密码</th>
                <td><input type="password" name="confirm-password" id="" value="" /></td>
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <input type="submit" name="reg-btn" id="" value="-----立即注册-----" />
                </td>
            </tr>
        </table>
    </body>
</html>

    • 作业习题：用户注册表单

    • 习题代码
<!doctype html>
<html>
<head>
<title>sign in</title>
<style>
div{
    background:#009FCC;
    font-size:24px;
    padding:5px;
    color:white;
}
form{
    background: #F8F8FF ;
    border:#357FC4 solid 1px;
    color:#575454;  
    width:400px;
    margin:20px auto;
    font-size:15px;
}
table{
    margin:10px auto;
}
a{
    text-decoration:none;
}
input[type="button"]{
    background:#228B22;
    color:white;
    font-size:15px;
    font-weight:bold;
    width:120px;
    height:40px;
}
td:first-child{
    text-align:right;
    padding:0 5px;
}
td:only-child{
    text-align:center;
    font-size:12px;
}
span:before{
    content:"* ";
    color:red;
}
input[type="text"]:read-only{
    border:#888484 solid 2px;
    background:#888484;
    font-weight:bold;   
}
input[type="text"]:hover{
    background:#EFD9AC;
}
</style>
</head>
<body>
    <form>
    <div align="center">注册账号</div>
    <table>
        <tr><td><span>用户名:</span></td>
            <td><input type="text" name="user_name" id="" value=""/></td>
        </tr>
        <tr><td><span>手机号码:</span></td>
            <td><input type="text" name="user_mobile" id="" value=""/></td>
        </tr>
        <tr><td><span>登录密码:</span></td>
            <td><input type="password" name="user_password" id="" value="" /></td>
        </tr>
        <tr><td><span>确认密码:</span></td>
            <td><input type="password" name="user_confirm_password" id="" value="" /></td>
        </tr>
        <tr><td><span>验证码:</span></td>
            <td><input type="text" name="verification_code" id="" value="" />看不清?<a href="#">换一张</a></td>
        </tr>
        <tr>
            <td colspan="2"><input type="checkbox" />我已阅读并接受<a href="#">条款</a></td>
        </tr>
        <tr>
            <td colspan="2"><input type="button" name="submit" value="立即注册" /></td>
        </tr>
    </table>
    </form>
</body>
</html>
colspan
posted @ 2021-02-19 16:59  西瓜的春天  阅读(264)  评论(0)    收藏  举报