>  기사  >  웹 프론트엔드  >  前端入门(一)_html/css_WEB-ITnose

前端入门(一)_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-21 08:49:29908검색

一小时学会写页面

作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的前端入门方法。既然题目已经定了一个小时那么废话就不多说了,计时开始

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、对于 在 HTML 4.01 中有三种 声明,在HTML5中只有以上一种声明2、声明不是HTML标签

<html lang="en">...</html>

html标签内包裹页面文档的整个内容1、 告诉浏览器这个网页是英文网站2、 lang="zh"表示该网站是中文网站3、 lang="en"可以省略

<head>....</head>

head标签内可以放入描述文档的各种属性和信息的标签例如

、<script>、<link>、<style> <pre class="sycode" name="code">&lt;meta charset=&quot;UTF-8&quot;&gt;</pre> <p>meta元素提供页面的信息1、meta里面放入charset="UTF-8"说明页面编码格式是UTF-82、meta里面放入name="keywords" content="html, css, JavaScript是描述文档的关键字 <pre class="sycode" name="code">&lt;title&gt;Document&lt;/title&gt;</pre> <p>定义文档的标题,这个你可以根据你的需求命名 <pre class="sycode" name="code">&lt;body&gt;....&lt;/body&gt;</pre> <p>body标签放入文档的所有内容比如插入一张图片,写一段说明,放个视频什么的都是放在body中 <h1>7、实战页面 <pre class="sycode" name="code">&lt;!DOCTYPE html&gt;<html lang="en"><head> &lt;meta charset=&quot;UTF-8&quot;&gt; <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></pre> <p>这段代码我简单的写了一下百度的首页(虽然和真正的百度首页差的有点多),主要是为了说明如何添加页面内容,其中style标签内添加了一部分样式文件,具体含义留在前端入门(二)里面写。 <h2>总结 <p>磨磨蹭蹭了两个星期终于把我的第一篇文章写完了,希望能给没有基础的人一点自信,有时候想要学一个东西真的是挺简单的只要你先花一个小时做起来,慢慢的找到兴趣点,坚持下去就行了~ </script>
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.