• 关于

    HTML基础标签

    的搜索结果

问题

一个基础性问题但搞不明白,span标签到底是怎么用的

杨冬芳 2019-12-01 19:58:18 851 浏览量 回答数 1

回答

HTML5究竟是什么? (注:目前网上介绍HTML5的文章都是千篇一律,譬如某个时间段发布某个版本,这种对于初学者或者从实用性角度来看,没有太多甚至完全不具备学习价值,只能说了解到它的出现时间,但是具体作用是什么呢?基本都是没有详细阐述,不少读者看完估计还是一头雾水的,因此笔者会用更加通俗易懂的话语,让各位能够知道HTML5究竟是什么) 首先HTML是定义了网页的结构,那么HTML5则是其不断更新的一部分。它目前有两个版本, 第一个是万维网联盟的5.2推荐标准(w3c) ,是为网页内容开发者设计的;第二个是浏览器开发者的 HTML 生活标准(HTML Living Standard) ,由微软网页超文本技术工作小组公司(WHATWG)维护。 HTML5引入了一些新的元素和属性,同时也是一个 W3C推荐标准。Web 应用程序以这些 HTML 元素为基础运行,同时包含了 HTML4和 XHTML,但是向后兼容以前的版本。另外,它与 PHP 更加兼容,新的 api 包括拖放、网络消息和网络存储、协议处理程序注册、微数据、画布、文本轨道和定时媒体播放,还有一个标准化的服务器发送事件自动更新和更好的浏览器支持,这些新的 api 为网页设计者提供了更好的控制。对于生活标准版本,新的 API 还包括地理定位、web 音频(Javascript 音频应用程序)、web RTC 和 web 加密 API。 这些元素和属性反映了现代网站的典型用法,其中包括超文本标记语言和对文档对象模型(DOM)脚本的新兴趣。HTML5语法还允许在文档内部使用 MathML,而 indexeddb将存储扩展到本地存储之外。并且从 HTML 4.01中删除了一些不推荐的元素,包括像 font 和 center 这样的纯表示元素,这些元素的效果早已被更强大的层叠样式表所取代。此外,DOM 脚本在 Web 行为中的重要性也得到了重新强调。 HTML5知识点有哪些? 经过前面的一些讲解,相信各位对HTML5已经有初步的认识,那么接下来我们将会正式探讨下,究竟有哪些知识点需要我们学习掌握的呢?(注:由于HTML5涵盖知识点较多,且本文属于入门级别的知识指南,不适宜进行全面深入地讲解,因此笔者筛选出了必须掌握的知识点,希望能够让初学者迅速入门) 知识点一:HTML5主体结构 <!doctype> 声明必须位于 HTML5 文档中首行,声明此为HTML5文档 标签限定了文档的开始点和结束点,内部包含文档头部和主体 标签用于定义文档的头部,内部的元素可以引用脚本或者样式表、提供元信息等等,并且描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等,绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 标签声明使用utf-8编码 标签定义文档标题 定义文档的主体,内部包含文档的所有内容,比如文本、超链接、图像、表格和列表等等,均可展示给用户浏览器显示出来(注释除外) 以上就是HTML5主体结构的讲解,可能有细心地读者就会发现,有的标签是一个的,有的又是两个对称的,那么这是何解呢? 这里就引入一个知识点,通常情况下绝大多数标签都是双标签,也就是需要写成格式,但是也有的单标签也称为自闭合标签是不需要结束符的,如 等,那么这些标签具体用法又是如何呢?下面我们将会进行常用标签的讲解! 知识点二:HTML5常用标签 众所周知,HTML5简单点说就是由一个个标签组成的文档,既然如此我们就需要学习,每一个标签究竟代表着什么含义如何使用呢?(因为标签实在太多,倘若全部阐释一遍,怕初学者们嫌弃篇幅太长感到枯燥,或者是知识点太多很难吸收掌握,因此笔者精选出一些较为常用的标签进行讲解,对于标签可能有多个属性可以选择,笔者同样会挑选出较为常用属性进行讲解) 注:以下标签,笔者没有截效果图,建议初学者自主尝试 注释标签:在我们日常编写代码时候,为了日后方便自己查看或者是别人查阅,我们通常会在某些地方写上注释标签,里面内容不会展示给浏览器用户看到 阿里云开发者社区 链接标签:超链接跳转,把需要跳转的网址写到标签的href里面,然后在开始标签和结束标签之间可以写内容展示出去,当用户点击内容将会发生跳转 换行标签:换行作用,有的小伙伴可能看到这里会说,为什么我写也是有效果的呢?这种写法不能说错误只能说是老版本的规范,按照HTML4.0规范都需要按照XHTML的写法,也就是对于单标签都是采用加斜杠的写法(下同) 按钮 按钮标签:按钮上需要展示什么文字,可在开始标签和结束标签之间写入,现阶段若写静态网站用得较少,后期学JS制作动态网站或者做交互时候比较常用 内容 块级标签:标签本身没有特殊含义,那么在其里面可以写文本内容,或者是加入其它标签均可,凡是加入其内部所有东西都会被其所包裹,形成一个独立的块级区域并且独自占用一行(css可格式化) 标题 标题标签:用于定义标题,从h1至h6均可根据自身需求选择 分隔符标签:起到装饰分隔作用,默认显示为一条黑色的水平线 图片标签:展示图片,src里面放置图片的链接,然后有时候可能出现各种原因导致图片未能加载,那么系统会自动展示alt里面的文字内容 输入框标签:默认是输入框,当然其有多个属性可以选择,然后较为常用的是type属性,该属性又有多个值可供选择,如: password 用户输入任何文本内容均会显示为小圆点 checkbox 选择框 Button按钮 列表 列表标签:通常用于展示一列数据,而且数据所采用的css样式均相同,譬如导航栏、当然还有 有序列表不过较为少用 段落 段落标签:写在内部的一段文字将会被定义为一个段落 脚本标签:现阶段不会用到,等学习到js需要用到,初学者可在标签内部写js代码,随着学习深入可以采用外部写好js文件后导入 文字 脚本标签:通常需要搭配css样式进行使用,对部分内容进行样式修改 样式标签:现阶段不会用到,等学习到css需要用到,样式需要写在标签内部 HTML5入门知识指南 经过前面的一系列学习,相信各位已经初步掌握HTML5的使用,能够制作一些简单的界面了,当然对于学习能力较强或者有一定基础的同学,可以自主深入学习HTML5深层次的知识点,当能够熟练敲出你想要的界面时候,那建议开始学习CSS让界面变得更加美丽,笔者下期将会给各位带来CSS入门知识指南,欢迎大家踊跃参与学习,当然如果有童鞋看完本文,对于某些知识点还是不太明白,或者是对下一期学习有什么建议,欢迎各位在下方评论区留言哦,如果觉得笔者文章写得不错,那么也可以分享给朋友一起学习,咱们下期再见啦!

