2024年【Web 三件套】超多动图带你入门 HTML_动画三件套是指什么代码，2024年最新在字节跳动我是如何当面试官的

本文链接：https://blog.csdn.net/2401_84919775/article/details/138849681

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 该行代码告诉 IE浏览器 IE8/9 及以后的版本都会以最高版本 IE 来渲染页面

1.5 浏览器的开发者工具

浏览器中含自带的网页开发者工具，可以帮助前端以及测试人员来快速定位、分析和解决问题

打开方式：

方式一：按 F12 键
方式二：右键页面选择检查
方式三：按 Crtl + Shift + i 组合按键

打开后，页面如下

元素（Elements）模块： 查看网页页面的所有元素，修改元素的代码与属性。用于查看修改元素的属性、CSS 属性、监听事件以及断点等等。

查看元素代码：点击开发者工具左上角的箭头图标进入选择元素模式，在页面中找到要查看的页面，用鼠标移动过去，开发者工具内就会显示对应的代码
修改元素的代码和属性：在开发者工具中可以对元素进行属性的修改，但这仅仅是对当前页面进行修改，而不会修改服务器的源代码，常用作调试页面效果

使用示例：

2. HTML 常见标签

2.1 注释标签

标签形式及介绍： 注释过的文本不会显示在界面上

<!-- 我是注释 -->

快捷键：Crtl + / 可以快速进行注释或取消注释

注意： HTML 中注释不可以嵌套使用

2.2 标题标签

标签形式及介绍： 有6个标题标签，从 h1 到 h6，数字越大，字体越小

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

示例：

注意： 每个标题的字体大小、粗细都是浏览器默认定义的，因此不同的浏览器运行出的效果可能会有不同。可以使用自定义样式来覆盖默认的样式

2.3 段落标签

标签形式及介绍： 将一篇文章直接复制到 html 中，文章不会分段，通过 p 标签，可以将每段进行分段

<p>这是一个段落</p>

不使用 p 标签示例：

使用 p 标签示例：

注意：

使用 p 标签会使文章有段落感，p 标签之间会有明显的间距。但是使用 p 标签不会使段首产生缩进效果，缩进会在 CSS 章节介绍
在 HTML 中，内容首尾的换行和空格均无效
在 HTML 中，文字之间输入多个空格只相当于一个空格
在 HTML 中，直接输入换行不会真的换行，而是相当于一个空格

2.4 换行标签

标签形式及介绍： br 是 break 的缩写，表示换行

<br/>

示例：

注意：

br/ 是一个单标签，不需要结束标签
使用 br/ 标签后的换行效果不会像使用 p 标签那样产生段落感，仅仅就是换行

2.5 格式化标签

标签形式及介绍： 下面介绍加粗、倾斜、删除线和下划线标签

<strong>strong 标签用于加粗</strong>
<b>b 标签用于加粗</b>

<em>em 标签用于倾斜</em>
<i>i 标签用于倾斜</i>

<del>del 标签用于加删除线</del>
<s>s 标签用于加删除线</s>

<ins>ins 标签用于加下划线</ins>
<u>u 标签用于加下划线</u>

示例：

2.6 图片标签

标签形式及介绍： img 标签用于显示图片，必须带有 src 属性，该属性的值为图片的路径

<img src="图片路径">

示例：

img 标签的其它属性：

属性	描述
alt	表示替换文本，如果当前图片不能正确显示，就会显示该替换的文字
title	表示提示文本，当鼠标放到图片上，就会显示提示的文字
width/heigth	控制图片的宽度和高度，单位是像素 px，当只设置其中一个时，另一个属性会等比例缩放
border	表示边框，参数是宽度的像素，该属性一般用 CSS 来设定

注意：

img 是一个单标签，不需要结束标签
src 的值，即图片路径，可以使用相对路径（推荐使用）、绝对路径（磁盘路径和网络路径）

2.7 超链接标签

标签形式及介绍： a 标签是用于超链接，必须具备 href 属性，即链接的地址

<a href="链接地址">链接名</a>

示例：

a 标签的其它属性： target 属性表示打开链接的方式，默认值为 _self，即使用当前页面打开该链接，也可以设置值为 _blank，即使用信道标签页打开该链接

链接的几种形式：

外部链接：href 引用其它网站的地址

<a href="https://blog.csdn.net/weixin\_51367845?type=blog">吞吞吐吐大魔王的CSDN主页</a>

内部链接：网站内部页面之间的链接，href 值为相对路径
空链接：使用 # 在 href 中占位

<a href="#">空链接</a>

下载链接：href 对应的路径是一个文件

<a href="test.zip">下载文件</a>

网页元素链接：可以给图片等任何元素添加链接（把元素放到 a 标签中）

<a href="https://blog.csdn.net/weixin\_51367845?type=blog">
	<img src="./image/弥豆子.jfif">
