前端小小小白：HTML是啥？能吃吗？真相在这里，吃货别哭……

来源：互联网发布：windows gvim配置模板编辑：程序博客网时间：2024/04/29 12:21

对于IT相关专业的同学来说，HTML或许已经非常熟悉，而非IT专业的同学第一次听到“HTML，想必都会好奇：HTML是啥?能吃吗？

我是非IT专业小白一枚，想要自学前端技术，所以加入了CSDN大家庭，希望通过博客记录自己的所学所得，分享技术，交流经验。同时呢，也希望各位技术达人不吝赐教，小女子感激不尽。o(￣▽￣)o

第一章初识HTML

第一节什么叫“上网”？

“上网”这个词对于我们来说并不陌生，打开电脑，打开浏览器，输入想关键词，然后就会找到相应的网页。为什么通过我们在电脑上能看到网页上的内容呢？

事实上，上网就是请求数据，一个真实的物理的文件传输。网页其实就是包括html文件、css文件、js文件、图片等文件在电脑上渲染、呈递的结果。

制作网页者将网页上传至服务器之后，访问者即可通过搜索引擎向服务器发出HTTP请求，服务器收到请求，就会把这些文件通过HTTP协议传输到计算机中，并保存进一个临时文件夹中，在本地浏览器中渲染、呈递之后，就获得这个网页了。如图1：

图1
上网文件传输图示

注：什么是HTTP协议，即Hypertext Transfer Protocol 的缩写，意思是“超文本传输协议”。

第二节 HTML基础

2.1 HTML基本知识

HTML是英语HyperText Markup Language的缩写，超文本标记语言，她是一种负责描述文档语义的语言。
HTML是纯文本文件，只有文本，没有样式，文件后缀名是“html”。
HTML通过标签给文本添加语义。
HTML之所以称为“超文本”，是因为它可以通过超链接，连接不同空间的文档，进而与整个web网络连接起来。

2.2 HTML常用标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词，比如 <html>。HTML 标签通常是成对出现的，比如 <p> 和 </p>。标签对中的第一个标签是开始标签，第二个标签是结束标签。

常用标签简介

1.html基本骨架标签

<!DOCTYPE ……><html><head><title>文档的标题</title></head><body>文档的内容......</body></html>* <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令，没有结束标签，必须是 HTML 文档的第一行，位于 <html> 标签之前。* <html>是文档的根元素，<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。文档的头部由 <head> 标签定义，主体由 <body> 标签定义，所有html文档都有这个基本骨架。

2.其他重点标签

h系列

<h1></h1> 一级标题<h2></h2> 二级标题……<h6></h6> 六级标题

h标签没有嵌套关系，是一个容器级标签，理论上可以里面可以放文本级标签，比如

。

p标签

英语paragraph“段落”缩写，给文本添加段落语义。p标签是一个文本级标签，里面只能放文字、图片、表单元素。

第三节 HTML标签分类

HTML是一种标记语言，所以存在大量用来给文本定义语义的标签，这些标签就是就是HTML语言的血肉。

1.HTML标签根据形式的不同，可分为对儿标签和自闭和标签。

对儿标签：

 1. <html></html>  2. <title></title> 3. <body></body>   4. <h1></h1>       5. <p></p>        未完待续……

单标签（自封闭标签）

1.<img/>    给文本定义图像2.<br/>     给文本换行3.<input/>未完待续……

2.根据HTML标签容量的特性，可分为容器级和文本级标签。

容器级标签：

能嵌套其他所有标签

1.<div></div> division定义文档中的分区或节2.<h></h>3.<ul></ul>  unorderlist 定义无序列表4.<ol></ol>  orderlist   定义有序列表5.<dl></dl>  definition  定义定义列表6.<li></li>  list        定义列表项目7.<dt></dt>  definition title       定义标题8.<dd></dd>  definition description 定义表述词儿

文本级标签

里面只能放文字、图片、表单元素，不能放其他任何标签。

1.<span></span> 组合行内元素，以便通过样式来格式化它们2.<p></p>

好啦，这一章的知识就讲到这里啦，“纸上得来终觉浅，绝知此事要躬行”，现在呢，咱们就用电脑自带文本编辑器编写出人生第一个网页吧。

1.新建txt文本文件。

图2
这里写图片描述

2.在txt文档里写入以下代码。

图3
这里写图片描述

3.把txt文档后缀名改为html，改好文档图标样式也发生变化，如图5。

图5
这里写图片描述

4.右键单击html文档，选择用IE/谷歌/火狐等浏览器打开。效果如图6。

图6
这里写图片描述

哈哈哈，这是女神邓丽君的著名歌曲《微风细雨》的歌词，小编正单曲循环中<(￣ˇ￣)/︿(￣︶￣)︿

在记事本里敲代码的时候有没觉得慢，一个符号一个符号敲，心情超级焦急，超级超级不愉快，别着急，下篇文章小编将为大家介绍几款常用代码编辑器，其中不乏女神男神级别的神器哦，敬请期待。再次谢谢大家支持(^o^)/

3 0