0

点赞

1

回复

1105

浏览

使用HTML5打造一个漂亮的个人简介页面

本文来创建一个现代感的个人简介HTML5页面。整个实验通过 前端预览工具 http://preview.tianmaying.com/ 完成,请访问 http://preview.tianmaying.com http://preview.tianmaying.com/ 前端预览工具的截图如图所示: 预览工具一共分为四个部分: 左上角为HTML代码输入区域 右上角为CSS代码输入区域 左下角为JavaScript代码输入区域 右下角的效果预览区域,输入代码后可以实时看到效果变化 渐变背景 首先来一段基本HMTL骨架: ...

htmlcss

13

点赞

8

回复

6629

浏览

使用天码营前端预览工具:Web前端开发(HTML/CSS/JavaScript)实验

本实验将创建一个简单的HTML页面,展现北京大学创新工程实践课程的老师的信息。 更酷的是,我们可以通过向微信公众号发送消息,来为这个HTML页面发送弹幕。 大家做完实验,向这个公众号发送弹幕,即可在页面上看到自己发送的信息以弹幕的形式在HTML页面上飞出来。 同学们将在这个实验中学习HTML、CSS和JavaScript的基本使用,对于Web前端开发有一个初步了解。 最终的效果图如下: 实验要求 1. 团队页面: 请同学们参考接下来的实验步骤,实现一个展示团队成员信息的HTML页面。通过点击分享生成链接,将链接发送给老师。分享时请输入学校和团队名称。实验步骤是展示创新工程实践的老师信息,你们需要替换成自己团队成员的信息。当然你们可以添加更多酷炫的效果,比如这是吉林大学的同学们的一个很酷的 作品 https://www.tianmaying.com/snippet/318/external preview 。 2. 个人页面: 请每一个团队成员实现一个展示个人信息的HTML页面,个人页面如何制作请参考另外一篇文章, 使用HTML5打造一个漂亮的个人简介页面 https://www.tianmaying.com/tutorial/morden profile 。在团队页面中,每个人的名字请增加链接,链接到个人介绍页面。个人介绍页面的链接地址可以通过分享按钮生成。 实验概览 实验分为三个步骤: 1. 编写HTML代码,展示我们希望显示的内容 2. 编写CSS代码,为内容增加样式,让展示更加美观 3. 编写JavaScript代码,让页面出现动态的弹幕效果 整个实验通过 前端预览工具 http://preview.tianmaying.com/ 完成,请访问 https://preview.tianmaying.com https://preview.tianmaying.com/ 前端预览工具的截图如图所示: 预览工具一共分为四个部分: 左上角为HTML代码输入区域 右上角为CSS代码输入区域 左下角为JavaScript代码输入区域 右下角的效果预览区域,输入代码后可以实时看到效果变化 可以点击右上角的 分享 ,生成这个页面的URL链接,在微信和微博中分享。 1 编写HTML代码 1.1 创建HTML页面框架 首先创建一个HTML页面的框架,HTML页面由 和 两部分构成。 与 之间可以编写基本的元信息,比如字符编码 与 之间是HTML的正文部分 注意大部分标签都是成对出现的,后面出现的标签会有一个 / 符号。 打开前端预览工具,已经默认给大家创建好了一个HTML页面框架: ...

javascriptcsshtml

0

点赞

0

回复

1604

浏览

最受欢迎的前端框架Bootstrap 入门

Bootstrap http://getbootstrap.com/ 来自 Twitter,是目前最受欢迎的前端框架之一。Bootstrap 提供了一套HTML基础样式、一套观感一致的组件、以及一系列的javascript插件。通过引入Bootstrap的样式文件,可以更快捷地开发web页面。 本文介绍了Bootstrap的一些基本样式和组件,包括容器、页头、媒体组件、图片、列表组。重新实现了上节课的 hello.html 。我们并未写CSS文件,仅使用Bootstrap就达到了这样的效果,所以讲Bootstrap是一个强大的前端框架! Bootstrap已经有了较为完整的中文文档。在学习中,你可以参考 Bootstrap中文文档 http://v3.bootcss.com/ ,也可以参考一些使用Bootstrap搭建的 网站示例 http://expo.bootcss.com/ 。 引入 BOOTSTRAP Bootstrap通过CSS文件来提供样式,同样在 中加以引入: ...

