一小時學會寫頁面
作為一個懶癌晚期患者，總是習慣找各種簡單的解決問題的方法，也習慣性把問題簡單化区端，所以今天想分享給大家簡單的前端入門方法。
既然題目已經(jīng)定了一個小時那么廢話就不多說了伯诬，計時開始
1.什么是前端
簡單來說晚唇，前端就是做網(wǎng)頁（大神勿噴，本文一切從簡）
2.前端技術(shù)
html盗似，是首字母縮寫哩陕，具體意義請百度，大家要記住“t”代表text赫舒，ok你們沒有想錯悍及，text就是文本文件text，好了準備工作做好了接癌，現(xiàn)在開始做網(wǎng)頁
3.我們的第一個網(wǎng)頁
請身邊有電腦的小伙伴和我一起開始心赶，在桌面鼠標右擊，創(chuàng)建一個txt文件缺猛，命名為index把后綴修改為html缨叫，可能會跳出一個彈出框點擊確定～點擊這個文件大部分人應(yīng)該會在瀏覽器打開吧，如果是那就對了荔燎，然后這個頁面可以不關(guān)掉接著走下一步
4.添加內(nèi)容
右鍵點擊剛才建立的文件耻姥，我們可以直接用記事本打開，ok現(xiàn)在在文檔里面輸入hello world刷新剛才用瀏覽器打開的那個頁面不出意外hello world應(yīng)該在了
5.頁面結(jié)構(gòu)
在文檔中輸入以下代碼
<!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標簽內(nèi)包裹頁面文檔的整個內(nèi)容
*1婉商、 告訴瀏覽器這個網(wǎng)頁是英文網(wǎng)站
2、 lang="zh"表示該網(wǎng)站是中文網(wǎng)站
3征讲、 lang="en"可以省略
<head>
....
</head>
head標簽內(nèi)可以放入描述文檔的各種屬性和信息的標簽例如<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是描述文檔的關(guān)鍵字
<title>Document</title>
定義文檔的標題筷狼，這個你可以根據(jù)你的需求命名
<body>
....
</body>
body標簽放入文檔的所有內(nèi)容比如插入一張圖片，寫一段說明匠童，放個視頻什么的都是放在body中
7埂材、實戰(zhàn)頁面
<!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>
這段代碼我簡單的寫了一下百度的首頁（雖然和真正的百度首頁差的有點多）汤求，主要是為了說明如何添加頁面內(nèi)容俏险，其中style標簽內(nèi)添加了一部分樣式文件严拒，具體含義留在前端入門（二）里面寫。
總結(jié)
磨磨蹭蹭了兩個星期終于把我的第一篇文章寫完了竖独，希望能給沒有基礎(chǔ)的人一點自信裤唠，有時候想要學一個東西真的是挺簡單的只要你先花一個小時做起來，慢慢的找到興趣點莹痢，堅持下去就行了~
