前端与HTML入门 | 青训营笔记

华南第一深情
160 阅读5分钟
这是我参与「第四届青训营 」笔记创作活动的的第1天

前端

什么是前端？

  • 解决GUI人机交互问题
  • 跨终端
    • pc/移动浏览器
    • 客户端/小程序
    • VR/AR等
  • Web技术栈

前端技术栈（基础三件套）

JavaScript(行为)：设置动态更新的内容、控制多媒体、动画图像等，例如点击事件(用户点击按钮弹出窗口)

CSS(样式)：设置页面的样式美观页面，例如颜色，大小位置等

HTML(内容)：一种定义内容结构的标记语言，管理页面的内容和结构。

66338e53c7bce70c1ce862af91855a7.png

前端应该注意哪些方面

  • 功能 - 美观 - 无障碍 > （适用所有人） - 安全 - 性能 - 兼容性 - 用户体验

开发环境

浏览器

Edge、Chrome、Firefox、Safari

编辑器

VSCode、WebStorm、Vim

HTML

一个简单完整的HTML页面

8e134d6610030736c236572ee005cad.png

段落

在 HTML 中，每个段落都必须包含在一个<p>元素中，如下所示：

<p>I am a paragraph, oh yes I am.</p>

标题

每个标题都必须包含在一个标题元素中：

2678cf5ade5fccf5ed3ffd47de846da.png

有六个标题元素：<h1>、<h2>、<h3>、<h4>、<h5>和<h6>。每个元素代表文档中不同级别的内容；<h1>代表主标题，<h2>代表副标题，<h3>代表副标题，依此类推。

列表

  • 有序列表 ol：在ol中使用li标签可以实现从1递增的排序
  • 无序列表 ul：在ul标签中使用li标签可以实现.的排序
  • 定义列表 dl：在dl标签中可以使用dt（标题）dd（标题具体描述的值），且一个dt可以对应多个dd

55ae14999df387425463639f67c0c0f.png

超链接

使用href属性来确定具体要跳转的页面链接以及跳转方式。

单击或以其他方式激活时，Web 浏览器会转到另一个 Web 地址 (URL)。

注意：  URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件，或者任何其他存在于 Web 上的东西。如果 Web 浏览器不知道如何显示或处理文件，它会询问您是否要打开文件（在这种情况下，打开或处理文件的职责被传递给设备上合适的本机应用程序）或下载文件（在这种情况下，您可以稍后尝试处理它）。

80eafdfa0054db1a6ebc71cdcd4b26d.png

图片、音频标签

图片标签

src属性包含指向您要嵌入页面中的图像的路径，可以是相对或绝对 URL，与元素中的href属性值相同<a>。

例如，如果您的图像被称为dinosaur.jpg，并且它与您的 HTML 页面位于同一目录中，您可以像这样嵌入图像：

<img src="dinosaur.jpg">

如果图像位于images与 HTML 页面相同的目录中的子目录中，那么您可以像这样嵌入它：

<img src="images/dinosaur.jpg">

注意： 搜索引擎也会读取图像文件名并将其计入 SEO。因此，你应该给你的图像一个描述性的文件名；dinosaur.jpg好于img835.png。

您可以使用其绝对 URL 嵌入图像，例如：

<img src="https://www.example.com/images/dinosaur.jpg">
视频标签

<video>元素允许您非常轻松地嵌入视频。一个非常简单的示例如下所示：

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
</video>

注意的特点是：

  • src

与<img>元素一样，src(source) 属性包含您要嵌入的视频的路径。它以完全相同的方式工作。

  • controls

用户必须能够控制视频和音频的播放您必须使用该controls属性来包含浏览器自己的控制界面，或者使用适当的JavaScript API构建您的界面。至少，界面必须包含启动和停止媒体以及调整音量的方法。

  • <video>标签内的段落

这称为后备内容- 如果访问页面的浏览器不支持该元素，则会显示该<video>内容，从而允许我们为旧浏览器提供后备。这可以是你喜欢的任何东西；在这种情况下，我们提供了视频文件的直接链接，因此用户至少可以通过某种方式访问​​它，而不管他们使用的是什么浏览器。

音频标签

<audio>元素的工作原理与该<video>元素一样，但有一些小的差异，如下所述。一个典型的例子可能如下所示：

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>

这比视频播放器占用更少的空间，因为没有视觉组件——你只需要显示控件来播放音频。与 HTML 视频的其他区别如下：

  • 该<audio>元素不支持width/height属性——同样，没有可视组件，因此没有任何东西可以分配宽度或高度。
  • 它也不支持该poster属性——同样，没有可视组件。

除此之外，<audio>支持所有相同的功能<video>- 查看上述部分以获取有关它们的更多信息。

输入标签

使用input + 属性值（type） 来实现不同效果的输入表示

9f2d28f79b8b2986d054b2122285b00.png

选项标签

多选标签：在p标签中使用label和input标签 通过定义input的type属性为checkbox来实现多选功能。

单选标签：在p标签中使用label和input标签 通过定义input的type属性为radio来实现单选功能，其中name属性表示为选中的值(是要具有唯一性)

下拉选择标签：在p标签中使用select和option标签来实现

732153c917ac2d4346503222bfcfbb9.png

内容划分

4d2c869bd30a2d5b2c3ffbb7179330b.png

语义化是什么

  • HTML中的而元素，属性及属性值都拥有某些含义
  • 开发者应该遵循予以来编写HTML
    • 有序列表用ol;无序列表用ul

好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

如何做到语义化

  • 了解每个标签的属性和含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码
avatar
文章
阅读
粉丝