注释快捷键 Ctrl + /

代码后缩进：shift + tad

1HTML标签

1.1排版标签介绍

1.1.1标题标签

<h1>1级标题<h1/>

<h2>2级标题<h2/>

<h3>3级标题<h3/>

<h4>4级标题<h4/>

<h5>5级标题<h5/>

<h6>6级标题<h6/>

特点：文字都有加粗、文字都有变大，并且从h1~h6文字逐渐减小、独占一行

1.1.2段落标签

<p>我是一段文字</p>

特点：段落之间存在间隙、独占一行

1.1.3换行标签

<br>

特点：单标签、让文字强制换行

1.1.4水平线标签

<hr>

特点：单标签、在页面中显示一条水平线

1.2文本格式化标签的介绍

场景：需要让文字加粗、下划线、倾斜、删除线等效果

1.3媒体标签

1.3.1图片标签的介绍

场景：在网页中显示图片

<img src="" alt="">

属性：

1.alt：替换文本，当图片不显示的时候显示的

2.title:当鼠标悬停时，才显示的文本（可用于其他标签）

特点：单标签

属性注意点：

1.标签的属性可以写在开始标签内部

2.标签上可以同时存在多个属性

3.属性之间以空格隔开

4.标签名与属性之间必须以空格隔开

5.属性之间没有顺序之分

1.3.2图片标签的width和height属性

属性名：width和height

属性值：宽度和高度（数字）

注意点：

1.如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（图片不会变形）

2.如果同时设置了width和height两个，若设置不当此时图片可能会变形

1.3.3路径

1.3.3.1绝对路径

指从目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

例如：

盘符开头： D:\day01\images\1.jpg

完整的网络地址： http://www.itcast.cn/2018czgw/images/logo.gif(了解)

1.3.3.2相对路径（常用）

从当前文件开始出发找目标文件的过程

同级目录：当前文件和目标文件在同一目录中

方法一: <img src="目标图片.gif">

方法二: <img src="./目标图片.gif">

下级目录：目标文件在下级目录中

<img src="data:images/目标图片.gif">

上级目录：目标文件在上级目录中

<img src="../cat.gif">![](https://img2023.cnblogs.com/blog/3065952/202212/3065952-20221220201432969-1397582974.png)

1.3.4音频标签

<audio src="./music.mp3" controls></audios>

常见属性：

注意点：音频标签目前支持三种格式：MP3、Wav、Ogg

1.3.5视频标签

<video src="./video.mp4" controls></video>

常见属性：

1.4链接标签

<a href="./目标网页.html">超链接</a>

<a href="http://www.baidu.com/">跳转到百度</a>

1.4.1链接标签的target属性

<a href="http://www.baidu.com/" target="_blank">百度一下</a>

2列表标签

2.1无序列表

注意：ul标签中只允许包含li标签、li标签可以包含任意内容

2.2有序列表

注意点：ol标签中只允许包含li标签、li标签可以包含任意内容

1.

2.

3.

2.3自定义列表

注意点：dl标签中只允许包含dt/dd标签、dt/dd标签可以包含任意内容

显示特点：dd前会默认显示缩进效果

3表格标签

3.1表格的基本标签

表格嵌套关系：table > tr > td

3.2表格相关属性

3.3表格标签和表头单元格标签

注意：caption标签书写在table标签内部、th标签书写在th内部（用于替换td标签）

<table>

        <caption>学生成绩单</caption>

        <tr>

            <th>姓名</th>

            <th>成绩</th>

            <th>评语</th>

        </tr>

        <tr>

            <td>丽丽</td>

            <td>95分</td>

            <td>不错，真棒</td>

        </tr>

        <tr>

            <td>美美</td>

            <td>15分</td>

            <td>你还有进步的空间</td>

        </tr>

    </table>

3.4表格的结构标签（了解）

<table border="1">

        <caption>学生成绩单</caption>

        <thead>

            <tr>

                <th>姓名</th>

                <th>成绩</th>

                <th>评语</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>丽丽</td>

                <td>95分</td>

                <td>不错，真棒</td>

            </tr>

            <tr>

                <td>美美</td>

                <td>15分</td>

                <td>你还有进步的空间</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td>总结</td>

                <td>郎才女貌</td>

                <td>郎才女貌</td>

            </tr>

        </tfoot>

    </table>

3.5合并单元格

步骤：

1.上下合并—只保留最上的，删除其他的

2.左右合并—只保留最左的，删除其他的

3.给保留的单元格设置：跨行合并（rowspan）或跨列合并（colspan）

4表单

4.1 input系列标签

<input type="text">

4.2 button按钮标签

<button type="submit">提交按钮</button>

<button type="reset">重置按钮</button>

<button type="button">普通按钮</button>

4.3 select下拉菜单标签

标签组成：select：下拉菜单的整体

​ option：下拉菜单的每一项

属性 ： selected：默认选中

4.4 textarea文本域标签

常见属性：

• cols: 规定了文本域内可见宽度

• rows: 规定了文本域内可见行数

  <textarea  cols="30" rows="10"></textarea>
  
  

4.5 label标签

使用方法 1：

1.使用label标签把内容（如：文本）包裹起来

2.在表单标签上添加id属性

3.在label标签的for属性中设置对应的id属性值

<input type="radio" name="sex" id="nan"><label for="nan">男</label></input>

使用方法 2：

1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来

2.需要把label标签的for属性删除即可

<label><input type="radio" name="sex">女</label>

5语义化标签

5.1没有语义的布局标签-div和span

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

5.2有语义的布局标签（了解）

5.2字符实体