剑曼红尘 2020-03-03 17:56:06 0 浏览量 回答数 0

问题

CSS3静态页面开发-?

moduletek 2020-08-14 12:17:49 8 浏览量 回答数 0

阿里云试用中心,为您提供0门槛上云实践机会!

0元试用32+款产品,最高免费12个月!拨打95187-1,咨询专业上云建议!

问题

Web开发者不可不知的15条编码原则

技术小菜鸟 2019-12-01 21:19:56 2473 浏览量 回答数 1

回答

看html文件,好像没有引入js文件 如果确实引入了js文件,建议浏览器测试时,使用f12,打开控制台,查看是否有js错误信息来分析。 ######回复 @gdutqiang : 不应该你这样引用吧,js脚本要放置<script ></script>标签里面,直接引用到html文件里,应该会直接显示,不起作用######谢谢您的回复,确实是没有引入js文件。 但是我在原来的基础上 添加了 <? php include "./mylogin.js"; ?> 还是不会弹出的###### include   造成用php的计时器执行js  明显错误 需要在html里面用<script ></script>标签引用

kun坤 2020-06-03 09:39:43 0 浏览量 回答数 0

问题

前端小白入门HTML基础 【新手百问合集】

马铭芳 2019-12-01 20:09:03 2532 浏览量 回答数 4

问题

求助html标签的基础问题

小旋风柴进 2019-12-01 20:21:11 1129 浏览量 回答数 2

问题

谁能最好用javascript解决给出URL不参考<base>问题

小旋风柴进 2019-12-01 20:23:35 1153 浏览量 回答数 1

问题

搜索引擎优化7大原理

aizhan 2019-12-01 21:00:37 6153 浏览量 回答数 0

回答

两天多了没人回答,很冷清啊。所有的页面显示都是HTML,无论是原生HTML或者说是此基础上的模板或者其它,最终的形式都是HTML。 然后这些所谓的模板,就是在原本单一的HTML 基础之上做了许多便于开发的事情。比如逻辑判断,比如运算,比如过滤器。当然了,还有比较重要的数据绑定。 数据绑定的功能得到的结果就是写页面,相似的页面仅需提供一个“模板”,相应的地方丢进去需要的数据即可,此处的“模板”是一个可以理解为数据容器,相当于商场柜台,商场本身已经提供了展示柜,即为此处“模板”,而里面需要展示的东西即为值。这也就使得一个网站 “动态” 化了。 然后回到你问的模板,你所提到的‘网上的“html模板”’,并不知道你指代的是什么。Jinja2 是模板,Flask这个框架把它整合在内,对于一种很简单的使用情况,函数返回到相应模板并给定需要传递的值,页面即可获取并解析、显示。 如下代码: @app.route('/') def index(): return render_template("index.html", data="world") 以及 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> Hello {{ data }} ! </body> </html> 假设是这种使用情形下需要前后端分离,需要做好的就是前后端约定好需要传递、接受的数据即可。 还有一种模板,纯JS的,如AngularJS 的 ng-template。它所做的事情,也是将获取到的值传递给页面并显示出来。只是多了很多额外的功能。比如自定义指令: var app = angular.module('MyApp', [], function(){}); app.directive('helloWorld', function() { return { restrict: 'E', template: '<div>Hello World!</div>' }; }) 以及 <hello-world></hello-world> 这里的hello-world标签显然是HTML自身所不具备的,但是通过以上自定义指令,通过Angular解析即可使用。而这种使用情境下的前后端分离,体现在了服务端仅仅提供数据,服务端不关心数据如何进一步处理,如何解析到页面。这样的话,前端更近一步的分离出来了,到了可以不关心后台使用何种语言,无论Python、Java或者其它,只要能提供数据即可。 对于Flask里用到的Jinja2,AngularJS 里的ng-template,均可以理解为框架已整合好,开箱即用的。基于这种情况必然会有人对此不满不喜欢而希望有其它的东西,因而必然有其它模板。比如Jade,一种以Python风格写HTML的模板,比如Transparency。 那么,问题来了,假如没有这些模板,你该怎样去写页面呢? 另外,以上的回答,可能全都是错的,所以需要你自己去考证, XD。

杨冬芳 2019-12-02 02:54:58 0 浏览量 回答数 0

回答

因此MyBatis是以iBatis为基础扩展而来,具备许多新的特性; 相对而言,iBatis使用起来较为复杂,并且目前已无人维护,所以我也建议题主进行ibatis升级,这对业务并不会产生影响。下面简单谈下MyBatis相较于ibatis的优点吧:我猜题主本身用的是ibatis2.x,在这个版本中我们需要在DAO的实现类中指定具体对应哪个xml映射文件,而从2.x升级到了3.x也就是MyBatis时,Mybatis自动会实现DAO接口中的方法与xml映射文件中的方法绑定,并且自动生成相应接口的具体实现,这比ibatis省事不少。并且Mybatis在if表达式里可以使用OGNL表达式,ibatis就只能使用一些固定的标签,这可以帮助我们使用任何第三方框架的方法进行判断查询条件,如以下语句:mybatis的其他一些特性可以参考下:http://www.mybatis.org/mybatis-3/zh/index.html当然如果项目比较庞大,在保证业务不受干扰的情况下升级ibatis的工作量会比较大,将会有一个不断试错的过程,这里找寻了一些升级步骤和总结,希望可以帮助到你:https://blog.csdn.net/isea533/article/details/41517531https://blog.csdn.net/u010856276/article/details/82146607

