前言

准备

  • 工具 :Visual Studio Code
  • 插件 :HTML

常用快捷键

名称快捷键
HTML骨架html:5 → Tab
快速生产元素元素名 → Tab
自动生成多个元素div*5 → Tab
生成H1~H6h$*6 → Tab
复制当前行文本shift+alt+键盘上下箭头
删除当前行ctrl+shift+k
选中多个光标中轮选中
在任意位置换行ctrl+enter
放大或缩小ctrl++/-

一 、骨架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键字, XXX,XXX,XXX">
<meta name="description" content="网页的描述">
<title>Document</title>
</head>
<body>

</body>
</html>
  1. DTD

    必须出现在第一行,用于向浏览器解释文件格式,警示符号<!>

    1
    <!DOCTYPE html>
  2. html标签

    整个网页必须被包裹,包含和

    两部分,关闭符/,标签必须有关闭符。

    1
    2
    3
    4
    5
    6
    <html lang="en">
    <head>
    </head>
    <body>
    </body>
    </html>
  • \\ → 网页配置
  • \\ → 网页可视区域,用于网页内容布局
  • \ → 表示网页整体语言,en表示英文,中文的表示法zhcnzh-CN
  1. 字符集 <mata charset>

    mata表示元的意思,几乎所有的配置都写在mata标签中,是网页的配置项目

    1
    <meta charset="UTF-8">
  • UTF-8,国际化的字库,每个汉字占3个字节,主要面向世界。

  • gb2312,只有汉族的文字和少量其他符号,每个汉字占2个字节,主要面向国内,。

  • gbk,gb2312的增强版,文字略多,每个汉字占2个字节,主要面向国内。

    字符集使用的不同,网页加载速度也不同,不同类别的字符集不相互贯通,改变原有的字符集,原位置的字符会随之改变。

  1. 浏览器设置

    设置浏览器的兼容性,此处content="IE=edge"表示设置兼容性为让edge和ie的渲染方式一样。

    1
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    拓展:加上这个标签,表示尽可能的用更高级的内核打开网页页面。

    1
    <meta name="renderer" content="webkit">
  2. 视口标签

    主要用以适配移动端窗口,如果不加载此标签,移动端窗口将会以俯瞰的方式呈现。

    1
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  3. keywords 关键字

    SEO

    1
    <meta name="keywords" content="关键字, XXX,XXX,XXX">  
  4. descriptio 页面描述

    页面描述就是被搜索引擎搜到之后所展示的文字描述

    1
    <meta name="description" content="网页的描述">
  5. title 标签

    网页的顶部配置,就是网页在浏览器选项卡位置显示的文字标题

    1
    <title>网页标题</title>

二、HTML的基本语法

(一)标签

  1. 标签名必须书写在一对尖括号<>内部。
  2. 标签氛围单标签与双标签,双标签必须成对出现,有开始标签和结束标签。

  3. 结束标签必须有关闭符/

  4. 根据标签内部存放的内容不同,可将不同的标签划分为两个级别。根据标签的种类可将标签划分为容器级文本级

    | 容器级 | 文本级 |
    | :————————————————————————: | :———————————————————: |
    | (元素内部除了可以存放文本之外,还可以嵌套标签) | (元素内部只能存放文本或者文本标签) |
    | divolul | spanimg |
    | lidtddh1~h6 | bui |

(二)标签属性

标签属性是标签身上的一些特殊性质

  1. 书写位置,下开始标签或单标签的标签名后面,添加一个空格,空格后面书写属性。

  2. 属性包含属性名(key)属性值(value)两部分,根据英文表示,习惯性的将属性书写法成为键值对写法:k = ”v“

    1
    <a href="https://like977.vercel.app" title="like977"></a>

    (上面代中,title即是属性名也就是k=后面的值like977即是属性值v)

