一小時學會寫頁面
作為一個懶癌晚期患者，總是習慣找各種簡單的解決問題的方法，也習慣性把問題簡單化，所以今天想分享給大家簡單的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標簽內添加了一部分樣式文件，具體含義留在后面繼續為大家講解。