uestc_ys 2019-12-02 01:40:01 0 浏览量 回答数 0

回答

LZ的问题: 一切皆为框div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。您可以使用 display 属性改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。——《W3School:CSS 定位》块框和行内框有明确的包含关系: 块框可以包含块框行内框可以包含行内框块框可以包含行内框行内框不应该包含块框(若违法这条规则,结果很复杂,但绝对难以达成想要的效果)更多区别: block元素默认宽度自适应于外层,而inline元素宽度自适应于内部block元素默认从上往下铺排,inline元素默认从左往右铺排block元素可以设置上下margin,inline元素不可以至于float,它主要是为了满足环绕的效果,请阅读:CSS float浮动的深入研究、详解及拓展(一)、(二)。 由于LZ缺的知识点太多,这里实在是写不完。还是建议完成w3school的相关课程学习,和codecademy的CSS Positioning类目下的课程。 如果LZ有英文阅读能力,在实践后可以以这篇文章来指导知识的深化:《【译】理解 CSS 规范》 下面主要是反驳“块级元素前后会带有换行符”的误导性观点。 CSS的问题,越基础,就越容易出现误解。 “块级元素前后会带有换行符”这种说法应该是来自于实战,用类比的方式做了相应知识点的内化。读到这句话,大家也可以很轻松地联想起word之类的文本排版软件的操作:Q: 如果我有文字段A和文字段B,我想让A和B左右不交叠,折开一行,我该怎么办?A: 按回车。Q: 如果我有文字段C和图片D,我想让D不出现在C中间,从C下延排起,我该怎么办?A: 按回车。 是这样的吗?把word之类的文本排版软件的思维带到HTML里面来,下面的思维应该很常见: 在两个元素之间死命摁回车,想让两个元素上下隔得远一些 标签放在任意两个元素之间,想让两个元素上下隔得远一些。http://jsfiddle.net/humphry/3Lk2Q/点击预览 我敢相信到现在都有人是用(或者另外一个有高度的 标签)而非margin来做的垂直间隔。用Word的方式来理解HTML,用来做间隔,等到试验出来用font-size和line-height去控制的高度,以调节两个div之间的垂直距离的时候,就彻彻底底被带到沟里去了。(《你真的了解HTML吗》)“块级元素前后会带有换行符”的误导性大于它的帮助,LZ甚至已经问出了“如果是display:inline;的话那元素没有换行符就会全挤在一行上是吗?”这样的问题。 换行符不是重点,重点是盒子。 要正确理解CSS排版中的这个基础部分,得先从文档流开始。 CSS为了达到日常排版的需求,给予了文档流以现实依据:我们的书写/阅读习惯:这里就展现了从右向左,从上到到下的语言书写。因此跟这个世界的现象一致,文档流的顺序不总是从左往右从上到下,一系列属性可以改变它,不过我们这里不谈这个,我们只谈常规流。 CSS中的文档流中的两种元素,行内框的堆叠方向对应着我们的书写顺序,而块框则默认从上往下堆叠: 行内框——inline——从左往右,从上往下块框——block——从上往下换行在这个顺序中重不重要?不重要,这个过程中,重点是框往哪个方向堆叠。 更加深入的常规流介绍:《w3help:常规流( Normal flow )》 前端是一个由实践发展起的方向,相关知识点的理解大家经常用的是类比,这很正常。盒子堆叠的机制用类比,说成是换行符,对不对呢? 对也不对。说对,是因为,让盒子不左右交叠、而是上下比邻的机制跟文本排版软件里面的回车分割确实相似;说不对,是因为,如果理解到了盒子的层面,理解了块级元素和行内元素是如何按照文档流方向进行排版,理解了float元素是如何做到环绕,理解了浮动和清除浮动,就会明白,“块级元素天生自带换行符”的说法带有根深蒂固的Word排版的思想,也很有误导性。 最好的理解CSS和HTML的办法,是用CSS和HTML的方式进行思考,而不是用其他的经验来套。这就像是英语口语,有英语思维,才能流利地表达。 更新:感谢P酱,这里将容易混淆的部分修改了。“行内框不应该包含块框”是CSS相关,标签无关的,“默认是行内的元素不应该包含默认是块级的元素”跟DTD声明和浏览器有关。但总体来说,破坏这两条规则很难达成想要的效果。

a123456678 2019-12-02 02:21:19 0 浏览量 回答数 0

问题

极光推送一个朋友,三四天的Rails学习之路? 报错

优选2 2020-06-04 21:19:39 3 浏览量 回答数 1

问题

极光推送一个朋友,三四天的Rails学习之路? 400 报错

爱吃鱼的程序员 2020-06-02 13:32:16 0 浏览量 回答数 1

问题

极光推送一个朋友,三四天的Rails学习之路? 400 报错

爱吃鱼的程序员 2020-05-29 19:26:23 0 浏览量 回答数 1

回答

我觉得对于HTML+CSS的制作上面说的也都对,我补充一点自己的看法。先审查整个设计稿,在心里构思出页面的大致结构。 逐步细化每一块的结构,同时包括CSS大致怎么写,比如双列布局的时候 两个DIV 各自左右浮动,这个 在没做之前心里要有一个轮廓。否则 扎笔(键盘)就写,很容易各种返工、修改。基础。 HTML标签的用法、CSS常用的规则。一时想不起来的话,W3C、MDN去复习。 JS部分现在应该很多人都是在用jQuery ,那么对于jQuery的常用API也要有所熟悉,同 HTML、CSS一样,不清楚的话 W3C、jQuery 官网各种去刷吧。积累总结。 把你做过的东西总结一下,转化为你的经验,下次遇上同样的问题可以很快解决,否则次次百度,回回挠头,效率注定上不去的。 把一些常用的代码想办法 复用起来,比如 snippets。善用你的工具。 工欲善其事必先利其器,像了解你自己一样了解你的工具。工具是你在战场上的小(hao)伙(ji)伴(you),你连你小伙伴都不清楚,还能不能好好玩耍了,小伙伴会伐开心哒。 比如Chrome 的开发者工具,FireFox 的 Firebug。在修改CSS的时,按下shift和方向键,可以以10为基准的修改数值;alt 以 0.1 为基准。 查找元素的时候,以上两者都已实现通过 CSS选择器查找元素。如果你用DW、ST、Webstrome 这些编辑器|| IDE,那么也请熟悉她。比如ST删除行的操作,快捷键ctrl+shift+k 要远比你 退格键一个一个删或者选中一行然后删掉快;复制行的时候ctrl+shift+d 也远比你 粘贴复制 来得快一些。总之,熟悉你的小伙伴。保持学习的激情和心态。

