整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
0
一、先在html做出這三個元素，輸入框，label標(biāo)簽，按鈕，用換行符br把它們分成單行。
圖1
二、dom操作，獲取元素對象，這里我用的是querySelector來獲取對象，對dom不太理解的同學(xué)可以看我的文【303】。
圖2
三、加一個按鈕點擊函數(shù)。
圖3
HTML是用來開發(fā)網(wǎng)頁的，它是開發(fā)網(wǎng)頁的語言
全稱HyperText Mark-up Language，超文本標(biāo)記語言
標(biāo)記就是標(biāo)簽
<標(biāo)簽名稱></標(biāo)簽名稱> 比如 <html></html> <h1></h1>等，標(biāo)簽大多數(shù)都是成對出現(xiàn)的。
超文本 兩層含義：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
網(wǎng)頁顯示內(nèi)容
</body>
</html>第一行<!DOCTYPE html>是文檔聲明
用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔
<html>...</html>標(biāo)簽是開發(fā)人員在告訴瀏覽器
整個網(wǎng)頁是從<html>這里開始的，到</html>結(jié)束
也就是html文檔的開始和結(jié)束標(biāo)簽
<head>...</head>標(biāo)簽用于定義文檔的頭部
是負責(zé)對網(wǎng)頁進行設(shè)置標(biāo)題、編碼格式以及引入css和js文件的
<body>...</body>標(biāo)簽是編寫網(wǎng)頁上顯示的內(nèi)容
網(wǎng)頁文件的后綴是.html, 一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁
VS Code全拼是 Visual Studio Code 是由微軟研發(fā)的一款免費、開源的跨平臺代碼編輯器
目前是前端(網(wǎng)頁)開發(fā)使用最多的一款軟件開發(fā)工具
下載網(wǎng)址: https://code.visualstudio.com/Download
選擇對應(yīng)的安裝包進行下載:
安裝一切默認
1 標(biāo)簽不區(qū)分大小寫，但是推薦使用小寫
2 根據(jù)標(biāo)簽的書寫形式，標(biāo)簽分為雙標(biāo)簽(閉合標(biāo)簽)和單標(biāo)簽(空標(biāo)簽) 2.1 雙標(biāo)簽是指由開始標(biāo)簽和結(jié)束標(biāo)簽組成的一對標(biāo)簽，這種標(biāo)簽允許嵌套和承載內(nèi)容，比如: div標(biāo)簽 2.2 單標(biāo)簽是一個標(biāo)簽組成，沒有標(biāo)簽內(nèi)容， 比如: img標(biāo)簽
標(biāo)簽的使用形式
列表標(biāo)簽
網(wǎng)頁效果
表格標(biāo)簽
<table>標(biāo)簽：表示一個表格
<tr>標(biāo)簽：表示表格中的一行
<td>標(biāo)簽：表示表格中的列
<th>標(biāo)簽：表示表格中的表頭
屬性設(shè)置
border: 1px solid black:設(shè)置邊框和顏色
border-collapse: collapse:設(shè)置邊框合并
網(wǎng)頁效果
表單標(biāo)簽
表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器
<form>標(biāo)簽 表示表單標(biāo)簽，定義整體的表單區(qū)域
一個表單中有很多信息組成,比如 姓名,愛好,地址等,這些內(nèi)容有很多其他標(biāo)簽來承載
這些標(biāo)簽稱為表單元素標(biāo)簽
網(wǎng)頁效果
表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器
兩種方式的區(qū)別:
表單元素屬性設(shè)置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
姓名 type="text" 定義單行文本輸入框
密碼 type="password" 定義密碼輸入框
性別 type="radio" 定義單選框
愛好 type="checkbox" 定義復(fù)選框
照片 type="file" 定義上傳文件
個人描述 <textarea></textarea> 定義多行文本輸入框
地址 <select></select> 定義下拉列表
提交 type="submit" 定義提交按鈕
重置 type="reset" 定義重置按鈕
按鈕 type="button" 定義一個普通按鈕
-->
<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>性別:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>愛好:</label>
<input type="checkbox" name="like" value="睡覺">睡覺
<input type="checkbox" name="like" value="吃飯">吃飯
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>個人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>
點擊提交：
可以看到服務(wù)器收到了請求報文。
、選擇題（1-18題各3分19-36題各2分，共92分）
1.在HTML的<TD>標(biāo)簽中，align 屬性的取值是（ C ）
A. top ; B. middle ; C. center ; D. bottom
<table border="1">
<tr>
<td width="100px">姓名</td>
<td>性別</td>
<td>年齡</td>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>20齡</td>
</tr>
</table>
2. CSS樣式表根據(jù)所在網(wǎng)頁的位置，可分為（ B ）
A.行內(nèi)樣式表、內(nèi)嵌樣式表、混合樣式表; B.行內(nèi)樣式表、內(nèi)嵌樣式表、外部樣式表;
C.外部樣式表、內(nèi)嵌樣式表、導(dǎo)入樣式表; D.外部樣式表、混合樣式表、導(dǎo)入樣式表
行內(nèi)樣式：
<html>
<body>
<div style="width:100px;height:100px;background:red;"></div>>
</body>
</html>
-----------------------------------------------------------------
內(nèi)嵌樣式：
<html>
<head>
<style type="text/css">
#div{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
--------------------------------------------------------------
外部樣式：
<html>
<head>
<link rel="stylesheet" type="text/css" href="ccss.css">
</head>
<body>
<div id="div"></div>>
</body>
</html>
---------------------
css文件
#div{width:100px;height:100px;background:red;}
#和.區(qū)別
.點是使用class引用的，多個控件可以同時使用一個class，一個控件上也可以使用多個class，比如
.tdRed{border:solid 1px red;}
.tdBKBlue{background-color:blue;}
<td class="tdRed" />
<td class="tdRed tdBKBule"/>
而ID是在一個頁面中唯一的
總得來說class表示泛性的，id表示個性的
比如你所有的按鈕都是一個顏色的
.normalButton{background-color:blue;border:solid 0px black;}
對于提交按鈕會要做的大一點
#submit{width:100px;height:100px;}
那么你的按鈕就是
<input type="button" id="submit" class="normalButton" value="提交" />
普通的按鈕就是
<input type="button" id="abcdefg" class="normalButton" value="普通按鈕" />
3. 在插入圖片標(biāo)簽中，對插入的圖片進行文字說明使用的屬性是（ D ）
A.name; B.id; C.src; D. alt
4. 對于<FORM action=″URL″ method=*>標(biāo)簽，其中*代表GET或（ C ）
A.SET; B. PUT; C. POST ; D. INPUT
Get和post區(qū)別
安全性：POST比GET安全；
編碼方式：POST方式提交時可以通過HTML文檔中的<META>元素設(shè)置實體部分的編碼方式，而GET方式提交時URI默認的編碼方式為ISO-8859-1，不可以在頁面中設(shè)置；
傳輸文件大小：POST方式提交文件放在實體部分傳輸，大小無上限，而GET方式提交文件內(nèi)容放在URI部分傳輸，最大為2KB;
請求速度：GET比POST快。
數(shù)據(jù)傳輸方式：GET：查詢字符串（名稱/值對）是在 GET 請求的 URL 中發(fā)送的，如：/test/demo_form.asp?name1=value1&name2=value2；POST:查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發(fā)送的。
5. 下列標(biāo)簽可以不成對出現(xiàn)的是（ B ）
A.〈HTML〉〈/HTML〉 ; B.〈P〉 〈/P〉; C.〈TITLE〉〈/TITLE〉 ; D.〈BODY〉〈/BODY〉
<p>是段落標(biāo)簽。
在HTML4.01中某些標(biāo)簽（<p><br>,<hr>,<img>, <input>,<link>等）允許不成對出現(xiàn)，但是不推薦。在現(xiàn)在的瀏覽器里，都會“兼容”這些單標(biāo)簽。瀏覽器解釋<p>標(biāo)簽后，碰到一個不對應(yīng)的標(biāo)簽時，會自動填補</p>。所以<p>標(biāo)簽可以單標(biāo)簽使用，但不推薦。
在HTML5中規(guī)定了元素必須始終關(guān)閉，也就是標(biāo)簽必須成對出現(xiàn)。
6. 對于標(biāo)簽〈input type=*〉，如果希望實現(xiàn)密碼框效果，*值是（ C ）
A. hidden; B.text ; C. password ; D. submit
7. HTML代碼<select name=“name”></select>表示？（ D ）
A. 創(chuàng)建表格 ; <table>
B. 創(chuàng)建一個滾動菜單; <marquee>
C. 設(shè)置每個表單項的內(nèi)容;
D.創(chuàng)建一個下拉菜單
8. BODY元素用于背景顏色的屬性是（ C ）
A. alink ; B. vlink ; C. bgcolor; D. background
9. 在表單中包含性別選項，且默認狀態(tài)為“男”被選中，下列正確的是（ A ）
A. <input type=radio name=sex checked> 男 ; B.<input type=radio name=sex enabled>
C.<input type=checkbox name=sex checked>男；
D.nput type=checkbox name=sex enabled>男
性別(單選框)：<input type="radio" value="1" name="sex" checked="checked"/>男
<input type="radio" value="2" name="sex"/>女
角色（下拉框）：<select name="role">
<option value="1" selected="selected">教師</option>
<option value="2">學(xué)生</option>
</select>
10. 在CSS中下面哪種方法表示超鏈接文字在鼠標(biāo)經(jīng)過時，超鏈接文字無下劃線？（ B ）
A. A:link{TEXT-DECORATION: underline }; B. A:hover {TEXT-DECORATION: none};
C. A:active {TEXT-DECORATION: blink }; D. A:visited {TEXT-DECORATION: overline }
11. JavaScript代碼： 'abcdefg'.indexOf('D') 結(jié)果是（ B ）
A：0 B：-1 C：3 D：4
Js常用方法
1.substr
substr(start,length)表示從start位置開始，截取length長度的字符串。
var src="images/off_1.png";
alert(src.substr(7,3));
彈出值為：off
2.substring
substring(start,end)表示從start到end之間的字符串，包括start位置的字符但是不包括end位置的字符。
var src="images/off_1.png";
alert(src.substring(7,10));
彈出值為：off
3.indexOF
indexOf() 方法返回某個指定的字符串值在字符串中首次出現(xiàn)的位置（從左向右）。沒有匹配的則返回-1，否則返回首次出現(xiàn)位置的字符串的下標(biāo)值。
var src="images/off_1.png";
alert(src.indexOf('t'));
alert(src.indexOf('i'));
alert(src.indexOf('g'));
彈出值依次為：-1,0,3
4.lastIndexOf
lastIndexOf()方法返回從右向左出現(xiàn)某個字符或字符串的首個字符索引值（與indexOf相反）
var src="images/off_1.png";
alert(src.lastIndexOf('/'));
alert(src.lastIndexOf('g'));
彈出值依次為：6,15
5.split
將一個字符串分割為子字符串，然后將結(jié)果作為字符串?dāng)?shù)組返回。
以空格分割返回一個子字符串返回
var s, ss;
var s = "1,2,3,4";
ss = s.split(",");
alert(ss[0]);
alert(ss[1]);
12. <img src="name">的意思是？（ A ）
A. 圖像相對于周圍的文本左對齊; B. 圖像相對于周圍的文本右對齊;
C. 圖像相對于周圍的文本底部對齊; D. 圖像相對于周圍的文本頂部對齊
13. 點擊按鈕，在ID為“Link”的DIV標(biāo)簽內(nèi)顯示東軟實訓(xùn)超鏈接, 下面對該按鈕的onClick事件函數(shù)描述正確的是：C
A. Link.innerText='<a ;
B. Link.outerText='<a ;
C. Link.innerHTML='<a ;
D. Link.outerHTML='<a
innerHTML 設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的
HTML
outerHTML 設(shè)置或獲取對象及其內(nèi)容的 HTML 形式
innerText 設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的文本
outerText 設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對象的文本
innerText和outerText在獲取時是相同效果，但在設(shè)置時，innerText僅設(shè)置標(biāo)簽內(nèi)的文本，而outerText設(shè)置包括標(biāo)簽在內(nèi)的文本
14.(“24.7” + 2.3 ) 的計算結(jié)果是（ C ）
A. 27 ; B. 24.7 2.3; C. 24.72.3; D. 26.7
15. （ B ）事件處理程序可用于在用戶單擊按鈕時執(zhí)行函數(shù)
A. onSubmit; B. onClick; C. onChange; D. onExit
屬性當(dāng)以下情況發(fā)生時，出現(xiàn)此事件onabort圖像加載被中斷onblur元素失去焦點onchange用戶改變域的內(nèi)容onclick鼠標(biāo)點擊某個對象ondblclick鼠標(biāo)雙擊某個對象onerror當(dāng)加載文檔或圖像時發(fā)生某個錯誤onfocus元素獲得焦點onkeydown某個鍵盤的鍵被按下onkeypress某個鍵盤的鍵被按下或按住onkeyup某個鍵盤的鍵被松開onload某個頁面或圖像被完成加載onmousedown某個鼠標(biāo)按鍵被按下onmousemove鼠標(biāo)被移動onmouseout鼠標(biāo)從某元素移開onmouseover鼠標(biāo)被移到某元素之上onmouseup某個鼠標(biāo)按鍵被松開onreset重置按鈕被點擊onresize窗口或框架被調(diào)整尺寸onselect文本被選定onsubmit提交按鈕被點擊onunload用戶退出頁面
16. 用戶更改表單元素 Select 中的值時，就會調(diào)用（ D ）事件處理程序
A. onClick; B. onFocus; C. onMouseOver; D. onChange
17.onMouseUp 事件處理程序表示（ A ）
A. 鼠標(biāo)被釋放; B. 鼠標(biāo)按下; C. 鼠標(biāo)離開某個區(qū)域; D. 鼠標(biāo)單擊
18. 下列哪一項表示的不是按鈕（ C ）
A. type="submit"; B. type="reset"; C. type="image"; D. type="button"
<img src="/i/eg_tulip.jpg" alt="上海鮮花港 - 郁金香" />
19.下面哪一項是換行符標(biāo)簽？（ C ）
A. <body>; B. <font>; C. <br>; D. <p>
font規(guī)定文本字體、大小和顏色：
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>
20. 下列哪一項是在新窗口中打開網(wǎng)頁文檔。（ B ）
A. _self; B. _blank; C. _top; D. _parent
_blank在新窗口中打開被鏈接文檔；
_self是指在本身這個網(wǎng)頁窗口來打開新的網(wǎng)頁鏈接；
_top表示在頂層窗口打開網(wǎng)頁鏈接，即在整個窗口中打開被鏈接文檔；
_parent表示在父窗口打開網(wǎng)頁鏈接；
<a target="_blank">Visit W3School!</a>onclick="javascript：window.open('Default.aspx','_blank');"21. 下面說法錯誤的是( D )
A. CSS樣式表可以將格式和結(jié)構(gòu)分離;
B. CSS樣式表可以控制頁面的布局;
C. CSS樣式表可以使許多網(wǎng)頁同時更新;
D. CSS樣式表不能制作體積更小下載更快的網(wǎng)頁
CSS樣式表能為我們實現(xiàn)些什么樣的功能?
1、你可以將格式和結(jié)構(gòu)分離。
2、你可以以前所未有的能力控制頁面布局。
3、你可以制作體積更小下載更快的網(wǎng)頁。
4、你可以將許多網(wǎng)頁同時更新，比以前更快更容易。
5、瀏覽器將成為你更友好的界面
將格式和結(jié)構(gòu)分離
HTML從來沒打算控制網(wǎng)頁的格式或外觀。這種語言定義了網(wǎng)頁的結(jié)構(gòu)和各要素的功能，而讓瀏覽器自己決定應(yīng)該讓各要素以何種模樣顯示。 但是網(wǎng)頁設(shè)計者要求的更多。所以當(dāng) Netscape推出新的可以控制網(wǎng)頁外觀的HTML標(biāo)簽時，網(wǎng)頁設(shè)計者無不歡呼雀躍。 我們可以用<FONT FACE>、<I>包在<P>外邊控制文章主體的外觀等等。然后我們將所有東西都放入表格，用隱式GIF空格 產(chǎn)生一個20象素的邊距。一切都變得亂七八糟。編碼變得越來越臃腫不堪，要想將什么內(nèi)容迅速加到網(wǎng)頁中變得越來越難。 串接樣式表通過將定義結(jié)構(gòu)的部分和定義格式的部分分離使我們能夠?qū)撁娴牟季质┘痈嗟目刂啤TML仍可以保持簡單明了的初衷。CSS代碼獨立出來從另一角度控制頁面外觀。
以前所未有的能力控制頁面的布局
<FONT SIZE>能使我們調(diào)整字號，表格標(biāo)簽幫助我們生成邊距，這都沒錯。但是，我們對HTML總體上的控制卻很有限。我們不可能精確地生成80象素的高度，不可能控制行間距或字間距，我們不能在屏幕上精確定位圖象的位置。但是現(xiàn)在，樣式表使這一切都成為可能。
可以制作出體積更小下載更快的網(wǎng)頁還有更好的消息：
樣式表只是簡單的文本，就象HTML那樣。它不需要圖象，不需要執(zhí)行程序，不需要插件，不需要流式。它就象HTML指令那樣快。有了CSS之后，以前必須求助于GIF的事情現(xiàn)在通過CSS就可以實現(xiàn)。還有，正如我先前提到的，使用串接樣式表可以減 少表格標(biāo)簽及其它加大HTML體積的代碼， 減少圖象用量從而減少文件尺寸。
可以更快更容易地維護及更新大量的網(wǎng)頁
沒有樣式表時，如果我想更新整個站點中所有主體文本的字體，我必須一頁一頁地修改每張網(wǎng)頁。即便站點用數(shù)據(jù)庫提供服務(wù)，我仍然需要更新所有的模板， 而且更新每一模板中每一個實例實例的 <FONT FACE>。樣式表的主旨就是將格式和結(jié)構(gòu)分離。 利于樣式表，我可以將站點上所有的網(wǎng) 頁都指向單一的一個CSS文件，我只要 修改CSS文件中某一行，那么整個站點 都會隨之發(fā)生變動。
瀏覽器將成為你更友好的界面
不象其它的的網(wǎng)絡(luò)技術(shù)，樣式表的代碼 有很好的兼容性，也就是說，如果用戶 丟失了某個插件時不會發(fā)生中斷，或者 使用老版本的瀏覽器時代碼不會出現(xiàn)雜 亂無章的情況。 只要是可以識別串接樣式表的瀏覽器就 可以應(yīng)用它。
22. 要使表格的邊框不顯示，應(yīng)設(shè)置border的值是( B )
A. 1; B. 0; C. 2; D. 3
23. 如果要在表單里創(chuàng)建一個普通文本框，以下寫法中正確的是( A )
A. <INPUT>; B. <INPUT type="password">;
C. <INPUT type="checkbox">; D. <INPUT type="radio">
24. 以下有關(guān)按鈕的說法中，錯誤的是( B )
A. 可以用圖像作為提交按鈕; B. 可以用圖像作為重置按鈕;
C. 可以控制提交按鈕上的顯示文字; D. 可以控制重置按鈕上的顯示文字。
<input type="image" src="pic.jpg" onclick="fangfa();"/>
function fangfa(){
document.formname.submit();
document.formname.reset();
}
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