bootstraphtmlcss

0

点赞

0

回复

533

浏览

5分钟了解HTML的核心知识

HTML (HyperText Markup Language,超文本标记语言)也就是我们常说的网页。浏览器从服务器获取HTML文件,并显示给用户。HTML是为了创建网页而设计的语言。 HTML是用一系列的HTML标签写成的,每种HTML标签都有对应的语义和大致的外观。html文件通常以 .html 作为后缀名。下文中HTML的相关内容均基于 HTML5 http://zh.wikipedia.org/zh cn/HTML5 标准来介绍。 编写 HTML HTML是一种用于创建网页的语言,用HTML语言编写的网页我们称为HTML文件,一般以 .html 后缀来命名。一个最简单的HTML文件可以是这样的: ...

html

0

点赞

0

回复

1172

浏览

JSP表单输入控件

表单控件 在之前的学习中,我们已经了解如何使用表单作为用户输入界面。最基本的两种表单组件是 和 ,都可以输入任意文本。但是只有文本输入的交互显然是不够的,当用户输入的值属于某一个固定集合,例如: 1. 用户性别:从{“男”,“女”,”保密”}中三选一(必选且只能选一个) 2. 调查类选项:从{"Java", "C", "Python"}中选择任意项(也可以不选)作为自己擅长的编程语言 为了满足这一类选择输入场景,HTML提供了几种不同类型的输入控件: 单选按钮(RADIO BUTTONS) 当用户从若干给定的的选择中选取其一时,就会用到单选框。用户性别可以这样实现: ...

servlethtmlform

0

点赞

0

回复

534

浏览

Web前端开发:初识HTML

HTML是什么? HTML也就是我们常说的网页。浏览器从服务器获取HTML文件,并显示给用户。 HTML(HyperText Markup Language,超文本标记语言)是为了创建网页而设计的语言。HTML是用一系列的HTML标签写成的,每种HTML标签都有对应的语义和大致的外观。html文件通常以 .html 作为后缀名。 接下来的介绍基于 HTML5 http://zh.wikipedia.org/zh cn/HTML5 标准。 一个HTML文件 一个简单的HTML文件是这样的: ...

web前端html

0

点赞

0

回复

467

浏览

DOCTYPE的作用:文档类型与浏览器模式

DTD(document type definition,文档类型定义)是一系列的语法规则, 用来定义XML或(X) HTML http://www.tianmaying.com/tutorials/tag/html 的文件类型。浏览器会使用它来判断文档类型, 决定使用何种协议来解析,以及切换浏览器模式。 事实上DTD可以定义所有 SGML https://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language 语族的文档类型,但由于太过繁琐, XML Schema反而更加流行。 多数 HTML http://harttle.com/tags.html?tag=HTML 编辑器都会为我们添加一行DOCTYPE声明,但DOCTYPE却是我们最容易忽略的部分。 下面我们会看到,DOCTYPE声明并不是可有可无的。 !DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Strict//EN"...

html

0

点赞

0

回复

849

浏览

打造前端开发的Vim环境

前不久harttle着手搭建了 类似IDE的Vim环境 http://tianmaying.com/tutorial/vim ide ,然而对于前端开发者这还远远不够。 本文便记录一下如何实现前端开发者关心的那些特性:不同文件类型的缩进、HTML标签匹配注释移除、HTML/CSS/Javascript自动补全、代码风格检查等等。让我们来打造一个适合前端开发的 Vim http://tianmaying.com/tutorials/tag/vim ! 文件类型设置 前端文件有不同的类型,而每个人对于缩进又有不同都要求。Vim中我们可以为每种文件设置不同的缩进和Tab行为。 查看当前文件类型 使用 :set filetype 命令可以查看当前文件的类型。例如: filetype=html.handlebars...

