一小时学会写页面
作为一个懒癌晚期患者, 总是习惯找各种简单的解决问题的方法, 也习惯性把问题简单化, 所以今天想分享给大家简单的 web 前端入门方法.
既然题目已经定了一个小时那么废话就不多说了, 计时开始
1. 什么是前端
简单来说, 前端就是做网页 (大神勿喷, 本文一切从简)
2. 前端技术
html, 是首字母缩写, 具体意义请百度, 大家要记住 "t" 代表 text,ok 你们没有想错, text 就是文本文件 text, 好了准备工作做好了, 现在开始做网页
3. 我们的第一个网页
请身边有电脑的小伙伴和我一起开始, 在桌面鼠标右击, 创建一个 txt 文件, 命名为 index 把后缀修改为 HTML, 可能会跳出一个弹出框点击确定~点击这个文件大部分人应该会在浏览器打开吧, 如果是那就对了, 然后这个页面可以不关掉接着走下一步
4. 添加内容
右键点击刚才建立的文件, 我们可以直接用记事本打开, ok 现在在文档里面输入 hello world~ 刷新刚才用浏览器打开的那个页面~ 不出意外 hello world 应该在了
给大家推荐一个免费的学习蔻 qun, 前面 484 中间 757 最后 760, 里面概括应用网站开发, CSS,HTML,JavaScript,jQuery,Ajax,node,angular 等. 对 Web 前端开发技术感兴趣的同学, 欢迎加入每天技术分享.
5. 页面结构
在文档中输入以下代码
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- </head>
- <body>
- </body>
- </HTML>
6. 代码说明
<!DOCTYPE HTML>
这行代码位于文档的第一行, 用于声明文档类型
1, 对于 在 HTML 4.01 中有三种 声明, 在 HTML5 中只有以上一种声明
2, 声明不是 HTML 标签
- <HTML lang="en">
- ...
- </HTML>
HTML 标签内包裹页面文档的整个内容
1, 告诉浏览器这个网页是英文网站
2, lang="zh" 表示该网站是中文网站
3, lang="en" 可以省略
- <head>
- ....
- </head>
head 标签内可以放入描述文档的各种属性和信息的标签例如 < meta>,<title>,<script>,<link>,<style>
<meta charset="UTF-8">
meta 元素提供页面的信息
1,meta 里面放入 charset="UTF-8" 说明页面编码格式是 UTF-8
2,meta 里面放入 name="keywords" content="HTML, CSS, JavaScript 是描述文档的关键字
<title>Document</title>
定义文档的标题, 这个你可以根据你的需求命名
- <body>
- ....
- </body>
body 标签放入文档的所有内容比如插入一张图片, 写一段说明, 放个视频什么的都是放在 body 中
7, 实战页面
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 百度一下, 你就知道
- </title>
- <style>
- .header{text-align:right;width:100%;} .header a{color:#333;margin-left:20px;font-size:13px;font-weight:bold;}
- .logo{text-align:center;} .logo img{width:270px;height:129px;} .search{text-align:center;}
- .search input{width:539px;height:34px;border:1px solid #b6b6b6;} .search
- button{width:100px;height:38px;background:#3385ff;border:1px solid #3385ff;color:#fff;cursor:pointer;}
- </style>
- </head>
- <body>
- <div class="header">
- <a href="#">
- 糯米
- </a>
- <a href="#">
- 新闻
- </a>
- <a href="#">
- hao123
- </a>
- <a href="#">
- 地图
- </a>
- <a href="#">
- 视频
- </a>
- </div>
- <div class="content">
- <div class="logo">
- <img src="bd_logo1.png" alt="">
- </div>
- <div class="search">
- <input>
- <button type="">
- 百度一下
- </button>
- </div>
- </div>
- </body>
- </HTML>
这段代码我简单的写了一下百度的首页 (虽然和真正的百度首页差的有点多), 主要是为了说明如何添加页面内容, 其中 style 标签内添加了一部分样式文件, 具体含义留在后面继续为大家讲解.
来源: http://www.jianshu.com/p/6143970b43ed