Skip to main content

前端和 HTML

前端的定义​

前端是指用户可以直接看到的部分，包括网页的布局、样式、交互等。

什么是前端​

Web前端: 顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

Web前端：

1）掌握HTML，能够书写语义合理，结构清晰，易维护的HTML结构。

2）掌握CSS，能够还原设计人员的视觉设计，并兼容业界承认的主流浏览器。

3）熟悉JavaScript，了解ECMAScript基础内容，掌握1~2种js框架，如Vue、React

4）对常见的浏览器兼容问题有清晰的理解，并有可靠的解决方案。

5）对性能有一定的要求，了解yahoo的性能优化建议，并可以在项目中有效实施。

6）......

HTML 的定义​

即 HyperText Markup Language，超文本标记语言，是一种用于创建网页的标准标记语言。

  • 超文本：超文本包含图片、链接、音频、视频等，可以通过超链接进行跳转。
  • 标记语言：标记语言是一套标记标签，通过标记标签来标记文本内容，使其具有特定的格式。

浏览器会将 HTML 文件解析成DOM 树，然后根据 CSS 样式表来渲染页面。

HTML 标签结构​

1

这个元素的主要部分有：

  • 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
  • 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
  • 内容（Content）：元素的内容，本例中就是所输入的文本本身。
  • 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

块级元素和内联元素​

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

  • 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。

  • 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和 <strong>。

空元素​

不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：元素<img>是用来在元素<img>所在位置插入一张指定的图片。例子如下： 

<img src="https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site/images/firefox-icon.png">

元素的属性​

2

属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，这个 class 属性给元素赋了一个识别的名字（id），这个名字此后可以被用来识别此元素的样式信息和其他信息。

一个属性必须包含如下内容：

  1. 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
  2. 属性名称，后面跟着一个等于号。
  3. 一个属性值，由一对引号“ ”引起来。

HTML文档结构​

现在我们来学习这些特定元素是怎么被结合起来，从而形成一个完整的 HTML 页面的： 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

分析如下：

  1. <!DOCTYPE html>: 声明文档类型。很久以前，早期的 HTML(大约 1991 年 2 月)，文档类型声明类似于链接，规定了 HTML 页面必须遵从的良好规则，能自动检测错误和其他有用的东西。使用如下： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

然而这种写法已经过时了，这些内容已成为历史。只需要知道 <!DOCTYPE html> 是最短有效的文档声明。

  1. <html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素。

  2. <head></head>: <head>元素。这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS 样式，字符集声明等等。以后的章节能学到更多关于 <head> 元素的内容。

  3. <meta charset="utf-8">: 这个元素设置文档使用 utf-8 字符集编码，utf-8 字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。

  4. <title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。

  5. <body></body>: <body>元素。包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

图片嵌入​

图片引入​

我们可以轻松放入一张图片： 

<img src="test.jpg">

在上述情况中，你的图片必须在你网页的根目录下。
如果这张图片存储在和 HTML 页面同路径的 images 文件夹下（这也是 Google 推荐的做法，利于SEO/索引），那么你可以采用如下形式： 

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

你也可以像下面这样使用绝对路径： 

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

但是这种方式是不被推荐的，这样做只会使浏览器做更多的工作，例如重新通过 DNS 再去寻找 IP 地址。通常我们都会把图片和 HTML 放在同一个服务器上。

caution

大多数图片是有版权的。不要在你的网页上使用一张图片，除非：

  • 你是图片版权所有者
  • 你有图片版权所有者明确的、书面上的使用授权
  • 你有充分的证据证明这张图片是公共领域内的

侵犯版权是违法并且不道德的。此外，在得到授权之前永远不要把你的src属性指向其他人网站上的图片。这被称为"盗链（hotlinking）"。同样，盗取其他人的带宽也是违法的。而且这会降低你的页面的加载速度，而且图片可能会在不受你控制的情况下被移走或用别的令人尴尬的东西替换掉。

备选文本​

下一个我们讨论的属性是 alt ，它的值应该是对图片的文字描述，用于在图片无法显示或不能被看到的情况。例如，上面的例子可以做如下改进： 

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

