iframe
a
form
input
select
textarea
table
iframe
iframe單獨(dú)使用
iframe結(jié)合a標(biāo)簽一起使用
iframe單獨(dú)使用
iframe默認(rèn)的寬度是300px,高度是150px;可以通過css改變樣式
iframe單獨(dú)使用.png
iframe與a標(biāo)簽一起使用
iframe的src也可以是#,點(diǎn)擊a標(biāo)簽.則新的頁面會(huì)在iframe里出現(xiàn)
QQ百度
iframe與a標(biāo)簽一起使用.gif
小Tips:
iframe的src可以是相對(duì)路徑
iframe與a標(biāo)簽一起使用,iframe需要加name,a標(biāo)簽需要加target的屬性值,與iframe的name相同
文章的代碼都是要放在html文件里面的body里面的
a標(biāo)簽(HTTP GET 請(qǐng)求)
a標(biāo)簽的屬性
target
download
href
a標(biāo)簽的target屬性
先來學(xué)習(xí)一下英語吧
英文翻譯
blank空白的
self自己
parent父母
top頂部/頂
記住了嗎?下面開始學(xué)習(xí)target的屬性值含義
_blank新窗口打開
_self當(dāng)前頁面打開/加載
_parent在父級(jí)窗口打開新頁面(需結(jié)合iframe使用,才能展示出效果)
_top在頂級(jí)窗口打開新頁面(需結(jié)合iframe使用,才能展示出效果)
代碼展示:
index1.html
index2.html
index3.html
<!-- 點(diǎn)擊會(huì)在一個(gè)新的標(biāo)簽頁面打開 -->QQ_blank<!-- 點(diǎn)擊會(huì)在index3的嵌套頁面里面打開 -->QQ_self<!-- 點(diǎn)擊會(huì)在index2的嵌套頁面里面打開 -->QQ_parent<!-- 點(diǎn)擊會(huì)在index里打開 -->QQ_top
具體可以自己操作一下,體驗(yàn)一下
a的target屬性.png
a的download屬性
這個(gè)鏈接時(shí)用來下載,不是用來展示的
下載
如果不想通過這個(gè)download下載文件,還可以:
通過http響應(yīng)以下載的形式接收請(qǐng)求Content-type: application/octet-stream
a的href
在開始講這個(gè)之前,先在本地開啟服務(wù)器
操作如下:
mkdir demo
touch index.html
npm install -g http-server
http-server . -c-1(注意中間有一個(gè)空格一個(gè)點(diǎn)再加一個(gè)空格）實(shí)現(xiàn)不緩存
然后你就可以直接訪問http://localhost:8080/index.html來預(yù)覽你的index.html
<a >QQ</a>使用http協(xié)議
<a >QQ</a>如果網(wǎng)站支持HTTPS協(xié)議,可以這樣寫
<a >QQ</a>href里寫的是無協(xié)議地址，意思是當(dāng)前頁面用的是什么協(xié)議,就會(huì)用什么協(xié)議
<a href="#xxx">QQ</a>錨點(diǎn),點(diǎn)擊之后不會(huì)發(fā)起請(qǐng)求,因?yàn)殄^點(diǎn)僅僅是在當(dāng)前頁面內(nèi)跳轉(zhuǎn)
<a href="?username=ojl&psd=123456">QQ</a>點(diǎn)擊之后會(huì)在當(dāng)前面頁面發(fā)起?username=ojl&psd=123456的請(qǐng)求
<a href="./index.html">QQ</a>點(diǎn)擊后瀏覽器會(huì)發(fā)起GET請(qǐng)求,路徑是/index.html,協(xié)議是HTTP/1.1
<a href="javascript:;"></a>點(diǎn)擊之后不跳轉(zhuǎn)/a標(biāo)簽不會(huì)做任何事情
<a href="javascript:alert(1);"></a>點(diǎn)擊之后彈出1
form標(biāo)簽(HTTP POST請(qǐng)求)
form標(biāo)簽主要是發(fā)起POST請(qǐng)求,也可以發(fā)起GET請(qǐng)求
form標(biāo)簽也有target,跟a標(biāo)簽的target是一樣的
代碼展示
<!-- form表單里面一般要有submit按鈕才能提交 -->
如果填寫的信息是英文,數(shù)字或特殊符號(hào)的話
POST請(qǐng)求上傳的數(shù)據(jù)是英文/數(shù)字/特殊符號(hào).png
如果是填寫的信息是中文的話,會(huì)出現(xiàn)不一樣的效果
POST請(qǐng)求提交中文信息.png
POST請(qǐng)求要上傳的數(shù)據(jù).png
上圖中展示的數(shù)據(jù)并沒有顯示"小帥"兩個(gè)字,而是出現(xiàn)了%E5%B0%8F%E5%B8%85
這是因?yàn)镃ontent-Type: application/x-www-form-urlencoded中的x-www-form-urlencoded規(guī)定所有英文字符/鍵盤上的字母之外,都要經(jīng)過轉(zhuǎn)譯,將"小帥"變成對(duì)應(yīng)的UTF-8,可以搜索character utf-8 E5 B0 8F,得出"小"這個(gè)字對(duì)應(yīng)的utf-8就是E5 B0 8F,如果發(fā)現(xiàn)中文,就把utf-8中的每一個(gè)字節(jié)前面加個(gè)%,所以就有上圖這個(gè)效果了
小Tips:
如果form表單沒有提交按鈕,無法提交數(shù)據(jù),除非用JS
如果一個(gè)form表單里面只有一個(gè)按鈕<button></button>,它會(huì)自動(dòng)升級(jí)為提交按鈕
form表單里面的表單元素input等,里面的name會(huì)被帶到請(qǐng)求的第四部分那里的key
utf-8中英文是占一個(gè)字節(jié),中文占3個(gè)字節(jié)
GET不會(huì)把那個(gè)參數(shù)作為第四部分,默認(rèn)會(huì)把參數(shù)放到查詢參數(shù),而且不能通過任何方法讓GET有第四部分
POST請(qǐng)求上傳的數(shù)據(jù)會(huì)出現(xiàn)在第四部分,默認(rèn)會(huì)把參數(shù)放到第四部分
POST請(qǐng)求若想有查詢參數(shù)，可以直接寫在action里action="users?zzz=333
input標(biāo)簽
(name一定要寫,提交數(shù)據(jù)的時(shí)候要用到)
type="checkbox"
你喜歡的動(dòng)漫:海賊王火影忍者刀劍神域
type="checkbox".png
我想點(diǎn)擊海賊王這個(gè)詞的時(shí)候,會(huì)自動(dòng)勾選上
<!-- label標(biāo)簽是為了id=onepiece的input做準(zhǔn)備的,label的for和input的id是要一起出現(xiàn) -->海賊王<!-- 老司機(jī)做法 -->海賊王
全部代碼:
你喜歡的動(dòng)漫:海賊王火影忍者刀劍神域
一定要有name才能被提交上去
GET請(qǐng)求上傳的數(shù)據(jù).png
type="radio"
性別:男女
小Tips:
記得一定要加上name,而且給相同的名字,才能實(shí)現(xiàn)單選
兩個(gè)name一樣的radio只能選中一個(gè)
type="radio".png
input和button的區(qū)別
input沒有子元素,button有子元素
select
-第一組第二組第三組第四組
小Tips:
multiple 可以同時(shí)選中幾項(xiàng)
disabled 默認(rèn)不能被選中
selected 默認(rèn)被選中
select.png
textarea
通過設(shè)置width和height,設(shè)置textarea的寬度和高度,能夠更準(zhǔn)確的控制寬度和高度
resize設(shè)置為none赠法，則用戶就不可以隨意更改輸入框的大小
table
表格的基本元素
基本元素翻譯/含義
caption標(biāo)題
theadtable head(表頭)
tbodytable body(表格主體)
tfoottable foot(表格的底部)
trtable row(表格行)
thtable header(表格頁眉)
tdtable data(單元格)
稱號(hào)姓名簡(jiǎn)介白胡子愛德華·紐蓋特白胡子海賊團(tuán)船長(zhǎng)街氢，被稱為世界最強(qiáng)男人婆殿，過去與羅杰载矿、金獅子板辽，并成為三大傳說中的海賊巷挥，震震果實(shí)能力者桩卵，頂上戰(zhàn)爭(zhēng)上被黑胡子海賊團(tuán)殺死，享年72歲倍宾。紅發(fā)香克斯紅發(fā)海賊團(tuán)船長(zhǎng)雏节，原羅杰海賊團(tuán)的實(shí)習(xí)員，擁有強(qiáng)大的霸王色霸氣高职，是路飛海賊之路的引路人钩乍，為了救路飛失去了左臂。百獸凱多百獸海賊團(tuán)船長(zhǎng)怔锌，被稱為世界最強(qiáng)生物寥粹，與和之國(guó)將軍霸占著和之國(guó)。BIG·MOM夏洛特·玲玲BIG·MOM海賊團(tuán)船長(zhǎng)埃元，四皇中的唯一女性涝涤，魂魂果實(shí)能力者，托特蘭統(tǒng)治者亚情。黑胡子馬歇爾·D·蒂奇黑胡子海賊團(tuán)提督妄痪，原白胡子海賊團(tuán)二番隊(duì)成員，暗暗果實(shí)楞件、震震果實(shí)雙能力者衫生，極惡的世代之一，頂上戰(zhàn)爭(zhēng)殺死白胡子土浸，奪取其果實(shí)能力罪针，兩年后成為四皇。
表格的應(yīng)用.png
小Tips:
th和td的區(qū)別是:th里面不是放數(shù)據(jù),td里面全是數(shù)據(jù)
thead tbody tfoot不寫,瀏覽器也不會(huì)報(bào)錯(cuò)黄伊，瀏覽器會(huì)自動(dòng)全部加入到tbody里
thead tbody tfoot書寫的順序顛倒沒關(guān)系,瀏覽器會(huì)自動(dòng)糾正順序(頭->身體-->腳)
border-collapse: collapse;合并邊框
col可以規(guī)定每一列的樣式
