0
点赞
收藏
分享

微信扫一扫

HTML入门：语法与标签语义化

毅会 2021-09-26 阅读 61
前端笔记视觉艺术

Web开发

  • 什么是Web开发？
  • Web开发能做什么？
  • Web开发工程师的职责

认识浏览器

介绍

学习前端开发一定不能离开浏览器，目前全世界使用的主流浏览器有五个：Internet Explorer、Firefox、Safari、Chrome 浏览器和 Opera。根据 StatCounter 浏览器统计数据，目前（2020 年 10月）Safari 和 Chrome 浏览器的总市场占有率将近 84%（Chrome 占 66.2%）。我们今后也会基于Chrome浏览器为主要浏览进行学习和开发。

浏览器的主要功能

浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您选择的网络资源如：HTML 文档、 PDF、图片或其他的类型。资源的位置由用户使用 URI（Uniform Resource Identifier，统一资源标示符）指定（我们可以简单的将URI理解为资源的网址）。

浏览器解释并显示 HTML 文件的方式是在 HTML 和 CSS 规范中指定的。这些规范由网络标准化组织 W3C 进行维护。

浏览器的主要组件:

  1. 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
  2. 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
  3. 呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
  4. 网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
  5. 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。
  6. JavaScript 解释器。用于解析和执行 JavaScript 代码。
  7. 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie、HTML5新规范 定义的“网络数据库”。

呈现引擎

呈现引擎（Rendering Engine）现在流行称为浏览器内核，目前五大浏览器的内核分别为：

  1. IE * Trident
  2. Edge * EdgeHTML
  3. firefox * Gecko
  4. Chrome * Blink （Blink 其实是 WebKit 的分支）
  5. Opera * Presto（已废弃） * Webkit
  6. Safari * Webkit

代码开发工具

俗话说：“工欲善其事,必先利其器”。前端开发也是一样我们需要在Web编辑器的帮助下提高我们的开发效率。

在这里推荐给大家几个主流的编辑器：

  1. Sublime Text 是一款用于代码、标记和散文的精致文本的高效率的程序书写编辑器。官方地址
  2. WebStorm 是 jetbrains 公司旗下一款 JavaScript 开发工具，被称为“最强大的HTML5编辑器”但是对电脑配置有较高要求并且需要付费。官方地址
  3. VScode 当今最流行的免费开源现代化轻量级代码编辑器,可以通过安装各种插件支持几乎所有主流的开发语言及框架。官方地址
  4. HBuilder 一款支持 HTML5 的 Web 开发编辑器。官方地址
  5. Atom 是 github 专门为程序员推出的一个跨平台文本编辑器。支持CSS，HTML，JavaScript等网页编程语言。官方地址

学习HTML

HTML概念

HTML 是 HyperText Markup Language (超文本标记语言)的缩写，是一款描述网页的标记语言(结构语言)。
它包括一系列标签，通过这些标签不仅可以说明文字文本还可以说明图形、动画、声音、表格、链接等。

注意：HTML这种结构语言并不是编程语言（不具备编程语言功能）

HTML发展史

HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。

HTML 2.0：1995年11月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。

HTML 3.2：1997年1月14日，W3C推荐标准。

HTML 4.0：1997年12月18日，W3C推荐标准。

HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。

HTML 5：2014年10月28日，W3C推荐标准。HTML5极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。

HTML主要结构

我们使用编辑软件创建一个文件后缀名为 .html 的文件（html文件）,打开 html 文件在文件中使用快捷键!+tab生成html文件的结构骨架（不同的编辑软件快捷键有所不同可以查阅对应的文档）如下图：

我们来看看最简单的HTML长什么样：

<!doctype html> <!-- document type 文档类型,定义当前html文档遵循的版本规范,这里遵循html5规范 -->
<html lang="en"> <!--html 文档根标签,文档所有内容必须要存放在这里 lang="en"告诉浏览器该文档中使用的语言为英语 -->
<head> <!-- 头部标签,主要存放设置网页内容的东西 -->
    <meta charset="UTF-8"> <!-- 元数据标签,这里表示是网页使用UTF-8字符集编码,正确的字符集编码可以保证网页不会乱码 -->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!-- 元数据标签,这里表示是定义网页可见区域的初始宽度,和网页缩放用于移动端应用开发 -->
    <title>Document</title> <!-- 标题标签,标签内的文本内容会作为当前网页标签栏的标题 -->
</head>
<body> <!-- 文档主体标记, 该标签内的所有内容都会展示在浏览器页面的可视区域内 -->

</body>
</html>

上面的代码就是一个很基本的HTML结构了，我们来简单的讲解下上面文档中每个标签以及他们的功能：

标签名 描述 功能
<!doctype html> 文档类型标记 声明html版本
<html> 根控制标记 此元素可告知浏览器其自身是一个 HTML 文档。
<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体
<head> 头控制标记 用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
<title> 文件标题声明标记 用于定义文档的标题
<meta> 文档元数据声明标记 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词
<body> 文档主体标记 元素包含文档的所有浏览器可视区域内容（比如文本、超链接、图像、表格和列表等等。

通过上面对HTML结构的简单讲解相信同学们，对HTML语法有了一定的认识：

我们通过一个HTML中基础p标签元素对HTML标签语法进行进一步的讲解：
[图片上传失败...(image-af84cf-1623594555779)]
上面这个元素的主要部分有：

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

