程序员的网络日志

HTML入门

# HTML入门

HTML，是 Hyper Text Markup Language 这四个单词的首字母缩写，翻译为：超文本标记语言，主要用来编写网页。

我们在浏览器里看到的页面，其实都是浏览器将HTML文件渲染后的结果。

20200401105429546_13074

学习流程：编写HTML代码，保存为HTML文件，用浏览器打开，浏览器会将HTML文件解析为网页。

# 基本语法

# 标签

超文本标记语言，基本概念就是用标记去描述一段文本。类似于 语文中的 “形容词+名词，比如蓝色的天空” ，“蓝色的“ 是形容词，“天空 ”是名词；下面用一个HTML示例来讲解：

<p>这里是段落</p>

<p> 和 </p> 类似“形容词”，被包住的文本类似名词，这里的“形容词” 的含义是，说明中间的文本是一个段落（paragraph）

HTML还有各种各样的 “形容词”，通常称之为标签，例如 <p> 和 </p>也可称为 p标签，一个标签通常有开始标签和结束标签；所以，HTML的代码通常是下面这个样子：

<标签>一段文本</标签>

通常，第一个标签称为开始标签 或 开始标记：<标签>, 例如 <p>

第二个标签称为结束标签 或 结束标记：</标签>, 例如 </p>

# 元素

当用一组HTML标签将一段文字包含时，这段文字+包含文字的标签 称为 元素

<元素名> 元素资料</元素名>

一个元素的组成：开始标记 + 内容 + 结束标记 ，以下就是h1元素：

<h1> welcome to html</h1>`

元素名不区分大小写，但建议都小写。

元素的内容是开始标签与结束标签之间的内容

# 属性

元素可以拥有属性，这些属性知识提供该元素的一些额外信息。其基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

统一的书写方式：属性名，然后是等号“=” ，然后是用双括号括起来的属性值。

即键值对的格式： 属性名="属性值" 。

一个元素的属性顺序不重要。

在上面的语法中，

  1. 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
  2. 属性之间不分先后顺序，标签名与属性之间、属性与属性之间均以空格分开。
  3. 任何标签的属性都有默认值，省略该属性则取默认值。

比如:

<p width="100">这里是宽度为100的段落</p>

属性名 是 width

属性值 是 400

**注：**不包含空格的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。

# 入门示例

首先，打开记事本，输入以下代码：

<h1>这里是一级标题</h1>
<h1>这里是二级标题</h1>
<h1>这里是三级标题</h1>
<h1>这里是四级标题</h1>
<h1>这里是五级标题</h1>
<h1>这里是六级标题</h1>
<p>这里是段落</p>

然后保存，例如保存为 入门示例.txt 文件，然后修改后缀为 .html：

入门示例.txt -> 入门示例.html

然后用浏览器打开，如图：

image-20200401092503622

# 一个HTML文件的标准结构

一个HTML文件，通常有着相同的结构，这是为了标准化；不然人人一套标准，那么谁也读不懂谁的代码，浏览器页也不知道按照什么标准去解析HTML文件。

标准结构如下：

<html>
    <head>
        <title>标题，即浏览器标签栏显示的文本</title>
    </head>
  
    <body>
        <h1>标准的HTML文档结构</h1>
    </body>
</html>

讲解一下各个标签：

  • <html>：根标签，所有的HTML代码都必须在该标签内部
  • <head>：头标签，通常包含关于本HTML文件的信息，例如标题，该文档的作者是谁，用英文还是中文显示
  • <title>：标题，即浏览器标签栏显示的文本
  • <body>：浏览器要显示内容都在该标签内

打开后如图：

image-20200401093435612

通常来说，不按照标准结构也可能正常显示，但也可能不会正常显示，所以最好还是按照标准的HTML结构。

# 关于HTML文件中的空白

浏览器会忽略大多数空白（制表符，空格，回车），会根据标记来确定哪里分行分段、为了可读性、美观。一般多个空格只会变成一个

<p>--- 多 个       空格          -----</p>

显示如下：

 --- 多 个 空格 -----

忽略换行，例如有下面这样一个HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>--- 多 个       空格          -----</p>

	<p>一个p段落</p>


  

	<p>另一个p段落</p>
</body>
</html>

两个p段落之间虽然有多个行空白，但被浏览器中被忽略了。上面的HTML文件经过浏览器打开后如下：

--- 多 个 空格 -----
一个p段落
另一个一个p段落

# HTML标签关系

标签的相互关系就分为两种：

1.嵌套关系

<head>  
    <title> </title>  
</head>

2.并列关系

<head>
</head>

<body>
</body>

CSS