ul标签、ol标签

列表标签

• 分类
• 作用
• 注意事项

解答

• 无序列表（unordered list）
• 有序列表（ordered list）
• 定义列表（definition list）
• 列表标签的作用是给一堆数据添加上列表语义
• 扩展：列表语义究竟是什么？
• ul使用最多，dl次之，ol最少
• 我们看到的游戏排行榜，这些也是一个列表

解答扩展

• 列表语义是告诉浏览器，这一堆数据是一个整体，如：这一堆数字都是新闻，这一堆数据都是图片

ul标签

• 格式
• 作用
• 注意事项

解答

● <ul>
    <li>需要显示的条目内容</li>
  </ul>

- 这一堆数据属于同一类，但这些数据没有前后之分
- 什么叫先后之分？
- li = list item
- ul标签是给一堆数据添加标签语义的，不是给这堆数据添加小圆点的，有没有小圆点是不会影响他们的语义的，之后可以通过css样式取消前面的原点
- 不推荐ul标签中出现其他标签，如h标签，p标签，为什么？可以结合a标签、img标签使用
- ul标签中最好只放li标签，li标签中可以放其他标签，包括h2,p等都可以使用，甚至可以使用ul标签
- 导航条也是ul标签做的（表示整体）
- 可以注意到区别于img、a标签，ul标签本身是没有属性可以告诉浏览器这个列表是关于什么的列表的，我们只能在列表外使用h标签来告诉浏览器这个列表是关于什么的列表

解答扩展

• 数据的前后顺序影响语义，比如排行榜

-

ol标签

• 格式
• 作用
• 注意事项

解答

● <ol>
    <li></li>
  </ol>

- 给一堆数据属于同一类，并且有前后之分

解答扩展

dl标签

• 格式
• 作用
• 注意事项
• 应用场景

解答

● <dl>
    <dt></dt>
    <dd></dd>
  </dl>

- dt:definition title，用来定义列表中的标题
- dd:definition description，用来定义标题对应的描述
- 给一堆数据添加语义后，再定义列表这一堆数据中的所有项，哪些是标题，哪些是标题的描述信息
- 网站尾部的相关信息（可以去京东看一下）
- 做图文混排

解答扩展

table标签

• 格式
• 作用
• 注意事项
• 关联标签

解答

● <table>
    <tr>
        <td></td>
    </tr>
</table>

- 以前大部分网站都是用table标签做的
- 用来给一堆数据添加表格语义
- 扩展：什么是表格语义？
- tr:表格中的一行
- td:表格中的一行中的一个单元格
- th:表格中的表头，用来存储当前列的标题
- 扩展：th和tr/td什么区别？
- 这里就不仅仅涉及语义化了，还涉及到了样式——展现形式
- 怎么用sublime快速写一个2行3列的表格？
- 如何用sublime快速写一个1行为2列，1行为3类的表格？
- 表格标签有一个边框属性，默认情况下该属性值为0
- caption标签

解答扩展

• 表格是数据展现的一种形式，当数据量非常大的诉后，这种展现形式被认为是最为清晰的一种展现形式
• table>tr*2>td*3
• table>(tr>td*2)+(tr>td*3)
• 现在table标签已经被div和span标签取代了
• tr/td是用来存储数据的，th是用来存储数据的描述的

caption标签

• 格式
• 作用
• 注意事项
• 可以用来做什么有趣的事情

解答

● <caption></caption>

- 为tabble标签添加标题
- 一定要写在tabble标签中
- 扩展：如果卸载table标签外呢？
- caption标签通常会配合h2等标签使用吗？
- caption标签在table中放置的位置是什么样的？
- 写在table标签中的caption标签会自动相对于表格居中

解答扩展

• 卸载table标签外依旧可以显示，不过就失去了原来的作用，也就是说table标签没有规则去自动匹配位于table标签外的caption标签
• 需要紧跟在table标签后，就像head标签要紧跟在html标签后

综合

• 在html中纠结样式其实是没有意义的，任何样式都可以在css中改变，记住html的默认样式也没有什么作用
• html最重要的就是语义化
• 扩展：你是怎么发现这点的
• 看视频和看书有什么区别？
• 实战视频和理论视频有什么区别？
• 不同的实战类型又有什么区别？

解答

• ul标签前的小圆点可以去掉，ul标签可以是竖着的，也可以是横着的，h标签不是用来调整字体大小的

心迹

• 这个东西心迹究竟有什么作用？
• 我要打开snippet文件的保存路径，对markdown的一个snippet
• 一劳永逸，有没有快捷键打开snippet
• 点击preference->browse packages -> user文件夹中
• 在markDownBook这个snippet中增加了一项”可以用来做什么有趣的事情”
• 最近读了一篇文章，里面有些东西还是挺受用的，比如开始之前过度分析，学习时好高骛远，尤其是有逛知识网站的习惯的人，什么49年入国军，什么已经过时了，当然，未必也没有道理
• 浮躁，学完一章直接到下一章，马不停蹄，我觉得我还能吃得下，太过浮躁会让你不那么注意细节
• 浮躁是有原因：
• 当前的困境：工作有压力，或许某天自己就坚持不下放弃了，大家都有过这种经历，才能不时感觉有压力；年龄有限制，大部分人都在说年轻是资本，不在这个行业，入行晚的连培养的价值都没有
• 对目标的踟蹰：单纯地学习是不会有压力的，不为了任何目的的学习是不会有压力的，和其他任何一项娱乐活动相比都一样，但是当你学习的目的是为了在限定的时间内达到某一个目标，那么学习和你的工作就没有任何区别了
• 想象中的生活是否就如自己想象的那么美好
• 对于现在，反而慢慢多生了一点留恋，连打开冰箱吃一块西瓜都会想，这种生活是过一天少一天
• 不重视这件事的话就不会把全部的力量放在上面
• 重视它的话就会把全部的力量都放在它上面
• 只要把它变成生活的一部分就好了，单纯一些就好了，它要低于我们的生存，不可能裸辞，破釜沉舟般地去面对它；它也要低于我们必要的人际关系，如家人。但是它必须高于其他的一切娱乐活动，非必要的人际关系，说起来简单，实际上界限还是很模糊，寂寞了怎么办？仔细去想想也会感觉到稍微的痛苦怎么办？单纯一些，就好了