html中的基本标签及其用法(二)

222 阅读1分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第8天,点击查看活动详情

是什么让我们在大晚上相遇?可能就是一个小菜鸡想转型为前端程序员的心吧。

图片标签 超文本标记标签


<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<!-- 图片 img -->

<!-- alt:图片文字提示(不建议使用),在文件出现错误的情况下alt才会出现 -->

<img src="ing/bilibili.jpeg" alt="bilibili"/>

<!-- <img src="./img/bilibili.jpeg" /> -->

<!-- a:标记 href -->

<!-- href属性:执行要链接的地址 -->

<a href="https://www.baidu.com/">百度</a>

</body>

</html>

列表标签


<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<!-- 列表的分类 -->

<!-- 无序的列表

有序的列表 -->

<!-- 无序列表:ul li -->

<!-- 属性type 决定了无序列表的格式

type="disc" 实心圆点 默认的

type="circle" 空心圆

type="square" 方块儿 -->

<ul type="square">

<li>11</li>

<li>22</li>

<li>33</li>

</ul>

<!-- 有序列表 ol和li组合 -->

<!-- 属性type 决定了有序列表的格式

type="1" 1 2 3默认的

type="a" a b c d

type="A" A B C D

type="i" 小写罗马文依次进行排列

type="I" 大写罗马文依次进行排列 -->

<ol type="I">

<li>44</li>

<li>55</li>

<li>66</li>

</ol>

</body>

</html>

表格


<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<!-- 表格 -->

<!-- table tr行 td列 -->

<!-- border:表格的边框 给他一个值 -->

<table border="1">

<tr>

<td>金牌</td>

<td>银牌</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

</table>

</body>

</html>




2.  ## 表格的基本属性

</table>

<!-- bg:background的缩写 背景 -->

<table border="1" style="border-collapse: collapse;" bgcolor="darkseagreen">

<!-- 跨列,纵向单元格的合并

通过td上使用colspans属性实现 -->

<tr>

<td><strong>排名</strong></td><!-- 第一行第一列 -->

<td>代表团</td><!-- 第一行第二列 -->

<td colspan="3">奖牌</td>

<!-- <td>金牌</td>

<td>银牌</td>

<td>铜牌</td> -->

<td>合计</td>

<tr>

<td>1</td><!-- 第二行第一列 -->

<td>山东</td><!-- 第二行第二列 -->

<td>58</td>

<td>55</td>

<td>47</td>

<td>160</td>

</tr>

<tr>

<td>2</td><!-- 第三行第一列 -->

<td>广东</td><!-- 第三行第二列 -->

<td>54</td>

<td>32</td>

<td>56</td>

<td>142</td>

</tr>

<tr>

<td>3</td><!-- 第四行第一列 -->

<td>浙江</td><!-- 第四行第二列 -->

<td>44</td>

<td>35</td>

<td>37</td>

<td>116</td>

</tr>

</table>

</body>

</html>