HTML基础知识回顾

空元素(单标记)

  • 没有文本内容,只是用来提供一些简单的指令。

    • 空元素主要有:
      • <img >:添加图片(告诉浏览器从服务器获取一副图片文件并插入到文档文本流的某个位置)
      • <br>或<br />:换行
      • <hr>或<hr />:水平线 。
  1. 空元素的语法

    • 在HTML中,元素不使用关闭标签 ,如图片插入:<img src="../img/logo.gif" >;
    • 在XHTML中 , 所有的元素都必须关闭,如:<img src="../img/logo.gif"  /> 。

块级元素(block)

  • 特点:

    1. 每个块级元素都从新的一行开始,并且其后的元素也另起一行。

    2. 宽、高可设置 。
    3. 块级元素是组成内容结构的主要部分。

  • 块级元素分类:

    1. 标题:(整个网站建议使用统一的标题级别)

      • h1、h2、h3、h4、h5、h6 (字号递减)
<body>
    <!-- 文本标题单独一行 -->
    <h1 align="center">济南大学美丽的校园风光</h1>
    <h2 align="center">济南大学美丽的校园风光</h2>
    <h3 align="center">济南大学美丽的校园风光</h3>
    <h4 align="center">济南大学美丽的校园风光</h4>
    <h5 align="center">济南大学美丽的校园风光</h5>
    <h6 align="center">济南大学美丽的校园风光</h6>
</body>

    1. 段落:

      • p  <p>詹姆斯-卡梅隆</p>  
    2. 块引用:(引用文本时,特别是跨越多余4行的引用)

      • blockquote  
        <blockquote>
            代表作:《终结者》《泰坦尼克号》《阿凡达》《真实的谎言》等
        </blockquote>
    3. 预格式文本:(保留空格和换行符即保留其自身格式)

      • pre 
        <pre>
            #include <stdio.h>
            int main()
            {
            printf("这是预格式标签!");
            rerutn 0;
            }
        </pre>  
    4. 自定义列表元素:

      • ol
        <body>
            <!-- type有序列表序号,start开始序号 -->
            <ol type="1" start="4">
            <li>列表信息</li>
            <li>列表信息</li>
            <li>列表信息</li>
            </ol>
        </body>

          

      • ul
        <body>
            <!-- <ul>标记表示无序列表  -->
            <ul>
            <li>列表信息</li>
            <li>列表信息</li>
            <li>列表信息</li>
            </ul>
        </body>

          

      • li
      • dl
      • dt
      • dd 
        <body>
            <dl>  <!-- 自定义列表  -->
            <dt>中文</dt>  <!-- 定义项 -->
                <dd>你</dd> <!-- 每项的描述 -->
                <dd>好</dd>
            <dt>英文</dt>
                <dd>you</dd>
                <dd>good</dd>
            </dl>
        </body>

       

6. 水平线:

      • hr  

7. 表示文档作者信息或文章作者信息

      • address
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级元素</title>
    <!-- 显示时,另起一行 -->
</head>
<body>
<!-- 标记<pre> : 保留其空格和换行符 --> <pre> #include <stdio.h> int main() { printf("这是预格式标签!"); rerutn 0; } </pre> <!-- 水平线 --> <hr> <p>詹姆斯-卡梅隆</p> <!-- 标记<blockquote>引用长文本时进行左右缩进 (增加margin外边距)--> <blockquote>代表作:《终结者》《泰坦尼克号》《阿凡达》《真实的谎言》等</blockquote> <!-- 标记<address>定义文档或文章的作者拥有者信息 以斜体显示--> <address> contributed by <a href="">fanyl</a> </address> </body> </html>

内联元素 (inline):

  •  特点:

    1.  内联元素只能在文本流中,不会引起换行
    2.  高度、宽度不可以设定  
    3.  内联元素依附于其他块级元素存在,只能容纳文本或其他内联元素
    4.  又称作行内元素
  • 常用内联元素:

    1. 换行:(空元素、两个br相当于一个p元素)

      • br
    2. 加粗效果:(定义文本重要的地方)

      • b
      • strong
    3. 体效果:

      • i  
    4. 旁注字体小号:

      • small
    5. 定义引用:引用另一个文档(标题)

      • cite
    6. 代码文本:

      • code  
    7. 定义术语:

      • def
    8. 定义键盘文本:

      • kbd
    9. 定义样本文本:(程序的示例输出)

      • samp
    10. 强调文本:(默认斜体)

      • em
    11. 简写为以句号结束的单词(etc.)

      • abbr
    12. 被插入的文本:(下划线标注)

      • ins
    13. 删除线:

      • del
    14. 自动加引号:(“”)

      • q
    15. 下标文本:

      • sub
    16. 上标文本:

      • sup
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联元素</title>
    <!-- 显示时,在一行显示 -->
</head>
<body>
    
    <span>span</span>
    <!-- 标记 <br >换行 -->
    <br>
    <br>

    <!-- 标记 <b>以 加粗 显示 -->
    <b>加粗</b>
    <br >

    <!-- 标记 <i>以 斜体 显示 -->
    <i>斜体</i>
    <br >

    <!-- 标记常用与旁注信息 文本字体缩小-->
    <small>文本字体小写</small>
    <br >

    <!-- 定义引用,文档的标题 -->
    <cite>定义引用</cite>
    <br >

    <!-- 用于标记程序代码 -->
    <code>用于标记程序代码</code>
    <br >

    <!-- 定义术语 -->
    <def>定义术语 </def>
    <br >

    <!-- 定义键盘输入文本 -->
    <kbd>定义键盘输入文本</kbd>
    <br>

    <!-- 定义样本文本:(程序的示例输出) -->
    <samp>samp定义样本文本</samp>
    <br >

    <!-- 变量 -->
    <var>var A</var>
    <br >

    <span>content</span>
    <br >
    
    <hr>
    <!-- 斜体 -->
    <em> contributed by fanyl</em>
    <br >

    <!-- 加粗效果 -->
    <strong>strong</strong>
    <br >

    <!-- 标记以句号结束的单词 -->
    <abbr> etc.</abbr>
    <br >

    <!-- 下划线 -->
    <ins> contributed by fanyl</ins>
    <br >

    <!-- 删除线 -->
    <del> contributed by fanyl</del>
    <br >
    
    <!-- 引用 双引号显示文本-->
    <q> contributed by fanyl</q>
    <br >

    <!-- 下标 -->
    我的<sub> contributed by fanyl</sub>
    <br >

    <!-- 上标 -->
    我的<sup> contributed by fanyl</sup>
    <br >
    
    
</body>
</html>

原文地址:https://www.cnblogs.com/sjslove/p/12581726.html