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属性是用来给搜索引擎用的，以便你写的页面可以被搜索引擎搜索到。此外它还有width和height属性，比如刚才的图片比较大，我们现在修改图片的大小，只需要：
<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>tbody和caption等这些都不用记。
合并表格：
<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】的更多相关文章
- HTML第一课——基础知识普及【1】
请关注公众号:自动化测试实战 HTML概念及编写规范 html叫做超本文标记语言,注意它知识标记语言,不是编程语言. 编写规范: 由标记(html, div, p, h1等)组成 标记成对出现(< ...
- swift 第一课 基础知识-1
1. 基本的打印: print("这是学习 swift 的第一课") var varA = print("a 的值是 \(varA)") //注:字符串打印参数 ...
- python第一课--基础知识
python简介 Python是一种计算机程序设计语言.是一种面向对象的动态类型语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的.大型项目的 ...
- Linux基础第一课——基础知识了解
前言 发展历史 linus 林纳斯 赫尔辛基大学 在自己的笔记本上安上自己写的操作系统 基于Linux内核 Linux内核 也是基于unix内核开发出来 unix 不开源 只能军方和大学使用 Linu ...
- wpf（第一章 基础知识）
wpf第一章基础知识:通过vs2015创建wpf程序会在引用里面多出3个核心程序集PresentationCore.PresentationFramework.WindowsBase.并且会在解决方案 ...
- 《openssl编程》：第一章基础知识
第一章 基础知识 1.1 对称算法 对称算法使用一个密钥.给定一个明文和一个密钥,加密产生密文,其长度和明文大致相同.解密时,使用读密钥与加密密钥相同. 对称算法主要有四种加密模式: (1) 电子密码 ...
- Python第一章-基础知识
第一章:基础知识 1.1 安装python. 直接官网下载最新的python然后默认安装就可以了,然后开始菜单里找到pyhton *.*.* Shell.exe运行python的交互shell ...
- [Python笔记]第一篇:基础知识
本篇主要内容有:什么是python.如何安装python.py解释器解释过程.字符集转换知识.传参.流程控制 初识Python 一.什么是Python Python是一种面向对象.解释型计算机程序设计 ...
- Python学习，第一课 - 基础学习
前言. 本内容全部以python3所讲 一.Python安装 windows 1.下载安装包 https://www.python.org/downloads/ 2.安装 默认安装路径:C:\pyth ...
随机推荐
- 12月12日 has_many through:的interference, option
has_many :products, through: :cart_items, source: :product build定义:collection.build(attributes = {}, ...
- Confluence 6 嵌套用户组的示例
示例 1 : 用是一个子用户组成员 想象在你的目录服务器中,存在下面 2 个用户组: staff marketing 成员: marketing 用户组是 staff 的成员. 用户 jsmith ...
- highcharts图表配置参数汇总
一.chart的部分相关属性说明 renderTo: 'container', //图表的页面显示容器(也就是要显示到的div) chart.events.addSeries:添加数列 ...
- @RunWith和 SpringJUnit4ClassRunner ---->junit4和Spring一起使用
今天在看Spring的Demo的时候,看到了如此单元测试的写法 如下: @RunWIth(SpringJunit4ClassRunner.class) @ContextConfiguration(lo ...
- Dos命令的介绍
Dos命令的介绍目录 1.什么是Dos 2.Dos的简介 3.Dos命令有哪些 4.Dos命令下常见的错误信息 5.Config.sys文件的命令和配置 6.Dos自带的的批处理命令 1.什么是Dos ...
- python 安装 scapy windows 10 64bit
简介: 前段时间装的pypcap做嗅探.打包受阻.因为我都是在windows做的.也要打包到exe给别人用. 所以尝试了一下scapy,也可以嗅探,貌似功能更强大.先用sniff吧. 这个也不是在ve ...
- pyqt（二） 创建第一个程序（helloworld）解决object has no attribute 'setCentralWidget'
1.运行Qt Creator QtCreator主界面分为了6个模式:欢迎模式.编辑模式.设计模式.Debug调试模式.项目模式和帮助模式,分别由左侧的6个图标进行切换,对应的快捷键是Ctrl + 数 ...
- >CH07-cubemap
使用rendermonkey进行一个天空球的贴图,内容来自<<shaders for gpa>> 不知道是不是用的182版RM的原因,照着书上做一个天空球的CUBEMAP,老不 ...
- 以太网最大帧和最小帧、MTU
根据rfc894的说明,以太网封装IP数据包的最大长度是1500字节,也就是说以太网最大帧长应该是以太网首部加上1500,再加上7字节的前导同步码和1字节的帧开始定界符,具体就是:7字节前导同步码 + ...
- cmake 手册详解
cmake 手册中文版,后续再相关博客的其他链接中,感谢翻译的好人! https://www.cnblogs.com/coderfenghc/archive/2012/06/16/CMake_ch_0 ...