整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML中的块级元素与内联元素-零基础自学网页制作

级元素与内联元素的概念与区别

在HTML中,大多数元素都被定义为块级元素内联元素。

块级元素通常会独立成行,而内联元素会并排显示。

在我们学过的元素中,

块级元素如:<h> <p> <table>这些。

内联元素如<td><a><img>

下面我们通过练习来直观看看他们的区别。

块级元素展示,代码如下:

<body>
  <h1>第一个网页</h1><hr><h2>表格元素</h2><hr>
  <p>块级元素与内联元素</p>
  <p>零基础自学网页制作</p>
  <table border="1" width="50%">
  <thead>
  <tr>
  <td colspan="2">表格的头部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的脚部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格标题</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年龄</th>
  </tr>
  <tr>
  <td>
  <table border = "1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body>

如图:

内联元素展示如下

示例代码:这段代码被我放在了</table>后面。

<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">歼20战斗机</a>
<img src="img/战斗机/image3.jpg" width = "200px"/>

效果如图:

其中,<img>标签中的width属性规定了图片的宽度为200px,也就是200像素。

HTML中,如果只对图片的宽或高进行数值指定,那么未指定的数值会随着指定数值进行等比例缩放!

熟知html元素是块级还是内联对以后进行页面布局有一定的指导意义。

<div>与<span>标签

为了方便开发者对页面内容进行布局和调整,html开发者为html加入了专门的区块元素<div></div>。

<div></div>是一个块级元素,大家可以把它理解为一个容器,它本身是不会显示在页面上的。

比如这个!

笔者第一个漫画作品

如果抛开画面内容,我们看到的是一堆对画面进行分割的方格子。像这样

<div></div>元素的作用就是对页面进行了这样的分割。

实际上我们的页面布局都是基于这样思路进行分割的,只是页面上不会像漫画一样显示外边框而已。例如:

强制为其添加边框分割:

大家看明白了吗?<div></div>就是用来对页面进行分割划区域的。

通过给<div>标签设置不同的id属性,可以在css文件中对不同<div>区块中的所有信息进行统一调整样式的操作。

这是对块级元素整体改变样式的方法。

但是,如果我们想对一个块级元素中的不同文字或图片这些内联元素进行单独操作怎么做呢?

html开发者为我们提供了<span></span>这样的内联标签。比如我们对<p>我有一个梦想</p>这个段落元素中的"梦想"两个字进行变化颜色的操作,我们可以这样写:

<p>我有一个<span>梦想</span></p>

通过对<span>指定不同的id或class属性在CSS文件中对"梦想"二字进行改变颜色的操作而不会影响段落元素中的其他文字。

今天的内容结束了,下一次我们建立一个新的页面来简单看看<div>元素的基本用法。

喜欢的小伙伴请关注我,阅读中遇到任何问题请给我留言,如有疏漏或错误欢迎大家斧正,不胜感激!

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么?——零基础自学网页制作

第一个HTML页面如何写?——零基础自学网页制作

HTML页面中head标签有啥用?——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作


(本‬文‬作‬于‬2013年‬并‬发‬表‬在‬其‬它‬平台,因‬时‬间太久‬个‬别‬配‬图‬已‬不‬能加‬载‬)对于经常开发应用软件的人来说,都希望创建一个帮助系统,帮助使用者了解自己软件的功能与应用方法。如何创建自己软件的帮助系统呢?本文就这方面的问题谈谈自己的应用方法,也希望通过自己的实际应用经验能对朋友们有所帮助。

