web程序設計期末復習-填空題

常用標簽塊級標記行內標記等

一、塊級元素

特點：

獨占一行
可以設置寬度、高度、內外邊距
默認情況下會從上到下垂直排列

常見標簽：

標簽	含義
`<div>`	最常用的通用塊級容器
`<p>`	段落
`<h1>`到`<h6>`	標題（一級到六級）
`<ul>`	無序列表
`<ol>`	有序列表
`<li>`	列表項
`<header>`	頁面頭部
`<footer>`	頁面底部
`<nav>`	導航欄
`<section>`	文檔中的節（如章節、頁眉、頁腳或文檔的其他部分）
`<article>`	獨立內容塊（如博客文章、新聞等）
`<aside>`	側邊欄內容
`<main>`	頁面主要內容
`<table>`	表格容器
`<form>`	表單容器

二、行內元素

特點：

不獨占一行
設置寬高無效（除非轉換為 block 或 inline-block）
內容決定大小
通常用于文本級別的樣式控制

常見標簽：

標簽	含義
`<span>`	通用行內容器
`<a>`	超鏈接
`<strong>`	加粗強調（語義更強）
`<em>`	斜體強調
`<b>`	加粗（無強調語義）
`<i>`	斜體（無強調語義）
`<u>`	下劃線
`<s>`或`<del>`	刪除線
`<sup>`	上標
`<sub>`	下標
`<code>`	代碼片段
`<mark>`	高亮文本
`<small>`	小號字體
`<input>`	輸入框（如文本框、按鈕等）
`<img>`	圖片（雖然是行內元素，但可設置寬高）
`<br>`	換行符
`<button>`	按鈕

三、行內塊元素

這類元素是通過CSS設置 display: inline-block 的元素，兼具行內和塊級元素的特點：

特點：

可在同一行顯示
可以設置寬高和內外邊距
適用于需要并排顯示又想控制尺寸的元素

<span style="display: inline-block; width: 100px;">示例</span>
<img src="image.jpg" style="display: inline-block;">

?表格

常用標簽說明

標簽	含義
`<table>`	定義整個表格
`<tr>`	表示表格中的一行（Table Row）
`<td>`	表示普通單元格（Table Data Cell）
`<th>`	表示表頭單元格（Table Header Cell），默認加粗并居中顯示
`<thead>`	表頭部分（可選）
`<tbody>`	表體部分（可選）
`<tfoot>`	表尾部分（可選）

<table><tr><th>標題1</th><th>標題2</th></tr><tr><td>內容A1</td><td>內容A2</td></tr><tr><td>內容B1</td><td>內容B2</td></tr>
</table>

表單?

元素	類型 / 標簽	描述
單行文本框	`<input type="text">`	輸入一行文字，如用戶名、郵箱
密碼框	`<input type="password">`	輸入內容隱藏（顯示為星號）
多行文本框	`<textarea></textarea>`	可輸入多行文本，如留言、描述
提交按鈕	`<input type="submit">`或`<button type="submit">`	提交表單到服務器
單選按鈕	`<input type="radio">`	多個選項中只能選擇一個
復選框	`<input type="checkbox">`	可以選擇多個選項
下拉選擇框	`<select><option>...</option></select>`	下拉菜單選擇
文件上傳框	`<input type="file">`	用戶上傳文件
重置按鈕	`<input type="reset">`	清空已填寫內容

GET 與 POST 的區別?

特性	GET 方法	POST 方法
數據傳遞方式	通過 URL 的查詢字符串（Query String）傳遞數據	數據放在請求體（Body）中傳輸
數據可見性	可見，暴露在 URL 中	不可見，數據在 Body 中
數據長度限制	有限制（受 URL 長度限制，通常 2KB 左右）	無明確限制
書簽/緩存支持	可以被緩存，URL 可保存為書簽	一般不會被緩存，也不適合保存為書簽
安全性	安全性較低（不適合敏感信息）	比 GET 更安全（但也不是絕對安全）
冪等性	是冪等的（多次執行結果相同）	不是冪等的（可能改變服務器狀態）
用途建議	獲取數據（如搜索、篩選）	提交數據（如注冊、登錄、評論）

?動態頁面和靜態頁面的區別

靜態網頁與動態網頁的區別在于Web服務器對它們的處理方式不同

動態頁面的原理和執行過程

