论坛 › 广西 › 软件测试 | HTML平常的知识点

nykek5i 发表于 2024-6-30 04:15:25

软件测试 | HTML平常的知识点

    <h3 style="color: black; text-align: left; margin-bottom: 10px;">什么是 web</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">web <span style="color: black;">便是</span> world wide web 的缩写，<span style="color: black;">叫作</span>之为<span style="color: black;">全世界</span>广域网，俗<span style="color: black;">叫作</span> WWW。<span style="color: black;">针对</span>用户<span style="color: black;">来讲</span>它其实<span style="color: black;">便是</span>由多个网页<span style="color: black;">构成</span>在<span style="color: black;">一块</span>而形成的一种服务（Web）.</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span><span style="color: black;">能够</span>将 web 理解为<span style="color: black;">便是</span>当前的一种互联网。<span style="color: black;">针对</span><span style="color: black;">咱们</span><span style="color: black;">来讲</span><span style="color: black;">更加多</span>的<span style="color: black;">便是</span>网站服务。网站<span style="color: black;">咱们</span><span style="color: black;">能够</span>认<span style="color: black;">是由于</span>多个网页组合在<span style="color: black;">一块</span>而形成一种服务。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">而 web 前端<span style="color: black;">便是</span>来负责一个网站<span style="color: black;">其中</span>前台网页里的内容。网页<span style="color: black;">是由于</span>前端工程师<span style="color: black;">运用</span> HTML 语言编写而成的一种文件，它里面会<span style="color: black;">包括</span>文字、<span style="color: black;">照片</span>、超链接、音频、视频等等这些内容。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">注：超文本标记语言（Hyper Text Markup Language , HTML）<span style="color: black;">便是</span>用来描述网页内容的一种计算机语言。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">什么是 HTML</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 超文本标记语言（Hyper Text Markup Language）<span style="color: black;">便是</span>用来描述网页的一种计算机语言。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">HTML 发展</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在互联网最初的时候是<span style="color: black;">无</span> HTML 的，<span style="color: black;">咱们</span>只能<span style="color: black;">经过</span>网络传输最简单的文字内容。 随着用户的<span style="color: black;">需求</span>越来越多，<span style="color: black;">同期</span><span style="color: black;">亦</span>是<span style="color: black;">咱们</span>的技术的<span style="color: black;">持续</span>发展，就出了一种<span style="color: black;">能够</span>表达文字内容之外的语言 HTML1.0。后来又慢慢发展到了<span style="color: black;">此刻</span>的 HTML5，<span style="color: black;">亦</span><span style="color: black;">便是</span><span style="color: black;">咱们</span><span style="color: black;">此刻</span>常说的 H5。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">HTML 查看<span style="color: black;">工具</span></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在测试过程中，<span style="color: black;">咱们</span>有时候<span style="color: black;">必须</span><span style="color: black;">经过</span><span style="color: black;">工具</span>去查看对应的 HTML 代码。在<span style="color: black;">这儿</span><span style="color: black;">咱们</span><span style="color: black;">能够</span>用浏览器自带的<span style="color: black;">研发</span>者<span style="color: black;">工具</span>，打开这个<span style="color: black;">工具</span>的快捷键是 F12。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">研发</span>者<span style="color: black;">工具</span>是一个相当强大的<span style="color: black;">工具</span>。<span style="color: black;">能够</span>查看修改 HTML，还<span style="color: black;">能够</span>调试 js，<span style="color: black;">能够</span>修改 css，还<span style="color: black;">能够</span>查看网络数据，并且还能进行性能测试。非常的全能。<span style="color: black;">针对</span>咱们 web 测试<span style="color: black;">来讲</span>，是一个<span style="color: black;">必要</span>要<span style="color: black;">把握</span>的<span style="color: black;">工具</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">要查看 HTML 源码，<span style="color: black;">咱们</span>只<span style="color: black;">必须</span>进入<span style="color: black;">研发</span>者<span style="color: black;">工具</span>的 elements 界面。 在<span style="color: black;">这儿</span><span style="color: black;">能够</span>对 web 页面上的元素进行定位，并且查看<span style="color: black;">全部</span> web 页面的 HTML 源码。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">HTML 基本结构</h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">基本结构</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">网页是<span style="color: black;">咱们</span><span style="color: black;">经过</span> HTML 语言来书写。 用 HTML 语言去书写网页有<span style="color: black;">有些</span>结构是默认<span style="color: black;">必要</span>存在的， 这个结构<span style="color: black;">咱们</span>就叫做网页（HTML）骨架。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;!DOCTYPE html&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">html</span> <span style="color: black;">lang</span><span style="color: black;">=</span><span style="color: black;">"en"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"UTF-8"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>Title<span style="color: black;">&lt;/</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      ​
      <span style="color: black;">&lt;/</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">html</span><span style="color: black;">&gt;</span>
    </div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">HTML 基本标签</h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">标签</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标签<span style="color: black;">便是</span> HTML 语言的发明者人为定义好的<span style="color: black;">有些</span>"单词"，<span style="color: black;">区别</span>的标签<span style="color: black;">表率</span>了<span style="color: black;">区别</span>的功能。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标签有两种<span style="color: black;">平常</span>的形式：</p>双标签：&lt;标签名<span style="color: black;">叫作</span>&gt;&lt;/标签名<span style="color: black;">叫作</span>&gt;单标签：&lt;标签名 /&gt;<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">平常</span>标签</h3>todo：加入 demo（done）&lt;!DOCTYPE html&gt;：向浏览器声明当前的文档是 HTML 类型&lt;html&gt; 与 &lt;/html&gt; 之间的文本描述网页，&lt;html&gt;是网页<span style="color: black;">其中</span>最大的一个标签，<span style="color: black;">叫作</span>之为根标签&lt;head&gt; 与 &lt;/head&gt; 描述网页头部，里面的内容是写给浏览器看的&lt;meta charset="UTF-8"&gt; <span style="color: black;">暗示</span>在设置当前网页的<span style="color: black;">表示</span>编码&lt;title&gt; 与 &lt;/title&gt; 之间文本为网页的标题，里面的内容会在浏览器的标签页上<span style="color: black;">表示</span>&lt;body&gt; 与 &lt;/body&gt; 之间的文本是网页主体，里面的内容会<span style="color: black;">表示</span>在浏览器的空白区域内&lt;div&gt; 与 &lt;/div&gt; 之间定义网页中的一个分隔区块<span style="color: black;">或</span>一个区域部分&lt;h1&gt; 与 &lt;/h1&gt; 之间的文本被<span style="color: black;">表示</span>为标题&lt;p&gt; 与 &lt;/p&gt; 之间的文本被<span style="color: black;">表示</span>为段落<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;!DOCTYPE html&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">html</span> <span style="color: black;">lang</span><span style="color: black;">=</span><span style="color: black;">"en"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"UTF-8"</span> <span style="color: black;">/&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>网页标题<span style="color: black;">&lt;/</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">h1</span><span style="color: black;">&gt;</span>我的第一个网页<span style="color: black;">&lt;/</span><span style="color: black;">h1</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>网页中的内容<span style="color: black;">&lt;/</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">html</span><span style="color: black;">&gt;</span>
    </div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">标签的属性</h3>todo：加入 demo(done)<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 标签<span style="color: black;">能够</span><span style="color: black;">持有</span>属性。属性<span style="color: black;">供给</span>了<span style="color: black;">相关</span> HTML 元素的<span style="color: black;">更加多</span>的信息。属性总是以名<span style="color: black;">叫作</span>/值对的形式<span style="color: black;">显现</span>，<span style="color: black;">例如</span>：name="value"。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">属性的基本格式为：&lt;标签名 属性1="属性值1" 属性2="属性值2</p>

流星的美 发表于 2024-9-8 14:00:16

期待你更多的精彩评论，一起交流学习。

nqkk58 发表于 2024-10-1 01:36:54

期待更新、坐等、迫不及待等。

7wu1wm0 发表于 2024-10-9 08:31:43

说得好啊！我在外链论坛打滚这么多年，所谓阅人无数，就算没有见过猪走路，也总明白猪肉是啥味道的。

4zhvml8 发表于 2024-10-19 00:32:03

论坛外链网http://www.fok120.com/

nykek5i 发表于 2024-10-25 21:05:16

楼主果然英明！不得不赞美你一下！

查看完整版本: 软件测试 | HTML平常的知识点