前端入门 02：HTML入门

Naisu Xu

已于 2022-06-03 10:14:25 修改

阅读量2.7k

点赞数 2

分类专栏： Web与JS相关文章标签： html 前端网页

于 2020-10-10 10:34:10 首次发布

本文链接：https://blog.csdn.net/Naisu_kun/article/details/108870642

版权

Web与JS相关专栏收录该内容

58 篇文章 21 订阅

订阅专栏

文章目录

目的
基础说明
常用标签介绍
总结

目的

HTML是前端基础内容中最简单的一个部分，这篇文章将对HTML入门相关的内容做个记录。

基础说明

简单点说HTML就是一个个的标签，用来描述网页的文档结构和内容，下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <!-- 当前文档为UTF-8格式 -->
    <meta charset="UTF-8">
    <!-- 网页标题 -->
    <title>这里是网页标题</title>
    <!-- 网页图标 -->
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 用户网页的可视区域，移动端做响应式设计时需要加上这个标签 -->
    <meta name="viewport" content="width=device-width, user-scalable=no">

    <style>
        /* 清除浏览器默认样式 */
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
	这里填充网页内容
</body>
</html>

在这里插入图片描述
上面代码中 用  包围部分是HTML注释 。上面的代码再精简下就是下面这样：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

第一行 <!DOCTYPE html> 以前有很多写法，一般固定就这样写就行了，不用去理解他。之后就是 <html> ... </html> 标签，该标签下面是 <head> ... </head> 和 <body> ... </body> 标签。 head标签中的内容不会在网页页面主体中显示，一般用来放网页的基本描述信息和一些外部链接的内容等。body标签中的内容主要是要显示在网页页面主体中的东西。下面的示例中就在body中放了内容：
在这里插入图片描述
事实上html、head、body这些基本的标签也完全可以省略，你只写上面示例中body中的内容浏览器也能显示内容。但是除非特殊情况，一般还是按照结构完整的来编写的好。

下面演示下在body中进行结构布局：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            flex-wrap: wrap;
        }

        .header {
            width: 100%;
            height: 10%;
            background-color: salmon;
        }

        .nav {
            width: 100%;
            height: 10%;
            background-color: darkkhaki;
        }

        .aside {
            width: 20%;
            height: 70%;
            background-color: lightgreen;
        }

        .main {
            width: 80%;
            height: 70%;
            background-color: mediumturquoise;
        }

        .footer {
            width: 100%;
            height: 10%;
            background-color: orchid;
        }

        div {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="header"> 标题栏 </div>
    <div class="nav"> 导航栏 </div>
    <div class="aside"> 侧边栏 </div>
    <div class="main"> 正文 </div>
    <div class="footer"> 页脚 </div>
</body>

</html>

在这里插入图片描述
上面示例中 用了 <div> ... </div> 标签和CSS结合进行了结构布局 ，div标签作为内容容器，CSS进行具体的布局描述，这是最常见的布局方式。

上面代码中div标签前半部分有一个 class="" 的内容，这个是该标签的属性。大部分标签都有很多属性，其中body中大部分标签都有class、id等属性。

div标签是用的最广泛的标签，它的作用也就作为容器。通常的开发中可以先进行布局，然后再填充内容。上面示例也可以换成下面的方式：
在这里插入图片描述
上面示例中 header、nav、aside、main、footer 这些标签替换了前面示例中的 div + class 的形式（相应的CSS部分也稍有改动）。这些标签和 div 标签从功能上来说可以说是完全一样的，不过名称上更加偏向于专业用途，用这些标签来搭建上面的结构代码上会更加容易阅读理解，这个称为 HTML语义化 。语义化标签一方面有助于文档阅读，另一方面在搜索引擎收录排名优化等方面有优势。虽说如此，但是很多情况下其实也不用管那么多， div 用用就行了。

上面例子中出现在body中的 h1~h6、p、div 等标签在HTML中被称之为 块级元素 。在默认情况下块级元素会单独占用页面中的一行，可以手动设置宽度、高度、外边距、内边距。块级元素会单独占一行， 行内元素 就不会单独占一行，常见的比如 span 标签：
在这里插入图片描述
上图中被 span 标签包围的内容都在页面中同一行，并没有每个元素单独一行，这就是行内元素。默认情况下是无法手动设置行内元素的宽度、高度以及垂直方向上的内外边距的。此外还有 行内块元素 ，这类元素不会单独占一行，但可以手动设置宽度、高度、外边距、内边距，常见的标签有 img、input 。

块级元素、行内元素、行内块元素会因为CSS的设置而导致性质改变，同样的我们也可以手动改变其属性，当然这些就属于CSS的内容了。另外有些时候我们可以会需要 手动进行换行，这时候可以用 br 标签 ， <br> <br/> <br /> 三种写法都可以。
在这里插入图片描述
在HTML中写文本，有些字符是无法正确显示的，比如 " & < > 这些，另外空格在显示上也会有问题，这时候就需要用转义符了，常见的转义符如下：

字符	十进制表达	字符表达
"	"	"
&	&	&
<	<	<
>	>	>
不断开空格(non-breaking space)

在这里插入图片描述

常用标签介绍

HTML标签总共一百个出头的样子，但是真正用的多的估计一半都不到，除了上面演示中用到的 h1~h6、p、div 等标签外还有一些常用的标签，这里将稍微进行介绍：

input
该标签用于用户输入组件，通过其 type 属性可以获得不同类型的功能；
form
该标签通常在其内部嵌套 input 标签使用，用于向后台提交数据，通常所说的 “提交表单” 就是指这个；
textarea
该标签和 input 的text类似，支持多行文本；
button
该标签和 input 类似，type类型只支持button、reset、submit，默认为button；
该标签和 input 最大不同点在于其内部可以嵌入文本图像等；
img audio video
分别用于在页面中嵌入图片、声音、视频；
ol - li ul - li dl - dt - dd
分别为三种类型的列表；
a
该标签可以用于点击跳转到内部或外部的链接；
link
该标签通常用于链接到外部文件，常用的比如链接网页图标、样式文件等；
del
该标签用于在文字中间加上一条横线；
iframe
该标签用于在页面中内嵌其它页面；