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

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


一、编辑器

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

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

二、网页结构

  • 最最最最最基本的网页结构

    
    

  1. html,确定是一个html文档
    head,头部,网页不可见部分,title定义html文档的标题
    body, 身体,网页可见的部分,可直接输入本文内容

          学生信息登记系统

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


title效果图示.png
   
    hello word!

在WEB中显示效果如下图:


软件测试攻略(四):HTML初识_第1张图片
body中效果图示.png

三、标签、元素

比如

这就是一个标签,

这是段落

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

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

四、实例练习

  • table表格
    表格由 标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由
    标签定义)。
    第一行的第一列 第一行的第二列
    第二行的第一列 第二行的第二列
    软件测试攻略(四):HTML初识_第2张图片
    table效果展示图1.png

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


    软件测试攻略(四):HTML初识_第3张图片
    table效果展示图2.png
    软件测试攻略(四):HTML初识_第4张图片
    image.png

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

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

    文本框效果如图:


    文本框效果图示.png

    课后练习:实现如下效果

    软件测试攻略(四):HTML初识_第5张图片
    课后练习.png

    你可能感兴趣的:(软件测试攻略(四):HTML初识)