一小时学会写页面

作为一个懒癌晚期患者，总是习惯找各种简单的解决问题的方法，也习惯性把问题简单化，所以今天想分享给大家简单的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前端入门：一小时学会写页面的更多相关文章

  1. 2019年Web前端入门的自学路线

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文.本文内容不定期更新. 我前几天写过一篇文章:<裸辞两个月,海投一个月 ...

  2. Web前端入门教程之浏览器兼容问题及解决方法

    JavaScript 被称为JS,是作为浏览器的内置脚本语言,为我们提供操控浏览器的能力,可以让网页呈现出各种特殊效果,为用户提供友好的互动体验.JS是Web前端入门教程中的重点和难点,而浏览器兼容性 ...

  3. web前端该怎么入门?web前端入门教程(非常详细)

    初学编程的小伙伴经常会遇到的问题,1.没资源 2.没人带 3.不知道从何开始 ,小编也是从新手期过来的,所以很能理解萌新的难处,现在整理一些以前自己学习的一些资料送给大家,希望对广大初学小伙伴有帮助! ...

  4. Web前端入门了解

    Web就是指万维网,网站,Web开发的方向包括Web前端,Web后台. Web前端又分为  静态Web 和 动态Web, 静态Web就是用HTML实现的. 动态Web的实现方式有多种. 动态Web的实 ...

  5. Web前端入门必学知识

    入门主要有三个部分   一.html+css部分:      1.前端的入门门槛极低,体现在HTML和CSS上运行环境就是浏览器,html+css这部分特别简单,网上搜资料,书籍视频非常多.css中盒 ...

  6. web前端入门

    看到很多同学在咨询:学习前端该怎么入门啊.推荐一下前端入门书籍啊什么的,作为一个过来人,我想告诉你一些小小技巧,避免走弯路: 1.先敲再学.如果你是零基础,就不要去每个标签,每个属性地去抠,因为里面有 ...

  7. Web前端入门知识

    第一阶段:理论知识 第一章:协议理解 第二阶段:了解知识 第二章:前端简介 第三阶段:入门知识 第三章:标签结构 第四章:常用标签 第四阶段:样式搭配 第五章:样式初见 第六章:属性选择 第七章:属性 ...

  8. web前端工程师入门须知

    本文是写给那些想要入门web前端工程的初学者,高手请路过,也欢迎高手们拍砖. 先说下web前端工程师的价值,目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端工程师去做w ...

  9. 新浪、腾讯、淘宝为何如此重视Web前端？前端入门容易吗？

    为什么新浪.搜狐.网易.腾讯.淘宝等在内的各种规模的IT企业,都对web前端越来越重视了呢?小编为您揭晓答案! web前端的由来 以前会Photoshop和Dreamweaver就可以制作网页.随着时 ...

随机推荐

  1. java—数组乘积输入： 一个长度为n的整数数组input 输出： 一个长度为n的数组result，满足result[i] = input数组中，除了input[i] 之外的所有数的乘积，不用考虑溢出例如 input {2, 3, 4, 5} output: {60, 40, 30, 24}

    /** * 小米关于小米笔试题 数组乘积输入: 一个长度为n的整数数组input 输出: 一个长度为n的数组result,满足result[i] = * input数组中,除了input[i] 之外的 ...

  2. javascript 设计模式1----单例模式

    定义:保证一个类仅有一个实例,并提供一个访问的全局接口: 就是收:当我们 var a = new a(); var a1 = new a()是:a与a1是相等的.怎么实现呢,就是第一次实例化.第二不在 ...

  3. 基于ASP.NET MVC定时执行任务调度

    相对FluentScheduler实现定时调度任务的使用简单,配置少的特点,Quartz.Net则配置稍微复杂一些.下面我们就接合一个 ASP.NET MVC网站应用程序的定时执行任务调试的小实例来了 ...

  4. 使用c#访问脚本里变量的方法

    首先,把要获取的变量权限定义为public类型变量. 方法一.public GameObject 另一个物体;    //监视面板拖拽赋值 另一个物体.GetComponent<脚本>() ...

  5. Kanzi入门

    1.安装Kanzi. 2.使用Kanzi studio创建工程. Kanzi创建的工程会包含以下目录结构: 其中, Tool_project文件夹中存放的是设计师设计的工程,包含kanzi UI的工程 ...

  6. [Prodinner项目]学习分享_第二部分_Entity到DB表的映射

    1.单纯映射 基本语法为 modelBuilder.Entity<InsType>().ToTable("TB_InsType"); 2.一对多映射(表关系) 实体类B ...

  7. js中对radio和checkbox是否选中的判断

    一.js判断checkbox 例如:<div class="checkbox" style="width: 150px;"> <label&g ...

  8. Deep Learning 2_深度学习UFLDL教程：矢量化编程（斯坦福大学深度学习教程）

    1前言 本节主要是让人用矢量化编程代替效率比较低的for循环. 在前一节的Sparse Autoencoder练习中已经实现了矢量化编程,所以与前一节的区别只在于本节训练集是用MINIST数据集,而上 ...

  9. mysql跨数据库操作问题

    跨数据库的操作,如果是命名符合mysql规范的直接database.table,如果不符合规范比如加了 -  等符号需要在数据库上面加`database`.table(不是'database'.tab ...

  10. redis.conf 配置详解 （转）

    # Redis 配置文件 # 当配置中需要配置内存大小时,可以使用 1k, 5GB, 4M 等类似的格式,其转换方式如下(不区分大小写)## 1k => 1000 bytes# 1kb => ...