前言：

本文内容：初始HTML、网页基本信息、网页基本标签

推荐免费HTML5基础讲解视频：【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili

初识HTML

什么是HTML

  • HTML

    • Hyper Text Markup Language(超文本标记语言)

    147

HTML5的优势

  • 世界知名浏览器厂商对Html5的支持(谷歌，微软，苹果等)
  • 市场的需求
  • 跨平台

W3C标准

  • W3C
  • W3C标准
    • 结构化标准语言(HTML、XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM、ECMAScript)

常见IDE

  • 记事本
  • Dreamweaver
  • IDEA
  • WebStorm
  • Visual Studio Code

HTML基本结构

146

网页基本信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- DOCTYPE:告诉浏览器所使用的规范-->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表头部-->
<head>
<!--    meta标签描述网站的信息,一般来做SEO-->
    <meta charset="UTF-8">
    <meta name="keyboard" content="我的第一个网页">
    <meta name="description" content="这是我学习html的第一个网页哦">
<!--    title标签代表网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello World
</body>
</html>

网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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>
<!--段落标签-->
<p>咏鹅</p>
<p>鹅，鹅，鹅， 曲项向天歌。</p>
<p>白毛浮绿水，红掌拨清波。</p>
<!--换行标签-->
咏鹅<br/>
鹅，鹅，鹅， 曲项向天歌。<br/>
白毛浮绿水，红掌拨清波。<br/>
<!--水平线标签-->
<hr/>
<!--字体样式标签-->
<!--粗体 斜体-->
<h1>字体样式</h1>
<span>粗体:</span> <strong>i love you</strong><br/>
<span>斜体:</span> <em>i love you</em>
<!--注释和特殊符号-->
<h1>注释和特殊符号</h1>
空      格<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
<p>大于号：&gt;</p>
<p>小于号：&lt;</p>
<p>版权符号：&copy;</p>
<!--
  特殊符号记忆：
  &开头
-->
</body>
</html>