前端網頁介紹和HTML簡要總結
阿新 • • 發佈：2021-01-07
前端介紹
網頁的製作在web 1.0的時代主要是靜態網頁，目前是web 2.0的時代，網頁有靜態和動態，HTML5功能也越來越多讓網頁的變得更加豐富多彩。
前端：1.HTML結構+2.CSS樣式+3.JavaScript行為
HTML
HTML簡要介紹
是一種超文字標記語言，是W3C推薦使用的的一個國際標準，是用來製作超文字文件的標記語言。2014年10月HTML5到現在已經是如今流行的版本了。
推薦的幾款好用的前端編輯器
工欲善其事必先利其器，選擇一個適合自己的編輯器，用來編寫自己的前端程式碼。
-
sublime_text：是一個先進程式碼編輯器，主流的輕量級編輯器，跨平臺，體積小速度執行快，支援安裝豐富的外掛。
-
VSCode：可以載入大檔案執行速度快，還支援許多其他的主流程式語言，方便的管理外掛，可以免費使用
-
webStrom：是JetBrains公司旗下一款JavaScript 開發工具，功能強大，需要收費。
-
Atom：是GitHub開源的跨平臺文字編輯器，有簡潔和直觀的圖形使用者介面，支援巨集，有豐富的外掛
HTML基本結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" 之前的文章有幾個標籤例子可檢視：https://lizhe.blog.csdn.net/article/details/109228835
1.<!DOCTYPE hmtl> 僅宣告文件型別 非標籤 2.標籤：尖括號包圍關鍵字 3.標籤通常成對出現(<開始標籤></結束標籤>)-->”雙標籤” 4.標籤但也有單獨成現的(比如：<br>,<hr>,<meta>...)-->”單標籤/自閉合標籤” 5.元素：<開始標籤>內容</結束標籤>
幾個特殊符號
< <
> >
® 已註冊
© 版權
™ 商標
空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<
>
®
©
™
<br>
<hr>
<p>這 個 是 空 格</p>
</body>
</html>
幾個常用標籤
列表標籤：無序列表、有序列表、自定義列表+ li 標籤
ul 無序
ol 有序
dl 自定義
img圖片標籤中使用src來設定圖片所帶路徑。
<img src="圖片檔案的路徑">
src屬性必寫(絕對路徑：從碟符路徑開始；相對路徑-建議使用)
超連結，可以跳轉到另一個網頁
<a href="http://www.xxxx.com">這裡放跳轉的內容</a>
div標籤，表示塊元素，表示單一內容，並沒有具體語義，可自動換行，結合css樣式使用
<div>這裡放內容</div>
span標籤，行內元素，內容多寬就就佔多寬的距離，沒有具體的語義，常用於修改段落中的樣式
<p>這是一句話，<span>這一句話等著被修飾</span></p>
table 是表格標籤，結合tr td th 使用
表單標籤
<form> ...</form> 宣告表單的區間
1.action屬性定義表單資料提交地址(空的預設為提交到當前頁)
2.method 屬性定義表單提交方法(get/post)
post 更安全，通過http判協議加密。
<label>...</label> 為表單定義文字標註
1.for屬性與標籤id名繫結 點選label區域啟用該id標籤
<input> 標籤 使用如 <input type="text" name="username">
1.type="text"-->輸入框且為明文
2.type="password"-->輸入框且為密文
3.type="radio"-->單選,但注意要加上name屬性。如果提交要有value屬性
4.type="checkbox"-->多選,但注意要加上name屬性。如果提交要有value屬性
5.type="file"-->上傳檔案(圖片,word文件..)
6.type="submit"-->表單提交,通過value值改變按鈕顯示值
7.type="reset"-->重置按鈕,通過value值改變按鈕顯示值
<textarea name="intriduce" col ="30" rows="10"> <textarea> 為多行文字的輸入框
1.當不設定cols屬性與rows屬性時，文字框可以自動收縮，會影響佈局
2.提交時要設定name屬性
<select> 標籤用於下拉框
語法：
<select name="sit" id="">
<option value="1">apple</option>
<option value="2">banana</option>
<option value="3">monkey</option>
</select>