??當Web服務器接收到對靜態網頁的請求時，服務器直接將該頁發送給客戶瀏覽器，不進行任何處理。

如果接收到對動態網頁的請求，則從Web 服務器中找到該文件，并將它傳遞給一個稱為應用程序服務器的特殊軟件擴展，由它負責解釋和執行網頁，將執行后的結果傳遞給客戶瀏覽器。??

常見網頁圖像格式

格式	全稱	是否支持透明	是否支持動畫	壓縮方式	使用場景
JPEG / JPG	Joint Photographic Experts Group	? 不支持	? 不支持	有損壓縮	照片、復雜圖像
PNG	Portable Network Graphics	? 支持（全透明/半透明）	? 不支持	無損壓縮	圖標、Logo、圖形、需要透明背景的圖片
GIF	Graphics Interchange Format	? 支持（1位透明）	? 支持	有損壓縮（8-bit）	簡單動畫、小圖標
WebP	Web Picture Format（Google推出）	? 支持	? 支持（動態WebP）	有損+無損	替代 JPEG/PNG，高質量+更小體積
SVG	Scalable Vector Graphics	? 支持	? 支持（通過 JS/CSS）	矢量圖形	圖標、LOGO、可縮放圖形、響應式設計
APNG	Animated PNG	? 支持	? 支持	無損	高質量動畫（兼容性不如 GIF）
AVIF	AV1 Image File Format	? 支持	? 支持	高效壓縮	新一代圖像格式，壓縮率

CSS 選擇器的基本分類

類型	示例	描述
元素選擇器	`div`	匹配所有`<div>`元素
類選擇器	`.box`	匹配所有 class="box" 的元素
ID 選擇器	`#header`	匹配 id="header" 的唯一元素
屬性選擇器	`[type="text"]`	匹配具有指定屬性的元素
偽類選擇器	`a:hover`	匹配特定狀態下的元素
偽元素選擇器	`::before`	匹配元素的某些虛擬部分

常用組合方式一覽

組合方式	寫法	含義
群組選擇器	`h1, h2, h3`	多個選擇器共享樣式
后代選擇器	`div p`	所有 div 內部的 p
子代選擇器	`ul > li`	ul 直接子元素 li
相鄰兄弟	`h2 + p`	緊跟在 h2 后的 p
通用兄弟	`input ~ label`	input 后面的所有 label
交集選擇器	`div.box`	是 div 且 class=box
多類名	`.btn.primary`	同時包含 btn 和 primary 類
屬性組合	`input[type][readonly]`	擁有 type 和 readonly 的 input

JavaScript 編寫網頁動態效果的一般步驟（可能的代碼補全？）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JS動態效果練習</title>
</head>
<body><h1 id="message">Hello</h1><button id="toggleBtn">切換文字</button><script>// 步驟1：獲取DOM元素var message = document.getElementById("message");var toggleBtn = document.getElementById("______");  // (1) 補全ID名// 步驟2：注冊事件監聽器toggleBtn.addEventListener("______", function() {   // (2) 補全事件類型// 步驟3：判斷當前內容并切換if (message.innerHTML === "Hello") {message.innerHTML = "Goodbye";} else {message.innerHTML = "Hello";}});</script>
</body>
</html>

(1) "toggleBtn"
(2) "click"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>顏色切換</title>
</head>
<body><p id="text">這是一段可變色的文字。</p>
<button id="colorBtn">切換顏色</button><script>var text = document.getElementById("text");var colorBtn = document.getElementById("colorBtn");colorBtn.addEventListener("click", function() {if (text.style.color === "red") {text.style.______ = "blue";  // 補全屬性名} else {text.style.color = ______;   // 補全顏色值}});
</script></body>
</html>

第1空：color
第2空："red" 或 "blue"

輸入框內容實時預覽

實現當用戶在輸入框中輸入內容時，頁面上同步顯示其輸入內容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>輸入預覽</title>
</head>
<body><input type="text" id="inputText" placeholder="請輸入內容">
<p>你輸入的是：<span id="preview"></span></p><script>var input = document.getElementById("inputText");var preview = document.getElementById("preview");input.addEventListener("______", function() {  // 補全事件類型preview.innerHTML = ______.value;         // 補全對象});
</script></body>
</html>

第1空：input
第2空：input

?

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/83357.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/83357.shtml
英文地址，請注明出處：http://en.pswp.cn/web/83357.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！