(三)标签之间对空白换行缩进不敏感

  1. 标签与其他标签之间对空白、换行、缩进等不敏感,不影响浏览器加载效果。文字的位置不会根据书写位置决定,而是根据标签的种类决定

    1
    2
    3
    4
    5
    <body>
    <p>文字</p>
    <p>文字</p>
    <span>正常文字</span>
    </body>

    换行、空白、缩进等不影响浏览器加载效果,但占有一定的字节,影响文件的大小。

    在完成网页制作时可对代码进行压缩,以减少文件体积,提升浏览器加载速度:https://www.runoob.com/csspack

  2. HTML语法中,认识标签的开始和结束,无论有没有换行、缩进、空格等字符,都只认开始与结束标签。

  3. 标签之间存在嵌套关系 文本级标签无法嵌套

    1
    2
    3
    4
    5
    6
    7
    <body>
    <div>
    <p>
    <a href="" title="嵌套"></a>
    </p>
    </div>
    </body>

    (无法嵌套的标签,浏览器会自动处理错误,但不会提示bug)

  4. 空白折叠

    在普通文字之间,如果有空格、换行、缩进导致的空白,浏览器加载时会被折叠成一个空格显示,而不是多个空格。正常显示空格可以使用字符实体替换书写,在代码中书写&nbsp;即可代替一个字符,换行则使用br单标签书写

    1
    2
    3
    4
    5
    6
    7
    <body>
    <!-- #文字空格-->
    <p>文 字 </p> <!---浏览器显示:文 字------->
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p><!---浏览器显示:文 字------->
    <!-- #文字换行 -->
    <p>第一行<br>第二行<br>第三行<br>第四行</p>
    </body>

HTML的常用标签

(一)h系列标签 英文:headline (标题)

  1. 类型:双标签、容器级标签

  2. 内容:\

    \

    包含六级标题,分别为h1h2h3h4h5h6

  3. 作用:给内部内容添加对应级别标题的语义。

    标签根据重要性不同,认为权重不同,所有的标题标签都比别的标签要高。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <body>
    <!-- #region 快捷键:h$*6 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    </body>

    根据对文本的定义,权重就是文本的权重,设置h标签的文字就赋予了标题的语义,以浏览器的角度考虑,它的权重在搜索引擎的优化,搜索引擎的优化除了会抓取mata标签配置的keywords之外还会优先抓取标题的内容,通常情况下h1标签的权重是最高的,一个页面只使用一个h1,用来制作网页的logo。

    如果一个网页存在或使用多个h1标签,浏览器则视其为作弊,从而降低排名。

(二)P标签 英文:paragraph(段落)

  1. 类型:双标签、文本级标签。

  2. 内容:\

    \

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <body>
    <!-- #region 标题-->
    <h1>标题</h1>
    <!-- #region 段落-->
    <p>
    第一段
    </p>
    <p>
    第二段
    </p>
    <p>
    第三段
    </p>
    </body>
  3. 作用:添加一个完整段落的语义。

(三)Img标签 英文:image (图片)

  1. 类型:单标签,文本级标签

  2. 属性:

    src:用来引入图片的路径

    alt:图片无法加载时所展示的替换文本

    width:宽度

    height:高度

    title:设置图片焦点标题,鼠标悬停文本

    border:边框 (单位:像素)仅了解即可,通常采用css加边框

    通常情况下,宽度与高度不会同时设置,两者同时设置图片会进行等比例调整

    CSS涉及

    1
    2
    3
    4
    5
    6
    <body>
    <!-- #region 图片加边框并设置颜色-->
    <img src="图片路径" alt="图片异常提示" style="border:10px dashed red">
    <!-- #region 图片缩放33%-->
    <img src="图片路径" alt="图片异常提示" style="zoom: 33%;" >
    </body>
  3. 内容:

    1
    2
    3
    4
    5
    <body>
    <!-- #region 图片引入-->
    <img src="图片路径" alt="图片异常提示">
    <img src="图片路径" alt="图片异常提示" width="10px" height="10px" border="10px" >
    </body>
  4. 作用:在指定位置插入一张图片

(四)相对路径与绝对路径

  • 相对路径:从所引入的文件位(html文件)置起,找到所引入的文件位置

  • 绝对路径

    • 盘符:C:/User/img/1.jpg
    • 网址:http://blog.li9.top/img/1.jpg
  • 进入指定文件:/ 图片与html文件同文件

  • 出基础文件:../ 图片与html不同文件

    1
    2
    3
    4
    5
    6
    7
    8
    <body>
    <!-- #region 相对路径-->
    <img src="/img/1.jpg" alt="">
    <img src="../img/1.jpg" alt="">
    <!-- #region 绝对路径-->
    <img src="C:/User/img/1.jpg" alt="">
    <img src="http://blog.li9.top/img/1.jpg" alt="">
    </body>

