HTML编程环境准备

在讲解HTML编程之前我们要先将Java环境和浏览器建立连接
点击上图按钮进入设置，在设置界面搜索框中搜索web
点击Web Browers按钮，可以看到右边有多个浏览器选项
选中自己使用的浏览器，在后面Path中添加浏览器在计算机中的绝对路径，添加完成后保存设置，退出设置，之后浏览器就和环境建立好了连接，之后就可以在环境中编程，在浏览器界面中查看运行结果

HTML编程

和之前编写Java程序一样，先新建一个包，在包中建立HTML File文件，之后在文件中进行编程
在新建的HTML文件中可以看到自动生成的代码块：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>

这是HTML的基本结构，之后我们只需要按照自己的意愿在基本结构中添加内容来完善整个网页

HTML基本结构

基本结构：

<!--声明 : 告诉浏览器使用什么规范-->
<!DOCTYPE html><html lang="en"><!--标签是成对出现--><!--头部标签-->
<head><!--网页编码-->
<meta charset="UTF-8">
gb2312 ----> 包含全部的中文字符
UTF-8 ---->包含了全世界所有地方的文字和符号<!--网页标题-->
<title>Java code</title>
</head><!--网页主体-->
<body>
Hello,World!
</body></html>

运行程序：
将鼠标向右上角滑动，出现箭头所指的东西，选择之前建立连接的浏览器，点击运行程序，运行结果：
可以在网页看到我们自己设置的标题和内容

< title > 标签 : 网页的标题标签

< meta > 标签 : 关键字标签

<!--搜索关键字-->
<meta name="keywords" content="狂神,Java,Python,linux,大数据">
<!--网页的描述-->
<meta name="description" content="狂神有点cool!">

HTML注释:
使用快捷键Ctrl+/生成注释格式，在中间添加需要的注释

网页基本标签

标题标签：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head><body>
<!--段落标签-->
<!--p:表示段落标签-->
<!--标题标签-->
<!--H1最大 , H6最小-->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body></html>

运行结果：
可以看到标题等级不同标题字体大小也不同

段落标签：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<!--段落标签-->
<!--p:表示段落标签-->
<h1>段落标签</h1>
<p>两只老虎    两只老虎</p>
<p>跑得快       跑得快</p>
<p>一只没有耳朵     一只没有尾巴       哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</p>
<p>真奇怪      真奇怪</p>
<p>两只老虎     两只老虎</p>
<p>跑得快        跑得快</p>
<p>一只没有耳朵    一只没有尾巴</p>
<p>真奇怪      真奇怪</p>
</body>
</html>

运行结果：

可以看到根据段落标签划分的段落，在一段中两句话之间不论有多少个空格，但显示的只有一个空格

换行标签：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head><body>
<!--换行标签-->
<!--br:单标签-->
<h1>换行标签</h1>
两只老虎                   两只老虎<br/>
跑得快       跑得快<br/>
一只没有耳朵     一只没有尾巴<br/>
真奇怪      真奇怪<br/>
两只老虎     两只老虎<br/>
跑得快        跑得快<br/>
一只没有耳朵    一只没有尾巴<br/>
真奇怪      真奇怪<br/>
</body></html>

和段落标签去除多余空格一样，但是这只是换行，并不划分段落

水平线标签

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平线标签</title>
</head><body>
<!--水平线标签-->
<!--hr表示水平线标签-->
<h1>水平线标签</h1>
<hr/>
两只老虎    两只老虎<br/>
跑得快       跑得快<br/>
一只没有耳朵     一只没有尾巴<br/>
真奇怪      真奇怪<br/>
两只老虎     两只老虎<br/>
跑得快        跑得快<br/>
一只没有耳朵    一只没有尾巴<br/>
真奇怪      真奇怪<br/>
</body></html>

可以看到在标题后面加上了一条水平线