bashjavascripthtmlcssvim

0

点赞

0

回复

885

浏览

CSS Line Box:溢出与折行

CSS 将 DOM 树转换为由矩形 Box 构成的树,并通过设置这些 Box 的属性来改变其位置和大小,描述每个元素或文本的布局。这些 Box 分为三个级别: block level Box: display 属性为 block 的Box,比如段落标签 ; inline level Box: display 属性为 inline block 的Box,它们就像一行中的单词一样布局。它里面可以包含其他 inline level 的Box,也可以包含 block level 的Box; line Box:一行单词就构成一个 line Box,这种Box是自动生成的,可以看做是 inline level Box的容器。 溢出、折行、断词是 line Box中常见的问题,设置这些行为的 CSS http://tianmaying.com/tag/css/tutorials 属性包括 white space 、 line spacing 、 text overflow 、 word wrap 、 word break 等。 下面几小节中详细介绍这些属性的取值与对应的行为、以及常见的使用方法。 更多信息请参考: W3C 标准:CSS3 Box http://www.w3.org/TR/css3 box/ LINE BOX 下面的小节中介绍的CSS属性只适用于 line Box,那么什么是 line Box呢?请看下面的HTML片段: ...

盒模型csshtml

0

点赞

0

回复

593

浏览

inline元素的对齐问题

元素对齐是 CSS http://tianmaying.com/tag/css/tutorials 中最常见的问题之一,控制元素对齐的属性包括 text align , verticle align , margin , line height 等。 本文便来探讨inline元素的对齐行为,以及 text align 和 verticle align 的使用方法,并给出实例。 TEXT ALIGN text align https://developer.mozilla.org/zh CN/docs/CSS/text align 指定了行内内容(例如文字)如何相对它的块父元素对齐。作用于当前元素的子元素,且子元素需是 inline 的。例如: 常用的取值有: left , right , center 。 ...

盒模型csshtml

0

点赞

0

回复

735

浏览

搜狐快站快巴士开发快速入门

如何成为快站插件开发者 开发者要求: 具有前端开发经验的个人或者团队,要求有成功的产品开发经验,能够开发出具有移动端特点的快站插件。 插件开发技术要求: 前端:Javascript , CSS , HTML5 后端:需要部署在可被快站服务器抓取的自有服务器中,开发语言不限。 如何成为开发者: 首先请加入快站开发者服务群:348577565 通过验证后,向管理人员申请成为开发者,需要提供开发者资料,以及插件的详细规划。 审批通过后,可在插件开发者管理后台提交代码。 快巴士系统简介 快巴士为开发者提供两大功能 前端代码部署, 开发者不再需要自己购买服务器,也不需要自己管理服务器,本系统提供一键部署功能,并提供了开发和生产环境供大家使用; 数据存取服务, 在本系统中申请的每一个app都拥有一个独立的数据空间,通过sdk中的接口,无需编写服务器端代码,即可将数据存储到云端,并可随时查询,更新。 第一步 创建APP 点击添加app按钮, 输入app名字即可创建,安全域名可不填。 第二步 下载项目模版 创建完app后,会跳转至快速开始页面,在快速开始页面中点击下载项目模版即可。 第三步 将项目托管至GIT仓库 首先在 coding.net https://coding.net/ 中,创建一个项目,将上步中下载的项目push到coding.net中,具体git如下 //在项目框架的根目录下...

html快站cssjavascript

0

点赞

0

回复

1047

浏览

表单提交:button与input submit 的区别

最近项目代码中的表单提交的方式已经百花齐放了,现在用这篇文章来整理一下不同表单提交方式的区别,给出最佳实践。先给结论: 建议使用 button type=submit 来提交表单,而不是 input ; 只有单行文本控件时,回车会引发表单提交; 通过 onsubmit 事件可阻止表单提交。 INPUT TYPE=SUBMIT 这是最常见的提交方式。不多说了,看图: 图中可以看到点击提交按钮后的URL是 /?key=foo 。代码如下: ...

