前端三件套

吃了一只小羊 2025-07-22 00:26 45 阅读33分钟

前端三件套想必大家都不陌生，在这里先给大家主要讲一下HTML5，其中有很多代码不完整，也为了方便介绍添加了一些注释，所以代码仅供理解。
1.HTML（HyperText Markup Language）
超文本标记语言，用于定义网页的结构和内容。通过各种标签（如<h1>.<p>等）描述页面中的元素及其布局关系，是网页的 "骨架"。
2.CSS（Cascading Style Sheets）
层叠样式表，负责网页的视觉表现。控制元素的颜色、字体、间距、布局等样式，使网页更美观，是网页的 "皮肤"。现代开发中常使用 CSS 预处理器（如 Sass）或框架（如 Tailwind CSS）提高效率。
3.JavaScript
一种编程语言，用于实现网页的交互逻辑和动态效果。可以处理用户操作（如点击、输入）、修改页面内容、发送网络请求等，为网页赋予 "行为"，是网页的 "肌肉"。

web标准
在前端领域，Web 标准是由 W3C（万维网联盟）等权威组织制定的一系列规范集合，目的是确保网页在不同浏览器、设备和平台上都能保持一致的表现和功能，同时提升开发效率、兼容性和用户体验。
其主要组成部分：
1.HTML（超文本标记语言）：用于创建网页的结构和内容。
2.CSS（层叠样式表）：用于控制网页的外观和布局。
3.JavaScript:用于增强网页的交互性和动态功能。、
4.WAI（Web Accessibility Initiative）：旨在提高Web内容的可访问性，确保所有用户（包括残障人士）都能平等地使用网络。
5.SEO（搜素引擎优化）标准：提高网页在搜素引擎结果中排名的标准和最佳实践。

标签
标签也分为双标签和单标签，双标签例如<div></div> 一开始使用这个标签输入完内容之后，后面闭合的这个标签必须要添加/表示这是一个结束标签。像这种要求成对出现的标签我们一般称其为“双标签”或是“一般标签”,而允许单个出现的我们一般称其为“单标签”或是“自闭合标签”例如<test>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

以上是用WebStorm创建一个项目时直接生成的基础格式，咱们先了解一下其中一些标签的原理。
<!DOCTYPE html>用于声明文档类型，它是一种特殊标签，唯一作用就是告诉游览器使用HTML标准解析该文档。
<html>是HTML文档的根元素，包含整个网页文档的内容，可以看到它是一个双标签，囊括了head和body标签在内，这里有一个lang属性用于指示网页使用的语言。
<head>标签表示页头中的内容，是网页的“头部”，用于定义网页的基本信息，或是一些特殊内容，比如页面的标题，介绍，特殊信息等，我们一般不会在这里编写网页中需要的内容（即使在这里编写也会被游览器强制移动到body标签中）。
<body>就是网页的身体，也叫页身，几乎所有页面中需要展示的内容都在这里编写，我们在开发网页时主要编写的也是页身这一部分。
<title>标签是标题也就是网页的名字。
meta属性，他一般是用于定义页面的特殊信息如页面的关键字,页面的描述以及一些针对于搜索引擎的属性等。这些信息
主要面向的不是用户,更多的是搜索引擎。
<meta charset="UTF-8">表示我们的网页使用的是UTF-8编码格式(现在网站一般都统一使用UTF-8格式编码)，游览器会按对应的编码格式进行解析，防止某些游览器出现文字乱码。

实体
HTML 实体是一段以连字号（&）开头、以分号（;）结尾的文本（字符串）。HTML 实体常用于显示保留字符（这些字符会被解析为 HTML 代码）和不可见的字符。你也可以用 HTML 字符实体来代替其他难以用标准键盘键入的字符。

特殊符号	名称	代码
"	英文双引号	quot
	空格	nbsp
>	大于	gt
<	小于	lt
&	与	amp

等等还有很多大家可以去：https://developer.mozilla.org/zh-CN/docs/Glossary/Entity 查看更详细的。

图片

< img src="..." alt=".." title="..." loading="...">

