web前端開發概述+HTML基礎
一、web前端開發概述
1. web是internet上最受歡迎的一種多媒體資訊服務系統，整個系統包括web伺服器、瀏覽器、通訊協議。
2. UI（user interface 使用者介面）
3. URL（uniform resource locator 統一資源定位符）
基本URL包括模式（協議）、伺服器名稱（IP地址）、路徑和檔名。
協議://使用者名稱：密碼@子域名.域名.頂級域名：埠號/目錄/檔名.檔案字尾？引數=值#標誌
4. www 是環球資訊網的縮寫 www w3 全稱world wide web 中文名 “全球資訊網”，是一個有許多相互連結的超文字組成的系統，通過網際網路訪問。每一個有用的事物成為一個“資源”，並有一個全域性URL標識；這些資源通過超文字傳輸協議（hypertext transform protocol）傳送給使用者，後者通過單機連結來獲取資源。
5. web標準
網頁部分標準通過三部分來描述：結構（structure）、表現（presentation）和行為（behavior）。
HTML用來決定網頁的結構和內容（內容）
CSS用來設計網頁的表現形式（樣式）
JavaScript用來控制網頁的行為（特殊行為）
6. HTML是超文字標籤語言（hypertext markup language）是網路的骨骼，是為“網頁建立和其他可在網頁瀏覽器上可以看到的資訊”所設計的一種置標語言。
CSS（cascading style sheets，層疊樣式表）是一種用來表現HTML或XML（標準通用標籤語言的一個子集）等檔案樣式的計算機語言。CSS可以建立在HTML頁面之外，如需設計新網站，而內容結構保持不變，就可在HTML不發生變動的前提下，為網頁提供一個全新的外觀。
JavaScript是世界上最流行的指令碼語言之一。大多數情況下，用於增強訪問者的體驗。
二、HTML5基礎
<!DOCTYPE html> <!--宣告文件型別，此標籤告知瀏覽器文件使用哪種HTML或者XHTML規範--> <html > <!--文件的開始點和結束點（可以省略）--> <head lang="en"> <!--用於定義文件的頭部，是所有頭部元素的容器 head標籤，可以引用指令碼、指示瀏覽器在哪裡找到樣式表、提供元資訊作用於整篇文件，標籤內的內容一般不直接顯示在網頁上--> <meta charset="UTF-8"> <!--標籤不允許交叉出現--> <title>Title</title> <!--通用的編碼模式--> <link rel="stylesheet" type="text/css" href="style.css"> <!--外部樣式 href(hypertext reference)超連結目標的URL rel（relationship)定義連線的檔案和HTML文件之間的關係--> <style type="text/css"> p{ color: #ff48b6; } </style> <!--內部樣式--> </head> <body bgcolor="#fff8dc"> <!--bgcolor背景顏色 background為背景圖片--> 極客學院 hello <h1 align="left">標題1</h1> <h2 align="center">標題2</h2> <h3 align="right">標題3</h3> <h4 align="justify" >標題4</h4> <h5>標題5</h5> <h6>標題6</h6> <!--align對齊方式--> <hr> <p align="center">該標籤定義段落 重新開始一行，並與上一段之間有一個空行</p> hello <a href="http://www.baidu.com" target="_blank">百度</a> <!--定義連結 href 為屬性 屬效能夠賦予標籤含義和語境，提供有關HTML元素的更多資訊--> <!--target規定在何處開啟連線--> <img src="picture/food.jpg" alt="美食" width="30%" height="40%"> <!--尺寸是瀏覽器寬度的30%，高度的40% --> <p><a> <big>this</big> <b>is</b> <i>my</i> <u>web</u> </a></p> <!--標籤的巢狀--> hello world br與p標籤的區別，特別是行間距 <br/> hello world <!--1、元素內容是開始標籤與結束標籤之間的內容 2、空元素在開始標籤中進行關閉 3、大多數HTML元素擁有屬性--> <p>使用圖片來做連結</p> <img src="D:\123.png"> <a href="http://www.baidu.com" target="_blank"> <img border="0" src="D:\11111111111111文件\圖\火影\Screenshot_2017-09-26-00-11-37-65.png"> </a> <a href="https://www.douyu.com/directory/myFollow" style="color: blueviolet">內聯樣式表</a> </body> </html>
基礎
| 標籤 | 描述 |
|---|---|
| <!DOCTYPE> | 定義文件型別。 |
| <html> | 定義 HTML 文件。 |
| <title> | 定義文件的標題。 |
| <body> | 定義文件的主體。 |
| <h1> to <h6> | 定義 HTML 標題。 |
| <p> | 定義段落。 |
| <br> | 定義簡單的折行。 |
| <hr> | 定義水平線。 |
| <!--...--> | 定義註釋。 |
表單
| 標籤 | 描述 |
|---|---|
| <form> | 定義供使用者輸入的 HTML 表單。 |
| <input> | 定義輸入控制元件。 |
| <textarea> | 定義多行的文字輸入控制元件。 |
| <button> | 定義按鈕。 |
| <select> | 定義選擇列表（下拉列表）。 |
| <optgroup> | 定義選擇列表中相關選項的組合。 |
| <option> | 定義選擇列表中的選項。 |
| <label> | 定義 input 元素的標註。 |
| <fieldset> | 定義圍繞表單中元素的邊框。 |
| <legend> | 定義 fieldset 元素的標題。 |
| <isindex> | 不贊成使用。定義與文件相關的可搜尋索引。 |
| <datalist> | 定義下拉列表。 |
| <keygen> | 定義生成金鑰。 |
| <output> | 定義輸出的一些型別。 |
HTML元素
1、元素是指從開始標籤到結束標籤的所有程式碼，標籤可以擁有屬性為元素提供更多的資訊。
2、屬性以鍵/值對的形式出現
3、通用屬性: class 規定元素的類名、ID 規定元素的唯一id、style 規定元素的樣式、title 規定元素的額外資訊。
標籤
文字控制標籤
標題標籤——<hi></hi>
段落標籤——<p></p>
文字格式化標籤
換行標籤——<br>
水平線標籤——<hr>
字形標籤——<b></b> <u></u> <i></i>
<div></div> 可以用來排版大塊的HTML段落，最重要的功能是 結合CSS設計頁面佈局，可以換行，可以包含<div><p>標籤。
<span> 可以用來組合文件中的行元素，不換行，不能包含<div><p>標籤。
圖片標籤
<img src="圖片路徑">
圖片路徑——1、絕對路徑：檔案硬碟上真的存在的路徑，上傳到web伺服器上可能找不到。
2、相對路徑：相對於本文件的目標檔案位置。
超連結標籤
<a href=URL>網頁元素<a>
屬性：href 規定連結指向目標的URL
target 規定在何處開啟連結文件 _top：在整個視窗中開啟
_blank：在新的瀏覽器視窗中開啟
_self：預設值 在當前頁面中開啟
_parent：在父框架中開啟被鏈文件
framename：在指定名稱的框架中開啟
rel 規定當前文件與被連線文件的關係
連結到同一頁面的不同位置（如章節數過多）
<p><a href="#c5">檢視第五章</a></p>
<h2><a name="c5">第五章</a></h2>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<p>表格</p>
<table border="5">
<!--帶有標題的表格-->
<caption>表格</caption>
<!--表格的表頭-->
<tr>
<th>單元</th>
<th>單元</th>
<th>單元</th>
</tr>
<tr>
<td>單元格1</td>
<td></td>
<td>單元格3</td>
</tr>
<tr>
<td>單元格1</td>
<td>單元格2</td>
<td>單元格3</td>
</tr>
</table>
<!--表格內的標籤-->
<table border="5">
<tr>
<td>表格1</td>
<td>表格2</td>
</tr>
<tr>
<td>
<url>
<li>蘋果</li>
<li>菠蘿</li>
<li>香蕉</li>
</url>
</td>
<td>表格2</td>
</tr>
</table>
<br/>
<!--單元格邊距、單元格間距、表格內的背景顏色和影象-->
<table border="5" cellpadding="10" cellspacing="10" bgcolor="#fff8dc" background="123.png">
<tr>
<td>單元格1</td>
<td>單元格2</td>
<td>單元格3</td>
</tr>
<tr>
<td>單元格4</td>
<td>單元格5</td>
<td>單元格6</td>
</tr>
</table>
</body>
</html>列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<UL >
<li type="square">ios</li>
<li type="disc">android</li>
<li type="circle">html</li>
</UL>
<ol start="5">
<li>asnj</li>
<li>smll</li>
<li>lpsj</li>
</ol>
<ul>
<li>寵物</li>
<ul>
<li>貓</li>
<li>狗</li>
</ul>
<li>人類</li>
<ul>
<li>中國人</li>
<li>英國人</li>
</ul>
<li></li>
<li></li>
</ul>
<dl>
<dt>hello world</dt>
<dd>asiadiasdiadiahdihd</dd>
<dt>hello world</dt>
<dd>sjaijidjaowdj</dd>
<dt>hello world</dt>
<dd>jsojawodjoawdjojd</dd>
</dl>
</body>
</html>塊元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>塊元素</title>
<link href="style2.css " type="text/css" rel="stylesheet ">
<style type="text/css">
span{
color: coral;
}
</style>
</head>
<body>
<!--塊-->
<p>大家好!</p>
<h1>hello</h1>
<!--內聯元素-->
<b>這是一個加重標籤</b>
<a>這是一個超連結標籤</a>
<!--div-->
<div id="div1">hello <p>world</p></div>
<!--承載任何型別的元素-->
<!--span-->
<div id="div2">
<p><span>咱這是一個測試span</span>效果是什麼樣子</p>
</div>
<!--文字型別-->
</body>
</html>div佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div佈局</title>
<style type="text/css">
body{
margin: 0px;
}
div#buju{
width: 100%;
height:950px;
background-color: cornsilk;
}
div#toubu{
width: 100%;
height: 10%;
background-color: blueviolet;
}
div#neirongcaidan{
width: 30%;
height: 80%;
background-color: blue;
float:left;
}
div#neirongzhuti{
width: 70%;
height: 80%;
background-color: coral;
float: left;
}
div#dibu{
width: 100%;
height: 10%;
background-color: cornflowerblue;
clear: both;
}
</style>
</head>
<body>
<div id="buju">
<div id="toubu">頭部</div>
<div id="neirongcaidan">內容選單</div>
<div id="neirongzhuti">內容主體</div>
<div id="dibu">底部</div>
</div>
</body>
</html>table佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table佈局</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: cornflowerblue">
<tr>
<td colspan="3" width="100%" height="10%" style="background-color: cornsilk">這是頭部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color: coral">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</td>
<td width="40%" height="80%"style="background-color: darksalmon">右選單</td>
<td width="30%" height="80%"style="background-color: aliceblue">右選單</td>
</tr>
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: aquamarine"></td>
</tr>
</table>
</body>
</html>表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<form>
使用者名稱：
<input type="text">
<br/>
密碼:
<input type="text">
<br/>
你喜歡的水果有：
<input type="checkbox">蘋果
<input type="checkbox">香蕉
<input type="checkbox">栗子
<br/>
<input type="radio" name="1">1
<input type="radio" name="1">2
<input type="radio" name="1">3
<br/>
<input type="button" value="按鈕">
<input type="submit">
<br/>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<textarea cols="30" rows="30">請在此填寫個人資訊</textarea>
</form>
</body>
</html>