表单htmljavascript

0

点赞

0

回复

1100

浏览

如何减少HTML页面回流与重绘(Reflow & Repaint)

如果你的HTML变得很大很复杂,那么影响你JavaScript性能的可能并不是JavaScript代码的复杂度,而是页面的回流和重绘。 回流(Reflow)是指布局引擎为frame计算图形的过程。 frame是一个矩形,拥有宽高和相对父容器的偏移。frame用来显示盒模型(content model), 但一个content model可能会显示为多个frame,比如换行的文本每行都会显示为一个frame。 关于CSS盒模型的介绍请参考: CSS 盒模型及其呈现方式 http://www.tianmaying.com/tutorial/css display 重绘(Repaint)发生在元素的可见性发生变化时,比如背景色、前景色等。 因此回流必然会引起重绘。 HTML 布局 HTML使用流式布局模型(flow based layout), 这意味着多数情况下一次扫描就可以计算所有的图形显示。 处于流后面的元素一般不会影响前面元素的图形, 所以布局过程可以从左到右、从上到下来进行。 所有的HTML回流都是从根frame开始(HTML标签)的,递归地处理部分或全部子frame。 回流过程中也可能创建新的frame,比如文本发生了换行。 一个frame的回流会导致它的所有父节点以及所有后续元素的回流。 有些HTML回流是立即执行的(immediate to user or script)并且会影响整个frame树, 比如窗口大小变化、更改文档的默认字体;有些HTML回流则是异步的、渐进的(incremental), 比如更多的文档流从网络中到达,这些渐进的回流可以入队列进行批量处理。 回流的原因 浏览器在实现回流时,会递归地处理frame。 每个frame的回流都有一个原因, 这个原因会随着frame逐级向下传递(传递过程中可能会改变)。 回流的原因决定了当前frame的回流行为,有这样5种原因: 1. 初始化(Initial)。DOM载入后的第一次回流,将会遍历所有frame。 2. 渐进(Incremental)。当一个frame发生渐进回流时,意味着它前面的元素都没有变, 而是它里面的元素变了。这会引起自底向上的作用。 3. 改变大小(Resize)。元素的容器边界发生变化时,此时元素内部状态没变。 在计算自顶向下的布局约束的同时,可以复用内部状态。 4. 样式改变(StyleChange)。整个frame树都应得到遍历。 5. Dirty。当一个容器已经缓存了多个子元素的Incremental回流时,该容器出于Dirty的状态。 前面四种原因的回流都是在Presentation Shell中立即调用的, 而最后一种回流只有Incremental回流已经到达目标frame时才进行。 (因为这时自底向上的影响才被计算出来,才能决定容器的图形显示) 如果你是Web开发者,可能更关注的是哪些具体原因会引起浏览器的回流,下面罗列一下: 1. 调整窗口大小 2. 改变字体大小 3. 样式表变动 4. 元素内容变化,尤其是输入控件 5. CSS伪类激活 6. DOM操作 7. offsetWidth , width , clientWidth , scrollTop/scrollHeight 的计算, 会使浏览器将渐进回流队列Flush,立即执行回流。 既然提到了 offsetHeight ,来总结一下这几个容易混淆的HTML元素属性吧: clientHeight : 内部可视区域大小。 returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin offsetHeight :整个可视区域大小,包括border和scrollbar在内。 is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height. scrollHeight :元素内容的高度,包括溢出部分。 is a measurement of the height of an element's content including content not visible on the screen due to overflow scrollTop :元素内容向上滚动了多少像素。 the number of pixels that the content of an element is scrolled upward. 最佳实践 对我们Web开发者最有用的还是如何去做,才能减少页面回流。先来个例子: var s = document.body.style; ...