</a>

锚点链接：可以快速定位到页面中的某个位置

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集剧情 <br>
<img src="./image/one.jpg">

...
</p>
<p id="two">
第二集剧情 <br>
<img src="./image/two.jpg">

...
</p>
<p id="three">
第三集剧情 <br>
<img src="./image/three.jpg">

...
</p>

在这里插入图片描述

注意： 禁止 a 标签跳转到 <a href="javascript:void(0);"> 或者 <a href="javascript:;">

2.8 表格标签

标签形式及介绍：

table 标签：表示整个表格，其它表格标签都在它内部

<table>
    
</table>

tr 标签：表示表格的一行

<tr></tr>

td 标签：表示一个单元格

<td></td>

th 标签：表示表头单元格，字体会居中加粗

<th></th>

thead 标签：表示表格的头部区域（注意和 th 区分，它表示整个表格的表头）

<thead></thead>

tbody 标签：表示表格的主体区域

<tbody></tbody>

table 标签的属性： 表格标签有一些属性可以用于设置表格大小、边框等，这些属性都放在 table 标签中

属性	描述
align	表示整个表格相对于周围元素的对齐方式，有 left、center、right
border	表示边框大小，1表示有边框（数字越大，边框越粗）；""表示没边框
cellpadding	表示内容距离边框的距离，默认1像素
cellspacing	表示单元格之间的距离，默认2像素
width/heigth	设置表格尺寸

示例：

<body>
    <table align="left" border="1" cellspacing="0" width="500" heigth="300">
        <thead>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>13</td>
                <td>男</td>
            </tr>       
            <tr>
                <td>王五</td>
                <td>16</td>
                <td>女</td>
            </tr>
        </tbody>
    </table>
</body>

td 标签的属性：

rowspan 属性：表示跨行合并，rowspan="n" 表示从该行开始到下面n行，合并成一行，合并行内容为本行内容
colspan 属性：表示跨列合并，colspan="n" 表示从该列开始到右边n列，合并成一列，合并列内容为本列内容

示例：

<body>
    <table align="left" border="1" cellspacing="0" width="500" heigth="300">
        <thead>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td rowspan="2">李四</td>
                <td colspan="2">13</td>
            </tr>       
            <tr>
                <td>16</td>
                <td>女</td>
            </tr>
        </tbody>
    </table>
</body>

2.9 列表标签

标签形式及介绍：

无序列表标签：ul 和 li

<ul>
    <li></li>
</ul>

有序列表标签：ol 和 li

<ol>
    <li></li>
</ol>

自定义列表标签：dl（总标签）、dt（小标题）、dd（围绕每个小标题下的说明）

注意：

列表中各元素是并列关系
ul 和 ol 中只能放 li 标签，dl 中只能放 dt 和 dd 标签
li 中可以放其它标签
列表带有自己的样式，但可以使用 CSS 来修改

示例1： 无序列表

<body>
    <ul>
        <li>第一集</li>
        <li>第二集</li>
        <li>第三集</li>
    </ul>
</body>

示例2： 有序列表

<body>
    <ol>
        <li>第一集</li>
        <li>第二集</li>
        <li>第三集</li>
    </ol>
</body>

示例3： 自定义列表

<body>
    <dl>
        <dt>第一季</dt>
        <dd>第一集</dd>
        <dd>第二集</dd>
        
        <dt>第二季</dt>
        <dd>第一集</dd>
        <dd>第二集</dd>
    </dl>
</body>

2.10 表单标签

表单是让用户输入信息的重要途经，表单分成两个部分

表单域：包含表单元素的区域，重点是 form 标签
表单控件：包含输入框、提交按钮等，重点是 input 标签

表单标签包括以下几类

2.10.1 form 标签

标签形式及介绍： form 标签描述了要把数据按照什么方式提交哪个页面中

<form>
    
</form>

form 标签的属性：

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）
action	规定向何处提交表单的地址（URL）（提交页面）
autocomplete	规定浏览器应该自动完成表单（默认：开启）
enctype	规定被提交数据的编码（默认：url-encoded）
method	规定在提交表单时所用的 HTTP 方法（默认：GET）
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）
novalidate	规定浏览器不验证表单
target	规定 action 属性中地址的目标（默认：_self）

注意： form 标签需要结合服务器和网络编程的知识

2.10.2 input 标签

标签介绍： input 标签用于各种输入控件，包括：单行文本框、按钮、单选框、复选框

input 标签的属性：

属性	描述
type	type 取值很多，包括 text、password、button、file、radio、image 等等，分别表示不同的输入控件
name	表示给 input 取了个名字，对于单选框，必须使用多个相同的 name 才能产生单选效果
value	input 中文本的默认值
checked	带有该属性的内容初始时默认被选中（用于单选和多选按钮）
maxlength	用于设定最大长度

标签形式：