web 服務本質: 瀏覽器發出請求--HTTP協議--服務端接收信息----服務端返回響應---服務端把HTML文件發給瀏覽器--瀏覽器渲染頁面.
HTML: 超文本標記語言是一種用於創建網頁的標記語言.
超文本:就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素
本質是瀏覽器可識別的規則,我們按照規則寫網頁,瀏覽器根據我們寫的代碼渲染網頁,對於不同的瀏覽器對於同一個標簽渲染不同(兼容性問題),網頁文件的擴展名: .HTML.
HTML是一種標記語言而不是編程語言.
標記語言是一種將文本以及文本相關的其他信息結合起來，展現出關於文檔結構和數據處理細節的電腦文字編碼
HTML使用標簽來描述網頁.
基本的HTML文檔
<!DOCTYPE html>
<html lang="zh-CN"> #lang選擇的語言
<head>
<meta charset="UTF-8">
<title>css樣式優先級</title>
</head>
<body>
</body>
</html>
解釋:
<!DOCTYPE html> :用來聲明為HTML文檔, 聲明必須是 HTML 文檔的第一行，位於 <html> 標簽之前.
<html>,<\html>:是文檔開始和結束的標志.在他們之間是文件的頭部和身體
<head>,</head> 是文檔頭部開始和結束的標志,它們之間的內容不會在網頁中顯示,里邊必須包含標題title
<meta>:提供了HTML的元數據,元數據不會顯示在客戶端，但是會被瀏覽器解析,
元數據META元素通常用於指定網頁的描述，關鍵詞，文件的最后修改時間，作者及其他元數據。
<title> </title> 定義了網頁的標題在瀏覽器標題欄中顯示.
<body> </body> 之間的內容是網頁可見的內容
HTML標簽
HTML標簽是有尖括號包括着的關鍵字
HTML標簽的樣式: 1.成對出現的 <html>,</html>
2.單獨出現的 <br/>
標簽里面可以有若干的屬性,也可以沒有屬性
標簽的語法：
- <標簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標簽名>
- <標簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
幾個很重要的屬性：
- id：定義標簽的唯一ID，HTML文檔樹中唯一
- class：為html元素定義一個或多個類名（classname）(CSS樣式類名)
- style：規定元素的行內樣式（CSS樣式）
HTML 注釋 <!--注釋內容-->
head 常用的標簽
meta的屬性有兩種:
1.http-equiv屬性: 正規名字叫網頁重定向 相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。
<meta http-equiv="refresh" content="5; https://www.baidu.com"> 頁面5秒后連接到百度網頁
2.name屬性:主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
非 meta標簽
1.<title>oldboy</title> 標題
2.<link rel="icon" href="favicon.ico"> # link 連接到外部樣式文件 icon 圖標
3.<link rel="stylesheet" href="mystyle.css"> #樣式文件
4.<script src="myscript.js"></script> js文件
body常用的標簽
塊級標簽(獨占一行)
塊級元素特點：
- 獨占一行，默認寬度占100%
- 可以直接定義寬高。
- 塊級元素可以設置margin和padding的四個方向
- 塊級元素可以包含行內元素和塊級元素
- 嵌套(包含下),子塊標簽寬度在沒有定義的情況下和父塊標簽寬度相同。
常見的塊級元素有：
1.h1~h6 是用來定義標題的重要程度
<h1>標題1</h1> 頁面中的大標題,只能出現一次在一個頁面, 重要程度最高
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>重要程度最低
2.<hr> 在網頁中加入一條橫線
3.<p>段落標簽</p>: 會上下生成空白行而 div標簽就沒有
4.<div></div>:div標簽用來定義一個塊級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現。
5.<ul></ul> 無序列表
6 <li></li> 無序列表中的內容
行內標簽(長度根據內容確定)
特點:
- 多個內聯標簽的內容在一行顯示.
- 寬度根據內容確定。
- 不可以設置寬高。
- 行內元素只可以設置margin和padding的左右兩個方向，上下不起作用。
- 行內元素display默認為inline
- 行內元素一般只包含行內元素和文本。可以嵌套。
常見的行內標簽有：
1. a :超鏈接標簽所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。
<a href="http://www.oldboyedu.com" target="_blank" >點我</a>
href屬性指定目標網頁地址。該地址可以有幾種類型：
絕對URL - 指向另一個站點（比如 href="http://www.jd.com）
相對URL - 指當前站點中確切的路徑（href="index.htm"）
錨URL - 指向頁面中的錨（href="#top"）href中可以跟name的值或id的值，但是top前邊必須有#，因為這是錨點的標志
target：
_blank表示在新標簽頁中打開目標網頁
_self表示在當前標簽頁中打開目標網頁
2.<b>加粗</b> 和 <strong>加粗</strong> 效果一樣但是strong更有語義,推薦strong
3.圖片標簽<img>
<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">
4.<u>下划線</u> 和 .<ins>刪除線</ins> 效果相同
5.<s>刪除</s> 和 .<del>刪除線</del> 效果相同
6.<i>斜體</i> 和 <em>斜體</em> 效果一樣em更有語氣強調,推薦用em
7.span標簽用來定義內聯行(行內元素)，並無實際的意義。主要通過CSS樣式為其賦予不同的表現。
標簽嵌套:
關於標簽嵌套：通常塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
p標簽不能包含塊級標簽。
特殊字符
| 內容 | 對應代碼 |
| 空格 |   |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版權 | © |
| 注冊 | ® |
列表
1.無序列表
ul只能容有li,li里邊可以有任意標簽
<ul type="disc"> <li>第一章</li> <li>第二章</li> <li>第三章</li> <li>第四章</li> </ul>
結果:
type屬性：
- disc（實心圓點，默認值）
- circle（空心圓圈）
- square（實心方塊）
- none（無樣式） /*這個用css可以設置為: List-style-type:none*/
2.有序列表
<ol type="1" start="2"> <li>第一章</li> <li>第二章</li> <li>第三章</li> <li>第四章</li> </ol>
結果:
type屬性：
- 1 數字列表，默認值
- A 大寫字母
- a 小寫字母
- Ⅰ大寫羅馬
- ⅰ小寫羅馬
3標題列表
<dl> <dt>標題1</dt> <dd>內容1</dd> <dt>標題2</dt> <dd>內容1</dd> <dd>內容2</dd> </dl>
結果:
表格(table)
表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里可以包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示表格類數據。表格類數據是指最適合組織為表格格式（即按行和列組織）的數據。
<body> <table border="1" cellspacing="5" width="300px">
<caption> 表格題目 </caption> <thead> <tr> <!--行--> <th>序號</th> <!--表格的表頭使用th標簽進行定義,大多數瀏覽器會把表頭顯示為粗體居中的文本--> <th>姓名</th> <th>愛好</th> </tr> </thead> <tbody> <tr> <td>1</td> <!--數據單元格tabledata的內容--> <td>egon</td> <td>杠娘</td> </tr> <tr> <td>2</td> <td>元昊</td> <td>日天</td> </tr> </tbody>
-
<thead> 標簽定義表格的表頭。該標簽用於組合 HTML 表格的表頭內容 -
<tr> 行標簽 table row 的縮寫 -
<th> 表格的表頭的內容使用th標簽進行定義,大多數瀏覽器會把表頭顯示為粗體居中的文本 table head的縮寫 -
<td> 數據單元格(tabledata)的內容 -
<caption> 表格題目 </caption>
屬性:
- border: 表格邊框的粗細.
- bordercolor 表格邊框顏色
- cellpadding: 內邊距
- cellspacing: 外邊距.
- width: 寬度 :里邊可以是(像素 百分比 等).（最好通過css來設置長寬）
- rowspan: 單元格豎跨多少行
- colspan ="2": 單元格橫跨多少列（即合並單元格）,兩個單元格合並
- align="center| left|right" 文字居中 ,左對齊,右對其, 1這項寫在table中就是表格居中,2這個寫在tr中就是表格中的文字居中
- bgcolor 給表格配背景色
- valign = "center| top|rbottom" 垂直對齊
結果:
表單(form)
作用:收集信息
功能：
- 表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互
- 表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等。
- 表單還可以包含textarea、select、fieldset和 label標簽。
表單的組成:
1提示信息
2表單控件
3.表單域:表單輸入的區域
form元素的屬性:
- action: url 用於指定表單的發送地址(服務器地址)
- method: 表單數據發送到服務器的方法 常用的方法有兩種: post 和 get.
- 這里也可以添加target="_blank" 屬性
- enctype : 表單發送到服務器的的編碼格式
get 和 post的區別:
- get方法提交 , 通過地址欄來傳遞信息,數據會附在網址之后主動提交給服務器. get是從服務器上獲取數據， form表單默認提交方式是get .確定安全性差,用戶名和密碼會附在網址后面.
- post方法提交:數據不會附在網址之后,會將數據打包發給服務器,等候服務器讀取數據來進行處理.post是向服務器傳送數據。以后學數據庫時會用到. 安全性高,網址后不會附你的用戶名和密碼
- enctype 屬性:
熟悉表單元素<form>的小伙伴，對其中的屬性enctype一定不會陌生，就是它規定了對表單提交給服務器時表單數據編碼的內容類型(Content Type)。
知道了表單編碼由enctype決定的，那么它究竟有多少可選的取值呢？是不是所有的MIME類型它都能用呢？
實際上，根據HTML5 規范中所敘述的，enctype具有以下三種選項，其中最后一項text/plain是相比4.01新增的。
-
application/x-www-form-urlencoded
-
multipart/form-data
-
text/plain
application/x-www-form-urlencoded
這是默認的編碼類型，使用該類型時，會將表單數據中非字母數字的字符轉換成轉義字符，如"%HH"，然后組合成這種形式key1=value1&key2=value2；所以后端在取數據后，要進行解碼。
注意：
-
若表單中有文件，則只留文件名；
method為get時候，瀏覽器用x-www-form-urlencoded的編碼方式把form數據轉換成一個字串（name1=value1&name2=value2…），然后把這個字串append到url后面，用?分割，加載這個新的url。
multipart/form-data
當method為post時候，瀏覽器把form數據封裝到http body中，然后發送到server。 如果沒有type=file的控件，用默認的application/x-www-form-urlencoded就可以了。 但是如果有type=file的話，就要用到multipart/form-data了。瀏覽器會把整個表單以控件為單位分割，並為每個部分加上Content-Disposition(form-data或者file),Content-Type(默認為text/plain),name(控件name)等信息，並加上分割符(boundary)。
-
一般來說，
method和enctype是兩個不同的互不影響的屬性，但在傳文件時，method必須要指定為POST，否則文件只剩下filename了； -
當沒有傳文件時，
enctype會改回默認的application/x-www-form-urlencoded。
text/plain：表單數據中的空格轉換為 "+" 加號，但不對特殊字符編碼。（get方式會這樣，post時不會）
input :
- 用來設置表單中的內容項,比如表單中的文本輸入
- 還可以在表單外使用
input元素的屬性:
- type指定輸入內容的類型,默認為text 單行文本框.
- name:輸入內容的識別名稱,傳遞參數時的參數名稱,在服務器中對應着value,相當於value的key, 用來區分不同的文本框.
- value：表單提交時對應項傳的值
- type="button", "reset", "submit"時，為按鈕上顯示的文本內容
- type="text","password","hidden"時，為輸入框的默認值意思是不用輸入就會顯示
- type="checkbox", "radio", "file"，為輸入相關聯的值.
4.maxlength:設置最大字數的限制,漢字字符數字相同.
5.checked=" checked" 設置默認選中項,針對單選框,多選框有用.
6. selected="selected" : 設置下拉選中項,針對 select 有用
7 multiple='multiple' : 設置下拉多選項
''' <1> 表單類型 type: text 文本輸入框 password 密碼輸入框 radio 單選框 只有將name值設置相同的時候才會出現單選效果,否則會出現多選效果 checkbox 多選框 submit 提交按鈕 button 按鈕(需要配合js使用.) button和submit的區別？ file 提交文件：form表單需要加上屬性enctype="multipart/form-data" 上 傳文件注意兩點： 請求方式必須是post enctype="multipart/form-data" <2> 表單屬性 name: 表單提交項的鍵. 注意和id屬性的區別：name屬性是和服務器通信時使用的名稱； 而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的 value: 表單提交項的值.對於不同的輸入類型，value 屬性的用法也不同： type="button", "reset", "submit" - 定義按鈕上的顯示的文本 type="text", "password", "hidden" - 定義輸入字段的初始值 type="checkbox", "radio", "image" - 定義與輸入相關聯的值 checked: radio 和 checkbox 默認被選中 readonly: 只讀. text 和 password disabled: 對所用input都好使. 輸入框內的信息不能輸入時灰色 '''
select標簽:下拉列表
下拉列表語法
下拉分組:
代碼:
Label:分組名稱
效果:
''' <select> 下拉選標簽屬性 name:表單提交項的鍵. size：選項個數 multiple：multiple <optgroup>為每一項加上分組 <option> 下拉選中的每一項 屬性： value:表單提交項的值. selected: selected下拉選默認被選中 '''
<textarea> 多行文本框標簽
''' <form id="form1" name="form1" method="post" action=""> <textarea cols=“控制輸入每行的字符” rows=“控制輸入的行數” name=“名稱”> 默認內容 </textarea> </form> '''*
效果
文件上傳控件
<input type="file" name="file">
效果:
<label>標簽
定義：<label> 標簽為 input 元素定義標注（標記）。如果想點擊框內的內容或按鈕,直接點擊label標簽的內容就可以了
說明：
1 label 元素不會向用戶呈現任何特殊效果。
2 <label> 標簽的 for 屬性值應當與相關元素的 id 屬性值相同。
'''
<form method="post" action="">
<label for=“username”>用戶名</label>
<input type=“text” name=“username” id=“username” size=“20” />
</form>
'''
效果:
按鈕系列控件
提交按鈕 :<input type="submit">:
普通按鈕:不能實現提交功能,配合JS 使用
<input type="button" value="普通按鈕">
效果:
圖片按鈕: 可以是實現提交功能
<input type="image" src="p1.jpg">
效果:
重置按鈕: 把內容還原到默認狀態
<input type="reset" >
iframe（inner Frame）內聯框架
iframe元素會創建包含另外一個文檔的內聯框架（即行內框架）。iframe是屬於內聯框架，它是body的子集，和body是父子關系，iframe作為一個普通元素放在body里。
說白了就是在當前頁面中插入另一個頁面。
屬性：
- width可設置內聯框架的寬。
- height可設置內聯框架的高。
- name可設置框架的名稱。
- src可設置頁面的路徑
- scrolling規定是否在iframe中顯示滾動條（yes,no,auto）
- frameborder規定是否顯示框架周邊的邊框（1默認有邊框，0無邊框）
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--IE瀏覽器最高渲染--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--為了確保適當的繪制和縮放--> <title>iframe框架的使用</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <address> 北京海淀區。西三旗橋東。神州科技園 </address> <hr> <iframe src="https://www.baidu.com/" name="topifame" frameborder="0" width=100% height="300px"></iframe> <hr> <a href="https://www.baidu.com/" target="topifame">百度</a> <a href="https://www.sina.com.cn/" target="topifame">新浪</a> </body> </html>
效果圖
當你點擊新浪時，iframe的框架內會顯示新浪的網頁，反之會顯示百度的頁面