字体标签

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体样式标签</title>
</head><body>
<!--字体加粗 , 斜体-->
<!--strong : 粗体-->
<!--em : 斜体-->
<h1>字体样式</h1>
I love you
加粗后 : <strong>I love you</strong>
斜体 : <em>I love you</em>
</body></html>

可以看到加了字体样式标签后的字体和原字体的变化，因为没有加换行符，所以三句话都在一行

特殊符号

HTML中的特殊字符的格式为：& + 符号字符 + 分号结束

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体样式标签</title>
</head><body>
<!--特殊符号-->
<h1>特殊符号</h1>
<p>大于号 : &gt; </p>
<p>小于号 : &lt; </p>
<p>空格 :   你                好 | 你&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好</p>
<p>引号 : &quot;&quot;</p>
<p>版权符号 : &copy; 版权所有葫芦娃</p>
</body></html>

可以看到每个特殊符号在编写程序时应该如何表示

这里需要注意空格，在编写HTML程序时，无论有多少个空格，在显示时只会打印一个空格，要是想显示多个空格，就需要使用 来增加空格符的数量

HTML编程(网页的基本标签)相关推荐

微信公众号网页 H5 video 标签自动播放
目录微信公众号网页 H5 video 标签自动播放问题描述解决方案微信公众号网页 H5 video 标签自动播放环境:微信公众号网页需求:H5 video 标签自动播放视频 video 标 ...
JSP房地产门户管理系统myeclipse开发mysql数据库BS模式java编程网页结构详细设计
一.源码特点 JSP 房地产门户管理系统是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,开发环境为TOMCAT7.0,Myeclipse8 ...
JSP餐饮连锁店管理系统myeclipse开发mysql数据库BS模式java编程网页结构详细设计
一.源码特点 JSP餐饮连锁店管理系统是一套完善的web设计系统,系统具有完整的源代码和数据库,系统主要采用B/S模式开发,开发环境为TOMCAT7.0,Myeclipse8.5开发,数据 ...
HTML页面的主体标签是什么,html网页的主体标签是什么
html网页的主体标签是:body标签.body标签是一个网页的身体部分,用于定义网页的主体内容,是一个HTML文档中必须的部分.在<body>和</body>中放置的是网页中 ...
JSP电子商务试点网站myeclipse开发mysql数据库BS模式java编程网页结构详细设计
一.源码特点 JSP电子商务试点网站是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,开发环境为TOMCAT7.0,Myeclipse8.5 ...
JSP网上调查问卷管理系统myeclipse开发mysql数据库BS模式java编程网页结构详细设计
一.源码特点 JSP网上调查问卷管理系统是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,开发环境为TOMCAT7.0,Myeclipse8 ...
HTML页面的主体标签是什么,html网页的主体标签是什么？
html网页的主体标签是:body标签.body标签是一个网页的身体部分,用于定义网页的主体内容,是一个HTML文档中必须的部分.body元素中包含文档的所有内容(比如文本.超链接.图像.表格和列表等 ...
JSP大学生电子档案系统myeclipse开发mysql数据库BS模式java编程网页结构详细设计
一.源码特点 JSP 大学生电子档案系统是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,开发环境为TOMCAT7.0,Myeclipse8 ...
img标签默认有外边距吗_下面选项中,( )可以设置网页中某个标签的右外边距为10像素。_学小易找答案...
[单选题]阅读下面HTML代码,如果期望tabs位于box容器的右下角,则需要添加的CSS样式是( ) . [单选题]β一环糊精是由几个葡萄糖分子环合的 [多选题]身份权包括? [单选题]Why do ...
构成网页各个主要标签的作用
一. <!DOCTYPE html> 作用:文档声明告诉浏览器,我是按照html规范进行编译,浏览器在进行解析时,也要按照html的规范来解析,避免陷入怪异模式. 二. <htm ...

HTML编程(网页的基本标签)

HTML编程环境准备

HTML编程

HTML基本结构

网页基本标签

HTML编程(网页的基本标签)相关推荐

最新文章

热门文章