星星博客 »  > 

Web自动化-01-HTML

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>

相关文章