javascriptcsshtml

0

点赞

0

回复

821

浏览

原生JavaScript的DOM操作汇总

程序员经常讲在IDE中写C 、Java会越来越手残,那么经常用jQuery也会让我们忘记JavaScript是如何作用于DOM的。 JavaScript的DOM操作也是面试中的常见问题,尤其是当你需要回答jQuery的性能问题时,便需要再次回到JavaScript DOM API。 本文便总结一下常见的JavaScript DOM操作方法,关于JavaScript DOM事件可以参考另一篇文章: DOM Level 2 Event与jQuery源码:捕获与冒泡 http://harttle.com/2015/07/31/javascript event.html 什么是DOM? 外行看来前端工程师的工作就是改页面(HTML、CSS),写脚本(JavaScript)。当你意识到你不是在改HTML而是在操作DOM时,你就升级了! 那么什么是DOM? MDN: 文档对象模型 (DOM) https://developer.mozilla.org/zh CN/docs/Web/API/Document_Object_Model/Introduction 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。 说白了DOM就是浏览器为JavaScript提供的一系列接口(通过 window.documnet 提供的),通过这些接口我们可以操作web页面。 但DOM并不是编程语言,它是文档对象的模型,该模型是独立于编程语言的。比如我们在Python中也可以操作DOM: import xml.dom.minidom as m...

javascriptdomhtml

0

点赞

0

回复

565

浏览

Web性能优化:prefetch, prerender

本文从预加载的角度介绍如何优化页面载入和渲染的性能,在展开内容之前先了解一下浏览器显示页面的过程: 首先是DNS解析,然后建立TCP连接,接着下载HTML内容以及资源文件,最后才是整个页面的渲染。如图: 图片来源: https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj 6sWLmnjl6TLnaru_WH0LJTjP o/present?slide=id.gc03305a_0106 https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj 6sWLmnjl6TLnaru_WH0LJTjP o/present?slide=id.gc03305a_0106 预加载和缓存是两个概念,缓存通常使用304响应状态码来标识,参考文章: 怎样理解HTTP状态码? http://harttle.com/2015/08/15/http status code.html 。 这四个阶段必须是串行的,任何一步的延迟都会最终影响到页面加载时间。但浏览器在这方面已经做了很多优化,例如它会猜测你将要打开的页面,并预先解析DNS甚至直接下载它们。 但浏览器猜测的能力是有限的,作为Web开发者我们可以通过 dns prefetch , subresource , prefetch , prerender 等指令来帮助浏览器优化性能。 DNS PREFETCH dns prefetch 可以指示浏览器去预先解析DNS域名。这样可以减少将要打开页面的延迟, ...

htmlweb

新建主题 记录代码

