[Day 03 - HTML] 想写网页，就从HTML开始

HTML (HyperText Markup Language，超文本标记语言)，是一种用来建立网站结构的语言，透过包含标签 (Tag) 与内容 (Content) 的元素 (Element) 告诉浏览器该如何呈现网页，想写网页的话，就要从 HTML 开始学习。

HTML 架构

元素 (Element) 的组成

元素就是标记 (Markup)的概念，将一段内容利用标签标记起来，赋予内容特定的特性。通常元素架构会长成这样：

<tag attribute="value">我是元素内容</tag>
  • 开始标签 <tag>、结束标签 </tag>： 元素通常就是由成对的标签组成，标签的意义在於将网页以结构化来呈现。
  • 元素的内容： 两个标签之间是元素的内容，也就是会呈现在网页中的文字。
  • 属性 (Attribute)： 用来定义标签的各种资讯

HTML的文件长什麽样子？

直接开启 CodeSandbox 的 Static Template，看一看 HTML 的文件要素有哪些。

在 index.html 里你会看到：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <!-- 可以暂时忽略下面两行 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
    <h1>This is a static template, there is no bundler or bundling involved!</h1>
  </body>
</html>
  • <!DOCTYPE html>：告诉浏览器文件属於什麽类型
  • <html></html>：包住网页的所有内容
  • <meta charset="UTF-8">：指定文件的编码格式
  • <title></title>：指定网页的标题
  • <head></head>：宣告一些不会让使用者看到的网页资讯，比如：标题、外部连结、脚本等等。
  • <body></body>：呈现给使用者的网页内容，也是主要进行网页编辑的区块。

开始写网页吧！

了解 HTML 文件的架构後，就让我们直接在 <body></body> 内依序新增几个常用的元素标签来编辑网页。

标题 <h1>~<h6>

<h1>我是标题h1</h1>
<h2>我是标题h2</h2>
<h3>我是标题h3</h3>

段落文字 <p>

<p>我是是段落文字段落文字段落文字</p>

超连结 <a>

<a href="https://www.youtube.com/" >Youtube连结</a>

清单 <ul>/<ol>/<li>

  • 无序清单 (Unordered lists)：<ul>
  • 有序清单 (Ordered lists)：<ol>
  • 清单项目 (List item)：<li> 
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>

图片 <img>

<img src="图片连结" alt="替代文字">

是不是很简单！只要针对网页的内容去活用各种标签，你就能做出网页罗

区块元素

除了能用标签划分单独的文字内容，HTML 提供区块元素，让网页的内容可以以区块作区分，清楚的划分网页的结构。

<div>

基本上只是一个用来包裹内容的容器元素，本身不代表任何意义。

<div>
    <h1>我是标题h1</h1>
    <p>我是是段落文字段落文字段落文字</p>
</div>

语意化标签

所以为了能清楚表示区块的意义，HTML5 还提供了语意化的标签，赋予标签意义，加强文件的结构化。

分析一下 Notion官网 的结构：

  • 页首标签 — <header>：表示页面或区块内的首要部分
  • 导览列 — <nav>：网站的导航列
  • 主要区块 — <main>：页面的主要区块，一个页面只能有一个。
  • 区块 — <section>：单独区块，通常里面含有标题。
  • 页尾 — <footer>：页面的结尾，通常会用来表示一些网站资讯或导览、连结。

小结

这个章节提到一些 HTML 的基本知识，当然除了文章里面提到的各种元素和标签，HTML 还提供了很多样式的元素，让我们能够呈现更多不同的网页资讯。如果你想要踏入前端这个领域，就一定一定要去学习更多标签的使用！

想了解更多 HTML 元素可参考：HTML elements reference

目前只有白底黑字的网页一点都不好看！所以明天就让我们来会一会让网站变漂亮变美的 — CSS 魔术大师。

如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅喔❤️

参考资料


<<:  ★ 2021 IPBC Taiwan｜创新科技论坛－智胜5G 领航未来! ★ 经济部工业局 主办 !

>>:  Flutter基础介绍与实作-Day2 Flutter的安装流程和环境配置

[第十六只羊] 迷雾森林舞会X 热线你和我 hotwire 导入

天亮了 昨晚是平安夜 关於迷雾森林故事 水底世界 就在泰迪跳进水中游水的瞬间 水流与泰迪身上的的毛高...

JavaScript Day20 - AJAX(2)

ES6：fetch fetch()：Fetch API 提供了一个能获取包含跨网路资源在的资源介面，...

AutoCAD ActiveX #5-1 Selection Filters (0)

Command:filter filtertype filterdata filtertype fi...

The Effective CISSP考试攻略

考试的难易 一个好的考试，通常会让你准备的很辛苦！但通过考试後会让你一直駡，怎麽考出来的题目没有想像...

[DAY10] 用 Automated ML 快速开发

DAY10 用 Automated ML 快速开发 今天我们来体验一下 AML 的 Automate...