关注公众号：自动化测试实战

  • img标签

我们先看一下文档结构：

这里我们文件当前位置就是lesson.html，所以现在我们img属性src给的值要进入imgs文件夹，所以我们可以用相对路径来表示，看代码：

  1. <!DOCTYPE html>
    <html>
  2.     <head>
  3.         <title>第一节课</title>
  4.         <meta charset="UTF-8"/>
  6.     </head>
  7.     <body>
  8.         <a href="https://www.baidu.com" target="_blank">百度</a>
  9.         <img src="imgs/0.png">
  10.     </body>
    </html>

上面src后面跟的就是相对路径。

页面显示：

src除了用来设置图片路径以外，还用来设置alt属性，alt属性是用来给搜索引擎用的，以便你写的页面可以被搜索引擎搜索到。此外它还有width和height属性，比如刚才的图片比较大，我们现在修改图片的大小，只需要：

  1. <img src="imgs/0.png" width="5%" height="5%">

如果你希望自己的图片是网络上的图片，那只需要粘贴你希望放上去的图片地址，比如，放百度的背景，那么只需要看一下百度的地址：

然后复制这个地址，粘贴到你的src路径里：

  1. <img src="https://www.baidu.com/img/bd_logo1.png" width="50%" height="50%">

但是要注意，如果图片写的是网络上的图片，要必须确定有网，不然图片是不显示的。

  • ul li标签

这两个标签是列表。

  1. <!DOCTYPE html>
    <html>
  2.     <head>
  3.         <title>第一节课</title>
  4.         <meta charset="UTF-8"/>
  6.     </head>
  7.     <body>
  8.         <a href="https://www.baidu.com" target="_blank">百度</a>
  9.         <img src="https://www.baidu.com/img/bd_logo1.png" width="10%" height="10%">
  10.         <ul>
  11.             <li>第一行</li>
  12.             <li>第二行</li>
  13.             <li>第三行</li>
  14.         </ul>
  15.     </body>
    </html>

显示：

你可能会说除了ul li还有ol li，不用管那么多，记住这个就够了。
记住，只要页面中有固定样式的列表，那就用ul li，比如：

不信大家就去天猫看一下。

  • table

表格。之前说过了，以今天的为准。tr代表行，td代表列。

  1. <table>
  2.     <tr>
  3.         <td>第1行1列</td>
  4.         <td>第1行2列</td>
  5.     </tr>
  6.     <tr>
  7.         <td>第2行1列</td>
  8.         <td>第2行2列</td>
  9.     </tr>
    </table>

显示：

如果想显示边框，可以加个border属性：

  1. <table border="1">...</table>

还要知道，table已经用的很少了，因为存在浏览器的兼容性，很多时候都被ul li代替了。大家会想到上次还说的tbody现在却没有写，其实即使我们不写浏览器也会帮我们加上：

上图中的tbody就是浏览器默认给我们加上的。此外，如果是表的第一行，需要加粗显示的话，可以将tr改为th：

  1. <table border="1">
  2.     <tr>
  3.         <th>第1行1列</th>
  4.         <th>第1行2列</th>
  5.     </tr>
  6.     <tr>
  7.         <td>第2行1列</td>
  8.         <td>第2行2列</td>
  9.     </tr>
    </table>

th用来做表头，默认字体居中显示。
还有caption作为表格的标题：

  1. <table border="1">
  2.     <caption>表格标题</caption>
  3.     <tr>
  4.         <th>第1行1列</th>
  5.         <th>第1行2列</th>
  6.     </tr>
  7.     <tr>
  8.         <td>第2行1列</td>
  9.         <td>第2行2列</td>
  10.     </tr>
    </table>

tbody和caption等这些都不用记。

合并表格：

  1. <table border="1">
  2.     <caption>表格标题</caption>
  3.     <tr>
  4.         <th>第1行1列</th>
  5.         <th>第1行2列</th>
  6.         <th>分数</th>
  7.     </tr>
  8.     <tr>
  9.         <td>第2行1列</td>
  10.         <td>第2行2列</td>
  11.         <td>10</td>
  12.     </tr>
  13.     <tr>
  14.         <td colspan="2">总成绩</td>                        
  15.         <td>20</td>
  16.     </tr>
    </table>

我们给td标签加了colspan="2"，就可以合并两行了：

最后给大家看一个例子，图片来自https://nba.hupu.com/teams：

  1. <!DOCTYPE html>
    <html>
  2.     <head>
  3.         <title>第一节课</title>
  4.         <meta charset="UTF-8"/>
  6.     </head>
  7.     <body>
  8.         <a href="https://www.baidu.com" target="_blank">百度</a>
  9.         <img src="https://www.baidu.com/img/bd_logo1.png" width="10%" height="10%">
  10.         <ul>
  11.             <li>第一行</li>
  12.             <li>第二行</li>
  13.             <li>第三行</li>
  14.         </ul>
  15.         <table border="1">
  16.             <caption>表格标题</caption>
  17.             <tr>
  18.                 <th>第1行1列</th>
  19.                 <th>第1行2列</th>
  20.                 <th>分数</th>
  21.                 <th>一整行</th>
  22.             </tr>
  23.             <tr>
  24.                 <td><img src="imgs/0.png"></td>
  25.                 <td><img src="imgs/1.png"></td>
  26.                 <td><img src="imgs/2.png"></td>
  27.                 <td rowspan="3"><img src="imgs/logo.png"></td>
  28.             </tr>
  29.             <tr>
  30.                 <td><img src="imgs/3.png"></td>
  31.                 <td><img src="imgs/4.png"></td>
  32.                 <td><img src="imgs/5.png"></td>
  33.             </tr>
  34.             <tr>
  35.                 <td><img src="imgs/6.png"></td>
  36.                 <td><img src="imgs/7.png"></td>
  37.                 <td><img src="imgs/8.png"></td>
  38.             </tr>
  39.         </table>
  40.     </body>
    </html>

