Web学习历程（一）

最新推荐文章于 2022-08-31 21:48:26 发布

胡小冰

最新推荐文章于 2022-08-31 21:48:26 发布

阅读量139

点赞数 1

分类专栏：学习笔记

本文链接：https://blog.csdn.net/weixin_44096353/article/details/108570562

版权

学习笔记专栏收录该内容

30 篇文章 1 订阅

订阅专栏

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键，就可以自动生成如下内容：

<!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>
    
</body>
</html>

上面的内容，就是 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文件，看看页面效果：
在这里插入图片描述
到此，第一个简单的 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 规范。

<html lang="en">

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

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

<!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>
    
</body>
</html>

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

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

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

胡小冰

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web学习历程（一）

HTML学习历程（一）初识HTMLHTML 全称为 HyperText Markup Language，译为超文本标记语言。HTML 不是一种编程语言，是一种描述性的标记语言。作用：HTML是负责描述文档语义的语言。概念：超文本所谓的超文本，有两层含义：（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。概念：标记语言HTML 不是一种编程语言，是一种描述性的
复制链接

扫一扫