2.1 HTML概述

  1. HTML：“超文本标记语言”，它是制作网页的标准语言，HTML不区分大小写。HTML的标记称为标签

  2. 标签：由尖括号包围，比如\<title>,通常是成对出现的；\<title>开始标签，\</title>结束标签；单独出现标签<img&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/>由/结束

    标签注意缩进，外层标签靠外书写，内层标签向右缩进一段距离

    QQ图片20210922170026

    QQ图片20210922170407

  3. 标签、属性：标签内部可以有属性

    QQ图片20210922170649

2.2 HTML文件结构

  1. HTML文件结构：HTML文件后缀要是.htm或.html

    1. html基本结构
      QQ图片20210922171534
    2. <!DOCTYPE html>：表示当前文档符合HTML5标准
    3. lang属性：language属性是提供给搜索引擎的信息，提示当前是英文网页（en）是中文网页（zh）
    4. ：元数据，包含这个网页的一些很基础的信息

    QQ图片20210922172602

  2. 字符集与编码

    源文件保存时的编码与源文件声明的编码方式不一致就会出现乱码问题

    QQ图片20210922173016

2.3 HTML标签（1）

  1. 标题 h1~h6：一个页面建议只有一个h1

  2. 段落 p：每个段落都会被换行，多个空格合并为一个空格，多个空行也是合并为一个空格

    QQ图片20210922181655

  3. 段内换行 br：单独出现的标签，直接结束，\<br />,多个
    可以产生空行
  4. 空格字符 ：段内要添加多个空格就是用多个\&nbsp;

  5. 预留格式 pre：定义预格式化的文本，文本中的空格和换行符会被保留；pre标签很适合显示计算机代码

    IF8vfG.png

  6. 段内分组 span：将需要特殊表示出来的文字放在span标签内，再利用CSS对span标签进行特殊样式设置

  7. 水平线 hr：hr标签也是单独出现的，\<hr />

    QQ图片20210922183613

  8. 注释内容:注释可以跨行，\<!--这是一段注释-->

2.4 HTML标签（2）

  1. 超链接a：包含文字超链接和图片超链接，单击之后可以跳转到新的页面，格式：

    <a href="网址">文字或图片</a>（href是超链接的意思）
    QQ图片20210922184914

2.5 HTML标签（3）

  1. 图像格式

    1. 网页中常见的图像格式：

      jpg：有损压缩（去掉不关键的信息，保留大部分有用信息），支持色彩丰富图片，不会影响到用户的观看效果，而且文件非常小

      gif：简单动画，背景透明

      png：由gif发展而来，无损压缩（支持有损和无损两种情况）、透明、交错、动画

    QQ图片20210922201039

  2. img标签\<img />：

    1. src属性：图片的来源，后跟路径名+文件名

      路径名可以写绝对路径（不推荐）和相对路径，相对路径是以网页文件当前所在文件夹为查找的基准点
      QQ图片20210922202516

      QQ图片20210922202613

    2. alt属性：当因为图片丢失或者其他原因无法打开，浏览器就会找到alt属性，把这个文字显示出来，是图片的替换文本