a123456678 2019-12-02 02:20:26 0 浏览量 回答数 0

问题

【分享】WeX5的正确打开方式(1)

小太阳1号 2019-12-01 21:15:23 6117 浏览量 回答数 0

回答

这个问题太简单了,阁下却是搞复杂了。 首先指出代码不规范的地方: ul标签下的div标签不规范,虽然不会抱错; li.innerHTML='<inputtype="checkbox " ></input>';这行代码应该去掉后面的“</input>”或者改为li.innerHTML='<inputtype="checkbox"/>'; 阁下这样用id,中文id,我不敢确保又没有问题,但id不能有重复,而且非常不建议用中文 以上阁下修改了然而并不一定有什么乱用,但看阁下的代码,我觉得阁下是不是用html和js有没有满月?若阁下是初学者,请好好打好基础先,学习一下w3c规范,这对阁下以后的学习和工作大有帮助。 以下正文: 代码varstr=document. varstr=document.getElementsByName("testCommand");  getElementsByName方法是通过Name获取元素,而你的 <ulclass="testCommand">是class属性,是否应该用getElelementsByClassName方法? 嗯,好像你这个是误导人的,你的意思应该是 li.innerHTML='<inputtype="checkbox "name=" testCommand"/>'; 然后是 varliid=str[i].value;你的测试代码还是有问题,li下的checkbox没有value熟悉啊  varparent=document.getElementById("done");  varchild=document.getElementById(liid);  parent.parentNode.removeChild(child); 这段代码:你确定你写对了吗吗吗??? parent.parentNode??等能remove对吗? 还有,经过我测试,动态添加的删除绝对没有问题!有问题的是你的代码,好好检查和调试先吧。 谢谢大神的指教,确实是对js和html不熟悉,自己就是个小学生,多谢批评教育!

爱吃鱼的程序员 2020-06-14 14:59:52 0 浏览量 回答数 0

回答

问题①:现在Web前端开发的薪资待遇怎么样? 问题②:学了Web前端开发技术出来是否好找工作? 问题③:Web前端开发需要掌握哪些技术知识点? 问题④:非科班出生学习Web前端是否能做找到工作? 第一:前端技术在我国发展的还算是比较完善,只要你现在能把前端技术学好,具备一定的开发经验,想要找到合适的岗位工作,基本上还是没有什么问题。21世纪是信息时代,随着互联网快速的发展,市场上对前端技术也会持续增加。我们来看下目前前端开发在一线城市的薪资待遇水平: 可以看出现在前端开发在一线城市的薪资待遇水平是在16k左右,当然这是具备一定开发经验的,一般就我们刚学完前端技术出来,能顺利通过企业岗位工作面试,基本上能拿到的薪资待遇在3-7k左右,据你的技术水平而定。 第二:学了前端技术出来是否好找工作呢?这个没有绝对肯定的回答。这个要根据你的技术水平而定,我上第一点的时候已经说了,只要你可以把市场需求的前端技术知识点都掌握,具备一定的开发经验,想要找到合适的岗位工作,基本上没什么问题。如果说你就学了一点简单的HTML,CSS就想找到这方面的工作,那我建议你还是放弃吧。 第三:想要从事前端开发方面的岗位工作,需要掌握哪方面的技术知识点? 1、HTML HTML页面固定,标签不多,学起来比较容易,这也是很多零基础转行IT首选前端的主要原因。HTML是页面结构的基础组成部分,是网站的基础,编写HTML代码需遵循HTML代码规范,臃肿混乱的HTML代码不但会影响其本身的表现,而且与其对应的CSS和Javascript代码也会变得难以编写和维护。 2、CSS CSS负责网页类容的表现,也是前端开发需要掌握的核心内容之一。CSS和HTML代码一样,没用复杂的逻辑,上手也比较容易,其主要难点在于如何合理利用CSS的组合和继承特性来编写简洁,维护性好的CSS代码。 3、JavaScript JavaScript是一种基于对象和事件驱动的客户端脚本语言,是页面实时动态交互的技术基础。开发人员在熟悉Javascript基本语法和基本的编码规范之外,还应该了解并解决在不同浏览区中JavaScript的兼容性问题。另外,目前流行的Web编程方式会有部分后端代码存在于前端页面中,和前端HTML、Javascript等混合在一起,如PHP、JSP、http://ASP.NET等,因此,前端开发工程师也有必要了解一些后端编程技术。 4、跨平台、跨浏览器 跨平台指移动设备(如智能手机和平板电脑)和PC端; 随着IE6,IE7市场占有率下降和众多浏览器标准的重视,目前流行的前端框架已经很好滴解决了浏览器兼容问题。尽管如此,还需熟悉常见的浏览器兼容问题,如IE7、IE8的兼容,HTML5中新特性的兼容等。 5、前端框架 前端框架的出现在很大程度上降低了前端开发的难度,框架统一了编码的方式,封装了浏览器兼容问题并添加了大量的扩展功能。目前比较常用的前端开源框架有很多,比如jQuery(Javascript库)、angular2、vue.js、react等。 6、调试工具 对于前端代码,在调试过程中需要查看HTML结构变化,CSS渲染效果,Javascript代码执行情况以及HTTP请求和返回的数据,并了解网站各部分的性能等。主流浏览器都有对应的浏览器插件来辅助完成这个工作,如IE中的IE Dev Toolbar、Chrome中的Developer Tools、Firefox中的Firebug等。 7、实战经验 企业在招聘的过程中都想要选出上手即用的前端人才,这就需要求职者具备相应的开发经验、能够很快的接手工作。因此如果你想要学习Web前端,不仅要掌握理论知识,更要注重积累实战经验。 8、沟通表达能力 求职面试需要好的表达能力,在日常工作中前端人员也要具备好的沟通能力。Web前端是介于UI和后端逻辑开发之间的岗位,需要与UI设计师沟通确定效果,还需要和后端工程师沟通确定前后端交互,良好的沟通让你这些过程变得轻松许多。 第四:非科班出生学了前端技术出来可以找到工作吗? 对于这个问题,我想说,你考虑的地方有点多了,是否可以找到工作呢?我的回答是肯定的。前端技术没有一定说是只有科班出生才能学的,非科班出生也可以学前端。你看现在市场上上千万的做开发的人群,难道说他们都是科班出身的吗?不可能对吧。所有加油吧。

