【Eclipse】HTML基础（一）-概述、创建HTML、运行HTML、HTML标签（文本、列表）

 

 

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文件基本格式及代码作用

 <!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打开即可。

显示效果如下：

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

Window-->Preference

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

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

再次使用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>
     <b>加粗字体</b><br>
     
     <!-- 斜体 -->
     <i>斜体文本</i><br>
     <b><i>加粗斜体</i></b><br>
     <i><b>斜体加粗</b></i><br>
     
     <!-- 小型文本 -->
     <small>小型文本</small>
         
 </body>
 </html>

显示效果如下：

 

5.2 列表标签

  • 无序列表

  • 有序列表

  • 定义列表

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

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>列表标签</title>
 </head>
 <body>
     <h1>一、无序列表</h1>
     <h2>unordered list(ul)：无序列表、list item(li)：列表项</h2>
     <h3>以disc实心圆表示项目符号</h3>
     <ul>
         <li>小红</li>
         <li>小黄</li>
         <li>小黑</li>
         <li>小白</li>
         <li>小蓝</li>
     </ul>
     
     <!-- ·表示项目符号，可以通过type进行更换
         circle表示空心圆，disc实心圆（默认），square表示实心方块
       -->
     <h3>以circle空心圆表示项目符号</h3>
     <ul type="circle">
         <li>小红</li>
         <li>小黄</li>
         <li>小黑</li>
         <li>小白</li>
         <li>小蓝</li>
     </ul>
     <h3>以square实心方块表示项目符号</h3>
     <ul type="square">
         <li>小红</li>
         <li>小黄</li>
         <li>小黑</li>
         <li>小白</li>
         <li>小蓝</li>
     </ul>
     
     <h1>二、有序列表</h1>
     <h2>ordered list(ol)：有序列表，list item(li)：列表项 默认以数字1开始</h2>
     <ol>
         <li>打开冰箱门</li>
         <li>清空冰箱</li>
         <li>把大象装进去</li>
         <li>关上冰箱门</li>
         <li>接通电源</li>
     </ol>
     <h2>以start开始有序显示</h2>
     <ol start="95">
         <li>打开冰箱门</li>
         <li>清空冰箱</li>
         <li>把大象装进去</li>
         <li>关上冰箱门</li>
         <li>接通电源</li>
     </ol>
     <h2>倒序显示</h2>
     <ol reversed="reversed">
         <li>打开冰箱门</li>
         <li>清空冰箱</li>
         <li>把大象装进去</li>
         <li>关上冰箱门</li>
         <li>接通电源</li>
     </ol>
     <ol start="100" reversed="reversed">
         <li>打开冰箱门</li>
         <li>清空冰箱</li>
         <li>把大象装进去</li>
         <li>关上冰箱门</li>
         <li>接通电源</li>
 </ol> 
<h2>更换项目符号：A、a、I、i(大小罗马字体:Ⅰ、Ⅱ、Ⅲ...；i、ii、iii...)</h2> 
<ol type="A"> 
　　<li>打开冰箱门</li> 
　　<li>清空冰箱</li> 
　　<li>把大象装进去</li> 
　　<li>关上冰箱门</li> 
　　<li>接通电源</li> 
</ol> 
　　<ol type="A"> 
　　<li>打开冰箱门</li> 
　　<li>清空冰箱</li> 
　　<li>把大象装进去</li> 
　　<li>关上冰箱门</li> 
　　<li>接通电源</li> 
</ol> 
<ol type="a"> 
　　<li>打开冰箱门</li> 
　　<li>清空冰箱</li> 
　　<li>把大象装进去</li> 
　　<li>关上冰箱门</li> 
　　<li>接通电源</li> 
</ol> 
<ol type="I"> 
　　<li>打开冰箱门</li> 
　　<li>清空冰箱</li> 
　　<li>把大象装进去</li> 
　　<li>关上冰箱门</li> 
　　<li>接通电源</li> 
</ol> 
<ol type="i"> 
　　<li>打开冰箱门</li> 
　　<li>清空冰箱</li> 
　　<li>把大象装进去</li> 
　　<li>关上冰箱门</li> 
　　<li>接通电源</li> 
</ol>
     
<h1>三、定义列表</h1> 
<h2>defined list(dl)：定义列表， 
    defined title(dt)：定义标题， 
    defined data(dd)：定义数据 
</h2> 
<dl> 
　　<dt>水果</dt> 
　　　　<dd>香蕉</dd> 
　　　　<dd>苹果</dd> 
　　　　<dd>西瓜</dd> 
　　　　<dd>芒果</dd> 
　　　　<dd>荔枝</dd> 
　　<dt>蔬菜</dt> 
　　　　<dd>白菜</dd> 
　　　　<dd>萝卜</dd> 
　　　　<dd>土豆</dd> 
　　　　<dd>豆角</dd> 
　　　　<dd>茄子</dd> 
</dl> 
     
<h1>四、列表嵌套</h1> 
<ul> 
　　<li>水果 
　　　　<ul> 
　　　　　　<li>香蕉</li> 
　　　　　　<li>苹果</li> 
　　　　　　<li>西瓜</li> 
　　　　　　<li>芒果</li> 
　　　　　　<li>荔枝</li> 
　　　　</ul> 
　　</li> 
　　<li>蔬菜 
　　　　<ol> 
　　　　　　<li>白菜</li> 
　　　　　　<li>萝卜 
　　　　　　　　<ul> 
　　　　　　　　　　<li>胡萝卜</li> 
　　　　　　　　　　<li>水萝卜</li> 
　　　　　　　　　　<li>白萝卜</li> 
　　　　　　　　</ul> 
　　　　　　</li> 
　　　　　　<li>土豆</li> 
　　　　　　<li>豆角</li> 
　　　　　　<li>茄子</li> 
　　　　</ol> 
　　</li> 
</ul> 
</body> 
</html>

显示效果如下：

 

posted @ 2021-06-29 19:02  Coder_Cui  阅读(820)  评论(0)  编辑  收藏  举报