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

  • img标签

我们先看一下文档结构:

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

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

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

页面显示:

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

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

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

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

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

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

  • ul li标签

这两个标签是列表

<!DOCTYPE html>
<html>
   <head>
       <title>第一节课</title>
       <meta charset="UTF-8"/>    </head>
   <body>
       <a href="https://www.baidu.com" target="_blank">百度</a>
       <img src="https://www.baidu.com/img/bd_logo1.png" width="10%" height="10%">
       <ul>
           <li>第一行</li>
           <li>第二行</li>
           <li>第三行</li>
       </ul>
   </body>
</html>

显示:

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

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

  • table

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

<table>
   <tr>
       <td>第1行1列</td>
       <td>第1行2列</td>
   </tr>
   <tr>
       <td>第2行1列</td>
       <td>第2行2列</td>
   </tr>
</table>

显示:

如果想显示边框,可以加个border属性:

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

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

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

<table border="1">
   <tr>
       <th>第1行1列</th>
       <th>第1行2列</th>
   </tr>
   <tr>
       <td>第2行1列</td>
       <td>第2行2列</td>
   </tr>
</table>

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

<table border="1">
   <caption>表格标题</caption>
   <tr>
       <th>第1行1列</th>
       <th>第1行2列</th>
   </tr>
   <tr>
       <td>第2行1列</td>
       <td>第2行2列</td>
   </tr>
</table>

tbodycaption等这些都不用记。

合并表格:

<table border="1">
   <caption>表格标题</caption>
   <tr>
       <th>第1行1列</th>
       <th>第1行2列</th>
       <th>分数</th>
   </tr>
   <tr>
       <td>第2行1列</td>
       <td>第2行2列</td>
       <td>10</td>
   </tr>
   <tr>
       <td colspan="2">总成绩</td>                        
       <td>20</td>
   </tr>
</table>

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

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

<!DOCTYPE html>
<html>
   <head>
       <title>第一节课</title>
       <meta charset="UTF-8"/>    </head>
   <body>
       <a href="https://www.baidu.com" target="_blank">百度</a>
       <img src="https://www.baidu.com/img/bd_logo1.png" width="10%" height="10%">
       <ul>
           <li>第一行</li>
           <li>第二行</li>
           <li>第三行</li>
       </ul>
       <table border="1">
           <caption>表格标题</caption>
           <tr>
               <th>第1行1列</th>
               <th>第1行2列</th>
               <th>分数</th>
               <th>一整行</th>
           </tr>
           <tr>
               <td><img src="imgs/0.png"></td>
               <td><img src="imgs/1.png"></td>
               <td><img src="imgs/2.png"></td>
               <td rowspan="3"><img src="imgs/logo.png"></td>
           </tr>
           <tr>
               <td><img src="imgs/3.png"></td>
               <td><img src="imgs/4.png"></td>
               <td><img src="imgs/5.png"></td>
           </tr>
           <tr>
               <td><img src="imgs/6.png"></td>
               <td><img src="imgs/7.png"></td>
               <td><img src="imgs/8.png"></td>
           </tr>
       </table>
   </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. English trip -- VC(情景课)9 A Get ready

    She is doing homwork He is doing laundry He is drying the dishes She is making lunch She is making t ...

  2. PHP函数总结 (五)

    <?php /** * 回调函数: * 指调用函数时并不是传递一个标准的变量作为参数,而是将另一个函数作为参数传递到调用的函数中 * 使用回调函数可以 将一段自己定义的功能传到函数内部使用 * ...

  3. Johnny Solving CodeForces - 1103C (构造,图论)

    大意: 无向图, 无重边自环, 每个点度数>=3, 要求完成下面任意一个任务 找一条结点数不少于n/k的简单路径 找k个简单环, 每个环结点数小于n/k, 且不为3的倍数, 且每个环有一个特殊点 ...

  4. UVA-1322 Minimizing Maximizer (DP+线段树优化)

    题目大意:给一个长度为n的区间,m条线段序列,找出这个序列的一个最短子序列,使得区间完全被覆盖. 题目分析:这道题不难想,定义状态dp(i)表示用前 i 条线段覆盖区间1~第 i 线段的右端点需要的最 ...

  5. Hibernate---hbm2ddl和数据库方言的配置

    Hibernate---hbm2ddl和数据库方言的配置 hibernate配置文件--hbm2ddl.auto属性值的区别: update: 最常用的取值,如果但其数据库中不存在表结构,那么自动创建 ...

  6. React脚手架create-react-app+elementUI使用

    一.介绍 1.create-react-app是FaceBook官方发布了一个无需配置的.用于快速构建开发环境的脚手架工具. 2.优点 a.无需配置:官方的配置堪称完美,几乎不用你再配置任何东西,就可 ...

  7. js设计模式-观察者模式

    定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路 定义一个对象,在对象中实 ...

  8. MySql和Sql的单行注释和多行注释的区别

    这里,请允许我把mysqlserver和sqlserver注释一起说明 1.单行注释 1)mysql中,可以用“-- ”和“ --”来注释 -- 方式1:单行注释 -- create database ...

  9. MySql Server 5.7的下载及安装详细步骤

    1.下载安装包 1)找到官网下载地址(https://dev.mysql.com),选择downloads,找到windows

  10. Flash OS images to SD cards & USB drives & TF cards safely and easily using etcher

    install tools: wget https://github.com/resin-io/etcher/releases/download/v1.4.5/etcher-cli-1.4.5-lin ...