一、简介
HTML是超文本标记语言(HyperText Markup Language)的缩写,是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
HTML 不是一门编程语言,而是一种用于定义内容结构的标记语言。在浏览器中看到的任何网页背后都是一个 HTML 文档,只要在网页上点击鼠标右键选择查看源代码就可看到。
HTML文档的后缀名为html或htm。
二、开发工具
推荐使用VS Code,从官网下载安装。
运行该软件后,点击软件界面左侧第五个图标即可进行插件安装。推荐安装以下插件:Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence等。
运行code后,请注意在File -> Auto Save 选中,如此code将自动保存我们的代码
三、HTML文档结构
html的基本结构如下:
<!DOCTYPE html> 声明文档类型。现在可有可无。
<html> 元素是 HTML 页面的根元素
<head> 这个元素是一个容器,它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。
<meta charset="utf-8"> 这个元素设置文档使用utf-8字符集编码
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 指定页面的图标,出现在浏览器标签上。
<title>页面标题</title> 元素描述了文档的标题,浏览器标签名
</head>
<body> 元素包含了可见的页面内容,如文本,图片,音频,游戏等等。
<h1>标题</h1> 元素定义一个大标题
<p>段落</p> 元素定义一个段落
</body>
</html>
开发工具 code 中我们已经安装了open in browser插件,因此在 code 的编辑区点击鼠标右键即可看到快捷方式将该文件在浏览器中打开。如下图所示:
就可以看到如下界面:
但由于没用css美化,这个界面很丑陋。
四、HTML文档结构分析
HTML 使用"标记"(markup)来注明文本、图片和其他内容,以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如 ,
检查我们刚创建的 HTML 文档你会发现,整个 HTML 就由一个个元素组成(可以嵌套),而元素则一般由一对标签(tag)构成。
五、HTML 文档相关说明
- 注释
注释是被浏览器忽略的,而且是对用户不可见的,它们的目的是允许你描述你的代码是如何工作的和不同部分的代码做了什么等等。
为了将一段 HTML 中的内容置为注释,你需要将其用特殊的记号<!- -
和- ->
包括起来, 比如:
<p>注释外</p>
<!--<p>注释内</p>-->
效果:
- 空元素
一般来说,元素都拥有开始标签,内容,结束标签,如<p></p>。但有一些元素只有一个开始标签,通常用来在此元素所在位置插入/嵌入一些东西,如<br>, <hr>, <input>, <img>, <a>等等。我们称其为空元素,如下:
<!-- 换行 -->
<p>CCTV1<br>CCTV2</p>
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>
网页展示:
3.属性
元素是可以有相关属性的。属性包含元素的额外信息,这些信息不会在浏览器中显示出来。
<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试!</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">
网页展示:
- 标题(heading)
HTML 提供了从大到小6级标题,分别是:<h1> ~ <h6>,每一级标题字号递减,如下所示:
<h1>This is heading 1</h1>
<p>text.</p>
<hr>
<h2>This is heading 2</h2>
<p>text.</p>
<hr>
<h3>This is heading 3</h3>
<p>text.</p>
<hr>
<h4>This is heading 4</h4>
<p>text.</p>
<hr>
<h5>This is heading 5</h5>
<p>text.</p>
<hr>
<h6>This is heading 6</h6>
<p>text.</p>
网页展示:
5.文本格式
需要知道的格式:
<p>You can use the mark tag to &