作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法。
既然题目已经定了一个小时那么废话就不多说了,计时开始
1. 什么是前端
简单来说,前端就是做网页(大神勿喷,本文一切从简)
2. 前端技术
html ,是首字母缩写,具体意义请百度,大家要记住 [t] 代表 text , ok 你们没有想错, text 就是文本文件 text ,好了准备工作做好了,现在开始做网页
3. 我们的第一个网页
请身边有电脑的小伙伴和我一起开始,在桌面鼠标右击,创建一个 txt 文件,命名为 index 把后缀修改为 html ,可能会跳出一个弹出框点击确定~点击这个文件大部分人应该会在浏览器打开吧,如果是那就对了,然后这个页面可以不关掉接着走下一步
4. 添加内容
右键点击刚才建立的文件,我们可以直接用记事本打开, ok 现在在文档里面输入 hello world~ 刷新刚才用浏览器打开的那个页面 ~ 不出意外 hello world 应该在了
5. 页面结构
在文档中输入以下代码
Document
6. 代码说明
这行代码位于文档的第一行,用于声明文档类型
1 、对于 在 HTML 4.01 中有三种 声明,在 HTML5 中只有以上一种声明
2 、 声明不是 HTML 标签
...
html 标签内包裹页面文档的整个内容
1 、 告诉浏览器这个网页是英文网站
2 、 lang="zh" 表示该网站是中文网站
3 、 lang="en" 可以省略
....
head 标签内可以放入描述文档的各种属性和信息的标签例如 、 、 、 、
meta 元素提供页面的信息
1 、 meta 里面放入 charset="UTF-8" 说明页面编码格式是 UTF-8
2 、 meta 里面放入 name="keywords" content="html, css, JavaScript 是描述文档的关键字
Document
定义文档的标题,这个你可以根据你的需求命名
....
body 标签放入文档的所有内容比如插入一张图片,写一段说明,放个视频什么的都是放在 body 中
7 、实战页面
百度一下,你就知道
.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;}
糯米
新闻
hao123
地图
视频
查看更多关于web前端入门:一小时学会写页面-空酷狗的详细内容...