Web前端学习（1）

最新推荐文章于 2023-03-30 21:09:09 发布

liuxiang15

最新推荐文章于 2023-03-30 21:09:09 发布

阅读量149

点赞数

分类专栏：前端工作

14 篇文章 1 订阅

订阅专栏

本文的学习记录参考https://developer.mozilla.org/zh-CN/docs/Learn 。只记录本人不会的，并不会很详细。

文件夹名和文件都使用小写字母，且没有空格，原因有2：

1.很多计算机，特别是 Web 服务器，是对大小写敏感的

2.最好使用横线，而不是下划线来分离单词：对比 my-file.html 和 my_file.html 。

谷歌搜索引擎把连字符当作一个词的分隔符，但不会以这种方式处理下划线。基于这些原因，最好养成在文件夹和文件名中使用小写，并且使用短横线而不是空格来分隔的习惯。

我们创建的任何网站项目中最常使用的就是一个索引 HTML 文件和不同的包括图像，样式表和脚本文件的文件夹。

要引用一个位于调用的 HTML 文件同级目录的目标文件，只需直接使用文件名，比如 my-image.jpg 。
要引用一个子目录的文件，在路径前写下目录名并加一个斜杠，比如 subdirectory/my-image.jpg 。
要引用一个位于调用的 HTML 文件的父级目录的目标文件，加上两个点。举个例子，如果 index.html 在 test-site 下面的一个子目录而 my-image.png 在 test-site 目录，你可以在 index.html 里使用 ../my-image.png 引用 my-image.png 。
你可以随意组合以上方法，比如 ../subdirectory/another-subdirectory/my-image.png

超文本标记语言 (英语：Hypertext Markup Language，简称：HTML ) 是一种用来结构化 Web 网页及其内容的标记语言。

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。

注：不包含 ASCII 空格（以及 " ' ` = < > ）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。

<!DOCTYPE html> — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年），DOCTYPE 用来链接一些 HTML 编写守则，有点像自动校正等。然而现在已经没有人关心这些，只是因为历史原因必须将它们保留，但没有实际作用。只需要知道<!DOCTYPE html>是最短的有效的文档声明。
<html></html> — <html> 元素。这个元素包含了整个页面的内容，有时也被称作根元素。
<head></head> — <head> 元素。这个元素放置的内容不是展现给用户的，而是包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
<meta charset="utf-8"> — 这个元素指定了当前文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，我们没有任何理由再选用其他编码。
<title></title> — <title> 元素。这个元素设置页面的标题，显示在浏览器标签页上，同时作为收藏网页的描述文字。
<body></body> — <body> 元素。这个元素包含期望让用户在访问页面时看到的内容，可以是文本、图像、视频、游戏、可播放的音轨或其他内容。
href 这个名字可能开始看起来有点令人费解。如果你觉得不好记，那么记住它代表的是超文本引用（ hypertext reference）。

在HTML中有两种你需要知道的重要元素类别，块级元素和内联元素。

块级元素在页面中以块的形式展现 —— 相对与其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
内联元素通常出现在块级元素中并包裹文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和 <strong>。