Web学习历程（一）

╰半夏微凉° 2022-12-06 15:13 85阅读 0赞

HTML学习历程（一）

# 初识HTML #

HTML 全称为 HyperText Markup Language，译为**超文本标记语言**。  
HTML 不是一种编程语言，是一种描述性的**标记语言**。  
作用：HTML是负责描述文档语义的语言。

## 概念：超文本 ##

所谓的超文本，有两层含义：  
（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。  
（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。

## 概念：标记语言 ##

HTML 不是一种编程语言，是一种描述性的标记语言。这主要有两层含义：  
（1）标记语言是一套标记标签。比如：标签< a >表示超链接、标签 < img >表示图片、标签< h1 >表示一级标题等等，它们都是属于 HTML 标签。说的通俗一点就是：网页是由网页元素组成的，这些元素是由 HTML 标签描述出来，然后通过浏览器解析，就可以显示给用户看了。  
（2）编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。

## HTML是负责描述文档语义的语言 ##

HTML 格式的文件是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述语义，这些标签在浏览器页面上是无法直观看到的，所以称之为“超文本标记语言”。  
接下来，我们需要学习 HTML 中的很多“标签对儿”，这些“标签对儿”能够给文本不同的语义。  
比如，面试的时候问你，< h1 > 标签有什么作用？  
正确答案：给文本增加主标题的语义。  
错误答案：给文字加粗、加黑、变大。  
关乎“语义”的更深刻理解，等接下来我们学习了各种标签，就明白了。

# HTML的专有名词 #

*  网页 ：由各种标记组成的一个页面就叫网页。
 *  主页(首页) : 一个网站的起始页面或者导航页面。
 *  标记： 比如< p >称为开始标记 ，< /p >称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
 *  元素：比如< p >内容< /p >称为元素.
 *  属性：给每一个标签所做的辅助信息。
 *  XHTML：符合XML语法标准的HTML。
 *  DHTML：dynamic，动态的。javascript + css + html合起来的页面就是一个 DHTML。
 *  HTTP：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，FTP：文件传输协议。

# 书写第一个HTML页面 #

我们打开 VS Code 软件，新建一个文件，名叫第一个HTML.html（注意，文件名是第一个HTML，后缀名是html），保存到本地。  
紧接着，在文件里，输入　html:5，然后按一下键盘上的Tab键，就可以自动生成如下内容：

上面的内容，就是 html 页面的骨架。我们在此基础之上，新增几个标签，完整代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>    
    <meta charset="UTF-8">    
     　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
     　　<title>Document</title>
    </head>
    <body>
        <h1>我是一级标题</h1>    
        <img src="" alt="">    
        <a href="https://www.jd.com">我是超链接，可以点击一下</a>
    </body>
    </html>

标签写完之后，我们用 chrome 浏览器打开上面这个test.html文件，看看页面效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5NjM1Mw_size_16_color_FFFFFF_t_70_pic_center]  
到此，第一个简单的 HTML 页面就写完了。是不是很有成就感？

# ＨＴＭＬ结构详解 #

HTML标签通常是成对出现的（双边标记），比如 <　div　> 和 <　/div　>；也有少部分单标签（单边标记），如：<　br /　>、<　hr /　>和<　img src=“images/1.jpg” />等。  
属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。

## html骨架标签分类 ##

签名：<　html　><　/html　>  
定　义：HTML标签  
说　明：页面中最大的标签，我们成为根标签

标签名：<　head　><　/head　>  
定　义：文档的头部  
说　明：注意在head标签中我们必须要设置的标签是title

标签名：<　titile　><　/title　>  
定　义：文档的标题  
说　明：让页面拥有一个属于自己的网页标题

标签名：<　body　><　/body　>  
定　义：文档的主体  
说　明：元素包含文档的所有内容，页面内容 基本都是放到body里面的

## ｈｔｍｌ基本骨架介绍 ##

<!DOCTYPE html>

文档声明头，任何一个标准的HTML页面，第一行一定是一个以开头的语句。这一行，就是文档声明头，即 DocType Declaration，简称DTD。  
DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

ｌａｎｇ为页面语言，上行标签用于指定页面的语言类型。  
常见的语言类型有两种：

*  en：定义页面语言为英语。
 *  zh-CN：定义页面语言为中文。

头标签ｈｅａｄ  
头标签内部的常见标签如下：

*  <　title　>：指定整个网页的标题，在浏览器最上方显示。
 *  <　base　>：为页面上的所有链接规定默认地址或默认目标。
 *  <　meta　>：提供有关页面的基本信息
 *  <　body　>：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。
 *  <　link　>：定义文档与外部资源的关系。

注：以上内容参考\[https://github.com/qianguyihao/Web/blob/master/01-HTML/03-初识HTML.md\]，本篇博客仅作为学习参考，若有侵犯，告知必删

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5NjM1Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/06a458fe4d3c43a0872f07dfec0c0e22.png