002Html基本标签

JimmyTsaiCN

已于 2022-06-13 11:51:28 修改

阅读量263

点赞数

于 2022-06-13 11:42:30 首次发布

本文链接：https://blog.csdn.net/zzcaism/article/details/125257258

版权

Html全端编程 Zero To Hero 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、标签分类

行内标签
- 可以与其他行内元素位于同一行；
- 不能直接设置宽高，元素的宽和高就是内容撑开的宽高。
- 行内元素内部可以容纳其他行内元素，但不可以容纳块元素
块标签
- 总是从新的一行开始，独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行；
- 可以设置宽高；宽度没有设置时，默认为100%
- 块元素内部可以容纳其他块元素和行内元素；

二、行内标签

2.1、span

span标签用来组合文档中的行内元素

使用示例：

<span>我是第一个行内标签；</span><span>我是第二个行内标签，没有另起一行</span>

疑问：这个和直接打文字有什么区别，为什么还要加一个?

答：和直接打文字的区别在于，可以单独对里面的内容设置格式及其他标签属性（详见标签属性的内容）

2.2、字体格式

b:粗体标签，也可以用
i:斜体标签，也可以用或<cite>
u:下划线标签
s:删除线标签,也可以用<del>
sup:上标
sub:下标

不能完全记住不要紧，可以在训练中加强记忆

<b><cite><big><s>字体标签示例</s></big></cite></b>

2.3、换行标签

：换行标签，可插入一个简单的换行符

示例 1:在行内标签中强行换行（本来行内标签是不会自己换行的，除非文字量超过屏幕100%的宽度）

<span>我是第一个行内标签；</span><span>我是第二个行内标签，<br>没有另起一行</span>

示例 2：体验文字超过宽度自动换行和br强制换行

<span>我是第一个行内标签；我是第一个行内标签；我是第一个行内标签；我是第一个行内标签；我是第一个行内标签；我是第一个行内标签；我是第一个行内标签；我是第一个行内标签；我是第一个行内标签；我是第一个行内标签；我是第一个行内标签；我是第一个行内标签；我是第一个行内标签；我是第一个行内标签；</span><span>我是第二个行内标签，<br>没有另起一行</span>

在 标签的使用中，我们发现，我们没有写，这个是因为在HTML中，标签可以分为2种：

一般标签：由于有开始符号和结束符号，因此可以在内部插入其他标签或文字

自闭合标签：由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了

 是自闭合标签

三、块标签

3.1、标题标签

标题标签分六级，一般来说一级字体最大，依次减小。标题字体一般是粗体

遇到一个标题标签，自动从新的一行开始显示

示例 1：我们在第一个span标签里面强加一个h1标签，看看显示效果

<span>我是<h1>第一个行内标签；</h1></span><span>我是第二个行内标签，没有另起一行</span>

示例 2：依次显示h1到h6标签

<h1>标题一级</h1>
<h2>标题二级</h2>
<h3>标题三级</h3>
<h4>标题四级</h4>
<h5>标题五级</h5>
<h6>标题六级</h6>

3.2、段落标签

段落标签标记了一个段落,然后可以使用“br标签”来对段落进行换行。可以通过标签属性指定段落这个“文字块”的宽度和高度，行高等

示例：

<p style="text-align: center;height: 100px;">我是第一段文字</p>
<p style="text-align: center;height: 300px;">我是第二段文字</p>
<span>我是一个行内标签</span>

3.3、水平线标签

<hr>标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。是一个自闭合标签

示例：

<h1>这是标题 1</h1>
<hr />
<p>This is some text</p>

3.4、分区标签

<div>用来划分一个区域,然后结合CSS针对该区域进行样式控制。一般div标签里面可以嵌套多种其它类型标签

使用示例

<div>
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

3.5、列表标签

有序列表 <ol>
无序列表<ul>

<ol>或<ul>都是列表开头，里面的内容（列表项）用<li>标签

示例 1：ol可以通过type修改列表项符号 1,a,A,i,I

<ol type="A">
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ol>

示例 2：ul通过type属性修改列表项符号 disc,circle,square

<ul type="disc">  
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

无序列表有比较广泛的应用，对于无序列表，我们需要注意以下2点：

（1）ul元素的子元素只能是li，不能是其他元素
（2）ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加

HTML语义化

提高可读性和可维护性
搜索引擎优化（SEO）

以下段代码可能呈现的效果一样，但是后者有更好的语义

<div>1.HTML</div>
<div>2.CSS</div>
<div>3.JavaScript</div>
<div>4.jQuery</div>
<div>5.Vue.js</div>

<ol type="1">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ol>

3.6、表格标签

表格一般用于展示数据

表格：table，可以通过border="1"设置表格边框
行：tr
单元格：td，可以通过rowspan和colspan设置合并行与合并列
标题：caption

<table>
    <caption>表格标题</caption>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

我们可以使用rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并。我们可以使用colspan属性来合并列。所谓的合并列，指的是将“横向的N个单元格”合并。

<table border="1">
    <caption>表格标题</caption>
    <tr>
        <td rowspan="2">单元格1</td>
        <td colspan="2">单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

作业

一、理论知识

1、选出你认为最合理的定义标题的方法是（     ）。
        A. <div>文章标题</div>                B. <p><b>文章标题</b></p>
        C. <h1>文章标题</h1>                  D.<strong>文章标题</strong>
2、如果想要实现粗体效果，我们可以使用（     ）标签来实现。
        A. <strong></strong>                      B. <em></em>
        C. <sup></sup>                            D.<sub></sub>
3、下面有关自闭合标签说法不正确的是（     ）。
        A. 自闭合标签只有开始符号没有结束符号
        B. 自闭合标签可以在内部插入文本或图片
        C. meta标签是自闭合标签
        D. hr标签是自闭合标签
 4、在浏览器默认情况下，下面有关块元素和行内元素说法不正确的是（     ）。
        A. 块元素独占一行
        B. 块元素内部可以容纳块元素
        C. 块元素内部可以容纳行内元素
        D. 行内元素可以容纳块元素
5、下面标签中，哪一个不是块元素？（     ）
        A. strong                    B. p                 C. div                 D. hr
6、在下面几种列表形式中，哪一种在HTML5中已经被废弃了。（     ）
        A. 有序列表ol                               B.无序列表ul
        C. 定义列表dl                               C.目录列表dir
7、下面哪种列表我们在实际开发中是用得最多的？（     ）
        A. 有序列表ol                               B.无序列表ul
        C. 定义列表dl                               C.目录列表dir
8、下面有关ul元素说法不正确的是（      ）。
        A. ul元素的子元素只能是li，不能是其他元素
        B. ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加
        C. 绝大多数列表都是使用ul元素来实现，而不是ol元素
        D. 我们可以在ul元素中直接插入div元素
9、下面有关HTML语义化不正确的是（     ）。
       A. 对于大多数标签实现的效果，我们完全可以使用div和span来代替实现
       B. 学习HTML目的在于：在需要的地方，用正确的标签
       C. 语义化对于搜索引擎优化来说是非常重要的
       D. 语义化目的在于提高可读性和可维护性
10、下面有关表格的说法正确的是（      ）。
       A. 表格布局已经被抛弃了，现在没必要学
       B. 我们可以使用表格来布局
       C. 表格一般用于展示数据
       D. 表格最基本的3个标签是：tr、th、td