src是用来写图片位置的，alt是用来如果图片加载错误显示的，title是讲鼠标放在图片上显示的介绍内容。
loading属性，用于图片的加载策略，默认为eager表示打开网站后立即加载这个图片，当然我们也可以将其设置为lazy延迟加载图片。

分辨率和高DPI
分辨率就是图片的宽度乘以高度，图片的宽高以像素为单位。像素指的是一个不可分割的点，每个像素点可以显示出任意一种颜色，位深度越大，支持显示的颜色种类数越多。

< img src="..." alt="..." width="200" height="200">

img标签的height和width属性来控制图片在页面上实际显示出来的大小，同样是以像素为单位，如上面200*200大小显示。
由于现在很多显示器都会开启上面说到的高DPI功能，比如一个4K显示器，我们一般会将其显示的内容分辨率调整为1080P或2K，也就是200%或者150%缩放，来让更多的像素点渲染原来的一个，使得画面更加细腻，不仅仅是电脑，包括手机也是这样的。因此，我们在进行图片取材的时候，一般都是需要大小的两倍，比如我们要在网页中展示，一个100100的图片，那么原图最好是200200，来适配一些高DPI屏幕，保证提供同样的清晰度。
一般常见的像素图有jpg、png、webp、以及可以动态显示的‘git’等，现在这些网页中使用的图片绝大多数是像素图。

矢量图：这些图片采用数学描述的方式记录内容,它并没有按每一个像素点的颜色去记录,而是记录的如何绘制这个图形及其对应的步骤,让浏览器自行完成绘制,从而实现无论怎么放大缩小,都可以以最清晰的样子展示出了,不会像像素图那样放大之后就失真。常见的格式有.ai、.swf等。

链接元素

<a href=" ">...要展示的信息（可以写图片，文字等）</a >

有些时候我们可能希望超链接在一个新的页面打开,而不是直接在当前页面进行跳转,我们可以使用它的target属性,默认值为_self,表示在当前页面进行跳转,要在新窗口打开我们需要使用_blank。

<a href="...链接" target="_blank">...要展示的信息（可以写图片，文字等）</a >

除了_self和_blank还有_top和_parent两个属性和后面的iframe一起介绍，除了跳转外部页面外，也可以跳转内部（改链接即可）。

锚点链接（跳转到本网页的相应位置）
需要建立索引（给要跳转的位置加一个id属性）

<div id="div1">....内容</div>

在他之前写可以写<a href="#div1">...内容</a >
这样我们点击这个就可以跳转到上面那个所在的位置

视频

<video>
  <source src="assets/test.mp4" type="video/mp4">
<video>

在source标签中设置src标签指定视频路径，type属性设置视频类型，一般MP4类型就是video/MP4，当然也有很多其他格式的视频，如果有多个格式的视频，也可以多写几个source标签以便于不同游览器的兼容性。

<video wiidth=".." height="..." control>
  <source src="..." type="...">
</video>

width和height控制尺寸 controls为视频控件，可以使视频播放和暂停。
也可以将control换为：
1.autoplay 这个就不可以人为操作了，只打开播放一次。
2.autoplay loop 一直循环播放。
3.autoplay loop muted 静音
4.autoplay loop muted controls 一直循环播放静音，也可以人为操作。
5。controls loop muted poster="...链接" 这个可以添加视频封面。

加字幕->track标签

<video ....>
  <source .....>
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"
  <track .....>也可以加很多种语言
</video>

src代表字幕文件的路径，kind表示类型，这里的subtitles表示这是一个字幕，或者：
1.subtitles:用于提供翻译或字幕,通常显示在视频的底部。
2.captions:类似于字幕,但不仅包含对话,还包括音效描述。
3.descriptions:提供关于视频内容的额外描述,帮助视觉障碍人士理解视频中的场景和动作。
4.chapters:用于定义视频的章节或部分,方便用户导航。
5.metadata:用于提供额外的信息,通常用于程序性访问,不直接显示给用户。
srclang属性，是对应的语言en（英语）
label属性，则是这些语言的标签名称