2.6 HTML标签（4）

  1. 区域 div：页面上的板块或者简单的元素组合，使用的时候成对使用\<div>\</div>

    QQ图片20210923164504

  2. 无序列表 ul：每个超链接就是一个列表项，整个超链接的组合就是一个无序列表（因为它的每个列表项先后顺序是无关的），ul标签成对出现\<ul>\</ul>
  3. 列表项 li：无序列表内部添加列表项，每个列表项都用li标签对来表示\<li>\</li>

  4. 有序列表 ol：成对出现，\<ol>\</ol>，在其内部使用li标签项

    QQ图片20210923170033

  5. 表格 table tr td：table标签出现就表示要绘制一张表格，tr标签表示有几行，td标签表示一行有几个单元格，要添加数据的时候就把数据加在td标签内就行了

    QQ图片20210923170134

  6. 表头单元格 th：

    QQ图片20210923170520

  7. 表格嵌套：

    表格嵌套实际上是将一个表格插入到一个单元格中，在th标签中本来应该出现文字，现在出现table标签，就实现了标签嵌套

        <table align="left" border="1" style="width: 100%;height: 100%;" cellspacing="0">
        <tr>
            <th colspan="2">界面导航</th>
        </tr>
        <tr>
            <td style="width: 10%;">
                <table style="height: 100%;width: 100%;" border="1" cellspacing="0">
                    <tr>
                        <td><a href="https://4het.github.io/" target="test">我的博客</a></td>
                    </tr>
                    <tr>
                        <td><a href="https://a-c-dream.github.io/" target="test">大佬的博客</a></td>
                    </tr>
                    <tr>
                        <td><a href="https://sakuragi01.github.io/" target="test">另一个大佬的博客</a></td>
                    </tr>
                    <tr>
                        <td><a href="https://lqh827821562.gitee.io/" target="test">另二个大佬的博客</a></td>
                    </tr>
                    <tr>
                        <td><a href="form.html" target="test">表单元素</a></td>
                    </tr>
                    <tr>
                        <td><a href="img_vid.html" target="test">音视频</a></td>
                    </tr>
                    <tr>
                        <td><a href="stu.html" target="test">学习笔记</a></td>
                    </tr>
                    <tr>
                        <td><a href="img_vid.html" target="test">音视频</a></td>
                    </tr>
                </table>
            </td>
            <td><iframe src="stu.html" name="test" width="100%" height="100%"></iframe></td>
        </tr>
    </table>

    最终结果：

      image-20211007224647258

  8. 单元格的合并：

    单元格通过添加属性colspan（合并列）以及rowspan（合并行）来实现

2.7 HTML标签（5）

  1. 表单与表单元素

    1. 表单：是一个区域，采集用户信息
    2. 表单元素：文本框、按钮、单选、复拉、下拉列表、文本域
  2. 表单form标签：成对出现\<form>\</form>，表单内部可以放置一些表单元素，表单元素是为了收集用户信息的，form标签有一个action属性，表示收集来的数据交由哪个页面处理

  3. 表单元素input：

    1. 利用input标签将type属性设置为text（文本框，所有文本是由明文显示的）或password（密码框，所有文本都是由*显示的）
    2. name属性：表单元素通常会带有name属性，当表单元素的属性需要提供给后端界面处理时，后端需要知道这个数据来源于哪个表单元素，这时就是通过name属性读取到的
    3. 提交按钮submit：需要将type属性设置为submit，value是指按钮上显示的字
    4. 重置按钮reset：需要将type属性设置为reset，value是指按钮上显示的字
    5. 单选框radio：只能选择一项，当设置checked="checked"时，该选项默认被选中，当name被设置为一样的时，只能有一个被选中
    6. 复选框checkbox：任意选择多项，当设置checked="checked"时，该选项默认被选中

    QQ图片20210923174322

  4. 下拉列表框select option：为了节省页面空间时，所有的选项都放在一个下拉列表里，selected="selected"表示被默认选择的那一项

    QQ图片20210923174738

  5. 文本域textarea：成对出现

    1. rows属性规定行数
    2. cols属性规定列数

QQ图片20210923182542

  1. 小结

QQ图片20210923182705

2.8 web语义化

  1. web语义化：让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容

    结构清晰，利于团队开发、维护
    有利于搜索引擎理解
    SEO搜索引擎优化
    容易兼容不同设备

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>语义化标签</title>
</head>
<body>
 <p>
     <em>强调</em>  <br />
     <i>斜体，无语义</i>
 </p>
 <p>
     <strong>重点强调</strong>  <br />
     <b>粗体，无语义</b>
 </p>
</body>
</html>
    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>自定义列表</title>
</head>
<body>
 <dl>
     <dt>HTML</dt>
     <dd>超文本标记语言</dd>
     <dt>CSS</dt>
     <dd>层叠样式表</dd>
 </dl>
</body>
</html>
最后修改：2021 年 11 月 03 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