前端學習
前端三大技術核心 html 、CSS、js
一、HTML 網頁主體內容
1.1、概念
超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於創建網頁的標准標記語言。
現在發展到第五代了，我們又稱為h5頁面
-
他不是編程語言，而是一種標記語言，由各種標簽組成 （HTML tag）
-
可以描述 文字，圖形、動畫、聲音、表格、鏈接等
-
HTML 運行在瀏覽器上，由瀏覽器來解析
1.2、標准骨架
html文件 都有一個標准的骨架 即在創建一個html文件 會自動生成的標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
1.2.1 標簽概念
我們分析 上面代碼 可知：
- HTML 標簽是由尖括號包圍的關鍵詞，比如
- 而且成對出現的 ,如 :<head> 內容.....</head>
- 第一個標簽，我們稱為開始標簽(開放標簽) 如：<head> ,第二標簽 我們稱為 結束標簽（閉合標簽） 如
1.2.2、骨架標簽解析
<!DOCTYPE html>
第一行代碼 是用來聲明 這個是一個 html 文件
<html lang="en"> 內容 </html>
第二行代碼 到最后一行
這是所有html 的內容 為最最外層的一個大標簽
lang="en"：向搜索引擎表示該頁面是html語言，並且語言為英文網站 en 為 english ， 也可以改為 即為中文網站
注：不代表里面都是中文 ，也可以不寫 lang="en"
<head> 內容 </head>
頭部標簽：
它是所有頭部元素的容器。在head標簽中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題
文檔頭部包含的數據都不會真正作為內容顯示
<meta charset="UTF-8">
<title >Title</title>
meta： 標簽可以設置網頁的字符集（utf-8 國際編碼）
title ：標簽設置網頁的標題
<body>
</body>
body : 身體主體，和head標簽是同一級 ，所有網頁顯示的內容 都在 body標簽之中
1.3、標題標簽
你在瀏覽一個html界面時 ，如果是文字 一般你都會看到有標題
html 標題 分為六級 依次減小效果，每個標題都是獨占一行空間
<h1> 標題 </h1>
<h2> 標題 </h2>
<h3> 標題 </h3>
<h4> 標題 </h4>
<h5> 標題 </h5>
<h6> 標題 </h6>
展示如下：
1.4、段落標簽
有標題 即有段落
<p>
段落內容.....
</p>
合適內容使用合理的標簽，就叫滿足標簽語義化；這樣可以在搜索引擎排名中更靠前！點擊率更高，帶來更多的收益！
1.5、 注釋
html 雖然不是編程語言 但人家也是標記語言，也是有注釋
<!-- 在此處寫注釋 -->
瀏覽器不會顯示注釋，但是能夠幫助記錄您的 HTML 文檔。
您可以利用注釋在 HTML 中放置通知和提醒信息
1.6、空格與換行
在html 中
空格要用：
等於 一個空格
換行：
<br /> 也就是一個回車
路徑
**相對路徑**：從當前位置 或 任意相對位置開始 到目標 文件的路徑
**絕對路徑**：從根目錄開始 到目標文件的路徑
1.7、屬性
HTML 標簽可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。
屬性總是以 名稱/值 對的形式出現，比如：name="value"。
屬性總是在 HTML 元素的開始標簽中規定。
如：name 屬性用於指定標簽元素的名稱。 <a> 標簽內必須提供 href 或 name 屬性
<a href="http://www.baidu.com">百度一下</a>
<a name="value">
1.7.1、id 屬性
id 屬性規定 HTML 元素的唯一的 id。
id 在 HTML 文檔中必須是唯一的。
id 或 name 屬性的值可以是引號引起來的任何字符串。字符串必須是唯一的標記，不能在同一文檔中的其他 name 或 id 屬性中重復使用，但是可以在不同的文檔中再次使用。
1.7.2、style 屬性
樣式是 HTML 4 引入的，它是一種新的首選的改變 HTML 元素樣式的方式。通過 HTML 樣式，能夠通過使用 style 屬性直接將樣式添加到 HTML 元素，或者間接地在獨立的樣式表中（CSS 文件）進行定義。
背景顏色：background-color 屬性為元素定義了背景顏色
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">這是一個標題</h2>
<p style="background-color:green">這是一段內容，這是一段內容</p>
</body>
</html>
字體、顏色和尺寸
font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列、顏色和字體尺寸
<html>
<body>
<h1 style="font-family:verdana">一個標題</h1>
<p style="font-family:隸書;color:red;font-size:20px;">一段內容</p>
</body>
</html>
文本對齊
<html>
<body>
<h1 style="text-align:center">這是一個標題</h1>
<p>內容lll手動釋放速度士大夫士大夫地方</p>
</body>
</html>
更多屬性：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
1.8、圖像
當在html 插入一張圖片時 ，要先把圖片准備好 ，我們交給網頁的 是這個圖片所在的路徑（位置）
<img src="C:\Users\huangwei\Desktop\test\test_img.jpg" width="104" height="142" title="鼠標懸停提示文字" alt=”圖片未加載時候提示文字“ />
- image 就是圖像，沒有結束標簽
- src 等於資源，后面指向 圖片所在的位置
- width ：代表寬度（橫向距離）、height ：代表高度（縱向距離）；如果寬和高都不設置，圖片會按照原本的大小去顯示
- title ： 鼠標懸停時候的提示文字
- alt ：當圖片未正常加載的時候，顯示文字
1.9、超鏈接
在網頁中 你會經常遇到超鏈接 , 用a標簽表示
<a href="http://www.baidu.com"> 百度一下 點擊這里 </a>
-
href屬性 指向就是 要跳轉的 地址（也可以是本地的地址）
-
a標簽包裹的內容 就是顯示在網頁上的 鏈接標題
1.10、div 塊
可定義文檔中的分區或節（division/section）。
<h1>新聞網站</h1>
<p>一些 內容 一些內容</p>
...
<div class="news">
<h2>新聞標題1</h2>
<p>新聞內容 新聞內容 新聞內容</p>
...
</div>
<!-- 加顏色 設置了高和寬-->
<div style="background-color:red; height:100px;width:300px">
<h2>新聞標題2</h2>
<p>新聞內容 新聞內容 新聞內容</p>
...
</div>
1.11、form表單
form表單標簽里面包括所有用戶填寫的表單數據，
比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等
input標簽的type類型：
type="text" 普通的輸入框
type=”password” 密碼框
type="radio" 單選框
checked="checked" 此屬性可以表達默認選中狀態
測試細節：
1、點擊查看是否為單選效果
2、刷新的時候是否有默認選中的狀態
3、點擊文字是否可以進行切換
type="checkbox" 多選框、復選框
checked="checked" 默認選中
測試細節：
1、刷新的時候是否有默認選中的狀態
2、點擊文字是否可以進行切換
注意：一切測試要追溯到用戶的需求
select標簽嵌套若干option標簽，每組option就是一個下拉菜單中的選項
selected="selected" 下拉菜單的默認選中
測試細節：
1、內容的順序
2、默認選中的狀態
3、內容的條數
textarea 文本域
測試細節：
1、測試三大主流瀏覽器外觀大小是否一致
2、提醒程序員禁用拖拽大小的功能
type="button" 普通按鈕，需要js配合才能實現其它效果
value屬性設置按鈕身上的文字
type="reset" 點擊后可以讓表單數據恢復默認值
value屬性設置按鈕身上的文字
type="submit" 點擊后可以讓表單提交給指定后台處理
value屬性設置按鈕身上的文字
點擊后無論是否報錯，都與我們無關，最終測試的時候，只要關注數據庫中的內容是否正常添加即可
placeholder="請輸入用戶名" 文字提醒屬性