“本文部分内容参考 网道 HTML 教程
”
一、HTML 简介
HTML 的全名是“超文本标记语言”（HyperText Markup Language），上世纪 90 年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。
1. 理解“超文本标记语言”
“超文本”，指的是“超链接”，点击超链接即可跳转到其他网页。
“标记”，指的是“标签”，将某一段文本用“标签”标记起来，这段文本便有了特殊含义或功能。
二、HTML 起步
1. 基本结构
codesandbox 生成的 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>
接下来对这个结构中的所有内容进行介绍。实际开发中，会基于这个结构添加更多的内容，其他内容以后介绍。
2. <!DOCTYPE html>
问：浏览器支持多种文档类型，如 SVG、XML、HTML 等，如何让浏览器知道这是一个 HTML 文档？
答：使用 doctype 声明文档类型，告诉浏览器这是一个 HTML 文档，浏览器就会用 HTML 语法来解析这个文档。
<!DOCTYPE html>
3. <html>
html 标签是网页的根标签，其他标签都是它的子标签。一个网页，只能有一个 html 标签。
<html>
其他标签...
</html>
html 标签的 lang 属性，表示网页内容的语言。
<!-- en 表示英语 -->
<html lang="en">
</html>
<!-- zh-CN 表示中文 -->
<html lang="zh-CN">
</html>
Chrome 浏览器的“鼠标右键-翻译”功能，就是根据这个 lang 属性作为参考辅助。
4. <head>
head 标签是 html 标签的子标签，用于放置网页的元信息。它里边的内容不会在网页中显示。
<html lang="zh-CN">
<head></head>
</html>
5. <body>
body 标签也是 html 标签的子标签，同时也是 head 标签的兄弟标签。它里边的内容会在网页中显示。
<html lang="zh-CN">
<head></head>
<body></body>
</html>
6. <meta>
meta 标签放在 head 标签中，用于设置或说明网页的元数据，网页中可以有多个 meta 标签。
设置网页的字符编码
<meta charset="UTF-8">
以上代码，使用 charset 设置网页的字符编码为 UTF-8。也可以设置为其他编码，如 GBK、GB2312，但一般总是使用 UTF-8 的编码格式，因为 UTF-8 支持地球上所有的文字。
适配移动端
<meta name="viewport" content="width=device-width, initial-scale=1.0">
以上代码，可以让你的网页在移动屏幕上也能正常浏览。
当然，完整的“viewport”是下面这样：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
让 IE 使用最新的内核
<meta http-equiv="X-UA-Compatible" content="ie=edge">
以上代码，可以让你的网页在 IE 中运行时，使用 IE 最新的内核来解析网页。
7. <title>
title 标签用于设置网页的标题。
<title>Static Template</title>
8. <h1>
h1 标签，用于设置网页内容的一级标题。
<h1>This is a static template, there is no bundler or bundling involved!</h1>
转载请注明出处
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！