学习 HTML 基础

时间：2020-12-29 00:08:45 收藏：0 阅读：45

学习 HTML

目标：学习如何使用 HTML 来创建站点

HTML 简介

首先看一段 HTML 示例：

<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言(markup language)
HTML 使用标记标签来描述网页

HTML 标签的特性：

关键词由尖括号包围而成，如
成对出现，如 <b> 和 </b>，其中 <b> 为开始标签(也称为开放标签)，</b> 为结束标签(也称为闭合标签)

网页 = HTML文档

Web客户端和服务器之间的交互基于超文本传输协议(Hypertext Transfer Protocol，HTTP)，该协议是建立在 TCP 协议之上的。

Web 客户端(即浏览器)打开一个到 Web 服务器的连接，请求某些内容
Web 服务器响应所请求的内容，然后关闭连接
Web 客户端读取这些内容，再将其显示在屏幕上

可以视作 Web 浏览器的作用是读取 HTML 文档，使用标签来解释页面的内容，并以网页的形式显示出来。

对最初的实例的解释：

<html> 与 </html> 之间的
<body> 与 </body> 之间的内容为可见的页面内容
<h1> 与 </h1> 之间的内容被显示为标题
<p> 与 </p> 之间的内容被显示为段落

HTML 编辑器

HTML 编辑器的选用

可以选用专业的 HTML 编辑器(如Adobe Dreamweaver、Microsoft Expression Web等)来进行 HTML 编辑的任务，同时也推荐使用 Notepad 或 TextEdit 等文本编辑器来学习 HTML。

选用 VS Code 后的简单配置

我选用了 VS Code 作为主用的 HTML 编辑器。由于 VS Code 默认在其控制台中查看 HTML 页面，这使得我们的调试以及查看效果很不方便，于是我们首先安装 Open In Browser 拓展插件，安装成功后通过快捷键 Alt + B 即可在默认浏览器打开当前的 HTML 页面；通过快捷键 Shift + Alt + B 可以选择其他浏览器打开。

技术分享图片

HTML 元素

HTML 文档是由 HTML 元素定义的。HTML 元素是指从开始标签到结束标签的所有代码，即：

<p>This is a paragraph</p>

对于以上的代码，This is a paragraph在开始标签(<p>)与结束标签(</p>)之间，即为元素内容。

以开始标签起始，直至结束标签终止
某些 HTML 元素具有空内容(empty content)，称为空元素，比如 <br> (定义换行)。所有元素都必须被关闭，而空元素则在开始标签中被关闭(在开始标签中添加斜杠)，因此 <br /> 为关闭空元素的正确方法
大多数 HTML 元素可拥有属性
HTML标签对字母大小写不敏感，但推荐使用小写标签，即尽量使用 <p> 而不使用 </p>
HTML 文档由嵌套的 HTML 元素构成
虽然省略结束标签后大多数浏览器仍可以正确显示 HTML，但未来的 HTML 版本不允许省略结束标签，因此不要忘记结束标签

HTML 属性

HTML 标签可拥有属性。HTML 属性可以提供有关 HTML 元素的附加信息。

属性以类似name = "value"的名称/值对的形式出现
属性在 HTML 元素的开始标签中规定
HTML 属性对字母大小写不敏感，但推荐使用小写属性
属性值应被包括在引号内，单引号、双引号均可，推荐使用更常用的双引号

<!-- 对标题的对齐方式添加附加信息 -->
<h1 align="center">居中的标题</h1>

<!-- 
对链接的地址添加附加信息
HTML链接由<a>标签定义，链接的地址在href属性中指定
-->
<a href="http://www.w3school.com.cn">This is a link</a>

HTML 标题与段落

HTML 标题

HTML标题由 <h1> ~ <h6> 等标签定义，其中由 <h1> 到 <h6>，标题字体由大至小。

将标题利用好以清晰地呈现文档的结构
<hr /> 标签可用于创建水平线，用于分隔内容
HTML 会默认自动地在块级元素(如段落、标题等)前后添加一个额外的空行

HTML 段落

HTML 段落以标签 <p> 定义。在显示页面时，浏览器会移除源代码中多余的空格/空行，即源代码中所有连续的空行都会被显示为一个空格。

HTML 样式与格式化

HTML 的 style属性

原文：https://www.cnblogs.com/nickname/p/14204265.html