當前位置：首頁 » 編程語言 » html響應

html響應

發布時間: 2021-03-22 10:47:40

Ⅰ html5怎麼製作一個響應式網頁

HTML5 製作響應式網頁，首先需要考慮是全平台適配還是只是移動端適配。這里以移動端響應式網站為例，講述如何製作響應式網頁。

1、選定基本設計尺寸，一般以1080為基準。確定響應式web設計的應用場景之後，和美工（或設計師）溝通，之前，一般需要美工出幾套主流移動設備屏幕解析度的設計圖，現在，使用流式布局以及rem等可以使用一套設計圖，以最常用的移動設備屏幕解析度為基準。

2、當美工完成設計圖之後，前端工程師的工作就開始了。這時你就可以使用PS或是FW進行切圖了。一般說來，Fireworks cs6切圖更快，但是Fireworks有時會有圖片失真的情況發生，所以，有時需要使用PS進行配合，PS有切片工具可以專門用來切圖。

Ⅱ 什麼是 HTML響應式設計

就是能根據你打開網頁窗口大小隨意變化
適合你窗口大小的
設計，比如說以內前有的網頁在pc端上打開剛好容
但是在手機端上載體變小了，相應字就變的比較小了，而且還只能顯示左邊一半的頁面內容，但是用了響應式設計後
，他就能根據你自身載體的大小來變化了

Ⅲ html 如何動態增加點擊響應及響應函數

<html> <head> <meta charset="utf-8" /> <title>abc</title> </head> <body> <script type="text/javascript"> function cppCall(num) { alert(num); if (cpp_object != null) { alert('will call webCall'); cpp_object.webCall(num); } } function SaveCppObject(obj) { alert(SaveCppObject); cpp_object = obj; } var cpp_object; </script> <p><a onclick="cppCall('18818180001')";>18818180001</a></p> </body> </html>

Ⅳ 怎麼處理html頁面的請求與響應

<html>
<head>
<title>頁面載入中</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="refresh" content="0;URL=abc">
<style type=text/css>
body,td,input,select {font-size: 12px;}
</style>
</head>
<body">
<table width="505" border="0" cellspacing="0" cellpadding="0" align="center" height="303">
<tr>
<td align="center"><font size=5>正在讀取數據；請稍候~！</font>
<br><br><img src=../images/tiaozhuan.gif>
</td>
</tr>
</table>
</body>
</html>

Ⅳ html的div區域如何響應onclick事件

<! html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test</title>
<script type="text/javascript">
function ddd(){
var xy=document.getElementById("xiangying");
xy.onclick = function() {
alert("aa");
}
}
window.onload=function(){
ddd();
}
</script>
</head>
<body>
<div id="xiangying">dd</div>

</body>
</html>

Ⅵ html回車響應相應按鈕事件

<input onkeydown='if(event.keyCode==13){cu.click()}'>
<button id=cu onclick='alert()'>submit</button>

Ⅶ HTML5怎麼製作響應式網頁

1.調整視口

代碼實例：

<!DOCTYPEhtml>
<head>
<metacharset="UTF-8"/>
<title>布局之路-移動端開發實例</title>
<metaname="viewport"content="width=device-width,user-scalable=no"/>
<linkrel="stylesheet"type="text/css"href="css/reset.css"/>
</head>
<body>
<divclass="wrap"></div>
</body>
</html>

代碼解析：由於使用不同設備打開網頁時，寬度均有所不同，所以不能講視口設置為固定值，應當為width=device-width,即將視口設置為當前設備的寬度。

2.確定設計圖的最小字體

瀏覽器（部分）能夠顯示的最小字體未12px，當移動端頁面寬度為320px時，要保證最小字體為12px，那麼在1080px的設計圖中，最小字體應當為42px。

代碼實例：

<styletype="text/css">
html{
font-size:42px;
}
</style>

3.浮動布局

各個區塊都是浮動的，不是固定不變的。為了能自適應各個窗口。

代碼實例：

.main{
float:left;
width:70%;
}
.box{
float:left;
width:60.93%;
font-size:1.71rem;
text-align:center;
line-height:4.64rem;
}

float浮動的好處就是，如果寬度不夠放置下這個元素，元素會自動滾動到下方。

4.通過媒介查詢，為不同設備載入相應樣式

有條件應用樣式：

<style>
@mediaalland(min-width:500px){...}
@media(orientation){...}
</style>

代碼解析：

第一行媒體查詢代碼指的是：為寬度大於等於500px的設備設置樣式。