Windows 98及以上版本的帮助文件与Windows 95的有比较大的改变,它使用一种基于HTML文件特征的帮助文件,用Internet Explorer显示帮助内容,支持HTML、ActiveX、Java、脚本(Java脚本和VB脚本)以及HTML图像格式(.JPEG、GIF、PNG),它的图标也变了,后缀名为chm,Windows 98称之为Compiled HTML Help File。为了叙述方便,下面就称之为chm文件。典型的Windows 98规范的帮助文件(.chm文件)的窗口和Windows 98资源管理器差不多,左侧是目录、索引和搜索这三个功能项,通过选项卡切换;右侧是HTML文件的显示部分,改变了原来帮助文件目录窗口和主题窗口分离的情况。由于HTML文件具有多媒体表现力,因此chm文件的内容不再局限于文字和静态图像,在其中可以插入GIF动画,也可以利用浏览器的插件在文档中播放声音文件、动画影片、或其它格式的多媒体内容。加入URL地址可与因特网联系在一起,这样chm文件就不局限于包装好的内容了,它是微软公司的下一代联机帮助系统。同时,chm文件的核心是充分利用HTML文件的表现能力,对分散的HTML文件作整体的包装,这也是目前在Web网页以外利用HTML文件的一个趋势。如果你用这个方式制作学习教程、电子图书和杂志,或为用户提供产品目录和宣传材料,比已经流行的PDF文件更简洁和方便。

  chm文件从结构上来看可分为两个部分:运行器和文档内容。运行器是操作系统的一部分,而文档内容随其所附的应用程序而变化。这与以前的Winhelp的结构没有多少差别。不过运行器部分有了较大的改进,运行器很小巧并且不直接运行HTML文件,而是操作一个ActiveX 的组件,控制支持ActiveX 组件的网页浏览器,如微软的Explorer 3.0以上版本的浏览器。它的一个好处是能跨平台运行,只要有不同平台上的运行器和浏览器,chm文件不再需要重新编制。  制作chm文件的工具是微软公司的Htmlhelp Workshop工具包,目前,最新的HTML Help Workshop版本是4.74。这是中文版的,安装Htmlhelp Workshop很方便,只要按照提示进行即可。它的使用也很方便,没有编程和写语言的要求,只要你会制作HTML文件就行了。

  制作chm文件很方便,也很简单。大量的工作是以编写HTML文件为主,它的每个主题就是一个HTML文件,这些主题应该事先编辑好,并用Internet Explorer检查确认无误。主题文件可以用任何一个HTML编辑器编辑,也可用Htmlhelp Workshop编辑。如果不熟悉HTML文件的编辑,还可用Word,因为Word 97以上版本可以把Word文档(.doc文件)另存为HTML文件,还可以将Word文档批量转换成HTML文件。这样就可以完全按照编辑Word文档的习惯编辑成Word文档,再转换成HTML文件。

  运行Htmlhelp Workshop时,它的工作窗口很简单,菜单栏上有五个命令,分别是“文件”、“视图”、“测试”、“工具”、“帮助”。下面的工具栏有五个按钮,分别是“新建”、“打开”、“编译HTML文件”、“校验编译文件”、“联机帮助”。下面介绍具体步骤:

一、创建帮助文本

创建帮助文本是创建帮助系统的第一步。所谓帮助文本,就是针对自己开发的应用软件的功能、使用方法的介绍和说明。这里,以我开发的《通信工程(概)预算系统》为例,谈谈其帮助系统的创建过程。用WORD2000创建《通信工程(概)预算系统帮助》文本。

通信工程(概)预算系统主界面

通信工程(概)预算系统帮助文本

二、创建分页网页文件

根据帮助系统框架结构,将每一段需要分页显示的帮助文本用WORD2000转换成网页文件。下图是通信工程(概)预算系统帮助需要的分页网页文件。

分页网页文件  

三、创建项目文件 

 启动Htmlhelp Workshop系统,打开主界面。







新建一个方案

单击Htmlhelp Workshop菜单或工具栏中的“新建”命令,这时出现“选择新建内容”的对话框。这里有五个选项:“方案”、“文本”、“HTML文件”、“目录”、“索引”。选择“方案”,接着出现“方案”向导,告诉你这个向导可以转换的文件格式,一般情况下我们是要创建方案(.hhp)文件,不需要转换。直接进入“下一步”指定放置的目录和输入文件名就可以了,单击“下一步”,进入了“现有文件”对话框,如果你想将已经存在的文件包含进“方案”里,在下面列表中选择。这里一般空着,这些文件(包括已经编辑好的主题文件)以后可以添加。进入“下一步”后再“确定”就进入了Htmlhelp Workshop工作窗口。在窗口的上方是3个选项卡,分别是“方案”、“目录”、“索引”。在“方案”窗口的左侧是7个按钮,它们的功能名称自上而下分别是:“改变项目选项”、“添加/删除主题文件”、“添加/修改窗口定义”、“HHTML帮助API信息”、“校验HTML源文件”、“保存项目、目录和索引文件”、“保存全部文件并编译”。

  单击“改变项目选项”按钮,出现“选项”对话框,光标在“常规”选项卡的“标题”文本框内闪烁,在这里加入标题,编译后这个标题将出现在chm文件窗口的标题栏中。其它的内容暂时用系统的默认值。然后单击“添加/删除主题文件”按钮,再选择“添加”按钮,把作为封面页的HTML文件添上。封面页的文件一定要有,否则编译的帮助文件运行后,系统会报错。好了,简单的“方案”编辑就完成了。  

四、创建目录文件 

 单击“目录”选项卡,这时系统弹出一个对话框,提示你“方案”还没有关联目录文件(.hhc),你可以创建一个新的目录文件,或者指定一个现有的。这里选择“创建一个新目录文件”,进入下一步请你选定一个新目录文件的名称和存放路径,指定后出现目录编辑窗口。在目录窗口的左侧有11个按钮,前5个分别是:“目录工具”、“插入标题”、“插入页面”、“编辑选择”、“删除选择”,中间4个箭头用来调整指定标题或页面的位置,最后两个已在项目编辑窗口中出现过。根据需要插入标题或页面目录,按下“插入标题”或“插入页面”按钮,都会弹出“目录条目”对话框,在“条目标题”文本框中输入条目的标题,并根据情况选定对应的主题(HTML文件),单击“条目标题”下的“添加”按钮,在弹出的对话框的下面“文件或URL地址”文本框中输入文件名或URL地址并确定;单击“高级”选项卡,在“图像索引”栏中为条目指定图标,比如包含其它条目的条目可以用书形图标,而页面条目的可以用问号图标。如果在单击“插入页面”按钮之前所选择的条目不包含别的条目,也不被别的条目所包含,那么会询问“是否要创建一个起始条目”,选择了“是”会增加起始条目(一级条目),选择了“否”会增加一个子条目。标题可以不添加主题文件或URL地址,也可放置需要的主题文件,作为标题的说明内容。标题可以分为多级,要按照制作的内容统一考虑。如果觉得不满意,可以用左侧的箭头进行调整,也可以选定该条目,单击鼠标右键,不但可以调整,还可以插入标题、主题或目录文件。编辑目录文件是制作chm文件最关键的工作,目录文件应该包含一个chm文件所有目录(主题),而每个目录又包含条目标题(名称)和该条目的主题文件,要避免条目标题与对应的主题不一致的情况出现。等所有目录都添加好后目录就算完成了。

