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標籤內添加了一部分樣式檔案，具體含義留在後面繼續為大家講解。