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

  • 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这里就没什么问题啦~

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

原文发布于微信公众号 - 自动化测试实战(gh_839e78b6ba28)

原文发表时间:2018-04-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

2376
来自专栏python学习路

一、HTML

html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,...

1.4K4
来自专栏Python

HTML基础

一 html html结构 ? !DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档 <html></html>是文档的...

2135
来自专栏刘望舒

React Native组件(三)Text组件解析

前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的例子以供学习。 1 概述 Text组...

2496
来自专栏小巫技术博客

A017-布局之FrameLayout

帧布局,是所有布局容器中最简单的一种,控件定义在FrameLayout中默认放置在左上角,定义在后面的控件会层叠在前面定义的控件之上,所以才会被称为帧布局。

1123
来自专栏小筱月

animate 动画滞后执行的解决方案

针对 jQuery 中 slideUp、slideDown、animate 等动画运用时出现的滞后反复执行等问题的解决方法有如下:

2811
来自专栏河湾欢儿的专栏

reset.css

3105
来自专栏AndroidTv

前端入门2-HTML标签声明正文-HTML标签

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

1882
来自专栏V站

Skill丨如何利用代码美化网站滚动条?

V站今天回想起以前模板也有美化滚动条,后来魔改魔改就没了,现在找出来分享出来。由于偏爱谷歌浏览器的简洁,感觉滚动条还是太宽了,用过改变滚动条粗细的插件,后来感觉...

2334
来自专栏专业duilib使用+业余界面开发

Duilib技巧:背景图片平铺

2418

扫码关注云+社区

领取腾讯云代金券