zoukankan      html  css  js  c++  java
  • Web自动化测试 二 ----- HTML

    HTML

    一、结构

    • html> 与 </html> 之间的文本描述网页
    • <body> 与 </body> 之间的文本是可见的页面内容
    • <h1> 与 </h1> 之间的文本被显示为标题
    • <p> 与 </p> 之间的文本被显示为段落

      <html>
        <head>
        快递单
        </head>
        <body>
        邮寄的东西
        </body>
      </html>

    二、概念

    • HTML(Hyper Text Markup Language): 超文本标记型语言,方便快速查找。'
    • HTML 不是一种编程语言,而是一种标记语言 (markup language)

    HTML标签

    • HTML 标签是由尖括号包围的关键词,比如 <html>
    • HTML 标签通常是成对出现的,比如 <b> 和 </b>,有些是单个出现的。有些是没有内容的。
    • 标签对中的第一个标签是开始标签,第二个标签是结束标签
    • 开始和结束标签也被称为开放标签闭合标签
    • 看到的网页 == HTML

    三、与XML的区别

    • HTML:<key>value</key> key标签是指定的
    • XML:<key>value</key> key标签可以自己定义

    四、HTML头部元素

    <head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。

    以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。

    1、<title> 标签

    定义文档的标题。

    2、<base> 标签

    页面上的所有链接规定默认地址或默认目标(target)。

    <head>
    <base href="http://www.w3school.com.cn/images/" />
    <base target="_blank" />
    </head>

    3、<link> 标签

    定义文档与外部资源之间的关系。

    4、<style> 标签

    用于为 HTML 文档定义样式信息。

    5、<meta> 标签

    提供关于 HTML 文档的元数据。

    meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

    元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

    6、<script> 标签

    用于定义客户端脚本,比如 JavaScript。

    五、HTML实体

    1、<p> 元素

    <p> 元素定义了 HTML 文档中的一个段落。

    <p>This is my first paragraph.</p>

    2、<body> 元素

    定义了 HTML 文档的主体。

    3、<html> 元素

    定义了整个 HTML 文档。

    4、<h1> - <h6> 标签

    <h1> 定义最大的标题。<h6> 定义最小的标题。

    <h1> 定义标题</h1>

    5、<hr /> 标签

    在 HTML 页面中创建水平线。

    6、HTML注释

    <!-- This is a comment -->

    7、 <br /> 标签

    在不产生一个新段落的情况下进行换行。

    8、HTML链接

    <a href ="www.baidu.com"> 这是一个链接</a>

    target属性:使用target属性,可以使链接在新窗口打开。

    9、HTML图像

    <img src="图片路径" width=“100” herght=“100”>

    10、HTML表格

    表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

    <table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>

    在浏览器显示如下:

    row 1, cell 1 row 1, cell 2
    row 2, cell 1 row 2, cell 2
     

    border属性(border=“1”):显示一个带有边框的表格。

    表头使用 <th> 标签进行定义。

    11、HTML列表

    • 无序列表:无序列表始于 <ul> 标签。每个列表项始于 <li>。 
      <ul>
      <li>Coffee</li>
      <li>Milk</li>
      </ul>
    • 有序列表:有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
      <ol>
      <li>Coffee</li>
      <li>Milk</li>
      </ol>  

    12、<iframe>标签

    用来在一个HTML页面上显示另一个HTML页面。

    <iframe src="www.baidu.com" height="100" width="200"> </iframe>

    13、<input>标签

            用户名: <input type="text">
            用户名: <input type="text" readonly>
            用户名: <input type="text" disabled>
    
            <!--单选框-->
            <p> 我最喜欢的歌手
            <input type="radio" name="favor_singer" id="zjl" value="周杰伦" readonly>周杰伦
            <input type="radio" name="favor_singer" id="ljj" value="林俊杰" checked>林俊杰
            <input type="radio" name="favor_singer" id="zhm" value="张惠妹"disabled>张惠妹
            </p>
    
            <!--多选框-->
            <p> 我爱听的歌手
            <input type="checkbox" name="listen" value="周杰伦">周杰伦
            <input type="checkbox" name="listen" value="林俊杰" checked>林俊杰
            <input type="checkbox" name="listen" value="张惠妹">张惠妹
            </p>
            <!--无论单选或者多选同一个问题必须加name属性-->
    
            <input type="button">
            <input type="color">
            <input type="time">
            <input type="email"> <!--只能输入email格式的数据-->
            <input type="file">
            <input type="number">
            <input type="password">
    
            <!--文本域-->
            <p>
            <textarea> </textarea>
            </p>
    
            <p>
            <p style="color:red">最喜欢的水果</p>
            <!--select里只显示option元素,备注信息放到select外-->
            <select>
                <option></option>
                <option>草莓</option>
                <option>香蕉</option>
                <option>苹果</option>
            </select>
            <input type="submit">
            </p>
    

      

    属性总结:

    • id必须要唯一,不唯一浏览器不会识别到,但是会产生严重的影响,是编程人员的问题
    • for设同一个id name不是唯一的,当a有两个相同的name,锚会定位到第一个。name的作用非常有用,作为可与服务器交互数据的HTML元素的服务器端的标识,分组,锚点
    • value值很重要,向后端传输的数据就是value
    • style通常被css文件代替
    • class通常用来做样式分离,可以同时又多个值,用空格分开
    • readlonly和disabe的区别:
      • readonly只针对input(text/password)和textarea有效,而disabled对于所有的表单元素有有效,包括select、radio、checkbox、button等,但是表单如果在使用了readonly后,当我们将表单以post或get的方式提交的话,这个元素的值不会被传递出去,而readonly会将值传递出去(这种情况出现在当我们将某个表单中的textarea元素设置为disabled或readonly,但是submit button确实可以使用的)
    • checked,默认值

     

  • 相关阅读:
    day7 面向对象 静态方法 类方法 属性方法 类的特殊成员方法 元类 反射 异常处理
    day6 面向对象 封装 继承 多态 类与实例在内存中的关系 经典类和新式类
    day5 time datetime random os sys shutil json pickle shelve xml configparser hashlib subprocess logging re正则 python计算器
    kafka常用操作命令
    linux基础
    django学习1——初识web应用程序
    mysql数据库(三)——pymysql模块
    mysql数据库(二)——表的查询
    mysql数据库(一)
    Python常用模块——re模块
  • 原文地址:https://www.cnblogs.com/qyh0902/p/11147610.html
Copyright © 2011-2022 走看看