1、HTML概述

HTML：Hyper Text Markup Language，超文本标记语言，用作显示网页页面信息的标准

超文本：不仅仅是纯文本还包括字体效果和多媒体信息（图片、音频、视频等）

标记语言格式：<开始标签 属性="xxx">标签体

2、如何创建HTML文件

File-->New-->Project

输入web进行搜索，选择Static Web Project，点击Next

注意：当搜索后发现没有Web时，参考博客：Eclipse新建时无Web项目的解决方法 - 梦想家---小崔 - 博客园 https://www.cnblogs.com/XiaoCui-blog/p/14939196.html

输入项目名：webStudy，点击Finish，完成项目创建

是否打开视图：此处选择No，不进行视图显示

点开webStudy，在WebContent上右键，New，新建路径Folder

命名为unit01（可理解为包）

在unit01（包）上右键，New，Other

在搜索框中输入html，选择HTML File，Next

修改文件名为first，后缀可加可不加，默认html后缀，点击Finish

完成HTML文件创建，显示内容如下：

3、HTML文件基本格式及代码作用

文档声明：告诉浏览器使用哪个版本的标准解析页面 根标签（成对存在）：除了文档声明，其他的都写在里面 头标签（成对存在）：写给浏览器看的内容，在头标签里面 告诉浏览器页面的字符集是UTF-8 页面标题 体标签（成对存在）：写给用户看的内容，在体标签里面

4、运行HTML文件

在html文件上单击右键，选择Open With，在右侧出现的菜单栏中选择Web Browser打开即可。

显示效果如下：

附：如何修改Eclipse中打开HTML文件的默认浏览器？

Window-->Preference

General-->Web Browser-->Use external web brower-->New(填写浏览器名称和路径，推荐使用火狐或谷歌浏览器)-->完成后选

择新添加的浏览器，点击Apply，OK即可。

再次使用Web Browser打开时，会使用上面设置好的浏览器打开HTML文件。

注意：

Eclipse每次代码编写完成后需要保存，再次以浏览器打开或者刷新原网页才能加载新内容！

Eclipse如果更改了默认浏览器打开方式，每次双击html文件时，都会以浏览器的方式打开，无法对代码进行编辑，建议每次的html编写后不要关闭！！

解决办法1：在html文件上单击右键，选择Open WIth，以HTML Editor方式打开（Text Editor也可以）

解决办法2：直接将html文件拖到右侧空白窗口内，直接打开

5、HTML标签介绍

5.1 文本相关标签

内容标签h1-h6：字体加粗，独占一行，自带上下间距，数值越大，字体越小

段落标签p：独占一行，自带上下行间距

换行br

水平分割线hr

加粗b

斜体i

小字small

​

一级标题（最大）

二级标题

三级标题

四级标题

五级标题

六级标题（最小）

默认靠左显示

居中显示

靠右显示

正文内容 正文内容

段落标签

段落标签前面可设置属性

正文内容 正文内容
正文内容
正文内容

---

---

​ 加粗字体
加粗字体
加粗字体
斜体文本
加粗斜体
斜体加粗
小型文本

显示效果如下：

5.2 列表标签

无序列表

有序列表

定义列表

列表嵌套：有序列表和无序列表可以任意无限嵌套

一、无序列表

unordered list(ul)：无序列表、list item(li)：列表项

以disc实心圆表示项目符号

• 小红
• 小黄
• 小黑
• 小白
• 小蓝

以circle空心圆表示项目符号

• 小红
• 小黄
• 小黑
• 小白
• 小蓝

以square实心方块表示项目符号

• 小红
• 小黄
• 小黑
• 小白
• 小蓝

二、有序列表

ordered list(ol)：有序列表，list item(li)：列表项 默认以数字1开始

1. 打开冰箱门
2. 清空冰箱
3. 把大象装进去
4. 关上冰箱门
5. 接通电源

以start开始有序显示

95. 打开冰箱门
96. 清空冰箱
97. 把大象装进去
98. 关上冰箱门
99. 接通电源

倒序显示

1. 打开冰箱门
2. 清空冰箱
3. 把大象装进去
4. 关上冰箱门
5. 接通电源

100. 打开冰箱门
101. 清空冰箱
102. 把大象装进去
103. 关上冰箱门
104. 接通电源

更换项目符号：A、a、I、i(大小罗马字体:Ⅰ、Ⅱ、Ⅲ...；i、ii、iii...)

1. 打开冰箱门
2. 清空冰箱
3. 把大象装进去
4. 关上冰箱门
5. 接通电源

1. 打开冰箱门
2. 清空冰箱
3. 把大象装进去
4. 关上冰箱门
5. 接通电源

1. 打开冰箱门
2. 清空冰箱
3. 把大象装进去
4. 关上冰箱门
5. 接通电源

1. 打开冰箱门
2. 清空冰箱
3. 把大象装进去
4. 关上冰箱门
5. 接通电源

1. 打开冰箱门
2. 清空冰箱
3. 把大象装进去
4. 关上冰箱门
5. 接通电源

三、定义列表

defined list(dl)：定义列表， defined title(dt)：定义标题， defined data(dd)：定义数据

水果

香蕉

苹果

西瓜

芒果

荔枝

蔬菜

白菜

萝卜

土豆

豆角

茄子

四、列表嵌套

• 水果
  • 香蕉
  • 苹果
  • 西瓜
  • 芒果
  • 荔枝
• 蔬菜
  1. 白菜
  2. 萝卜
     • 胡萝卜
     • 水萝卜
     • 白萝卜
  3. 土豆
  4. 豆角
  5. 茄子

显示效果如下：