学员动态

  • L**z向课程作业中提交了代码
  • A**i向课程作业中提交了代码
  • w**3评论了D**n在课程中的作业:看清楚要求,参数表要...
  • 天码君回复了R.D在课程中的问题:欢迎来到天码营学习,...
  • z**x在课程中提出了问题:哇,我换成课程里的压...
  • J**y向课程作业中提交了代码
  • 天码君回复了X**E在课程中的问题:欢迎来到天码营学习,...
  • w**3回复了L**z在课程中的问题:你如果要用java1...
  • w**4向课程作业中提交了代码
  • A**i向课程作业中提交了代码
  • A**i完成了课程的作业
  • 三年添加了笔记:关于MyBatis本...
  • R.D完成了课程的作业
  • z**x在课程中提出了问题:对应版本?我的JDK...
  • 天码君评论了三年在课程中的作业:你的代码应该是可以跑...
  • w**3回复了z**x在课程中的问题:可以设置字体 htt...
  • w**3回复了z**x在课程中的问题:重新安装对应版本的e...
  • w**3回复了L**z在课程中的问题:嗯,毕竟几乎公司和学...
  • A**i向课程作业中提交了代码
  • J**y向课程作业中提交了代码
  • L**z在课程中提出了问题
  • 三年向课程作业中提交了代码
  • w**3回复了z**x在课程中的问题:百度找一下如何彻底删...
  • 天码君回复了D**n在课程中的问题:欢迎来到天码营学习,...
  • J**y向课程作业中提交了代码
  • h**2向课程作业中提交了代码
  • 天码君回复了s**n在课程中的问题:欢迎来到天码营学习,...
  • L**z向课程作业中提交了代码
  • 三年在课程中提出了问题:请老师解答下这课作业...
  • z**x添加了笔记:public sta...
  • z**x向课程作业中提交了代码
  • 三年添加了笔记:这里你注意两点即可:...
  • 天码君回复了工**武在课程中的问题:欢迎来到天码营学习,...
  • 天码君回复了D**G在课程中的问题:欢迎来到天码营学习,...
  • z**x在课程作业中回复了老师:所以说,是要先创建包...
  • L**z向课程作业中提交了代码
  • J**y向课程作业中提交了代码
  • z**x在课程作业中回复了老师:入门到精通这本我今天...
  • A**i向课程作业中提交了代码
  • 天码君回复了A**i在课程中的问题:欢迎来到天码营学习,...
  • h**2向课程作业中提交了代码
  • w**3回复了z**x在课程中的问题:软件安装问题每个人碰...
  • w**3评论了z**x在课程中的作业:这是一个类的主体部分...
  • 天码君回复了A**i在课程中的问题:欢迎来到天码营学习,...
  • A**i向课程作业中提交了代码
  • A**i向课程作业中提交了代码
  • J**y向课程作业中提交了代码
  • X**E向课程作业中提交了代码
  • D**n向课程作业中提交了代码
  • 天码君回复了z**x在课程中的问题:欢迎来到天码营学习,...
  • z**x在课程作业中回复了老师:想请问下老师这行代码...
  • 三年向课程作业中提交了代码
  • w**3评论了z**x在课程中的作业:这个是根据你的jav...
  • w**3回复了z**x在课程中的问题:安装java8 不要...
  • 工**武在课程中提出了问题:请问为什么课程的视频...
  • z**x在课程中提出了问题:老师我把Java换成...
  • J**y向课程作业中提交了代码
  • J**y向课程作业中提交了代码
  • c**u评论了:13课实战弄不明...
  • 三年添加了笔记:先来定义Mapper...
  • z**x在课程作业中回复了老师:所以说包的作用就像是...
  • z**x在课程中提出了问题:老师我的电脑是64位...
  • D**n向课程作业中提交了代码
  • 天码君回复了h**2在课程中的问题:欢迎来到天码营学习,...
  • 白**2向课程作业中提交了代码
  • z**x添加了笔记:将希望输出信息放到S...
  • w**3评论了z**x在课程中的作业:对的,一般是在包下的...
  • 天码君回复了c**h在课程中的问题:欢迎来到天码营学习,...
  • L**z在课程中提出了问题:好的那我还是装回我的...
  • 天码君回复了L**z在课程中的问题:欢迎来到天码营学习,...
  • z**x在课程中提出了问题:请问下老师,安装的时...
  • z**x在课程中提出了问题:老师,为什么它那个中...
  • h**2向课程作业中提交了代码
  • w**3评论了z**x在课程中的作业:...
  • D**n在课程作业中回复了老师:这道题是什么意思? ...
  • z**x评论了:安装的时候出现这个界...
  • L**z向课程作业中提交了代码
  • 三年添加了笔记:接下来引入MyBat...
  • L**z向课程作业中提交了代码
  • c**6向课程作业中提交了代码
  • 三年添加了笔记:需要修改MyBati...
  • 三年在课程作业中回复了老师:老师,我的代码中报这...
  • L**z在课程中提出了问题:老师,刚才我换了一个...
  • z**x在课程中提出了问题:好的老师,那版本11...
  • 三年添加了笔记:分析我们的业务场景,...
反馈意见