茶什i 2020-01-13 11:35:15 0 浏览量 回答数 0

回答

Re我是零基础,上传的首页想插入一个图片 帮帮忙啊 ------------------------- Re我是零基础,上传的首页想插入一个图片 求助啊 ------------------------- 回3楼西秦的帖子 怎么调用标签,修改编写img吗 ------------------------- 回4楼西秦的帖子 403我已经改回来了,但是还是没有图片显示,需要怎么把图片上传到根目录,才能显示图片呢 ------------------------- 回4楼西秦的帖子 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .WW {     font-size: 97px;     font-weight: bold; } </style> </head> <body> <p align="center"><img src="备.gif" width="3264" height="1836" longdesc="http://   .com" /></p> ------------------------- 回8楼我的中国的帖子 绝对路径怎么设,有服务器根目录的路径吗 ------------------------- 回9楼西秦的帖子 我搜了一下,弄成了,谢谢 ------------------------- 回8楼我的中国的帖子 我搜了一下,弄成了,谢谢

长风飞云苍 2019-12-01 23:38:57 0 浏览量 回答数 0

问题

H5技术百问——不懂H5你就OUT啦

yq传送门 2019-12-01 20:27:41 42586 浏览量 回答数 47

回答

HTML + CSS 前端的入门门槛极低,体现在HTML和CSS上。运行环境就是浏览器,推荐Chrome。你需要的只是一个文本编辑器,推荐Sublime Text 3,有不少好插件比如Emmet,谷歌搜一下很容易了解到的。当然你非要用记事本的话,也不是不行的。刚入门查阅资料可以用 w3school 或者 MDN 。 HTML和CSS不是编程语言,前者只是结构标签,后者则是样式配置,入门是非常简单的。网上资料也有很多,推荐慕课网 HTML+CSS基础课程。 我当时是看了一本书 Head First HTML and CSS,讲得浅显易懂,不过价格比较感人,也是只翻一遍的书,没有必要买了。 迅速刷一遍慕课网,对HTML和CSS有个大致印象就好。想巩固HTML标签可以去看看16年的task1-1。 HTML5的API可以先放一放,回头再看。 接下来就是深入学习CSS了。推荐: 《CSS权威指南(第3版)》。很枯燥的一本书,但我确实不知道哪本书更适合了。花两三天硬啃下来就好了。属性细节不必记忆,以后用到肯定要再查的。着重点放在大局上,比如盒模型,浮动和定位这些,抓住重点快速过一遍。 《CSS3 专业网页开发指南》。CSS3也是需要掌握的内容。但这里还是以了解为主,知道CSS3有什么内容就好,记忆属性是枯燥且毫无意义的。 以上内容用时5天左右,下面是实践。 学了几天HTML和CSS了,应该也有点成果了。打开IFE2015 task1,写个静态页面吧。 我X,完全写不出来。 这是正常的。去看下别人的代码吧,看一小部分就开窍了。忘掉的属性就查书或者w3c,多尝试,不断踩坑才有进步。 画完第一张图后,别着急往下写。你的代码肯定会有如下问题 胡乱的代码缩进毫无章法的属性顺序 满页的div 不停地写id和class重写吧,是的。重写之前先看一份代码规范 GitHub - ecomfe/spec: This repository contains the specifications.。当然代码规范不是唯一的,我最早看的是这一份,所以代码风格也一直维持到现在。 再去看一下别人提交的代码,多看几份。当然自己也要判断,不能听风就是雨啊,人家写得不好你再去重写一次,等于你也有责任对不对。 开始重写了,会发现功力大增,写代码速度也快了很多的。 写到第三张页面的时候,应该比较熟练了。如果看到布局就大概知道应该怎么写了,那就可以进入JavaScript的学习了。 以上内容用时10天左右。 进阶部分可以回头再看: 掌握预处理工具Sass,自动化工具Gulp。 阅读Bootstrap源码。 《CSS揭秘》,极其惊艳的一本书,涵盖了CSS3的很多奇技淫巧,虽说有些地方不太实用,但让人眼前一亮,很值得看。JavaScript 这是至关重要的阶段。 强烈推荐《JavaScript高级程序设计(第3版)》,俗称红宝书。前七章是重中之重,必须反复阅读,直至完全理解,期间可配合其他书一起读。DOM,事件流,表单,JSON,Ajax与最后几章也相当重要。其余章节可以略读或跳过(比如浏览器嗅探,XML以及那些列举大量API的章节,完全可以用到再查) 推荐《JavaScript语言精粹》,俗称蝴蝶书。超薄的一本,半天就可以看完。JavaScript是一门有很多坑的语言,我个人是喜欢把这些坑点全部搞清楚的,但这本书却避而不谈了,剩下的也就是所谓的“精粹”了。但清晰地过一遍知识点总是好的。 强烈推荐《你不知道的JS》。精彩至极的一本书,将JavaScript的坑一网打尽。之前搞不懂的问题,比如闭包,this之类的都可以在这里找到答案。 ES6也是必学的内容,推荐阮一峰老师的《ES6 标准入门》。但这本书以API居多,所以还是留个大概印象,以后写到类似的地方,查一查有没有ES6更简洁的写法就好,不必死记硬背。以及需要学会Webpack的使用,Babel和模块化就靠Webpack了。 不太推荐《JavaScript权威指南》,也就是犀牛书。那就是一本字典…… 进阶: 《JavaScript设计模式与开发实践》,设计模式是必须了解的内容,这本是写得不错的。 《高性能JavaScript》,红宝书作者的另一力作,讲了一些优化技巧与性能瓶颈问题,值得一读。 以上内容用时1个月左右,中途可穿插IFE2015 task2的题,比2016年的要简单。 这些书全部刷完的话,应该可以跟人谈笑风生了。 开始实践,IFE2016阶段二的题,想怎么刷就怎么刷吧。如果有编程经验的话,应该没什么压力了。JavaScript框架 这部分就比较自由了,每个人点的技能树都不一样的。前端的发展是爆炸式的,换工具比翻书还快,所以还是以看文档为主了。 目前主流框架经常被提及的是React,Angular,Vue。知乎搜一搜就有相当多的优秀答案了。不过这个答案也有时效性,说不定过两年这些框架全都被淘汰了呢【逃 学习至少一种框架,把IFE2016刷通关吧。耗时1个半月左右。 进阶:看各种源代码。这也是我最近打算做的事情,但是好像期末考要到了TAT 最后补充一下,计算机基础知识是很重要的。由于本人有OI的经验所以稍微占点优势。再推荐几本书,抽空还是要看看的: 《深入理解计算机系统》,CSAPP,也是我们专业这学期的课程(但是我的专业明明是EE啊)。 《计算机网络 自顶向下方法》,看名字就知道必读了吧。 操作系统好书挺多的,推荐一本 Operating Systems: Three Easy Pieces ,英文不够好就《现代操作系统》吧。 算法和数据结构,推荐两本:《算法导论》《数据结构与算法分析》。似乎算法和数据结构与前端关系不大,但作为一个码农,不要求你写红黑树,至少快速排序和二分查找这种要会写的吧。