显示：

写会了上面这个例子，table这里就没什么问题啦~

大家想学就得加把劲，自己不努力谁也教不会。

HTML第一课——基础知识普及【2】的更多相关文章

  1. HTML第一课——基础知识普及【1】

    请关注公众号:自动化测试实战 HTML概念及编写规范 html叫做超本文标记语言,注意它知识标记语言,不是编程语言. 编写规范: 由标记(html, div, p, h1等)组成 标记成对出现(< ...

  2. swift 第一课 基础知识-1

    1. 基本的打印: print("这是学习 swift 的第一课") var varA = print("a 的值是 \(varA)") //注:字符串打印参数 ...

  3. python第一课--基础知识

    python简介 Python是一种计算机程序设计语言.是一种面向对象的动态类型语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的.大型项目的 ...

  4. Linux基础第一课——基础知识了解

    前言 发展历史 linus 林纳斯 赫尔辛基大学 在自己的笔记本上安上自己写的操作系统 基于Linux内核 Linux内核 也是基于unix内核开发出来 unix 不开源 只能军方和大学使用 Linu ...

  5. wpf（第一章 基础知识）

    wpf第一章基础知识:通过vs2015创建wpf程序会在引用里面多出3个核心程序集PresentationCore.PresentationFramework.WindowsBase.并且会在解决方案 ...

  6. 《openssl编程》：第一章基础知识

    第一章 基础知识 1.1 对称算法 对称算法使用一个密钥.给定一个明文和一个密钥,加密产生密文,其长度和明文大致相同.解密时,使用读密钥与加密密钥相同. 对称算法主要有四种加密模式: (1) 电子密码 ...

  7. Python第一章-基础知识

    第一章:基础知识 1.1 安装python.     直接官网下载最新的python然后默认安装就可以了,然后开始菜单里找到pyhton *.*.* Shell.exe运行python的交互shell ...

  8. [Python笔记]第一篇:基础知识

    本篇主要内容有:什么是python.如何安装python.py解释器解释过程.字符集转换知识.传参.流程控制 初识Python 一.什么是Python Python是一种面向对象.解释型计算机程序设计 ...

  9. Python学习，第一课 - 基础学习

    前言. 本内容全部以python3所讲 一.Python安装 windows 1.下载安装包 https://www.python.org/downloads/ 2.安装 默认安装路径:C:\pyth ...

随机推荐

  1. Redis之列表类型命令

    Redis 列表(List) Redis列表是简单的字符串列表,按照插入顺序排序.你可以添加一个元素到列表的头部(左边)或者尾部(右边) 一个列表最多可以包含 232 - 1 个元素 (4294967 ...

  2. 在浏览器外打开PDF文档

    One function you might find annoying with PDFs and PDF Readers is that when you click on a link to a ...

  3. USACO 铂金 T1

    题意 给出一个数轴,每次可以选择停下并得到当前点的收益,或者继续随机向左右游走,走到边界游戏结束收益为0. 求从每个点出发的最大期望收益.(n<=1e5) 有一个显然的dp方程 这个方程是带环的 ...

  4. thinkphp3.2 jquery ajax巧妙使用

    1.做帐号管理的时候,我们去除一些重复的帐号是有必要的. 我使用的是jquery ajax 来和控制器进行传值.当我们跳转到我们要验证方法返回结果的时候,我们就可以使用php里的一个 0 为false ...

  5. 原创-整理了下常用的js数组 、对象、数字、字符串的操作方法

    终于整理好了...主要是一些常用的函数,包含es6和es5的所有常用的,吧一些不常用的全部砍掉,省的大家看的费事.发现这个到博客上面有点乱.给个百度云地址:https://pan.baidu.com/ ...

  6. android webservice 成功版(帅哥)

    package com.ts.xtweatherreport01;import java.io.UnsupportedEncodingException; import android.annotat ...

  7. Visual Sudio 2012转换界面风格

    点击“工具”--->"选项"--->“环境”--->“常规”将Color theme由你的“Light”改为“Dark”,即可成为黑色的界面

  8. html5阴影

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  9. Rancher 企业级docker管理平台

    启动Rancher 加入ca证书: docker run -d  --restart=unless-stopped -p 8080:8080 -v /root/cacert.crt:/var/lib/ ...

  10. BZOJ2590 [Usaco2012 Feb]Cow Coupons

    好吧...想了半天想错了...虽然知道是贪心... 我们每次找没有被买的两种价格最小的牛,比较a = 当前差价最大的 + 当前优惠券价格最小的牛与b = 当前非优惠券价格最小的牛 所以...我们要 先 ...