(五)锚点 \\ 英文:anchor(锚)

  1. 类型:双标签、文本标签

  2. 作用:在指定位置添加一个超级链接

  3. 属性:

    title:与img标签属性相同

    href:地址 (相对、绝对均可)

    target:跳转新的页面打开,值:_blank

    1
    2
    3
    4
    <body>
    <a href="http://********.jpg" title="鼠标悬停文本">文本</a>
    <a href="http://********.jpg" target="_blank" >文本</a>
    </body>
  4. 锚点使用

    通过设置锚点,实现页面内任意位置变动

    法一:设置一个空锚点,给空锚点设置name属性值,将name属性值带#引入href值,href是锚,name、id是点,锚点的值要一致。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
        <h1>标题一</h1>
    <a href="#maodian1">标题2</a>
    <a href="#maodian2">标题3
    <a href="#maodian3">标题4</a>
    </a>
    <h2>标题2</h2>
    <a name="maodian1"></a>
    <p>
    文本内容1***********************
    </p>
    <h2>标题3</h2>
    <a name="maodian2"></a>
    <p>
    文本内容***********************
    </p>
    <h2>标题4</h2>
    <a name="maodian3"></a>
    <p>
    文本内容***********************
    </p>
    </body>

    法二:给标题设置id增加锚点的点,id与name一样,要与锚href的值一致。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <body>
    <h1>标题一</h1>
    <a href="#maodian1">标题2</a>
    <a href="#maodian2">标题3
    <a href="#maodian3">标题4</a>
    </a>
    <h2 id="maodian1">标题2</h2>
    <p>
    文本内容1***********************
    </p>
    <h2 id="maodian2">标题3</h2>
    <p>
    文本内容***********************
    </p>
    <h2 id="maodian3">标题4</h2>
    <p>
    文本内容***********************
    </p>
    </body>

HTML标签的基本使用

列表

列表通常由一组标签组成,不存在单打独斗的情况,ul与ol基本使用方法一致,差别在于有序与无序

(一)无序列表

  1. 作用:定义一个没有顺序的列表结构,由两个标签组成,ul 英文:ulordered(无序列表)li 英文:list item(列表项目)

    1
    2
    3
    4
    5
    6
    7
    8
    <body>
    <h1>列表标题</h1>
    <ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    </ul>
    </body>
  2. 注意

    1. ul内部嵌套li,它们是父子关系,都是容器级标签,关系: ul > li

    2. 规律:ul内部只能嵌套lili标签内可以嵌套任何标签,甚至是ul

    3. 无序列表之间没有先后顺序之分,列表项之前的前缀样式由css控制

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <body>
    <h1>标题</h1>
    <ul>
    <li>列表1</li>
    <ul>
    <li>分支一</li>
    </ul>
    <li>列表2</li>
    <ul>
    <li>分支二</li>
    </ul>
    <li>列表3</li>
    <ul>
    <li>分支三</li>
    </ul>
    </ul>
    </body>

(二)有序列表

  1. 作用:定义一个有顺序的列表结构,由两个标签组成,ol 英文:ordered list(有序列表)li文:list item(列表项目)

    1
    2
    3
    4
    5
    6
    7
    8
    <body>
    <h1>列表标题</h1>
    <ol>
    <li>第一项目</li>
    <li>第二项目</li>
    <li>第三项目</li>
    </ol>
    </body>
  2. 注意

    1. ol内部嵌套li,它们是父子关系,都是容器级,关系:ol > li
    2. 规律:ol标签内部必须是lili内部可以嵌套任何标签,甚至是ol
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <body>
    <h1>列表标题</h1>
    <ol>
    <li>
    <h2>列表一</h2>
    <ol>
    <li>分支1</li>
    <li>分支2</li>
    <li>分支3</li>
    </ol>
    </li>
    <li>
    <h2>列表二</h2>
    <ol>
    <li>分支1</li>
    <li>分支2</li>
    <li>分支3</li>
    </ol>
    </li>
    </ol>
    </body>

