前端學習
前端三大技術核心 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 標簽是由尖括號包圍的關鍵詞，比如 <html>
- 而且成對出現的 ,如 :<head> 內容.....</head>
- 第一個標簽，我們稱為開始標簽(開放標簽) 如：<head> ,第二標簽 我們稱為 結束標簽（閉合標簽） 如 </head>
1.2.2、骨架標簽解析
<!DOCTYPE html>
第一行代碼 是用來聲明 這個是一個 html 文件
<html lang="en"> 內容 </html>
第二行代碼 到最后一行
這是所有html 的內容 為最最外層的一個大標簽
lang="en"：向搜索引擎表示該頁面是html語言，並且語言為英文網站 en 為 english ， 也可以改為<html lang="zh"> 即為中文網站
注：不代表里面都是中文 ，也可以不寫 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）。 <div> 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。 如果用 id 或 class 來標記 <div>，那么該標簽的作用會變得更加有效。
<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
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
input標簽的type類型：
type="radio" 單選框
type="checkbox" 多選框、復選框
checked="checked" 默認選中
type="button" 普通按鈕，需要js配合才能實現其它效果
type="reset" 點擊后可以讓表單數據恢復默認值
type="submit" 點擊后可以讓表單提交給指定后台處理
placeholder="請輸入用戶名" 文字提醒屬性
type="text" 普通的輸入框
type=”password” 密碼框
單選下拉列表
select標簽嵌套若干option標簽，每組option就是一個下拉菜單中的選項
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
selected="selected" 下拉菜單的默認選中
復選下拉框
<!-- 復選下拉框 -->
<select multiple="multiple" size="3">
<option value="apple">蘋果</option>
<option selected = selected>香蕉</option>
<option>西瓜</option>
</select >
注：添加 selected 屬性 可以預定選擇
單選按鈕
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
文本域 textarea
<form action="">
<textarea> 是一個文本域</textarea>
</form>
二、CSS 網頁樣式 美化
HTML 標簽原本被設計為用於定義文檔內容。通過使用 <h1>、<p>、<table> 這樣的標簽，HTML 的初衷是表達“這是標題”、“這是段落”、“這是表格”之類的信息。同時文檔布局由瀏覽器來完成，而不使用任何的格式化標簽。 由於兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標簽和屬性（比如字體標簽和顏色屬性）添加到 HTML 規范中，創建文檔內容清晰地獨立於文檔表現層的站點變得越來越困難。
2.1、CSS作用
樣式通常保存在外部的 .css 文件中。通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。
2.2、CSS語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
如：將 h1 元素內的文字顏色定義為紅色，同時將字體大小設置為 14 像素。
h1 {color:red; font-size:14px;}
2.3、Css外部樣式引用
<head>
<link rel=stylesheet type=text/css href=mystyle.css>
</head>
更多css內容請參考
http://www.w3school.com.cn/css/index.asp
三、js 網頁操作 行為
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--以下定義一個js方法，主要是根據id來改變內容-->
<script type="text/javascript">
function change_header()
{
document.getElementById("myHeader_1").innerHTML="恭喜發財";
}
</script>
</head>
<body>
<h1 id="myHeader">正在學習前端基礎</h1>
<h1 id="myHeader_1">選擇大於努力</h1>
<button onclick="change_header()">點擊這里</button>
</body>
</html>