第二行媒體查詢代碼指的是：為縱屏狀態（可見區域大於或等於寬度）下的移動端設備設置樣式。

有條件的載入樣式表：

<head>
<linkrel="stylesheet"href="wide.css"media="screenand(min-width:1024)"/>
<linkrel="stylesheet"href="mobile.css"media="screenand(max-width:320)"/>
</head>

代碼解析：

第一行媒體查詢代碼指的是：為寬度大於等於1024px的設備，載入wide.css文件。

第二行媒體查詢代碼指的是：為寬度小於等於320px的設備，載入mobile.css文件。

5.使用百分比和rem替換px

除了布局和文本，"自適應網頁設計"還必須實現圖片的自動縮放。

代碼效果對比：

/*使用固定像素*/
.box{
float:left;
width:658px;
font-size:72px;
text-align:center;
line-height:195px;
}
/*使用百分比和rem*/
.box{
float:left;
width:60.93%;
font-size:1.71rem;
text-align:center;
line-height:4.64rem;
}

代碼解析：

水平方向的值，將具體像素調整為百分比。百分比的計算是根據父級的內容區寬度進行計算的。
例如，父級寬度為1080px，子級元素為197px，那麼子元素轉換為百分比為：197/1080*100%=18.24%。需要注意的是百分比根據父級計算，當標簽結構級別不同時，計算公式中的「分母」也有所不同，在開發時這個地方很容易出現問題，請務必注意。
垂直方向的值，將具體像素調整為rem，與水平方向相比，垂直方向的計算就比較簡單。例如，行高為195px，HTML標簽當前的字體大小為42px，將行高轉換為rem單位，即195/42= 4. 64rem。

Ⅷ 常見的Html標記的事件響應有哪些(至少6種)

onClick HTML: 滑鼠點擊事件，多用在某個對象控制的范圍內的滑鼠點擊
onDblClick HTML: 滑鼠雙擊事件
onMouseDown HTML: 滑鼠上的按鈕被按下了
onMouseUp HTML: 滑鼠按下後，松開時激發的事件
onMouseOver HTML: 當滑鼠移動到某對象范圍的上方時觸發的事件
onMouseMove HTML: 滑鼠移動時觸發的事件
onMouseOut HTML: 當滑鼠離開某對象范圍時觸發的事件
onKeyPress HTML: 當鍵盤上的某個鍵被按下並且釋放時觸發的事件.[注意:頁面內必須有被聚焦的對象]
onKeyDown HTML: 當鍵盤上某個按鍵被按下時觸發的事件[注意:頁面內必須有被聚焦的對象]
onKeyUp HTML: 當鍵盤上某個按鍵被按放開時觸發的事件[注意:頁面內必須有被聚焦的對象]

Ⅸ 如何響應HTML的事件

點擊事件
<a href="javascript:;" onclick="fun1();">超級鏈接</a>
<script>
function fun1(){
alert("你觸發了點擊事件");

}
</script>

獲得焦點
<input type="text" onfocus="fun1();" />
<script>
function fun1(){
alert("你觸發了獲得焦點的事件");
}
</script>

jquery事件響應
$(".class").click(function{
alert("你觸發了點擊事件");
});

Ⅹ html5和響應式頁面到底是有什麼關系

html5是html4的更新標准。html5新增了一些html標簽以及這些標簽對應的css和js介面。 bootstrap是在標准形成之際推出的，因此bootstrap天生含有html5的一些標簽和特性。比如，bootstrap支持響應式設計，具體體現在bootstrap的css庫（主要是啟用了css3標準的media query功能）實現了各種設備下的一些預設的html＋css組件（就是一些半成品的代碼片段，適合在網頁各個地方復制粘貼）。

簡單說：
html5是html的最新標准，體現在新標簽，新css標准，新js介面
bootstrap是基於html5技術的一個好用的前端代碼框架，可以簡單的復制粘貼，修修改改做一個漂亮頁面
響應式設計是一種設計實現理念，css3的meida query功能讓這個理念的實現變的現實而方便。
H5是指在html5標准推行以後，利用html5新特性在手機上的配合市場營銷採用了大量的js css 及canvas技術實現的頁面。個人認為H5的概念很狹隘不能代表整個web前端，更不能包含webapp。但H5的概念也可以變的更寬放，泛指一切在手機上實現的應用或頁面。

閱讀全文

html響應

1.調整視口

2.確定設計圖的最小字體

3.浮動布局

4.通過媒介查詢，為不同設備載入相應樣式

與html響應相關的閱讀推薦