【前端】HTML-2022/7/13

语义化标签

前端最重要的就是三个部分:结构,表现,行为

而HTML负责的就是结构,表现和行为由之后要学的CSS,JS负责,在编写HTML文档的时候,最需要注重的就是结构,至于它的表现和行为,我们暂时不需要关心(但我们在编写HTML文档的时候也要考虑到之后的CSS和JS,尽可能让HTML写得简洁,标准,这对之后的CSS和JS编写工作有很大的帮助)

在编写HTML文档时,需要注重的是HTML标签的语义,而不是它的表现形式,它在浏览器中渲染出来的效果是如何的与我们暂时无关。

HTML区块元素

在HTML中,有两种元素:块级元素内联元素

块级元素指的是在网页中独占一行的元素,比如<h1>~<h6>,<p>等都是。

还有一种元素:内联元素,它指的是在网页中不会独占一行的标签,比如<em>、<b>等文本格式化的标签都是。

HTML分组

前面提到了,在编写HTML文档的时候要为后面的CSS做准备,比如说,我们要为HTML的标签分好组,这样我们需要介绍到几个看似没什么用,但在写CSS的时候会帮到大忙的标签

比如说:<div>
HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。

如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

什么意思呢,意思就是,你可以把在内容上属于一类的标签用<div>标签包裹起来,当然,这并不会有什么明细的效果,但是这意味着你给它们确立了分组,这个分组在后面的CSS会有很大的帮助,你可以在CSS中直接对这一分组的样式进行修改,而不是一个个的慢慢改。

还有一个元素:<span>,它和<div>差不多,但是<span>是内联元素,<div>是块级元素

当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

标签描述
<div>定义了文档的区域,块级 (block-level)
<span>用来组合文档中的内联元素(inline)

其实除此之外,我们还可以使用<table>进行分组,但是一般建议使用<div>,<div>的好处是简洁明了,<table>则要写很多布局的代码,后期维护是很头疼的事情。(<table>一般是用来做表格的,之后会讲到)

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
    <tr>
        <th> 前端</th>
        <th> 后端</th>
    </tr>
    <tr>
        <td>HTML</td>
        <td>Java</td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>PHP</td>
    </tr>
    <tr>
        <td>JS</td>
        <td>Python</td>
    </tr>
</table>
前端 后端
HTML Java
CSS PHP
JS Python

在<table>标签内,<tr>表示表格的一行,<th>表示表格的表头,<td>表示表格的内容

并且注意,写表格时,是一行一行写的(从左往右),而不是一列一列写(从上往下)(尽管这更符合习惯)

可以看到,实例中的<table>标签还有一个border属性,它的值是正整数,是用来控制边框的,这个数值越大,表格的边框越厚,颜色越深,越明细。如果这个值是0,或者没有写这个属性,那就默认没有边框。

HTML列表

HTML列表分为有序列表,无序列表和自定义列表

有序列表 无序列表
  1. 马克思
  2. 恩格斯
  3. 列宁
  4. 斯大林
  5. 毛泽东
  • 马克思
  • 恩格斯
  • 列宁
  • 斯大林
  • 毛泽东

代码(使用了<table>标签排版格式):

<table align="center">
        <tr>
            <th>有序列表</th>
            <th>无序列表</th>
        </tr>
        <tr>
            <td>
                <ol>
                    <li>马克思</li>
                    <li>恩格斯</li>
                    <li>列宁</li>
                    <li>斯大林</li>
                    <li>毛泽东</li>
                </ol>
            </td>
            <td>
                <ul>
                    <li>马克思</li>
                    <li>恩格斯</li>
                    <li>列宁</li>
                    <li>斯大林</li>
                    <li>毛泽东</li>
                </ul>
            </td>
        </tr>
    </table>

Tips:<table>标签有一个align属性,它是用来居中的,不需要管。

无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表使用 <ul> 标签,每个列表项始于 <li> 标签。

有序列表

有序列表也是一个项目的列表,此列项目使用阿拉伯数字进行标记。

有序列表使用 <ol> 标签,每个列表项始于 <li> 标签。

自定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的注释以 <dd> 开始。

Coffee
– black hot drink
Milk
– white cold drink
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

© 版权声明
THE END
喜欢就支持一下吧
点赞0支持一下吧? 分享
评论 共1条
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片
    • Abyss的头像-Abyss-博客Abyss等级-LV10-Abyss-博客作者0