大多数人,都低估了编程学习的难度,而高估了自己的学习能力和毅力。
当前系列: HTML和CSS 修改讲义
“结构容器”标签是飞哥自己给的一个定义,意思就是这些标签:主要用做:
  • 定义文档结构
  • 作为其他标签的容器

^_^,大家将就理解一下吧!


列表(List)

有序列表

<ol>    <!--ordered list-->
    <li>有序列表</li>    <!--list item-->
    <li>无序列表</li>
</ol>

无序列表

<ul>    <!--unordered list-->
    <li>有序列表</li>    <!--list item-->
    <li>无序列表</li>
</ul>

列表一样可以:

嵌套

<ol>
    <li>有序列表
        <ul>
            <li>我是嵌套项-1</li>
            <li>我是嵌套项-1</li>
        </ul>
    </li>
    <li>无序列表</li>
</ol>

提示:不仅仅是“竖着”的可以是列表,“横着”的也行。


表格(table)

看一下这个表格,3行2列

<table border="1">
    <thead>
        <tr>    <!-- row -->
            <th>h1</th>   <!--table head-->
            <th>h2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>row 1, cell 1</td>  <!--table data cell-->
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </tbody>
</table>

表格的难点在于它的:

合并单元格

合并,是借用的MS Office中的表述,严格来讲,应该是“跨越”“延伸”(span),可以在单元格(th/td)中使用属性:

  • colspan:横向(column列)合并
  • rowspan:纵向(row行)合并
<table border="1">
    <thead>
        <tr>
            <th colspan="2">h1h2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 2</td>
        </tr>
    </tbody>
</table>

纵向合并理解起来稍稍有点绕,演示

表格在早期被广泛用于页面布局,但在CSS兴起之后逐渐被div所取代。

溢出

大部分的html标签都是可以自由组合的,但是某些特定的标签,嵌套有严格的规定,比如:

  • li只能在ol和li中
  • tr只能在table中
  • ……

我们不用刻意去记:一是有IDE的提示,二是这些都是标签语义天然的要求。但是要知道,如果我们真的这样组合了,比如:

    <table>
        <tr>
            <td>1</td>
            <td>HTML和CSS</td>
        </tr>
        <p>hello,源栈</p>
    </table>
浏览器会将不合要求的元素给“挤”出去,而且是挤到上面——这对我们后面的学习/debug有用。



div和span

div可以理解为一个“块”,页面中的一大块。比如我们一个网页,可以被分为这么几大块:

  • 页头:包含了图片logo和导航条
  • 正文:放入标题、段落、列表、表格等内容
  • 页脚:友情链接等

我们就可以用三个div予以表示:

<div>页头</div>
<div>正文</div>
<div>页脚</div>

然后每个div中再各自放入相应的元素。

@想一想@:为什么要这样做?

div的一个重要特点是:一个div(默认)就会占一行,不管这个div里面的元素/内容有宽。

经常和它相对比的就是span,比如:

<span>我又干啥伤天害理的事了?</span>
<span>一脸懵逼</span>
<span>。原来他又看到了我以前的一篇文章《为什么我不做培训》(找不到了,难道被我无耻的删了?^_^),然后我马上就想起来了,那篇文章里我写了我的理由,大概就是“怕误人子弟,怕同学们缴了钱学不会……”他们现在在调侃他们也学不会,我知道他们在和我开玩笑,但啪啪打脸的赶脚,啧啧! </span>

其特点是:一个span的长度由其中的内容决定,有多长就是多长;多个span连接,不足一行的宽度就在一行中拼接,超出一行的宽度就自动换行。

(对比演示)

具有div这种特征的元素就被称之为块级元素,相对的,具有span这种特征的元素就被称之为流元素

这在以后学习CSS中非常有用。


Html5语义标签

大量使用div,导致的一个问题就是:整页都是div,眼睛都看花了……o(╯□╰)o

所以,Html5推出了一批(有特定含义的)语义标签,常用的有:

  • header:页头
  • nav:导航栏
  • main:页面主要部分
  • footer:页脚
  • article:文章
  • section:区域
  • aside:侧边栏
  • details:细节
  • mark:标注
  • ……
更多可参考:MDN:HTML5 sections_and_outlines

语义化

从浏览器的结果来看,上述html5语义标签和div或span相比,并没有什么区别。

但HTML5提倡使用有语义的标签,而不是div这种(没有任何含义的)无语义的标签,为什么呢?

  • 提高代码的可读性。再次强调:代码是写给人看的!开发人员读这些html代码的时候会更舒服一些,这很重要。
  • 语义化标签还可以给浏览器以外的:
    1. 搜索引擎爬虫用,有助于SEO
    2. 其他设备使用,比如盲人阅读器,这时候告诉这一段内容是导航、是文章、是侧边栏……就非常有用

标签语义化只是HTML5语义化的一部分,后面我们还要学习更多的语义化属性,如alt/title等。




学习笔记
源栈学历
今天学习不努力,明天努力找工作

作业

觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

在当前系列 HTML和CSS 中继续学习:

多快好省!前端后端,线上线下,名师精讲

  • 先学习,后付费;
  • 不满意,不要钱。
  • 编程培训班,我就选源栈

更多了解 加:

QQ群:273534701

答疑解惑,远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧

公众号:源栈一起帮

二维码