web前端入门:一小时学会写页面
一小时学会写页面
作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法。
既然题目已经定了一个小时那么废话就不多说了,计时开始
1.什么是前端
简单来说,前端就是做网页(大神勿喷,本文一切从简)
2.前端技术
html,是首字母缩写,具体意义请百度,大家要记住“t”代表text,ok你们没有想错,text就是文本文件text,好了准备工作做好了,现在开始做网页
3.我们的第一个网页
请身边有电脑的小伙伴和我一起开始,在桌面鼠标右击,创建一个txt文件,命名为index把后缀修改为html,可能会跳出一个弹出框点击确定~点击这个文件大部分人应该会在浏览器打开吧,如果是那就对了,然后这个页面可以不关掉接着走下一步
4.添加内容
右键点击刚才建立的文件,我们可以直接用记事本打开,ok现在在文档里面输入hello world~刷新刚才用浏览器打开的那个页面~不出意外hello world应该在了
5.页面结构
在文档中输入以下代码
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title></head><body>
</body></html>
6.代码说明
<!DOCTYPE html>
这行代码位于文档的第一行,用于声明文档类型
1、对于 <!DOCTYPE>在 HTML 4.01 中有三种 声明,在HTML5中只有以上一种声明
2、<!DOCTYPE>声明不是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标签内添加了一部分样式文件,具体含义留在后面继续为大家讲解。
web前端入门:一小时学会写页面的更多相关文章
- 2019年Web前端入门的自学路线
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文.本文内容不定期更新. 我前几天写过一篇文章:<裸辞两个月,海投一个月 ...
- Web前端入门教程之浏览器兼容问题及解决方法
JavaScript 被称为JS,是作为浏览器的内置脚本语言,为我们提供操控浏览器的能力,可以让网页呈现出各种特殊效果,为用户提供友好的互动体验.JS是Web前端入门教程中的重点和难点,而浏览器兼容性 ...
- web前端该怎么入门?web前端入门教程(非常详细)
初学编程的小伙伴经常会遇到的问题,1.没资源 2.没人带 3.不知道从何开始 ,小编也是从新手期过来的,所以很能理解萌新的难处,现在整理一些以前自己学习的一些资料送给大家,希望对广大初学小伙伴有帮助! ...
- Web前端入门了解
Web就是指万维网,网站,Web开发的方向包括Web前端,Web后台. Web前端又分为 静态Web 和 动态Web, 静态Web就是用HTML实现的. 动态Web的实现方式有多种. 动态Web的实 ...
- Web前端入门必学知识
入门主要有三个部分 一.html+css部分: 1.前端的入门门槛极低,体现在HTML和CSS上运行环境就是浏览器,html+css这部分特别简单,网上搜资料,书籍视频非常多.css中盒 ...
- web前端入门
看到很多同学在咨询:学习前端该怎么入门啊.推荐一下前端入门书籍啊什么的,作为一个过来人,我想告诉你一些小小技巧,避免走弯路: 1.先敲再学.如果你是零基础,就不要去每个标签,每个属性地去抠,因为里面有 ...
- Web前端入门知识
第一阶段:理论知识 第一章:协议理解 第二阶段:了解知识 第二章:前端简介 第三阶段:入门知识 第三章:标签结构 第四章:常用标签 第四阶段:样式搭配 第五章:样式初见 第六章:属性选择 第七章:属性 ...
- web前端工程师入门须知
本文是写给那些想要入门web前端工程的初学者,高手请路过,也欢迎高手们拍砖. 先说下web前端工程师的价值,目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端工程师去做w ...
- 新浪、腾讯、淘宝为何如此重视Web前端?前端入门容易吗?
为什么新浪.搜狐.网易.腾讯.淘宝等在内的各种规模的IT企业,都对web前端越来越重视了呢?小编为您揭晓答案! web前端的由来 以前会Photoshop和Dreamweaver就可以制作网页.随着时 ...
随机推荐
- Centos7下Rinetd安装与应用
Linux下做地址NAT有很多种方法.比如haproxy.nginx的4层代理,linux自带的iptables等都能实现.haproxy.nginx就不说了,配置相对简单:iptables配置复杂, ...
- YTU 2345: 后序遍历二叉树
原文链接:https://www.dreamwings.cn/ytu2345/2611.html 2345: 后序遍历二叉树 时间限制: 1 Sec 内存限制: 128 MB 提交: 3 解决: ...
- 关于cookie的文章(cookie与session机制)
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...
- hdu 5749 Colmerauer
题意:对于给定的$n \times m$矩阵$M$,定义$S(a,b)$为$M$的所有$a \times b$子矩阵的权重之和.一个矩阵的权重是指矩阵中所有马鞍点权值之和,在一个矩阵中某点是马鞍点当且 ...
- Count Color(线段树+位运算 POJ2777)
Count Color Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 39917 Accepted: 12037 Descrip ...
- jenkins对结果进行断言问题
TextFinder plugin插件 Jenkins在判定使用shell scripts完成build成功与否的时候,是根据shell最终的返回值是否为零来判定的:零即成功,非零即失败.这点判定事实 ...
- SQL Server书籍整理
1.<Microsoft SQL Server企业级平台管理实践>徐海蔚2.<SQL Server 2005 Performance Tuning性能调校>胡百敬3.<M ...
- 简单的SpringMVC的测试项目----跟struts2对比着学习
一,搭建SpringMVC项目 1,主配置文件-----地基 because,不像struts2是个独立的框架,可以脱离Spring单独使用.需要先添加Spring支持,是Spring框架组成的一部分 ...
- Nginx 简介
一.介绍 Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP代理服务器. Nginx是一款轻量级的Web服务器/反向代理服务器以及电子邮件代理服务器,并在一个BSD ...
- RLP编码
RLP(Recursive Length Prefix, 递归长度前缀编码),是Ethereum中对象序列化的一个主要的编码方式,其目的是对任意嵌套的二进制数据的序列进行编码. RLP的目的仅仅是编码 ...