【前端web入门第一天】03 综合案例 个人简介与vue简介

综合案例一 个人简介

网页制作思路:从上到下,先整体再局部,逐步分析制作
分析内容→写代码→保存→刷新浏览器,看效果

个人简介:书写步骤注意几点
1.!+回车 生成模板
2.crtl+x 剪切之后,空一格,光标前移,写strong或ins之类的,然后回车补全
3.超链接最开始href=#,后期再补上
4.alt+z 自动换行

代码如下:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简介title>
head>
<body>
    <h1>尤雨溪h1>
    <hr>
    <p>尤雨溪,前端框架<a href="#">Vue.jsa> 的作者,<a href="#">HTML5a> 版Clear的打造人,独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目<a href="#">JavaScripta> ,最后自己也走上了开源之路,现全职开发和维护<a href="#">Vue.jsa>p>
    <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.vNQ9TczJGXSc5hhHm2KUqQHaFW?w=206&h=180&c=7&r=0&o=5&pid=1.7" alt="尤雨溪的照片" title="尤雨溪">
<h2>学习经历h2>
<p>尤雨溪毕业于上海复旦附中,在美国完成大学学业,本科毕业于Colgate University,后在Parsons设计学院获得Design & Technology艺术硕士学位,任职于纽约Google Creative Lab。p>
<h2>主要成就h2>
<p>尤雨溪<strong>大学专业并非是计算机专业strong>,在大学期间他学习专业是室内艺术和艺术史,后来读了美术设计和技术的硕士,<ins>正是在读硕士期间,他偶然接触到了JavaScript ,从此被这门编程语言深深吸引,开启了自己的前端生涯 。ins> p>
<p>2014年2月,开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架,是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。p>
<h2>社会任职h2>
<p>2016年9月3日,在南京的JSConf上,Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队,尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合,目标是让大家能用 Vue 的语法跨三端。p>
body>
html>

网页效果如下:
【前端web入门第一天】03 综合案例 个人简介与vue简介_第1张图片


综合案例二 vue简介

代码如下:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue简介title>
head>
<body>
   <h1>Vue.jsh1> 
   <p>Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。p>
   <p>其作者为<a href="./个人简介.html" target="_blank">尤雨溪a> p>
   <h2>主要功能h2>
   <p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。p>
   <p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。p>
   <p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时 [2] ,Vue.js 也能驱动复杂的单页应用。p>
  <video src="./vue.mp4" controls>video>
body>
html>

网页效果如下:
【前端web入门第一天】03 综合案例 个人简介与vue简介_第2张图片

你可能感兴趣的:(前端web开发,前端,html5)