1359302247831492 2019-12-02 00:16:32 0 浏览量 回答数 0

问题

Servlet 3.0 新特性详解? 400 报错

爱吃鱼的程序员 2020-06-04 11:52:09 3 浏览量 回答数 1

问题

第三章 – 布局,块和模板:报错

kun坤 2020-06-06 16:14:05 0 浏览量 回答数 1

问题

【分享】WeX5的正确打开方式(2)

小太阳1号 2019-12-01 21:17:14 3935 浏览量 回答数 1

回答

做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结一下,通常进行自适应高度和宽度,图片时,一般与页面的布局存在关系。 1、最小尺寸分辨率1024*768(传统17寸显示器),则可以采用940px、960px、或者常用的980px作为最小宽度 2、1024768之后稍大的分辨率就是1280768了,则可以采用1200px或者1220px作为稍大的网页宽度 3、支持css3、html5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签 4、不支持css3、html5的脑残浏览器特别是<=ie8系列则需要用js以及resize事件来控制html的布局标签宽度了 5、宽度自适应需要对每个显示模块进行不同宽度的计算,在做html布局时需要大量的计算与适配。 6、宽度自适应为不同宽度显示器写布局元素时常用的css 下面我们看下,如何用js和css来自适应屏幕的大小。 一:了解高度和宽度的基础 下面用图片来说明: 网页可见区域高宽为:document.body.clientHeight||document.body.clientWidth 网页正文的区域高宽为:document.body.scrollHeight||document.body.scrollWidth(包括滚轮的长度) 网页被卷去的上左区域:document.body.scrollTop||document.body.scrollLeft 二: css自适应高度 1.两栏布局,左边固定,右边宽度自适应 方法一: //html部分 左边 正文 //css部分 *{margin:0;padding:0} #left{float:left;width:200px;background:red;} #bodyText{margin-left:200px;background:yellow; 方法二: //html部分 左边 正文 //css部分 #left{float:left;width:200px;background:red;margin-right:-100%;} #body{width:100%;float:left;} #bodyText{margin-left:200px;background:yellow;} 2.三栏布局,两边定宽,中间自适应宽度 方法一: <div id="left">左边</div>----注意和div的位置有关系 <div id="right">右边</div> <div id="center">中间</div> //css部分 #left{width:200px;background:red;float:left;} #center{width:auto;background:blue;} #right{width:200px;background:yellow;float:right;} 方法二: html部分: <div id="body"> <div id="center">中间</div> </div> <div id="left">左边</div> <div id="right">右边</div> css部分: #body{width:100%;float:left;} //设置浮动和width:100% #body #center{background:red;margin-left:200px;margin-right:300px;} //margin-left:100%的使用方法 #left{width:200px;background:yellow;margin-left:-100%;float:left} #right{width:300px;background:blue;margin-left:-300px;float:left} -----如果设置为margin-left:-100%,则会跑到body的左边。 -----如果设置为margin-left:-300px(即right的宽度),则会跑到body的右边 3.关于最小宽度和最大宽度 这里依然结合布局来看,如下面的代码:自适应宽度,从而改变布局。 //html部分 <div id='container'> <div class='one'></div> <div class='two'></div> <div class='three'></div> </div> //css部分 #container{width:100%;} .one{width:20%;background:red;} .one,.two,.three{float:left; height:100px;} .two{width:60%;background:yellow;} .three{width:20%;background:blue;} @media (max-width:800px){--如果浏览器小于800px .one{width:40%;} .two{width:60%} .three{width:100%} } @media (max-width:400px)--如果浏览器宽度小于400px { .one{width:100%} .two{width:100%} .three{width:100%} } 理解什么叫最小宽度和最大宽度,最小宽度指为元素设置的最小宽度,到达最小宽度后,缩放文本不会起到任何作用 最大宽度是所有元素所能达到的一个上限,不能再继续往上增加。 三: css处理自适应高度 //html部分代码 <div id="fit"></div> //css代码 html,body{margin:0;height:100%;} #fit{width:200px;background:yellow;height:100%;border:1px solid red;} --这里同时给html和body加样式,是为了兼容各大浏览器。 IE 处于混杂模式时,body以窗口为高度参照,body设置为100%就可以使得页面和窗口一样高,body里面的嵌套div也可以扩展到窗口高度, 这样的话可以使布局适应浏览器窗口大小。窗体 》body》div (html ,body {overflow:scroll} 一层滚动条) 但是当处于标准模式时,body以html标签为高度参照,html标签才以窗口为参照,所以仅仅body 100%,并不能使它的子div100% 占据整个屏幕 还要使得 html 100%使得 html获得窗口大小才行。窗体》html》body》div (html ,body {overflow:scroll} 两层滚动条 ,html的滚动条从来不会用到) 父级随子级高度变化而自适应变化与子级随父级高度变化而变化 <div id="fj"> 我是父级 <div id="zj1">我是子级1</div> <div id="zj2">我是子级2</div> </div> //css部分 #fj{border:4px solid red;} #zj1{border:2px solid yellow;} #zj2{border:2px solid blue;}----这种情况下,父级高度随着子级div的高度自适应的改变 如果子div使用了float属性,此时已经脱离标准流,父div不会随内容的高度变化而变化,解决的办法是在浮动的div下面,加一个空div,设置clear属性both <div id="fj"> 我是父级 <div id="zj1">我是子级11111111111111111111111111</div> <div id="zj2">我是子级222222222222222222222222222222222222222222 222222222222222222222222222</div> <div id="clear" style="clear:both"></div>------如果去掉这句话,则父级div高度,不会随着子级的高度变化而变化 </div> //css部分 #fj{border:4px solid black;} #zj1{border:2px solid yellow;float:left} #zj2{border:2px solid blue;float:left} 高度的自适应的方法还有很多,这里不再列举。像height:auto等等。 四:js处理高度和宽度自适应问题 <div id="div1" >222222222222222222222</div> //js部分 function setHeight(obj) { var temHeight=null; //FF if(window.innerHeight) { temHeight=window.innerHeight;//包括页面高度和滚动条高度 } else { temHeight=document.body&&document.body.clientHeight; } if(temHeight>document.body.clientHeight)//页面高度 { oDiv.style.height=temHeight+"px"; } else { oDiv.style.height=document.body.clientHeight+"px"; } } window.onload=function() { var oDiv=document.getElementById("div1"); getHeight(oDiv); } 宽度自适应代码: function setWidth(obj) { var screenWidth = window.screen.width; var width; var imgURL ; if (screenWidth >= 1440) { width = "1400px"; imgURL = "1400.png";//设置不同分辨率下的图片 } else if (1024 < screenWidth && screenWidth < 1440) { width = "1200px"; imgURL = "1200.png"; } else { width = "980px"; imgURL = "980.png"; } obj.style.width=width ; obj.style.backgroundImage="url(" + imgURL + ")"; }) 五:移动端的自适应高度和宽度 移动端的相对要简单些,首先,在网页代码的头部,加入一行viewport标签。 <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> viewport是网页默认的宽度和高度,上面的意思表示,网页的宽度默认等于设备屏幕的宽度,原始缩放比例为1,即网页初始大小占屏幕面积的100%。 1:由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。具体说,CSS代码不能指定像素宽度:width:xxx px;只能指定百分比宽度:width: xx%;或者width:auto; 2:一般使用em,尽量少使用px字体 3:使用流动布局 4:自适应网页设计”的核心,就是CSS3引入的media query模块。下载地址: http://download.csdn.net/download/song_121292057/8031781 自动探测屏幕宽度,然后加载相应的CSS文件。 <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="style.css" /> -------当屏幕小于400时,就加载style.css这个文件 5:除了用html标签加载CSS文件,还可以在现有CSS文件中加载。 @import url("style2.css") screen and (max-device-width: 800px);//当小于800px屏幕时,就加载style2.css文件 6:图片的自动缩放,比较简单。只要一行CSS代码:img{ max-width: 100%;}建议根据不同的屏幕分辨率,加载不同大小像素的图片。 移动端的自适应,大体上差不多就这么多,主要核心是利用mediaquery,根据不同的屏幕大小,实现不同的布局。代码可看上面的列子。这里不再重复写。

