摘要:层模型--固定定位 fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视
阅读全文
摘要:层模型--相对定位 如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)
阅读全文
摘要:层模型--绝对定位 如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于bo
阅读全文
摘要:什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。 如何让html元素在网
阅读全文
摘要:浮动模型 块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。 任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示
阅读全文
摘要:流动模型(一) 先来说一说流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 流动布局模型具有2个比较典型的特征: 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为10
阅读全文
摘要:css布局模型 清楚了CSS 盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就
阅读全文
摘要:盒模型--边界 元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。如下代码: 也可以分开写: 如果上右下左的边界都为10px;可以这么写: 如果上下边界一样为10px,左右一样为20px,可以这么写: 总结一下:padding和margin的区别,paddin
阅读全文
摘要:盒模型--填充 元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码: 顺序一定不要搞混。可以分开写上面代码: 如果上、右、下、左的填充都为10px;可以这么写 如果上下填充一样为10px,左右一样为20px,可以这么写: 实例:
阅读全文
摘要:盒模型--宽度和高度 盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的,css内定义的宽(width)和高(height),指的是填充以里的内容范围。 因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。 元素的高度也是同理。 比如: css代
阅读全文
摘要:盒模型--边框(二) 现在有一个问题,如果有想为 p 标签单独设置下边框,而其它三边都不设置边框样式怎么办呢?css 样式中允许只为一个方向的边框设置样式: 同样可以使用下面代码实现其它三边(上、右、左)边框的设置: 实例:
阅读全文
摘要:盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。 如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框: 上面是 border 代码的缩写形式,可以分开写: 注意: 1、border-style(边框样式)
阅读全文
摘要:元素分类--内联块状元素 内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。 inline-block 元素特点: 1、和其
阅读全文
摘要:元素分类--内联元素 在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有
阅读全文
摘要:元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<
阅读全文
摘要:段落排版--对齐 想为块状元素中的文本、图片设置居中样式吗?可以使用text-align样式代码,如下代码可实现文本居中显示。 同样可以设置居左: 还可以设置居右: 实例:
阅读全文
摘要:段落排版--中文字间距、字母间距 如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现,如下面代码: 注意:这个样式使用在英文单词时,是设置字母与字母之间的间距。 单词间距设置: 如果我想设置英文单词之间的间距呢?可以使用 word-spacing 来实现。如下
阅读全文
摘要:段落排版--行间距(行高) 这一小节我们来学习一下另一个在段落排版中起重要作用的行间距(行高)属性(line-height),如下代码实现设置段落行间距为1.5倍。 实例:
阅读全文
摘要:段落排版--缩进 中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现: 注意:2em的意思就是文字的2倍大小。
阅读全文
摘要:文字排版--删除线 如果想在网页上设置删除线怎么办,这个样式在电商网站上常会见到: 上图中的原价上的删除线使用下面代码就可以实现: 实例:
阅读全文
摘要:文字排版--下划线 有些情况下想为文字设置为下划线样式,这样可以在视觉上强调文字,可以使用下面代码来实现: 实例:
阅读全文
摘要:文字排版--斜体 以下代码可以实现文字以斜体样式在浏览器中显示:
阅读全文
摘要:文字排版--粗体 我们还可以使用css样式来改变文字的样式:粗体、斜体、下划线、删除线,可以使用下面代码实现设置文字以粗体样式显示出来。 在这里大家可以看到,如果想为文字设置粗体是有单独的css样式来实现的,再不用为了实现粗体样式而使用h1-h6或strong标签了。
阅读全文
摘要:文字排版--字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体。 这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决
阅读全文
摘要:重要性 我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。 如下代码: 这时 p 段落中的文本会显示的red红色。 注意:!important要写在分号的前面 这里注意当网页制作者不设置css样式时,浏览器会按照自己的一套样式来
阅读全文
摘要:层叠 我们来思考一个问题:如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办?好,这一小节中的层叠帮你解决这个问题。 层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最
阅读全文
摘要:特殊性 有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。
阅读全文
摘要:继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。 可见右侧结果窗口中p中的文本与spa
阅读全文
摘要:分组选择符 当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色: 它相当于下面两行代码: 实例:
阅读全文
摘要:伪类选择符 更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色: <a href="address"> word </a> 地址标签 上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜
阅读全文
摘要:包含(后代)选择器 包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码: 这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。 请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后
阅读全文
摘要:子选择器 还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码: 这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。
阅读全文
摘要:类和ID选择器的区别 学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点: 相同点:可以应用于任何元素不同点: 1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。
阅读全文
摘要:ID选择器 在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别: 1、为标签设置id="ID名称",而不是class="类名称"。 2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。 下面的实例中就是一个ID选择符的完整案例。 实例: <!DOCTYPE HTML> <html>
阅读全文
摘要:类选择器 类选择器在css样式编码中是最常用到的,如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。 语法: .类选器名称{css样式代码;} 注意: 1、英文圆点开头 2、其中类选器名称可以任意起名(但不要起中文噢) 使用方法: 第一步:使用合适的标签把要修饰的内容标记起来
阅读全文
摘要:标签选择器 标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码: 上面的css样式代码的作用:为p标签设置12px字号,行间距设置1.6em的样式。 实例:
阅读全文
摘要:每一条css样式声明(定义)由两部分组成,形式如下: 选择器 + 声明{键值对} 在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。比如右侧代码编辑器中第7行代码中的“body”就是选择器。
阅读全文
摘要:有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在右边编辑器就出现了这种情况 1、使用内联式CSS设置“超酷的互联网”文字为粉色。 2、然后使用嵌入式CSS来设置文字为红色。 3、最后又使用外部式设置文字为蓝色(style.css文件中设置)
阅读全文
摘要:外部式css样式,写在单独的一个文件中 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码: 注意: 1、css样式文件
阅读全文
摘要:嵌入式css样式,写在当前的文件中 现在有一任务,把下面代码中的“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短词文字字号修改为18px。如果用上节课我们学习的内联式css样式的方法进行设置将是一件很头疼的事情(为每一个<span>标签加入sytle="font-size:18px"语句),
阅读全文
摘要:内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。这一小节先来讲解内联式。 内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: 注意要写在元素的开始标签里,下面这种
阅读全文
摘要:CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。 声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。
阅读全文
摘要:认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。 如下列代码: 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。 实例:
阅读全文
摘要:form表单中的label标签 小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,这一小节就来揭晓它的作用。 label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该labe
阅读全文
摘要:在表单中有两种按钮可以使用,分别为:提交按钮、重置。这一小节讲解提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮。 语法: type:只有当type值设置为submit时,按钮才有提交作用 value:按钮上显示的文字 举例: 在浏览器中显示的结果: 使用重置按钮,重置表单信息 当用户需
阅读全文
摘要:下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。如下代码: 讲解: 1、value: 2、selected="selected": 设置selected="selected"属性,则该选项就被默认选中。 在浏览器中显示的结果: 实例: 浏览器输出: 爱好: 看书 旅游
阅读全文
摘要:在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。请看下面的例子: 单选框和复选框如下图的1和2: 语法: 1、type: 当 type="radio"
阅读全文
摘要:当用户需要在表单中输入大段文字时,需要用到文本输入域。 语法: 1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。 2、cols :多行输入域的列数。 3、rows :多行输入域的行数。 4、在<textarea></textarea>标签之间可以输
阅读全文
摘要:当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。 语法: 1、type: 当type="text"时,输入框为文本输入框; 当type="password"时, 输入框为密码输入框。 2、name:为文本框命名,以备后台程序ASP 、PHP使用。 3、val
阅读全文
摘要:CGI是一种规范,是Web 服务器运行时外部程序的规范。 公共网关接口(Common Gateway Interface,CGI)是Web 服务器运行时外部程序的规范,按CGI 编写的程序可以扩展服务器功能。 经过CGI规范处理过的应用程序能与浏览器进行交互,还可通过数据API与数据库服务器等外部数
阅读全文
摘要:PHP的定义 PHP(“PHP: Hypertext Preprocessor”,超文本预处理器的字母缩写)是一种脚本语言,它可嵌入到 HTML中,尤其适合 web 开发。 实例:PHP代码 在上面的实例中,不难发现PHP代码和HTML脚本非常像似,其实PHP代码就是 HTML脚本,只不过是在其中嵌
阅读全文
摘要:搜索引擎优化,又称为SEO,即Search EngineOptimization,它是一种通过分析搜索引擎的排名规律,了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。搜索引擎采用易于被搜索引用的手段,对网站进行有针对性的优化,提高网站在搜索引擎中的自然排名,
阅读全文
摘要:网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。 语法: 讲解: 1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。 2.action :浏览者输入的数据被传
阅读全文
摘要:在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img>标签来插入图片。 语法: 举例: 讲解: 1、src:标识图像的位置; 2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本; 3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的
阅读全文
摘要:<a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解,请看详细图示: 注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。 下面是一个完
阅读全文
摘要:使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。 语法: 例如: 上面例子作用是单击click here!文字,网页链接到http://www.baidu.com这个网页。 title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际
阅读全文
摘要:表格还是需要添加一些标签进行优化,可以添加标题和摘要。代码如下: 摘要 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。 语法:<table summary="表格简介文本"> 标题 用以描述
阅读全文
摘要:Table 表格在没有添加 css 样式之前,是没有边框的。这样不便于我们后期合并单元格知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框。 在右侧代码编辑器中添加如下代码: 上述代码是用 css 样式代码(后面章节会详细讲解),为th,td单元格添加粗细为一个像素的黑色边框。 结果窗
阅读全文
摘要:有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表: 想在网页上展示上述表格效果可以使用以下代码: 创建表格的四个元素: table、tbody、tr、th、td 1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。 2、<
阅读全文
摘要:在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。 语法: <div>…</div> 确定逻辑部分: 什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。如下图所示:图中用红色边框标出
阅读全文
摘要:如果想在网页中展示有前后顺序的信息列表,怎么办呢?如,当当网上的书籍热卖排行榜,如下图所示。这类信息展示就可以使用<ol>标签来制作有序列表来展示。 语法: 举例: 下面是一个热点课程下载排行榜: <ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始,如下图所示: 实
阅读全文
摘要:ul-li是没有前后顺序的信息列表。 语法: 举例: ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点,如下图所示: 实例: 浏览器输出: 我的第一个列表信息
阅读全文
摘要:语法: <pre>语言代码段</pre> <pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。 如下代码: 在浏览器中的显示结果为: 在上面的例子中可以看到代码中的空格,换行符都保留下来。如果用以前的方法,回车需要输入<br>签,空格需要输入
阅读全文
摘要:在介绍语言技术的网站中,避免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>标签了,如下面例子: <code>var i=i+300;</code> 注意:在文章中一般如果要插入多行代码时不能使用<code>标签了。 语法: <code>代码语言</code>
阅读全文
摘要:一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。 语法: <address>地址信息</address> 如: <address>百度地址</address> 在浏览器
阅读全文
摘要:在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。如下图所示: 语法: html4.01版本 <hr> xhtml1.0版本 <hr /> 注意: 1. <hr />标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。 2. <hr />标签的在浏览器
阅读全文
摘要:在前面的例子,我们已经讲解过在html代码中输入空格、回车都是没有作用的。要想输入空格,必须写入 。 语法: 在html代码中输入空格是不起作用的,如下代码。 在浏览中显示,还是没有空格效果: 输入空格的正确方法: 在浏览器中的显示出来的空格效果。如下图所示:
阅读全文
摘要:对于上一小节的例子,我们想让那首诗显示得更美观些,如显示下面效果: 怎么可以让每一句诗词后面加入一个折行呢?那就可以用到<br />标签了,在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车。 上节的代码改为: 语法: xhtml1.0写法: <br /> htm
阅读全文
摘要:<blockquote>的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。 等等,上一节<q>标签不是也是对文本的引用吗?不要忘记<q>标签是对简短文本的引用,比如说引用一句话就用到<q>标签。 如想在我的文章中引用李白《关山月》中的诗句,因为引用
阅读全文
摘要:想在你的html中加一段引用吗?比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q>标签是你所需要的。 语法: <q>引用文本</q> 如下面例子: 讲解: 1. 在上面的例子中,“庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌,出自晚唐诗人李商隐的《锦瑟》 。因为不
阅读全文
摘要:使用<span>标签为文字设置单独样式 这一小节讲解<span>标签,我们对<em>、<strong>、<span>这三个标签进行一下总结: 1. <em>和<strong>标签是为了强调一段话中的关键字时使用,它们的语义是强调。 2. <span>标签是没有语义的,它的作用就是为了设置单独的样式用
阅读全文
摘要:有了段落又有了标题,现在如果想在一段话中特别强调某几个文字,这时候就可以用到<em>或<strong>标签。 但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更喜
阅读全文
摘要:文章的段落用<p>标签,那么文章的标题用什么标签呢?在本节我们将使用<hx>标签来制作文章的标题。标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。语法:<hx>标题文本</hx> (x为
阅读全文
摘要:CSS设置颜色 嵌入式: <style></style>,即CSS样式写在</title>之后,</head>前面,即在<head></head>里面,如: ... <head> <title>p标签</title> <style type="text/css"> .first{color:red;
阅读全文
摘要:标签的用途 标签的用途:我们学习网页制作时,常常会听到一个词,语义化。那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中有想强调的文
阅读全文
摘要:我们来了解一下<head>标签的作用。文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 下面这些标签可用在 head 部分: <title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标
阅读全文
摘要:html文件的结构:一个HTML文件是有自己固定的结构的 代码讲解: 1. <html></html>称为根标签,所有的网页标签都在<html></html>中。 2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<li
阅读全文
摘要:1.获取数组中最多的元素(用max函数) >>> a = [1,2,2,4,3,6,3,9] >>> max(set(a),key = a.count) 2 很明显上面是漏掉了3,我觉得做数据还是要严谨的,2和3同样满足要求而丢弃3是非常愚蠢的做法。 2.使用函数Counter,可以迅速获取list
阅读全文
摘要:使用函数locals() >>> for i in range(5): ... locals()['X%s' % i] = '' ... >>> print(X0,X1,X2,X3,X4) >>> print(X5) Traceback (most recent call last): File "
阅读全文
摘要:lazy_object_proxy 懒惰对象代理模块:lazy_object_proxy 探索该模块:这个模块有何用? >>> import lazy_object_proxy >>> def expensive_func(): ... a = 2 ... b = 2 ... print("开始计算
阅读全文
摘要:前言 我们都知道int()在python里面是用来进行强制数据转换的,比如可以将浮点数转换为整数(直接舍去小数部分),将字符串数转换为阿拉伯数字......................... >>> i = 1.234 >>> i 1.234 >>> int(i) 1 >>> i = 1.567
阅读全文
摘要:引用链接: https://wenku.baidu.com/view/cb80f82383c4bb4cf7ecd13b
阅读全文
摘要:跳转指令里面的脉冲信号的响应问题 跳转指令CJ的功能是跳过一些程序去执行另外的程序,我们都知道上升沿脉冲指令是从低电平到高电平时动作,那么当跳转指令条件不满足时会执行满足条件时被跳过的程序段,(执行被跳过的程序)当程序瞬间执行时里面有上升沿脉冲指令时程序该如何响应? 下面我用GX-WORKS模拟一下
阅读全文
摘要:前言: 规范:在修饰32位操作时不管变址的数有没有超过16位都应该使用32位变址的格式。 提示:变址操作超16位的可以是对十进制数或者十六进制数进行操作,其它超16位的可以自己具体分析查找。 变址寄存器的编号和定义: 变址寄存器的功能和构造: 变址寄存器对软元件的修饰:
阅读全文
摘要:源型输入与漏型输入(参照点 输入端子X,比如X0~X7 , X10~X17) 须知的前提条件:X端子为输入端子,输入模式是以输入端子X为参照点,判断条件为输入端子上电流方向。 源型输入 电流从X端子流入的为源型输入 注:从X端子有电流输入,表明有能量输入,所以称之为源型输入,之所以称为输入是因为X端
阅读全文
摘要:带锁存的7段码显示指令 实例格式: SEGL D0 Y20 K1 [S.] [D.] [n] 注: [D.]只能使用Y 单个带锁存的7段数码管: 指令格式: 实例格式: SEGL D0 Y20 K1 功能: 将D0中的二进制数据转换成BCD码,送到连接在Y端口上的带锁存的7段码显示器中进行显示。 2
阅读全文
摘要:摘 要 : 以 电 梯 控 制 为 对 象 ,利 用PLC梯形图编程实现电梯控制功能的设计。围绕该中心展开了详细的设计分析,对 电梯PLC控制的I/O 口变量设置、开关门控制、楼层显示、轿厢楼层呼按钮控制等内容进行了一一阐述。下面的设备是专门为“天煌杯”比赛项目准备的,下面我来带着大家一起主要分析一
阅读全文
摘要:卡诺图 卡诺图是逻辑函数的一种图形表示。 一个逻辑函数的卡诺图就是将此函数的最小项表达式中的各最小项相应地填入一个方格图内,此方格图称为卡诺图。 卡诺图的构造特点使卡诺图具有一个重要性质:可以从图形上直观地找出相邻最小项。两个相邻最小项可以合并为一个与项并消去一个变量。 先来看一个简单的二变量卡诺图
阅读全文
摘要:如何根据真值表反推逻辑表达式? 第一种方法:以真值表内输出端“1”为准 第一步:从真值表内找输出端为“1”的各行,把每行的输入变量写成乘积形式;遇到“0”的输入变量上加非号。 第二步:把各乘积项相加,即得逻辑函数的表达式。 第二种方法:以真值表内输出端“0”为准 第一步:从真值表内找输出端为“0”的
阅读全文
摘要:1. 利用控制电路的逻辑关系节省输出点 节省输出点,不是把相关的输出执行机构删除。 如图0-9所示,根据图0-9(a)梯形图1的逻辑关系,对应的PLC接线图如图0-9(b)所示,需要三个输出继电器。利用控制电路的逻辑关系将其改为如图0-9(c)、(d)所示,则只需要两个输出继电器。 2. 矩阵输出
阅读全文
摘要:前言: PLC输出电路中常用的输出元件有各种继电器、接触器、电磁阀、信号灯、报警器、发光二极管等。 PLC的输出接线图设计: PLC输出电路采用直流电源时,对于感性负载(通俗的讲就是会有反向电动势的存在),应反向并联二极管,否则接点的寿命会显著下降,二极管的反向耐压应大于负载电压的5~10倍,正向电
阅读全文
摘要:节省输入点的几种方法: 1. 编码输入 编码输入是将多个输入继电器的组合作为输入信号,n个输入继电器有2n 种组合,可以用n位二进制数表示,这种输入方法可以最大限度地利用输入点,一般需要梯形图译码。如图所示,输入继电器X0、X1有4种组合(即2位二进制数00、01、10、11),用M0~M3表示,相
阅读全文
摘要:前言: 一般是将控制电路转换成PLC控制,但是大多数情况下,PLC的控制设计是根据控制要求来设计的。 输入电路中最常用的输入元件有按钮、限位开关、无触点接近开关、普通开关、选择开关、各种继电器接点等。另外,常用的输入元件还有数字开关(也叫拨码开关、拨盘),旋转编码器和各种传感器等。 1. 优化PLC
阅读全文
摘要:常用公式: 反演定理是这样表述的: 对于任意一个逻辑式,如果把其中所有的“”换成“+”,“+”换成“”,0换成1,1换成0,原变量换成反变量,反变量换成原变量,得到的结果就是。
阅读全文
摘要:1.对控制系统的控制要进行详细了解 在进行PLC控制设计之前,首先要详细了解其工艺过程和控制要求,应采取什么控制方式,需要哪些输入信号,选用什么输入元件,哪些信号需输出到PLC外部,通过什么元件执行驱动负载;弄清整个工艺过程各个环节的相互联系;了解机械运动部件的驱动方式,是液压、气动还是电动,运动部
阅读全文