HTML基础教程 - 技术栈

[1 什么是HTML](#1 什么是HTML)

[2 入门实例](#2 入门实例)

[3 网页基本标签](#3 网页基本标签)

[3.1 标题](#3.1 标题)

[3.2 段落标签](#3.2 段落标签)

[3.3 换行标签](#3.3 换行标签)

[3.4 水平线标签](#3.4 水平线标签)

[3.5 字体样式标签](#3.5 字体样式标签)

[3.6 特殊符号](#3.6 特殊符号)

1 什么是HTML

HTML是一种用来描述网页的一种语言。HTML是一种在Web上使用的通用标记语言。HTML允许你格式化文本，添加图片、创建链接、输入表格，并将其读取文本文件，浏览器读取和显示。

HTML指的是超文本标记语言：H yperT ext M arkup Language
HTML不是一种编程语言，而是一种标记语言。
标记语言是一种标记标签
HTML使用标记标签来描述网页
HTML文档包含了HTML标签和文本内容
HTML文档也叫做web页面。

2 入门实例

新建一个html文件。

<!--DOCTTYPE:告诉浏览器我们要使用什么规范。默认是html-->
<!DOCTYPE html>
<html lang="en">
<!--head代表网页头部-->
<head>
<!--meta描述性标签，用来描述网站的相关信息-->
<!--meat一般用来做seo-->
    <meta charset="UTF-8">
    <meta name="keywords" content="编程屋">
    <meta name="descript" content="可以学习java">
<!-- title网页标题-->
    <title>我的第一个网页</title>
</head>

<!--body代表网页主体-->
<body>
hello，world
</body>
</html>

经过浏览器，网页翻译如下：

可以发现：

body体的内容能够直接在网页上显示
html文件在浏览器里用开发者工具打开之后能够全部显示出来。

3 网页基本标签

3.1 标题

HTML标题是通过<h1>~<h6>标签来定义的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
</html>

浏览器翻译如下：

3.2 段落标签

HTML 段落是通过标签 来定义的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>

<!--段落标签-->
<p>两只老虎，跑得快，跑得快</p>
<p>一直没有尾巴</p>
<p>一只没有耳朵</p>
<p>真奇怪</p>
<p>真奇怪</p>
</body>
</html>

浏览器翻译如下：

3.3 换行标签

换行标签通常用表示

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>

<!--换行标签-->
两只老虎</br>
跑的快</br>
真的跑的快</br>
</body>
</html>

浏览器翻译如下：

**注意：**大家可以发现换行标签和段落标签都可以实现换行的效果。但是换行标签的间距是小于段落标签的间距的。

3.4 水平线标签

水平线标签用<hr/>表示

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--水平线标签标签-->
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
</body>
</html>

浏览器翻译如下

3.5 字体样式标签

粗体:

斜体：

或者

粗体：

斜体：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--字体样式标签-->
粗体:<b> i love you</b>
斜体：<i>i love you</i>
<br/>
粗体：<strong>i love you</strong>
斜体：<em> i love you</em>
</body>
</html>

3.6 特殊符号

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--特殊符号标签-->
空格:&nbsp;&nbsp;&nbsp;&nbsp;空格到这了
<br/>
大于号：5&gt;4
<br/>
小于号：5&lt;9
<br/>
版权符号:&copy;版权所有liubujun

</body>
</html>

浏览器翻译如下：

注意：特殊符号必须是以&开头;结尾