问问小秘 2020-05-12 18:08:22 0 浏览量 回答数 0

问题

玩转OneAPMBrowserInsight性能指标

sunny夏筱 2019-12-01 21:52:09 5944 浏览量 回答数 2

问题

如何在php docker映像中安装pdo驱动程序??mysql

保持可爱mmm 2020-05-17 22:33:55 0 浏览量 回答数 1

问题

【教程免费下载】面向机器学习的自然语言标注

知与谁同 2019-12-01 22:07:43 1333 浏览量 回答数 0

回答

首先需要制作此次实验的基础镜像: 1. Dockerfile的编写:   mkdir dockerfile && cd dockerfile   vim Dockerfile    #注意: Dockerfile的文件名首字母要大写     FROM alpine:latest     MAINTAINER "ZCF zcf@zczf.com"     ENV NGX_DOC_ROOT="/var/lib/nginx/html" HOSTNAME="" IP="" PORT="" INDEX_PAGE=""     RUN apk --no-cache add nginx && mkdir -p ${NGX_DOC_ROOT}/shop /run/nginx     COPY chk.html ${NGX_DOC_ROOT}     COPY entrypoint.sh /bin     CMD ["/usr/sbin/nginx","-g","daemon off;"] #定义启动nginx服务为前端启动, -g:是global段,中修改daemon off;     ENTRYPOINT ["/bin/entrypoint.sh"] #将CMD的命令,作为参数传递给/bin/entrypoint.sh 脚本.     #准备Dockerfile配套的基础文件:     1) 启动容器时,执行的脚本文件: entrypoint.sh       vim entrypoint.sh         #!/bin/sh         echo " WELCOME TO ${HOSTNAME:-www.zcf.com} WEB SITE | date | hostname | hostname -i | -${YOU_INFO:-v1}- | " > ${NGX_DOC_ROOT}/index.html         cat > /etc/nginx/conf.d/default.conf <<EOF         server {           server_name ${HOSTNAME:-www.zcf.com};           listen ${IP:-0.0.0.0}:${PORT:-80};           root ${NGX_DOC_ROOT};           location / {             index ${INDEX_PAGE} index.html index.htm;           }           location = /404.html {             internal;           }         }         EOF         exec "$@"      #它就是来接受CMD传入的参数的.   2 ) 给entrypoint.sh 添加执行权限     chown +x entrypoint.sh   3) 后期做健康检查时,使用的html文件:     echo OK > chk.html 开始制作docker镜像文件:   docker build --tag myapp:v1 ./ 将制作好的镜像文件,打上标签,并上传到harbor上。   docker login harbor.zcf.com -u admin -p 123456      #登录harbor   docker tag myapp:v1 harbor.zcf.com/k8s/myapp:v1    #先打上harbor仓库路径   docker push harbor.zcf.com/k8s/myapp:v1        #再上传镜像到harbor上。 为了方便延时恢复发布的效果,我们还需要在制作一个镜像   docker run -d --name ngx1 -e YOU_INFO="DIY-HelloWorld-v2" harbor.zcf.com/k8s/myapp:v1     #说明: -e 是指定要传递给容器的环境变量, 因为我提前在myapp中启动脚本entrypoint.sh中使用的了YOU_INFO这个环境变量,     # 因此,这里我可以直接给容器传递这个变量,来实现修改nginx首页的效果.   docker commit --pause ngx1      #将ngx1暂停,并将当前容器状态,导出为一个新镜像。   docker kill ngx1 && docker rm -fv ngx1 #制作完镜像,就直接删除测试ngx1容器.   root@k8s-n1:~# docker images     REPOSITORY TAG IMAGE ID CREATED SIZE      85355d4af36c 6 seconds ago 7.02MB    #这个就上刚制作的新镜像.   #给刚制作好的镜像打上标签:harbor.zcf.com/k8s/myapp:v2,便于上传到harbor上。   docker tag 85355d4af36c harbor.zcf.com/k8s/myapp:v2   #测试运行镜像,若没有问题,就可以上传到本地harbor上了。   docker run -p 83:80 --rm -d --name ngx1 harbor.zcf.com/k8s/myapp:v2   root@k8s-n1:~# curl http://192.168.111.80:83/    #测试镜像是否修改了nginx的首页为YOU_INFO的内容.    WERCOME TO www.zcf.com WEB SITE | Fri Jul 19 02:31:13 UTC 2019 | ec4f08f831de | 172.17.0.2 | -DIY-HelloWorld-v2- |   docker kill ngx1      #删除ngx1容器.   docker push harbor.zcf.com/k8s/myapp:v2     #最后,上传新镜像到harbor上. 现在已经有了,myapp:v1 和 myapp:v2 那就可以开始K8s的灰度发布测试了。   #先创建三个pod,一个Client,两个Nginx   #1. 先创建 Client     kubectl run client --image=harbor.zcf.com/k8s/alpine:v1 --replicas=1     #注意: alpine:是一个最小化的Linux系统,很多开源镜像站都可以下载到.     kubectl get pods -o wide      #查看Pod的创建详情.   #2. 创建Nginx   kubectl run nginx --image=harbor.zcf.com/k8s/myapp:v1 --port=80 --replicas=2   kubectl get deployment -w      #watch着监控k8s帮我们创建2个pod的过程.   kubectl get pod -o wide   #3. 登录Client,测试访问Nginx   root@k8s-m1:/etc/ansible# kubectl get pod     NAME READY STATUS RESTARTS AGE     client-f5cdb799f-2wsmr 1/1 Running 2 16h     nginx-6d6d8b685-7t7xj 1/1 Running 0 99m     nginx-6d6d8b685-xpx5r 1/1 Running 0 99m   kubectl exec -it client-f5cdb799f-2wsmr sh   / # ip addr   / # for i in seq 1000; do wget -O - -q http://nginx/ ; sleep 1; done   / #    #说明: 若你的kube-dns没有部署成功,这里的nginx可换成Service的IP.   / #    #   kubectl get svc |grep nginx    #这个就是Nginx的Service的集群IP.   #4. 以上测试可看到,已经能够实现负载均衡的效果了。     接着,开始进行灰度发布测试     #更新myapp的镜像为myapp:v2     kubectl set image --help     kubectl set image deployment myapp myapp=harbor.zcf.com/k8s/myapp:v2    #升级myapp的镜像为myapp:v2   #上面执行命令时,就可以看着,另一个终端中Client的访问变化情况,你可以发现,访问逐渐从 v1 变成 DIY-HelloWorld-v2了。   #5.测试动态调整nginx Pod的数量     kubectl scale --replicas=5 deployment nginx    #修改nginx的Pod副本数量为5个.     kubectl get pods   #接着在到Client所在的终端上,查看变化,你会发现,主机名和IP部分开始有更多变化了。   #6. 查看nginx镜像升级状态,是否成功     kubectl rollout status deployment nginx   #7. 再查看myapp的镜像是否已经升级为最新的了     kubectl describe pods nginx-xxx-xx   #8. 将myapp回滚到之前的版本,即v1版本     kubectl rollout undo --help     kubectl rollout undo deployment nginx 测试K8s集群外部访问nginx   #修改 myapp service的类型,让它能被集群外部的客户端访问.     kubectl edit svc myapp       #type: ClusterIP 把它修改为 type:NodePort   #查看svc的更新信息:     kubectl get svc #这里就可以看到,myap service的端口将动态增加一个. 如:80:30020/TCP,注意:30020是随机分配的。            #它的范围是,你在使用kubeasz部署时,设置 NODE_PORT_RANGE="30000-60000"中随机选的.   #接着就可以在集群外部的客户端去访问myapp了     http://Master或Node的物理IP:30020/

保持可爱mmm 2020-04-15 22:56:29 0 浏览量 回答数 0
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站