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 全忘记了,属性啥的他认识我,我不认识他,尴尬。。。
赶紧补咯~
个人公众号
不定期发布博文,最近有点忙,感谢老铁理解,欢迎关注~