软件测试攻略(四):HTML初识

HTML,超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。


一、编辑器

使用专业的 HTML 编辑器来编辑 HTML,下面给大家推荐notepad++,常见的编辑器还有Sublime Text、HBuilder等。

  • 新建html文件
  1. 菜单栏文件—新建
  2. 工具栏第一个按钮是新建
  3. 文件浏览栏空白处双击
  • 打开左侧工作区
    菜单栏视图—文件夹工作区
  • 编码选择
    菜单栏编码—以UTF-8格式编码
  • 语言选择
    菜单栏语言—HTML

二、网页结构

  • 最最最最最基本的网页结构
<html>
   <head> </head>
   <body> </body>
</html>
  1. html,确定是一个html文档
    head,头部,网页不可见部分,title定义html文档的标题
    body, 身体,网页可见的部分,可直接输入本文内容
<head>
          <title>学生信息登记系统</title>
</head>

title在WEB中显示效果如下图:


title效果图示.png
<body>   
    hello word!
</body>

在WEB中显示效果如下图:


body中效果图示.png

三、标签、元素

比如<p>这就是一个标签, <p>这是段落</p>这就是一个元素,也就是说元素由一个开始的标签和结束的标签组成,用来包含某些内容;空元素在开始标签中进行关闭(以开始标签的结束而结束),比如</br>

但在日常交流中,我们说的标签和元素指的同一个意思,除了上述所说的空元素,其它都是成对出现的;

  • 常见标签有:
    标题:是通过<h1> - <h6> 标签来定义的。
    段落:是通过标签 <p> 来定义的。
    链接:是通过标签 <a> 来定义的。
    图像:是通过标签 <img> 来定义的。

四、实例练习

  • table表格
    表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。
<table>
            <tr>
                <td>第一行的第一列</td>
                <td>第一行的第二列</td>
            </tr>
       
            <tr>
                <td>第二行的第一列</td>
                <td>第二行的第二列</td>
            </tr>
<table>
table效果展示图1.png

【注】为了让大家更容易看出其实是表格,加了一个显示其边框的效果。


table效果展示图2.png
image.png

-input标签
<input>是输入标签,输入类型是由类型属性(type)定义的,

  1. 文本框由<input type="text">实现,当用户要在表单中键入字母、数字等内容时,就会用到文本框
  2. 密码字段通过标签<input type="password"> 来定义
  3. <input type="submit"> 定义了提交按钮
<input type="text">

文本框效果如图:


文本框效果图示.png

课后练习:实现如下效果

课后练习.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容