列表
三种类型的列表：有序列表，无序列表，定义列表。
有序列表（ol）

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

就会按：

。。。。
。。。。
会生成编号（从上到下输出）
ol标签中是不允许直接出现其他标签或文本的，要编写文本只能在li中编写。
如若不想用1.2.3为编号可以<ol type="...">加个type可以更改编号。

无序列表

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

从上到下输出不生成编号
也可以更改type（disc实心圆，circle空心圆，square正方形）

定义列表
通常由两部分组成
名词：需要解释的名词
描述：对名词的解释内容

<dl>
  <dt>名词</dt>
  <dd>描述。。。。</dd>
</dl>

表格

<table border="1">属性
  表格名称<caption>...</caption>
  <tr>
    <th>...</th>
    <th>...</th>
  <tr>表头（可以写不止一个）  
  <tr>
    <td>..</td>
    <td>...</td>
    第一行内容两个格子
  </tr>
  <tr>
    <td>..</td>
    <td>...</td>
    第二行内容
  </tr>
</table>

此外还有colspan="2"可以横向合并单元格2的意思就是合并两个，rowspan则是竖向。width宽度，cellspacing间距。
语义化标签：thead,tbody,tfoot,分别为表头，表身，表脚，可以更方便操作。

框架和嵌入代码

<iframe width=".." height".." src="..链接"></iframe>

可以引入别人的页面或自己的也可以
当我们套用很多页面时，就会用到_parent或_top展示。
_parent 父级，就是跳转到上一级展示
_top 最高级展示

HTML表单

<form><!--各种表单组建--></form>

文本输入框

<input value="..默认值" size="..输入框长度" maxlength="..最大的输入文本长度" placeholder="..提示信息">
<input disabled>显示但不能用
<input readonly>显示可以选中，但仍不能编辑
<input type="text">默认可以看见

type也有password（密码变为小黑点），还有很多类型

表单的提交
HTML要求大多数的输入框都要被一个lable标签（行内元素）囊括或者指向。

<form>
  <lable>电子邮件：<input type="email"></lable>
  <lable>密码：<input type="password"></lable>
</form>

或者

<lable for="AB">电子邮件:</lable>
<input id"AB" type="email">

提交：

<form>
  <lable>用户名：<input name="username" type="email"></lable>
  <lable>密码：<input name="password" type="password"></lable>
  <input type="submit">提交按钮（点击回车也可以提交）
</form>

自定义按钮

<button type="submit">按钮名字</button>

required属性，是表示这个空必须填

<input type="..." required>

重置按钮

<input type="reset">

如果按钮在form之外（form里面那就是控制的这个form）
之外的话：

<input type="..." form="abc(写一个form的id)">
...
...
<form id="abc">
</form>

数字和范围选择

<form>
  <input type="number">
</form>

也可以加属性max="..."最大 min最小 step步长（每次增加减少）

<input type="range">范围选择（滑块）

单选框和多选框

<form>
  <div>问题</div>
  <input type="radio" name="...">选项内容
  <input type="radio" name="...">选线内容2
</form>

name属性用于进行分组，如果name一样为一组，一组只能选一个。
checked属性为默认勾选
value属性为提交表单的提交值。

<input type="checkbox">为选框

下拉列表

<form>
  <select size="3"显示选项的多少 multiple这是多选>
  <option>...</option>
  <option>...</option>
  <option>...</option>
  ...
  </select>
</form>

<option value="..提交显示的属性">...selected默认勾选</option>

文本域（可以自由调整大小）

<form>
  <textarea></textarea>
<form>  

<textarea rows="..控制默认行数" cols="..列数"></textarea>

input上的属性也可以用但是默认值不一样

《textarea placeholder="...提示词">默认值</textarea>

HTML矢量图（可以很好避免像素图失真的问题）

<svg>
  <rect width="..." height="..."/>
<svg>

color: 文字颜色
font-size: 字号大小
属性名和属性值成对出现-->键值对

前端三件套

评论

最新文章

目录

下一篇

目录

登录

前端三件套

评论

相关推荐

最新文章

目录

下一篇

目录