创建目录

已生成的帮助文件 

 完成目录编制后,一个chm文件已具备了雏形,索引的内容暂时空着。保存项目文件和目录文件后就可以编译,编译就是把所有用到的HTML文件统统压缩后包装在一起,形成一个后缀名是.chm的文件。在主工具栏按钮中可以找到编译按钮和试运行按钮,也可直接按项目窗口左下方的“保存全部文件并编译”按钮进行编译。编译后再运行就可以看到作品的面貌了。目录的内容在编译后显示在chm文件窗口的左侧,可以展开标题后显示以下的目录,单击目录可以打开相应的主题文件,显示相应的内容。如果发现问题,还可以进行修改调整。

  五、创建索引文件 

 在Htmlhelp Workshop的工作窗口上单击“索引”选项卡,和创建目录文件一样,也会弹出一个对话框,操作也是一样的。进入索引编辑窗口,左侧也有11个按钮,有8个是已经熟悉的,还有3个分别是:“索引工具”、“插入关键字”、“排序关键字”。所谓关键字是用户可能用到的并与一个或多个帮助主题文件关联在一起的字、词或短语,索引文件(.hhk)也是一个HTML文件,它包含若干个关键字,当用户打开chm文件后,单击索引标签并输入一个关键字后,chm文件将显示与这个关键字有关的主题的列表,非常方便地找到相关主题。单击“插入关键字”按钮,出现一个“索引项”对话框,在“常规”选项卡的“关键字”文本框中输入关键字,单击“添加”按钮指定与该关键字相关联的主题文件。如果想跳转到另一个关键字,在“索引项”对话框中按“高级”选项卡,选中下面的“目的地是另一个关键字”,单击“常规”选项卡,单击“添加”按钮,在“文件或URL地址”框中输入要跳转的关键字,单击“确定”。

创建索引

六、创建搜索 

 chm文件的“搜索”选项卡允许用户在所有主题文件中搜索字、词或短语,将它们的标题显示出来,而且在主题中用醒目的方式来显示。打开一个方案文件,单击“方案”选项卡的“改变方案选项”,在“选项”对话框的“编译”选项卡中选中“编译全文搜索信息”即可。  上述介绍的是编制HTML帮助文件的基本步骤,上手很容易。但它的功能远非这些,如在窗口定义中可以设计你所喜爱的形式,几乎所有的窗口要素都可以改变。向HTML文件中插入快捷方式、相关主题、关键字链接、联想链接、HTML Help ActiveX控件、Java脚本、弹出式窗口等等,详细的内容请参考Htmlhelp Workshop的帮助文件,或微软的相应网页。相信你试过以后一定会喜欢它。

TML页面功能的使用(Webserver):

通过SIMATIC HMI 面板集成的HTML页面功能将HMI设备组态为HTTP服务器,实现PC端与精智面板之间的文件传递等功能。

1. 功能组态

需注意:HTML页面功能仅支持精智面板(Comfort Panel)和二代移动面板(2nd Mobile Panel)。

在触摸屏项目"运行系统设置"的“服务”中激活HTML页面功能:

2. 功能设置

把要监控的数据在 触摸屏变量表里找到属性勾选优良生产规范;

下载项目至实际硬件后,在触摸屏控制面板的“WinCC Internet Settings”中会增加"Web Server"选项; win+c 可以进入触摸屏设置;

在"Tag authenticate"组中确定访问服务器操作设备变量的验证方式,“No authentication”为无需验证,“Authentication required”为访问需要密码。

在“Tag acces”组中确定访问服务器操作设备变量的方式,“Read/write”为读取访问和写访问,“Read Only”为读取访问。

点击“User Administration”按钮进入“UserDatabase-Edit”界面,如下图所示。自行设置默认用户“Administrator”的密码和确认密码,密码和确认密码必须保持一致。如果需要登录新的用户,可以点击"New"按钮新建用户,同时输入用户名和密码后,点击“Apply”确认设置。


3. 功能使用

在PC端使用浏览器进行访问,在浏览器地址栏中输入https://触摸屏的IP地址,例如:https://192.168.101.120。输入设置的用户名和密码。需注意:用户名是区分大小写的。如果需要浏览外部存储介质的文件,例如下载或者上传文件,点击“File Browser”就可以看到存储介质。