ecliose写代码 如何用eclipse写html代码_Web

ecliose写代码 如何用eclipse写html代码_Web_02

 

1、HTML概述

  • HTML：Hyper Text Markup Language，超文本标记语言，用作显示网页页面信息的标准
  • 超文本：不仅仅是纯文本还包括字体效果和多媒体信息（图片、音频、视频等）
  • 标记语言格式：<开始标签 属性="xxx">标签体</结束标签>

 

2、如何创建HTML文件

File-->New-->Project

ecliose写代码 如何用eclipse写html代码_html_03

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

ecliose写代码 如何用eclipse写html代码_ecliose写代码_04

注意：当搜索后发现没有Web时，参考博客：Eclipse新建时无Web项目的解决方法 - 梦想家---小崔

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

ecliose写代码 如何用eclipse写html代码_ecliose写代码_05

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

ecliose写代码 如何用eclipse写html代码_Web_06

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

ecliose写代码 如何用eclipse写html代码_Web_07

命名为unit01（可理解为包）

ecliose写代码 如何用eclipse写html代码_Web_08

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

ecliose写代码 如何用eclipse写html代码_HTML_09

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

ecliose写代码 如何用eclipse写html代码_html_10

ecliose写代码 如何用eclipse写html代码_HTML_11

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

ecliose写代码 如何用eclipse写html代码_html_12

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

ecliose写代码 如何用eclipse写html代码_HTML_13

 

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

<!DOCTYPE html> 文档声明：告诉浏览器使用哪个版本的标准解析页面
 <html> 根标签（成对存在）：除了文档声明，其他的都写在<html></html>里面
 <head> 头标签（成对存在）：写给浏览器看的内容，在头标签<head></head>里面
 <meta charset="UTF-8"> 告诉浏览器页面的字符集是UTF-8
 <title>Insert title here</title> 页面标题
 </head>
 <body>
     体标签（成对存在）：写给用户看的内容，在体标签里面   
 </body>
 </html>

 

4、运行HTML文件

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

ecliose写代码 如何用eclipse写html代码_ecliose写代码_14

显示效果如下：

ecliose写代码 如何用eclipse写html代码_html_15

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

Window-->Preference

ecliose写代码 如何用eclipse写html代码_HTML_16

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

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

ecliose写代码 如何用eclipse写html代码_Web_17

ecliose写代码 如何用eclipse写html代码_HTML_18

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

注意：

  1. Eclipse每次代码编写完成后需要保存，再次以浏览器打开或者刷新原网页才能加载新内容！
  1. 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
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>第一个网页</title>
 </head>
 <body>
     <!-- 注释 -->
     <!-- 
         有些标签是自带独占一行效果的，有些标签没有自带独占一行效果 
         那些自带独占一行效果的我们可以称为块级标签（元素），
         不带独占一行效果的我们称之为行标签（元素）
     -->
 
     <!-- 标题标签：h1-h6，数字越小，字体越大，默认靠左显示 align="justify" 在多行文字内容时用于两端对齐-->
     <h1>一级标题（最大）</h1>   
     <h2>二级标题</h2>
     <h3>三级标题</h3>
     <h4>四级标题</h4>
     <h5>五级标题</h5>
     <h6>六级标题（最小）</h6>
     <h6 align="left">默认靠左显示</h6>
     <h6 align="center">居中显示</h6>
     <h6 align="right">靠右显示</h6>
     
     <!-- 段落标签：独占一行，自动换行，自带上下行间距，字体大小与正文内容相同-->
     正文内容 
     正文内容
     <p>段落标签</p>
     <p align="center">段落标签前面可设置属性</p>
     正文内容
     正文内容
     
     <!-- 换行：切换到下一行，相比于段落标签，间距小，段落标签间距大 -->
     <br>
     正文内容<br>
     正文内容<br>
     
     <!-- 水平分割线：可设置颜色color、粗细size（以像素为单位，不可以以百分比显示）、
                宽度width（以像素为单位，可用百分比%表示）、默认居中显示 
     -->
     <hr color="red" size="10" width="1000">
     <hr color="blue" size="10" width="50%">
 
     <!-- 加粗 -->
     <b>加粗字体</b><br>
     <b>加粗字体</b><br>