测试alt 属性最简单的方式就是故意拼错图片文件名，这样浏览器就无法找到该图片从而显示备选的文本。如果我们将上例的图片文件名改为 dinosooooor.jpg，浏览器就不能显示图片，而显示:
1

图片的宽高​

<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">

在正常的情况下，这不会对显示产生很大的影响，但是如果图片没有显示（例如用户刚刚开始浏览网页，但是图片还没有加载完成），你会注意到浏览器会为要显示的图片留下一定的空间：

图片标题​

<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

这会给我们一个鼠标悬停提示，看起来就像链接标题:
2

视频嵌入​

video 元素​

<video src="rabbit320.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
  • controls

用户必须能够控制视频和音频的回放功能。你可以使用 controls 来包含浏览器提供的控件界面，同时你也可以使用合适的 JavaScript API 创建自己的界面。界面中至少要包含开始、停止以及调整音量的功能。

video 属性​

<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

  • width 和 height 你可以用属性控制视频的尺寸，也可以用 CSS 来控制视频尺寸。 无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。

  • autoplay 这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。

  • loop 这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。

  • muted 这个属性会导致媒体播放时，默认关闭声音。

  • poster 这个属性指向了一个图像的 URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。

  • preload 这个属性被用来缓冲较大的文件，有 3 个值可选：

    • "none" ：不缓冲
    • "auto" ：页面加载后缓存媒体文件
    • "metadata" ：仅缓冲文件的元数据

音频嵌入​

audio 标签​

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>

iframe 嵌入​

<iframe src="https://developer.mozilla.org/zh-CN/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/zh-CN/docs/Glossary">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

此示例包括使用以下所需的 <iframe>基本要素：

  • allowfullscreen 如果设置，<iframe>则可以通过全屏 API 设置为全屏模式（稍微超出本文的范围）。

  • frameborder 如果设置为 1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0 删除边框。不推荐这样设置，因为在 CSS 中可以更好地实现相同的效果。border: none;

  • src 该属性与 <video> 元素表示文档中的图像。<img>一样包含指向要嵌入文档的 URL 路径。

  • width 和 height 这些属性与 <video> 元素一样，用于设置 <iframe> 的宽度和高度。

表单​

form 标签​

<form action="https://example.com" method="get">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" value="John Doe">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" value="

">
    <label for="message">Message:</label>
    <textarea id="message" name="message">Hello there</textarea>
    <input type="submit" value="Submit">
</form>

在这个示例中，我们有一个简单的表单，包含以下元素：

  • action 属性：这个属性指定了表单提交的 URL。如果没有指定，表单将提交到当前页面。

  • method 属性：这个属性指定了表单提交的 HTTP 方法。默认值是 get，但是也可以使用 post。

  • label 标签：这个标签用于描述表单控件，以便于用户理解。它们通常与 input 或 textarea 标签一起使用。

  • input 标签：这个标签用于创建表单控件，例如文本字段、复选框、单选按钮等。

  • textarea 标签：这个标签用于创建多行文本输入控件。

  • submit 类型的 input 标签：这个标签用于创建提交按钮。

input 标签​

<input type="text" name="name" value="John Doe">
<input type="email" name="email" value=" ">
<input type="password" name="password" value="123456">

在这个示例中，我们有一个简单的表单，包含以下元素：

  • type 属性：这个属性指定了输入控件的类型。它可以是 text、email、password 等。

  • name 属性：这个属性指定了输入控件的名称。这个名称将用于提交表单时的数据。

  • value 属性：这个属性指定了输入控件的默认值。

textarea 标签​


<textarea name="message">Hello there</textarea>

在这个示例中，我们有一个简单的表单，包含以下元素：

  • name 属性：这个属性指定了输入控件的名称。这个名称将用于提交表单时的数据。

  • value 属性：这个属性指定了输入控件的默认值。

select 标签​

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

在这个示例中，我们有一个简单的表单，包含以下元素：

  • name 属性：这个属性指定了输入控件的名称。这个名称将用于提交表单时的数据。

  • option 标签：这个标签用于创建下拉列表中的选项。

button 标签​

<button type="button">Click Me!</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>

在这个示例中，我们有一个简单的表单，包含以下元素：

  • type 属性：这个属性指定了按钮的类型。它可以是 button、submit、reset 等。

  • value 属性：这个属性指定了按钮的文本。