Web自动化-01-HTML

最新推荐文章于 2022-08-31 21:45:53 发布

qq_20747047

最新推荐文章于 2022-08-31 21:45:53 发布

阅读量98

点赞数

分类专栏： python

本文链接：https://blog.csdn.net/qq_20747047/article/details/117167043

版权

python 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

HTML

一、介绍

HTML，超文本标记语言，英文全称：HyperText Mark-up Language

超文本：
- 超越文本的限制，页面中可以定义一些图片、音频、视频等等
- 超文本链接，页面中也可以定义网站的URL（统一资源定位符），比如：http://www.baidu.com
标记

标记，也就是标签。标签分为双标签和单标签。

HTML的作用

HTML是定义页面结构的语言，制作页面的一门语言。

CSS(层叠样式)表。它是用来定义页面的样式。

JavaScript，页面的编程语言，用来定义页面的行为

二、基本结构

<!-- 表示HTML文档的声明：它是一个符合HTML5标准的文档 -->
<!DOCTYPE html>

<!-- html标签定义了页面的所有内容 -->
<html lang="en">  <!-- lang属性表示页面的语言为英文，如果不定义默认为中文网页 -->

<head>
    <!-- head标签可以定义页面的CSS、JS、网页的标题、页面的字符编码... -->
    <meta charset="UTF-8"> <!-- 页面的字符编码为UTF-8 -->
    <title>测试开发57期</title> <!-- 定义了页面的标题 -->
</head>

<body>
    <!-- body定义了页面的内容 -->
    花木成畦手自栽
</body>


</html>

三、常用标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 使用ie浏览器时，页面支持ie浏览器的最高版本 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 当在移动端访问网页时，网页比例自动绽放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>57期页面 - 常用标签</title>
    <style>
        div {
            border: 1px solid black;
        }

    </style>
</head>
<body>
    <!-- 双标签：成对出现的标签 -->
    <h1>这是一个一级标题</h1>  <!-- 页面文字的标题：分为6个等：1-6 -->
    <h6>这是一个六级标题</h6>
    <p>
        啊打发士大夫基材撒地方撒旦飞洒范德萨打发<br>   <!-- br是换行标签（单标签） -->
        1111111111111111
    </p>    <!-- 段落标签 -->
    <div>    <!-- div为容器标签，将页面中某一块标记，里面可以定义其它的标签 -->
        <h3>三级标题</h3>
        <p>段落</p>
    </div>
    <b>加粗</b>  
    <br>
    <strong>这句是加粗的</strong>
    <br>
    <em>斜体</em>

    <!-- 单标签：只有超标签 -->
    <br>
    <hr>   <!-- 分割线 -->
    <!-- 
        图片标签  img，有两个属性：
        src属性定义图片的链接（本地或者网络），
        alt表示，当图片失效时的提示文字
    -->
    <img src="C:\Users\A001\Desktop\img57_01.jpg" alt="图片加载失败">

    <!-- 带属性标签 -->
    <img src="C:\Users\A001\Desktop\img57_01.jpg" alt="图片加载失败">
    <!-- 超链接 -->
    <a href="https://www.baidu.com/" target="_blank">百度链接</a>
</body>
</html>

四、列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML列表</title>
</head>
<body>
    <!-- 
        * 无序列表 ul
        * 有序列表 ol
        * li 列表中的每一项
     -->
     <h3>培训专业：</h3>
     <ul>
        <li>Java开发</li>
        <li>测试开发Python</li>
        <li>前端全栈</li>
     </ul>
     <h3>测试专业的课程大纲</h3>
     <ol>
         <li>第一阶段</li>
         <li>第二阶段</li>
         <li>第三阶段</li>
         <li>第四阶段</li>
     </ol>
</body>
</html>

五、表格标签

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        /* 在head中定义style标签，用于定义页面的样式 */
        table {
            /* border-collapse 表示表格之间去除间隔 */
            border: 1px solid red;
            border-collapse: collapse; 
        }
        th, td {
            border: 1px solid red;
            padding: 10px;
        }
    </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 表格标签：
        table：定义一个表格的全局。
        tr：表示表格的一行
        th：表示表格的表头
        td：表示表格的一列
     -->
    <table>
        <tr>
            <th>name</th>
            <th colspan="2">age</th>
            <!-- <th>gender</th> -->
        </tr>
        <tr>
            <td>Tomcat</td>
            <td>18</td>
            <td rowspan="2">男</td>
        </tr>
        <tr>
            <td>MySQL</td>
            <td>20</td>
            <!-- <td>女</td> -->
        </tr>
    </table>
</body>

</html>

六、表单标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 表单标签
        form 标签：表单元素中所有定义的内容。
        label标签：表单元素中文字的标注
        input标签：表单元素中要提交的内容，以用户输入的形式（输入框、单选、多选、文件上传、文本域）
        input标签的type属性有以下几个值：
            * text：纯文本输入
            * password：输入密码，形式为隐藏输入
            * radio：单选框
            * checkbox：多选框
        textarea：表单元素中的文本域
        select：下拉框

        表单中有两个属性：（name=value）
            * name：定义了表单提交到后台，对应参数名
            * value：表单提交之后对应参数值

     -->
    <!-- 学员信息的表单 -->
    <form action="https://www.baidu.com/" method="POST">
        <p>
            <!-- 文本输入框 -->
            <label>姓名：</label>
            <input type="text" name="username" placeholder="请输入用户名">
        </p>
        <p>
            <!-- 密码输入框 -->
            <label>密码：</label>
            <input type="password" name="password" placeholder="请输入密码">
        </p>
        <p>
            <!-- 单选框 -->
            <label>性别：</label>
            <input type="radio" name="gender" value="1">男
            <input type="radio" name="gender" value="0">女
        </p>
        <p>
            <!-- 多选框 -->
            <label>爱好：</label>
            <input type="checkbox" name="habit" value="dance">跳舞
            <input type="checkbox" name="habit" value="sing">唱歌
            <input type="checkbox" name="habit" value="swing">游泳
        </p>
        <p>
            <!-- 文本域 -->
            <label>个人简介：</label>
            <textarea name="about"></textarea>
        </p>
        <p>
            <!-- 下拉框 -->
            <label>专业：</label>
            <select name="zhanye" id="">
                <option value="java">Java开发</option>
                <option value="web">Web前端</option>
                <option value="python">测试开发</option>
                <option value="ui">UI设计</option>
            </select>
        </p>
        <p>
            <!-- 提交按钮 -->
            <input type="submit">
            <!-- 重置按钮 -->
            <input type="reset">
        </p>

    </form>
</body>

</html>

qq_20747047

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web自动化-01-HTML

HTML一、介绍HTML，超文本标记语言，英文全称：HyperText Mark-up Language超文本：超越文本的限制，页面中可以定义一些图片、音频、视频等等超文本链接，页面中也可以定义网站的URL（统一资源定位符），比如：http://www.baidu.com标记标记，也就是标签。标签分为双标签和单标签。HTML的作用HTML是定义页面结构的语言，制作页面的一门语言。CSS(层叠样式)表。它是用来定义页面的样式。JavaScript，页面的编程语言，
复制链接

扫一扫