当然有些元素是可以设置元素属性的，什么是元素属性我亲看下面的例子：
属性应该包含：

  • 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
  • 属性的名称，并接上一个等号。(在 HTML5 规范中部分属性无需设置属性值)
  • 由引号所包围的属性值。

HTML 控制标记（标签）的类型

在HTML中控制标记一共分为四类：

  1. 无属性单一型标记。格式：<标记名称> 如：<br>
  2. 有属性单一型标记。格式：<标记名称 属性="属性值"> 如：<hr width="80%">
  3. 无属性对称型标记。格式：<标记名称>…</标记名称> 如：<title>…</title>
  4. 有属性对称型标记。格式：<标记名称 属性="属性值">…</标记名称> 如：<html lang="en">…</html>

HTML语法规范

良好的代码风格会让项目更清晰，利于维护。在企业中良好的代码风格也是作为it开发人员必要标准。

  • 标签声明

    1. HTML标签名、类名、标签属性和大部分属性值统一用小写。
    2. 对称型标签结束标记中必须包含结束符号"/"。例：<html></html>。

  • 元素注释
    作用：我们开发一段html代码,为了以后便于理解以及他人能读懂你代码特殊意义,我们可以使用 HTML 注释来帮忙。注释的功能就是用来说明、注解、备注。

    1. HTML 统一使用 `` 方法在文档中进行注释，并且规定注释内容与注释符号两端间隔一个空格。
    2. 注释位于要注释代码的上面，单独占一行

  • 标签嵌套

    1. HTML允许元素嵌套，并且HTML标签存在嵌套规则这个我们会在今后的课程中讲解
    2. 若元素间存在嵌套关系，称嵌套元素为父元素，称被嵌套元素为子元素。同一个父元素元素中的同级子元素被称为兄弟元素。例：
<html>
    <head></head>
    <body></body>
</html>

HTML标签的语义化

语义化就是通过每个标签自身的语义，给网页不同的地方使用一个最为合理的标签，让结构更清晰直观。如：Hn标签适合表示标题因为他拥有粗体和较大的字号、<strong>,<em>用来区别于其他文字，起到了强调的作用、列表和表格同样明显的告诉你他们是做什么的。

为什么要有语义化标签

  1. 方便代码的阅读和维护
  2. 对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。
  3. 语义 Web 技术有助于利用基于开放标准的技术，从数据、文档内容或应用代码中分离出意义。

HTML 常见语义标签

标签名 描述
<h1></h1> ... <h6></h6> 定义标题，用于修饰文本，块级标签。
<a></a> 超链接用于页面之间或页面内部的跳转
<p></p> 定义段落，用于修饰文本，块级标签。
<div></div> 定义一个块级元素，div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
<span></span> 标签被用来组合文档中的行内元素。以便通过样式来格式化它们。
<pre></pre> 修饰文本，保留换行符和空格，一般用于展示代码，块级标签。
<em></em> 把文本定义为强调的内容。
<dfn></dfn> 定义一个定义项目。
<code></code> 定义计算机代码文本。
<samp></samp> 定义样本文本。
<kbd></kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var></var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite></cite> 定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。
<strong></strong> 用于修饰加粗文本，行内标签。
<br> 定义换行，块级标签，该标签没有语义性
<i></i> 用于修饰斜体文本，行内标签，该标签没有语义性
<b></b> 用于修饰加粗文本，行内标签，该标签没有语义性

HTML 5 新增语义化标签

HTML5 引入了很多具有语义化、提升页面可访问性的 HTML 元素

标签名 描述
<header> 它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。
<main> 用于呈现网页的主体内容，且每个页面只能有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等可以在多个页面中重复出现的内容。
<article> 是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者新闻文章。
<nav> 用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。对于页面底部辅助性质的站点链接，不需要使用 nav，用 footer 会更好。
<footer> 与header和nav类似，footer也具有语义化特性，可以使辅助设备快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。
<section> section也是一个 HTML5 新标签，与article标签的语义含义略有不同。article用于独立的、完整的内容，而section用于对与主题相关的内容进行分组。它们可以根据需要嵌套着使用。举个例子：如果一本书是一个article的话，那么每个章节就是section。当内容组之间没有联系时，可以使用div。

我们通过下面这个案例来认识下HTML5新增语义化标签该如何使用：

<body>

<header>
    <h1>>Training with GEC</h1>
    <nav>
        <ul>
            <li><a href="#stealth">Stealth &amp; Agility</a></li>
            <li><a href="#combat">Combat</a></li>
            <li><a href="#weapons">Weapons</a></li>
        </ul>
    </nav>
</header>

<main>
    <section id="stealth">
        <h2>Stealth &amp; Agility Training</h2>
        <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
        <article><h3>No training is NP-complete without parkour</h3></article>
    </section>
    <section id="combat">
        <h2>Combat Training</h2>
        <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
        <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
    </section>
    <section id="weapons">
        <h2>Weapons Training</h2>
        <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
        <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
    </section>
</main>

<footer>&copy; 2020 GEC</footer>

</body>
举报

相关推荐

HTML 语义化标签

html前端

HTML语义化标签

python爬虫开发语言

HTML —— 语义化标签

html前端学习

html语义化标签

html前端

html--语义化标签

html进度条ideHtml/CSS前端开发

HTML 语义化标签-新增标签介绍

语义化html5ide系统/运维

Web语义化(HTML5语义化标签)

前端html5html

html5语义化标签

gunicornnginxdjango

html与语义化

html前端锚点自定义Html/CSS前端开发

HTML5和语义化标签

html5搜索引擎html
0 条评论