提示:有任何问题可以下方评论留言,我会抽出时间为大家解答的!
学习鸿蒙开发最好能够先了解些前端开发的基本知识,前端开发主要使用 HTML,CSS3 和 Javascript,这些语言能够帮助我们搭建各种 Web 网站。本文是精炼的 HTML5 学习手册,旨在帮助没有相关学习经验的朋友快速入门 HTML5,有基础的朋友也可以将之作为一份参阅复习文件。要认识到,想完全掌握这样一门互联网核心技术还需要足够的项目训练。对于鸿蒙开发而言,我们只需要对 HTML5 有基本的认识和了解即可,本文因此能很好满足鸿蒙开发学习者的需求。
HTML 是(Hyper Text Markup Language)的缩写,即“超文本标记语言”。
使用 HTML 语言可以在网络文档(网页)上,呈现出丰富的元素,如:文字、图片、音频、视频、动画、表格、链接等。
HTML5 其实就是 HTML 的版本号,是最新的 HTML,主要的提升在于浏览器的多平台兼容上,包括:PC、平板电脑、手机、智能 TV 等。
开发工具:早期的网络文档(网页)编辑都是在文本文档中编辑的(理论上软件开发可以用任意一种文本编辑器做到,实用性考虑没有必要)。我们可以选择集成开发工具(IDE)如:HBuilder(x)、VSCode 等。
网页文档的文件拓展名一般是.html 或者.htm
Win如何显示文件拓展名:【文件资源管理器——此电脑——查看——check 文件拓展名】
【新建文档内容编辑并保存(by 记事本),预览文档(by 任意一种浏览器打开即可)】
普通方式:
1.新建文本文档——另存为其他格式文档(这个时候可以选择另存路径,文件名,文件类型)
2.新建文本文档——直接属性修改文件名和文件拓展名
**IDE方式:**以 VS Code 为例:
1.直接新建一个文件夹(自定义命名,位置可以选择桌面也可以选择为软件安装路径下)——将新建的文件夹拖入 VS Code 窗口/打开文件夹选择新建的文件夹——文件夹下新建文本(格式:名称.拓展名)
2.于 VS Code 窗口内
文件资源管理器——查看——显示——(勾选)文件拓展名
新建文本文档——(输入源码)——另存为其他类型文档(修改后缀)
右击文档——打开方式——记事本
右击文件——打开方式——浏览器打开
HTML严格并不算编程语言,而是一种标记语言,用于创建网页的结构和内容。现代语言类型就包括超文本标记语言(HTML),编程语言(面向对象语言如 Java,Python 等,函数式语言如 Haskell,Scala 等,脚本语言如 Javascript,PHP 等),样式表语言如常见的层叠样式表(CSS)。
值得一提的是,HTML 由一系列标签组成,每个标签描述了网页中的一个元素如段落、标题、图像等,它提供了一种结构化的方式来组织信息,并通过浏览器将网页呈现给用户。
编程语言是一种编写计算机程序的形式化语言,它的编写具备一定的语法和规则,程序员在编写代码过程中需要遵守这些语法和规则。
样式表语言用于描述网页的外观样式。以常见的层叠样式表为例子(CSS),它可以帮助 HTML 元素实现“可视化”提升用户体验,比如颜色,大小,布局等,将 CSS 与 HTML 结合使用,可以更好得控制网页外观和布局。
单标记:<标记名/>
应用:<标记名 属性=“值” 属性=“值” 属性=“值”…/>
双标记:<标记名>标记名>
应用:<标记名 属性=“值” 属性=“值” 属性=“值”…>标记名>
两种标记格式差异明显,最大区别在于:单标记内部不能再存放其他内容了,而双标记内部可以继续存放其他内容。
如何理解:将网络文档(网页).html 结构视作一棵树,自唯一的根开始向上分叉。双标记**<标记名>标记名>视作树枝,可以继续分叉,单标记<标记名/> **视作树叶,无法分叉。单标记是最终节点。
基本标记结构如下:
DOCTYPE HTML>
<html>
<head>
<title>网页测试title>
head>
<body>
一个基础测试项目
body>
html>
表示文档声明类型,DOCTYPE 是 Document Type 的简写。HTML 文档基础结构中第一行
就是 HTML 的 DOCTYPE 声明。
标记(是 HTML 文档的根元素标签,除顶部文档类型声明
以外,所有HTML 文档均以
标签开始,以
标签结束),是双标记。它是整个网络文档(网页)的根标记,所有的内容都必须放在
标记中。我们可以把它理解为唯一的树根。
标记的内部,分叉出了
标记(也叫做首部标签)和
标记(也叫做主体标签)。
标记,也是双标记。它表示网页的页头部分。
标记,同样是双标记。它表示网页的正文部分。
标记的内部,又分叉出了
标记,同样是双标记,它表示页头的标题部分。
⭐️要注意的是,标记中的内容不会显示在网页的页面中。
标记中可包含
和等标记,用于声明页面标题、字符集和关键词等。
和
标记标注网页标题,该标题会显示在浏览器窗口的标题栏中,若省略
标记则网页标题会显示为“无标题文档”。建议在网页代码中保留该标记,因为
标记还能用于当网页被添加到收藏夹时显示标题,以及作为页面标题显示在搜索引擎结果中。
标记用于为页面上所有的链接设置默认 URL 地址或目标 target。当HTML文档中使用了相对路径时,浏览器会用
标记指定的 URL 进行补全 。
标记如其本意"元语言"一致,
标记内部用于提供当前 HTML 文档的元数据,这些数据不会直接显示在网页上,但是对于机器是可读的,适用于搜索引擎索引。通常
标记可用于定义网页的字符集、关键词、描述、作者等信息。**字符集声明:**Charset 是 Character Set 的简写,含义为字符集设置。浏览器统一默认的字符集是 ISO-8859-1 西文字符集,如果使用了其他字符集,浏览器需知道使用何种字符集才能正确地显示 HTML 页面。HTML 文档使用标记进行字符集声明。万维网初期使用的是 ASCII 字符集,该字符集支持数字 0-9、英文字母大写 A-Z 和小写 a-z,以及部分特殊字符。由于很多国家使用的字符不被ASCII 支持,因此浏览器统一默认的字符集是 ISO-8859-1 西文字符集。以 UTF-8 字符集为例 ,HTML5 中声明字符集的方式如下图:
<meta charset="utf-8">
**补充:**字符集是一组字符和它们对应的编码规则。在计算机科学中,字符集是将字符映射到数字编码的规则集合。这样做是为了使计算机能够存储、传输和处理文本数据。常见的字符集有:
ASCII (American Standard Code for Information Interchange): ASCII 是最早和最基础的字符集,它定义了128个字符,包括数字、字母、标点符号和控制字符。
ISO-8859: 这是一系列的字符集,每个字符集都为某一特定语言或一组语言提供支持。例如,ISO-8859-1 支持西欧语言,而 ISO-8859-5 支持西里尔语言。
Unicode: Unicode 是一个更加全面和现代的字符集,它设计用来包含世界上所有的字符。Unicode 定义了超过130,000个字符,包括各种语言的字母、标点符号、符号、表情符号等。
UTF-8: UTF-8 是一种用于 Unicode 的编码方式,它使用可变长度的编码,能够有效地表示 Unicode 中的所有字符。UTF-8 是互联网上使用最广泛的字符编码方式。
UTF-16: UTF-16 也是一种 Unicode 编码方式,它使用两个或四个字节来表示一个字符,适合于大部分非常用字符。
UTF-32: UTF-32 使用固定长度的四个字节来表示每一个字符,这使得它在处理和存储上有些不够高效,但简化了许多计算。
GB2312、GBK 和 GB18030: 这些是中国的字符集标准,分别用于简体中文。GB2312 支持简体中文的一部分字符,GBK 是 GB2312 的扩展,而 GB18030 是更加全面的字符集,支持包括繁体中文在内的所有汉字。
选择哪种字符集取决于你的应用需求。如果你的应用主要在某一特定地区使用,可能需要选择支持该地区语言的字符集。如果你的应用需要全球化,那么 Unicode 及其编码方式(如 UTF-8)是一个很好的选择。
**关键词声明:**使用标记定义网页关键词(keywords)的用法如下:
<meta name="keywords" content="html5,css3"/>
**页面描述声明:**使用标记定义页面描述(description)的用法如下, 搜索引擎会根据
标记中的 name 和 content 属性来索引网页。
<meta name=