(三)定义列表

  1. 作用:定义一个标题和内容自定义的列表结构,有三个标签组成,dl英文:definition list(创建一个自定义列表结构)dt 英文:definition term (定义主题)dd英文:definition description (解释)

    1
    2
    3
    4
    5
    6
    7
    <body>
    <h2>列表标题</h2>
    <dl>
    <dt>定义标题</dt>
    <dd>列表解释</dd>
    </dl>
    </body>
  1. 注意

    1. dl内部只能存放dt和dddt和dd是同级关系 ,都是容器级标签
    2. dl后可跟多个dtdd组合,每个dt后可跟多个dd解释,每个dd解释的是上一个最近的dt
    3. dl、dt、dd是组合使用,每个页面可以使用多个dl组合,关系:dl > dt /n dd
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <body>
    <h2>列表标题</h2>
    <dl>
    <!-- #region 组合使用-->
    <dt>标题1</dt>
    <dd>解释</dd>
    <!-- #region 多个解释-->
    <dt>标题2</dt>
    <dd>解释1</dd>
    <dd>解释2</dd>
    <!-- #region 容器使用-->
    <dt>标题3</dt>
    <dd>
    <p>文本</p>
    <span>第一行</span>
    </dd>
    </dl>
    <!-- #region 多个dl使用-->
    <h2>列表2</h2>
    <dl>
    <dt>分支</dt>
    <dd>解释</dd>

    <dt>分支2</dt>
    <dd>解释2</dd>
    </dl>
    </body>
  2. CSS涉及

    border:边线 float:位置 width:宽度 height:高度 txt-align: center 文本居中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    dl{
    border: 1px solid black;
    float: right;
    width: 100px;
    height: 120px;
    }
    </style>
    </head>

表格

  1. 表格基础

    由三个标签组成,table 表格(定义了一个表格结构)tr 英文:table rows(定义表格的行) td 英文:table dock (定义了表格的单元格) 关系:table > tr > td

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <body>
    <h2>表格</h2>
    <table>
    <tr>
    <td>第一行,第一列</td>
    </tr>
    <tr>
    <td>第二行,第一列</td>
    <td>第二行,第二列</td>
    </tr>
    <tr>
    <td>第三行,第一列</td>
    <td>第三行,第三列</td>
    <td>第三行,第三列</td>
    </tr>
    </table>
    </body>

    编辑器快捷键:tr*N>td*H 快速生成 N行H列

  2. 添加边框 给table赋值

    1
    <table border="1" style="border-collapse: collapse;">
  3. table 属性

    • border = “1” 设置表格边框

    • css样式:style="border-collapse: collapse;"

    • th :表头

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      <body>
      <h2>表格</h2>
      <table border="1" style="border-collapse: collapse;">
      <tr>
      <th>第1列</th>
      <th>第2列</th>
      <th>第3列</th>
      </tr>
      <tr>
      <td>第1行,第1列</td>
      <td>第1行,第5列</td>
      <td>第1行,第3列</td>
      </tr>
      <tr>
      <td>第2行,第4列</td>
      <td>第2行,第2列</td>
      <td>第2行,第3列</td>
      </tr>
      </table>
      </body>

      表头快捷键:tr>th*H 快速生成 H列表头

  4. 单元格合并

    1. 一部分单元格需要进行跨行跨列合并,可以给对应的td和th标签设置相关属性

      • rowspan:上下跨行合并 值:math(数字即为夸的行数)
      • clospan:左右跨列合并 值:math (数字即为夸的列数)
    2. 步骤

      1. 确定一行的td数量,和行数(max)

      2. 从上到下逐行在td内设置 跨行跨列的属性

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        39
        40
        41
        42
        43
        <body>
        <h2>表格</h2>
        <table border="1" style="border-collapse: collapse;">
        <!-- #region 第一行-->
        <tr>
        <!-- #region 左右跨2列-->
        <td colspan="2">1</td>
        <!-- #region 上下跨2行-->
        <td rowspan="2">2</td>
        <!-- #region 左右跨3列-->
        <td colspan="3">3</td>
        <td>4</td>
        </tr>
        <!-- #region 第二行-->
        <tr>
        <!-- #region 上下跨两行-->
        <td rowspan="2">5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <!-- #region 上下跨两行-->
        <td rowspan="2">9</td>
        <td>10</td>
        </tr>
        <!-- #region 第三行-->
        <tr>
        <td rowspan="2">11</td>
        <td>12</td>
        <!-- #region 左右跨两列-->
        <td colspan="2">13</td>
        <!-- #region 上下跨两行-->
        <td rowspan="2">14</td>
        </tr>
        <!-- #region 第四行-->
        <tr>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <!-- #region 左右跨两列-->
        <td colspan="2">18</td>
        </tr>
        </table>
        </body>
      3. style设置

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        table{

        }
        td{
        width: 100px;
        height: 80px;

        }
        </style>
        </head>
  5. 表格分区

    一个完整的表格注意包括三个部分:表格标题、表格表头、表格主题

    一个table 内部包括三个分区标签组成:

    • caption:定义表格主题
    • thead:定义表格头部,内部嵌套 tr>th
    • tbody:定义表格主题,内部嵌套 tr>td

    这个内容太多了。。。。。先放放把。。。。。。

表单元素