什么是前端（主要分为）
- 解决GUI人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
- WEB技术栈
前端技术栈
- HTML（内容）
- CSS（样式）
- JavaScript（行为）
这三个部分通过HTTP网络协议与服务器端进行链接，由此构成了整个前端的技术栈。
前端应该关注哪些部分呢？
- 美观
- 功能
- 无障碍（是否有色盲症）
- 安全
- 性能
- 兼容性
前端的边界？
- NodeJS可以使用NodeJS来开发后端服务器的内容
- ELECTRON开发桌面端应用
- Web3来开发游戏
HTML
- HyperText（图片、标题、链接、表格）
- Markup Language（标签）
比如：<img src = "photo.jpg">
这个例子中src就是属性名，而引号中就是属性值。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- 在这段代码中，doctype用来控制使用什么版本的html来解析代码，同时也控制着页面的显示模式，标准模式和怪异模式。（在这里怪异模式里面的width包含了填充和边距）。
- 所有的标签都写在标签中。
- meta标签用来控制页面的编码。
- title用来控制页面的标签显示和SEO中的显示，即搜索引擎搜索之后的显示。
- 之后所有的html的内容标签全部都写在body里面。
HTML语法：
-
标签和属性不区分大小写。
-
不闭合比如input
-
属性值推荐使用双引号包裹。
-
默写属性值可以省略，比如required，readonly。
标签：
-
标签：
在HTML中，h1到h6标签用于定义标题，它们的层级关系决定了标题的重要性和结构。
-
<h1>：这是最高级别的标题，通常用于文档或页面的主要标题。每个页面通常只有一个h1，以便搜索引擎更好地理解内容的主题。 -
<h2>：次级标题，用于分隔主要内容的不同部分。可以有多个h2标签，用于描述h1标题下的各个主题。 -
<h3>：进一步细分的标题，通常用于h2下面的子主题。同样可以有多个h3。 -
<h4>、<h5>、<h6>：这些标签继续细分，h4是h3的子标题，依此类推，直到h6，这是最低级别的标题。
使用这些标签可以帮助结构化文档，提高可读性，并且对SEO（搜索引擎优化）也有积极影响，因为它们提供了清晰的内容层次。
在HTML中，<ol>和<ul>标签用于创建有序和无序列表，分别对应不同的列表类型。
<ol>（有序列表）
-
定义：用于创建有序的列表，列表项按顺序编号。
-
常用属性：
-
type：可以指定编号的类型，如：1（默认）：数字编号（1, 2, 3...）A：大写字母（A, B, C...）a：小写字母（a, b, c...）I：大写罗马数字（I, II, III...）i：小写罗马数字（i, ii, iii...）
-
start：可以指定从哪个数字开始编号。
-
<ul>（无序列表）
-
定义：用于创建无序的列表，列表项没有特定的顺序，通常用项目符号（如圆点）表示。
-
常用属性：
-
type：可以指定项目符号的类型，如：disc（默认）：实心圆点circle：空心圆点square：方块符号
-
在HTML中，<a>标签用于创建超链接。它是网页中连接不同页面或资源的主要方式。下面是关于<a>标签的一些重要信息：
-
href属性：指定链接目标的URL。链接文本：用户在网页上看到的可点击文本。
常用属性
-
target：控制链接的打开方式。_self（默认）：在当前窗口打开链接。_blank：在新窗口或新标签页中打开链接。_parent：在父框架中打开链接。_top：在整个窗口中打开链接，取消所有框架。
-
title：为链接提供额外信息，鼠标悬停时会显示的提示文本。 -
rel：定义链接与目标之间的关系，例如：nofollow：告知搜索引擎不要跟踪此链接。noopener和noreferrer：提高安全性和隐私性。
-
download：用于下载链接的文件，而不是在浏览器中打开它。在HTML中，`<img>`标签用于嵌入图像。它是网页中展示图片的主要方式。以下是关于`<img>`标签的一些重要信息：
基本用法
- 语法：
<img src="图片地址" alt="图片描述">src属性：指定图像文件的URL或路径。alt属性：提供图像的替代文本，便于搜索引擎优化（SEO）和无障碍访问，若图像无法显示时，将显示此文本。
常用属性
-
width和height：设置图像的宽度和高度，可以以像素或百分比为单位指定。<img src="image.jpg" alt="示例图片" width="300" height="200"> -
title：为图像提供额外信息，鼠标悬停时会显示的提示文本。 -
loading：控制图像的加载行为。可以设置为：eager（默认）：立即加载图像。lazy：在图像接近可视区域时再加载，以提高页面加载性能。
示例
<img src="https://www.example.com/image.jpg" alt="示例图片" width="600" height="400">
注意事项
- 确保图像路径正确，以免出现"图像无法显示"的情况。
- 使用
alt属性不仅有助于SEO，还有助于视觉障碍人士理解网页内容。 - 合理选择图像格式（如JPEG、PNG、GIF等），以保证图像质量和加载速度。
<img>标签是创建视觉吸引力和传达信息的重要工具，适当使用可以增强用户体验。
在HTML中，`<video>`标签用于嵌入视频内容。它使得在网页上播放视频变得简单和直观。以下是关于`<video>`标签的一些重要信息：
基本用法
- 语法：
<video src="视频地址" controls> 您的浏览器不支持HTML5视频标签。 </video>src属性：指定视频文件的URL或路径。controls属性：添加视频控制界面，包括播放、暂停、音量等功能。
常用属性
-
width和height：设置视频的宽度和高度。 -
autoplay：视频在加载后自动播放。 -
loop：视频播放结束后自动重新开始。 -
muted：静音播放视频。 -
poster：指定视频加载完成前显示的占位图像。 -
preload：指示浏览器在页面加载时是否预先加载视频：auto：浏览器根据其判断决定是否预加载。metadata：仅预加载视频元数据。none：不预加载。
示例
<video width="640" height="360" controls poster="poster.jpg" autoplay loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器不支持HTML5视频标签。
</video>
注意事项
- 确保使用合适的视频格式（如MP4、WebM、Ogg），以保证不同浏览器的兼容性。
- 提供多个
<source>标签，以支持不同的视频格式和编码。 - 使用
alt文本或占位图像，确保用户体验良好，即使在某些情况下视频无法播放。
<video>标签为网页提供了丰富的多媒体内容，合理使用可以增强用户的互动体验。
在HTML中，<audio>标签用于嵌入音频内容。它使得在网页上播放音频变得简单和直观。以下是关于<audio>标签的一些重要信息：
基本用法
- 语法：
<audio src="音频地址" controls> 您的浏览器不支持HTML5音频标签。 </audio>src属性：指定音频文件的URL或路径。controls属性：添加音频控制界面，包括播放、暂停、音量等功能。
常用属性
-
autoplay：音频在加载后自动播放。 -
loop：音频播放结束后自动重新开始。 -
muted：静音播放音频。 -
preload：指示浏览器在页面加载时是否预先加载音频：auto：浏览器根据其判断决定是否预加载。metadata：仅预加载音频元数据。none：不预加载。
示例
<audio controls autoplay loop>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持HTML5音频标签。
</audio>
注意事项
- 确保使用合适的音频格式（如MP3、Ogg、WAV），以保证不同浏览器的兼容性。
- 提供多个
<source>标签，以支持不同的音频格式和编码。 - 使用
alt文本，确保用户在音频无法播放时仍能获得良好的体验。
<audio>标签为网页提供了丰富的多媒体功能，合理使用可以提升用户的互动体验和内容的表现力。
在HTML中，<input>标签用于创建各种类型的输入字段，以便用户在表单中输入数据。它是构建用户交互和数据收集的重要组件。以下是关于<input>标签的一些重要信息：
基本用法
- 语法：
<input type="类型" name="字段名" value="默认值" placeholder="提示文本">
常用属性
-
type：指定输入字段的类型，常见类型包括：text：单行文本输入。password：密码输入，输入内容以点或星号形式显示。email：电子邮件地址输入，浏览器会验证格式。number：数字输入，允许用户输入数字。checkbox：复选框，允许用户选择一个或多个选项。radio：单选框，用户在多个选项中选择一个。file：文件选择输入，允许用户上传文件。date：日期选择器，用户可以选择日期。submit：提交按钮，提交表单。
-
name：指定输入字段的名称，在表单提交时用作键名。 -
value：指定输入字段的默认值。 -
placeholder：为输入字段提供提示文本，帮助用户理解应输入的内容。 -
required：指示该字段为必填项，未填写时无法提交表单。 -
readonly：指示该字段为只读，用户无法修改。 -
disabled：禁用该输入字段，用户无法与其交互。
示例
<form action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="输入用户名" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="输入邮箱">
<label for="subscribe">
<input type="checkbox" id="subscribe" name="subscribe" value="yes"> 订阅新闻
</label>
<input type="submit" value="提交">
</form>
注意事项
- 确保为每个输入字段提供适当的
label，以提高可访问性和用户体验。 - 根据需求选择合适的
type，以便浏览器能够提供相应的输入验证和用户界面元素。 - 使用CSS和JavaScript来增强表单的外观和交互性。
<input>标签是构建表单的重要组成部分，通过合理使用，可以有效地收集用户数据并提升用户体验。
在HTML中，<select>标签用于创建下拉菜单，允许用户从一组预定义选项中进行选择。它通常与<option>标签一起使用，以定义可供选择的具体选项。以下是关于<select>标签的一些重要信息：
基本用法
- 语法：
<select name="字段名" id="字段ID"> <option value="选项值1">选项1</option> <option value="选项值2">选项2</option> <option value="选项值3">选项3</option> </select>
常用属性
-
name：指定下拉菜单的名称，在表单提交时用作键名。 -
id：为下拉菜单指定唯一的标识符，便于使用JavaScript或CSS。 -
multiple：允许用户选择多个选项。如果设置此属性，则用户可以按住Ctrl（Windows）或Command（Mac）键进行多选。 -
size：指定下拉菜单显示的选项数量。如果设置为大于1的值，下拉菜单将显示为一个列表框。
示例
<form action="/submit" method="post">
<label for="fruit">选择水果:</label>
<select name="fruit" id="fruit">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
<option value="grape">葡萄</option>
</select>
<label for="colors">选择颜色:</label>
<select name="colors" id="colors" multiple size="3">
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
<input type="submit" value="提交">
</form>
注意事项
-
默认选项：可以通过在某个
<option>标签中添加selected属性来设置默认选项。 -
可访问性：确保为下拉菜单提供
label，以提高可访问性和用户体验。 -
样式：可以使用CSS来美化下拉菜单的外观，但要注意不同浏览器的兼容性。
<select>标签是收集用户输入的有效工具，适用于场景需要限制用户选择的情况。通过合理使用，可以改善用户体验并简化数据输入过程。
文本类标签
在HTML中，文本类标签用于定义和格式化网页中的文本内容。以下是一些常见的文本类标签及其用途：
1. 段落和标题
-
<p>：定义段落。用于表示文本的基本块。<p>这是一个段落。</p> -
<h1>到<h6>：定义标题，<h1>为最高级别，<h6>为最低级别。<h1>主标题</h1> <h2>副标题</h2>
2. 强调和加粗
-
<strong>：表示重要性，通常以加粗形式显示。<strong>重要文本</strong> -
<b>：单纯用于加粗文本，没有强调意义。<b>加粗文本</b> -
<em>：表示强调，通常以斜体形式显示。<em>强调文本</em> -
<i>：单纯用于斜体文本，没有强调意义。<i>斜体文本</i>
3. 列表
-
<ul>：无序列表，使用项目符号。<ul> <li>项目一</li> <li>项目二</li> </ul> -
<ol>：有序列表，使用编号。<ol> <li>第一项</li> <li>第二项</li> </ol> -
<li>：列表项，用于<ul>或<ol>中的每个项目。
4. 引用
-
<blockquote>：表示长引用，通常以缩进显示。<blockquote>这是一个引用。</blockquote> -
<cite>：引用作品的标题。<cite>《书名》</cite>
5. 超链接和脚注
-
<a>：创建超链接。<a href="https://www.example.com">访问示例网站</a> -
<sup>：上标文本，通常用于数学公式或注释。H<sub>2</sub>O -
<sub>：下标文本。E=mc<sup>2</sup>
6. 其他文本元素
-
<span>：用于定义行内文本样式，常用于CSS。<span style="color: red;">红色文本</span> -
<br>：插入换行符，不需要闭合标签。这是第一行<br>这是第二行
7. 代码和键盘输入
-
<code>：表示代码片段。<code>console.log("Hello, World!");</code> -
<kbd>：表示用户输入的文本。<kbd>Ctrl + C</kbd>
这些文本类标签提供了多样的方式来格式化和组织网页中的内容，使得文本内容更加易于理解和美观。通过合理使用，可以显著提升网页的可读性和用户体验。
HTML语义化
HTML语义化是指使用HTML标签来准确表达文档的结构和内容意义的做法。通过选择合适的标签，能够更清晰地描述页面中不同部分的用途和关系，从而提高网页的可读性和可维护性，同时也能提升搜索引擎优化（SEO）和无障碍访问。
语义化的好处
-
增强可读性：使用语义化标签使代码更易于理解，其他开发者可以更快地掌握页面结构和内容。
-
提升SEO：搜索引擎能够更好地解析和理解网页内容，从而提高在搜索结果中的排名。例如，使用
<header>、<nav>、<article>、<footer>等标签，搜索引擎可以识别出页面的主要部分。 -
改善无障碍性：语义化标签为屏幕阅读器等辅助技术提供了更多上下文信息，有助于帮助视障人士理解网页内容。
-
简化样式和脚本：通过使用语义化标签，CSS样式和JavaScript脚本的选择器可以更具针对性，减少不必要的复杂性。
常见的语义化标签
<header>：定义文档的头部，通常包含标题、导航等信息。<nav>：定义导航链接的部分。<main>：表示文档的主要内容。<article>：表示独立的内容块，可以独立于其他内容进行发布。<section>：定义文档中的章节，通常具有主题内容。<aside>：表示与主要内容相关的附加信息。<footer>：定义文档的底部，通常包含版权信息、联系信息等。<figure>和<figcaption>：用于标记插图和图注。
示例
<article>
<header>
<h1>文章标题</h1>
<p>作者：张三</p>
</header>
<p>这是文章的内容部分。</p>
<footer>
<p>发布于：2023年11月3日</p>
</footer>
</article>
在这个示例中，使用了语义化标签来组织和描述文章的结构，使得代码更加清晰，也方便了搜索引擎和辅助技术的解析。
总结
HTML语义化是构建现代网页的重要原则之一，通过合理使用语义化标签，不仅能提高网页的可读性和可维护性，还能增强用户体验和搜索引擎的理解能力。
