Web前端基础（一）_web前端初级一-CSDN博客

本文链接：https://blog.csdn.net/qq_51706466/article/details/109557217

HTML基础篇（一）

前言

HTML（Hyper Text Markup Language），即“超文本标签语言”，主要用途在于通过HTML标签对网页中的文本、图片、声音等内容进行描述。学习Web前端，建议先掌握HTML，再学习CSS，并尝试制作静态网页，待到熟练再进行之后的学习，这里简单讲解一下准备事项与HTML基础。

一、浏览器与开发工具推荐（非专业角度）

1.浏览器

我这里首推Google Chrome，~~谷歌从苹果那把webkit抄了一遍~~，又自己改进弄了Bink内核，使用效果这方面肯定是没得说的，看看市场份额应该就明白了。其他浏览器像Firefox，Microsoft Edge等也都是没问题的。

2.开发工具

这里倒是有很多可以说的，但我用Visual Studio用惯了，就懒得改了，其他的如同Dreamweaver，sublime，甚至是记事本都是很好的选择，至少速度挺快的。而相较之下VS虽然功能齐全，但编写的仅仅是简单网页的话，操作就不免有些复杂了。以下简单说明VS的操作步骤：（以VS2019为例）

安装时记得选定“ASP.NET和Web开发”项，忘记安装也可以在“创建新项目”中最下面找到“安装多个工具和功能”进行补装（约600MB）

1.在创建新项目中选择“ASP.NET.Web应用程序(.NET Framework)”

2.选择“空”，其他设置保持默认（如下图）

3.点击“新建项”

4.选择“HTML页”，点击添加完成创建

二、HTML骨架

HTML是网页的基本骨架，而其本身也具有规定的骨架，代码如下：

<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

其中当前HTML 5的标准如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

</body>
</html>

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>我的网页</title>
</head>
<body>
    1
</body>
</html>

可以观察到，写于<title></title>标签内的内容“我的网页”作为了网页名称，而写于<body></body>内的“1”作为了网页内容。如果将HTML骨架比作人，那么<html></html>标签就是你的全身；<head></head>标签则相当于头，被全身包含；<title></title>标签就如同眼睛，长在头上；<body></body>标签相当于身体躯干，位于头下面。至于框架内的其他内容暂时不用考虑，往后会进行说明。

三、标签及其分类

在HTML页面中，带有“< >”的元素统称为标签，其表示某个功能的编码命令

1.双标签

格式形如：<标签名>内容</标签名>

“<标签名>”为标签生效的起点，称作“开始标签”（start tag），而“</标签名>”则标志着标签作用的结束，称作“结束标签”（end tag）。

如同上文中的：<body>1</body>

2.单标签

格式形如：<标签名 />内容或内容<标签名 />

其也称作空标签，表示一个标签符号即可表示完整描述某个功能

如同水平线标签：<hr />

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>我的网页</title>
</head>
<body>
    1
    <hr />
    2
</body>
</html>

总结

这里仅仅说明了HTML最为基础的部分，但通过骨架的说明也体现出这门语言并不复杂，对于自己不清楚的部分大胆假设，小心求证，希望大家多多尝试，笔者于此不多赘述。