学习笔记 之 聊聊 HTML 那些标签（二）

LZ-Says：遇见，便是一份缘。期待下一次相遇。

前言

Long long ago，鸡大说，万变不离其宗，当你学到一定时候，就会发现，其实根本原理是相通的。当时我还处于一片懵懂状态，迷迷糊糊纳闷，只记得最终还是成了机器语言。

目标 —> 鸡大的境界，勤能补拙，不为自己的懒惰找任何借口。

前俩篇，大概记录了下有关 HTML 基础内容和列举了部分标签，而今天继续往下整理，期待明天会更好～

特此注明：本笔记依托于 W3C School 而整理个人学习笔记，文末会附上地址。

加油，撸起袖子就是干！

首先，我们先来了解下在 HTML 元素（标签）区分：

大多数 HTML 元素被定义为块级元素或内联元素。

• HTML 区块元素：每个标签默认占据一行，例如：< h1~6>、< p>、< u/ol>、< table>；
• HTML 内联元素：只占据本身所占据的空间大小，例如：< img>、< a>、< b>

在 Android 中，我们常常会使用父布局去承载相应的子控件，经过组合从而达到最终的效果，那么在 HTML 中，也有类似这样的父容器，那便是 div，而 div 则属于块元素。使用起来也很 easy 这里就不列举了。

而下面，开始回顾额外的部分标签。

1. 表格 < table>

一个 Table 里面包含多个 tr（行）以及 td（列）；th 代表表头，多数浏览器会给表头默认粗体。

下面附上实例：

<table>
    <tr>
      <td>编号</td>
      <td>姓名</td>
      <td>年龄</td>
    </tr>
    <tr>
      <td>001</td>
      <td>HLQ_Struggle</td>
      <td>你猜</td>
    </tr>
</table>

效果如下：

小哥哥说了，我要个边框，这是什么鬼？

<table border="2">。。。

小姐姐又说了，长长短短，不喜欢，能变成一样宽的么？

<table border="2">
    <tr>
      <th align="center" width="166px">编号</th>
      <th align="center" width="166px">姓名</th>
      <th align="center" width="166px">年龄</th>
    </tr>
    <tr>
      <td>001</td>
      <td>HLQ_Struggle</td>
      <td>你猜</td>
    </tr>
</table>

小哥哥说，你这个挨着太紧凑了，改改～

<table border="2" cellpadding="15" cellspacing="6">
    。。。
</table>

这里需要单独注明这俩个属性含义：

• 单元格边距（Cell padding）
• 单元格间距（Cell spacing）

最后，这里截取 W3C School 小哥哥为我们整理的属性图：

2. HTML 列表（< ul> / < ol>）

先看无序列表以及有序列表：

<p>无序列表</p>
<ul>
  <li>你好</li>
  <li>我好</li>
  <li>大家好</li>
</ul>

<p>有序列表</p>
<ol>
  <li>先吃饭</li>
  <li>溜达</li>
  <li>睡觉觉</li>
</ol>

效果如下：

下面玩点新花样：

<p>玩点新花样</p>
<ol type="A">
  <li>大河</li>
  <li>向东</li>
  <li>流啊</li>
</ol>
<ol type="a">
  <li>大河</li>
  <li>向东</li>
  <li>流啊</li>
</ol>
<ol type="i">
  <li>大河</li>
  <li>向东</li>
  <li>流啊</li>
</ol>
<ol type="I">
  <li>大河</li>
  <li>向东</li>
  <li>流啊</li>
</ol>

效果很赞呦～

有序小哥哥见过了，该凑凑无序小姐姐咯～

<p>无序小哥哥出来见见人</p>
<ul style="list-style-type: circle">
  <li>伊尔呦</li>
  <li>哇咔咔</li>
</ul>
<ul style="list-style-type: disc">
  <li>伊尔呦</li>
  <li>哇咔咔</li>
</ul>
<ul style="list-style-type: square">
  <li>伊尔呦</li>
  <li>哇咔咔</li>
</ul>
<ul style="list-style-type: armenian">
  <li>伊尔呦</li>
  <li>哇咔咔</li>
</ul>
<ul style="list-style-type: none">
  <li>伊尔呦</li>
  <li>哇咔咔</li>
</ul>

最后嘛，来个自定义的：

<p>自定义列表</p>
<dl>
  <dt>Title</dt>
  <dd>Content</dd>
  <dt>Title</dt>
  <dd>Content</dd>
</dl>

The end，再次看看 W3C School 小哥哥为我们整理的标签以及含义表格：

默默吐槽下，HTML 全忘记了，属性啥的他认识我，我不认识他，尴尬。。。

赶紧补咯～

个人公众号

不定期发布博文，最近有点忙，感谢老铁理解，欢迎关注～