1. 首頁 > 生活經驗 > >

如何用html編寫一個簡單的網頁 網頁設計html+css代碼模板

知識百科經驗分享


如何寫html網頁可以先寫html ， 再寫css ， 最后寫js 。
寫html網頁 ， 首先就應該明確html的結構和元素 ， 確定布局的整體框架 。
完成html后 ， 就可以根據設計圖寫相應的css樣式 ， 保持和設計圖基本一樣的效果 ， 并且注意需要滾動的地方需要設置高度和溢出 。
最后寫js ， 完成頁面的效果和數據接口調用 。
html網頁制作教程html寫的網頁是靜態的網頁 ， 它可以直接雙擊運行 ， 不需要配置什么環境 ， 只要用編輯器編輯好之后 ， 有瀏覽器就可以運行并且看到效果了 。
可以直接新建一個.html結尾的文件 ， 也可以打開編輯器之后 ， 在里面新建一個文件 ， 然后保存為 .html結尾的 ， 結果都一樣 。
然后選擇使用某種編輯器來打開它 ， 如使用Notepad++編輯器來編輯它 。
然后在這個文件中寫入網頁所需的基本代碼 。
寫好之后 ， 根據需要設置編碼格式 ， 一般是utf-8格式 ， 格式設置不對 ， 會出現亂碼的情況；設置好格式之后 ， 點擊左上角的圖標來保存或者是直接按下 ctrl+s快捷鍵來保存 。
保存好之后 ， 然后點擊‘運行’菜單 ， 在出現的菜單中根據需要選擇不同的瀏覽器來查看剛才編輯好的網頁 ， 當然也可以按下快捷鍵 ， 如 谷歌的是 shift+Ctrl+alt+R 來看看效果如何 ， 這就是簡單的html網頁教程了 。
怎么用html制作簡單得網頁代碼？用html制作簡單的網頁的步驟：
1、整體形象設計：企業確定要搭建網站 ， 那么首先就需要確定企業的整體形象 ， 這個形象包括企業的logo設計 ， 整個站點的色彩搭配 ， 網頁流程設計 ， 版面設計 ， 甚至包括哪些地方本使用動態效果 ， 哪些地方搭配文字信息 ， 又或者需要布局哪些模塊等等 ， 這個都需要納入到整體形象設計當中 。
2、頁面風格設計：網站整體設計完成之后 ， 需要落實到每個小的頁面 ， 每個頁面風格設計可以不同 ， 但大的方向卻需要一致 ， 這樣才能保證整個站點是整潔有序的 ， 千萬不能是一個頁面一個頁面設計 ， 這樣讓用戶感覺到非常突兀 ， 甚至會不適應 。
3、代碼設計：代碼設計其實也就是功能設計 ， 一個網站不可能只是展示 ， 還需要有一些其他功能 ， 最少有聯系版塊的功能 ， 留言功能等等 ， 如果是電子商務網站還需要一些支付功能等等 。此外 ， 代碼設計也涵蓋了整個網站的框架布局 ， 這個需要站長結合SEO優化元素去設計 。
網頁的本質就是超級文本標記語言 ， 通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等） ， 可以創造出功能強大的網頁 。因而 ， 超級文本標記語言是萬維網（Web）編程的基礎 ， 也就是說萬維網是建立在超文本基礎之上的 。超級文本標記語言之所以稱為超文本標記語言 ， 是因為文本中包含了所謂“超級鏈接”點 。
網頁設計常用HTML代碼 網頁設計常用HTML代碼大全
HTML是用來描述網頁的一種語言 。下面我為大家分享HTML代碼 ， 希望對大家學習html代碼有幫助！
忽視右鍵
<body oncontextmenu="return false">
或
<body style="overflow-y:hidden">
1.如何幾秒后轉到別的頁面？
<META HTTP-EQUIV="Refresh" CONTENT="時間;URL=地址">
2.點擊關閉窗口
<a href="javascript:top.window.close();">點擊關閉窗口</a>！
3.請問如何去掉主頁右面的滾動條？
<body scroll="no">
<body style="overflow-y:hidden">
4.請問如何做到讓一個網頁自動關閉.
<html>
<head>
<OBJECT id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/Close">
</object>
</head>
<body onload="window.setTimeout(‘‘‘‘closes.Click()‘‘‘‘,10000)">
這個窗口會在10秒過后自動關閉,而且不會出現提示. </body>
如何在不刷新頁面的情況下刷新css?
<style>
button{ color:#000000;}
</style>
<button onclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>點擊按鈕直接修改style標簽里button選擇符使按鈕改為紅色</button>
請問如何讓網頁自動刷新？
在head部記入<META HTTP-EQUIV="Refresh" content="20">其中20為20秒后自動刷新 ， 你可以更改為任意值 。
5.如何讓頁面自動刷新？
方法一 ， 用refresh
HTML 代碼片段如下:
<head>
<meta http-equiv="refresh" content="5">
</head>
5表示刷新時間
[Ctrl+A 全部選擇 提示:你可先修改部分代碼 ， 再按運行]
方法二 ， 使用setTimeout控制
<img src=https://pipe99.com/logo.gif>
<script>
function rl(){
document.location.reload()
}
setTimeout(rl,2000)
</script>
6.如何讓超鏈接沒有下劃線
在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼：
<style type="text/css"> <!--
a { text-decoration: none}
--> </style>
7.請問如何去掉IE的上下滾動條？
<body style=‘‘‘‘overflow:scroll;overflow-y:hidden‘‘‘‘>
</body>
8.怎樣才能把RealPlayer文件在網頁做一個試聽連接？
<embed height=25　src=https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/51js.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false" controls="PlayButton">
9.如何用html實現瀏覽器上后退按鈕的功能？
<a href="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/java script:history.go(-1)">點擊后退</a>
或者
<script> history.back() </script>
10.請問怎么在網頁中改變鼠標的箭頭形狀？
HTML 代碼片段如下:
<body>
<a style="cursor: auto;">auto</a><br>
<a style="cursor: crosshair ">crosshair </a><br>
<a style="cursor: default ">default </a><br>
<a style="cursor: hand ">hand </a><br>
<a style="cursor: move ">move </a><br>
<a style="cursor: e-resize ">e-resize </a><br>
<a style="cursor: ne-resize ">ne-resize </a><br>
<a style="cursor: nw-resize">nw-resize</a><br>
<a style="cursor: n-resize">n-resize</a><br>
<a style="cursor: se-resize">se-resize</a><br>
<a style="cursor: sw-resize">sw-resize</a><br>
<a style="cursor: s-resize">s-resize</a><br>
<a style="cursor: w-resize">w-resize</a><br>
<a style="cursor: text">text</a><br>
<a style="cursor: wait">wait</a><br>
<a style="cursor: help">help</a><br>
</body>
11.怎樣不使用頁面的緩存？即每一次打開頁面時不是調用緩存中的東西
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
12.頁面打開時自動彈出一個窗口的代碼怎么寫？
HTML 代碼片段如下:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="<B style="color:black;background-color:#A0FFFF">javascript</B>">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_openBrWindow(‘‘‘‘http://www.35ui.cn/‘‘‘‘,‘‘‘‘,‘‘‘‘width=400,height=400‘‘‘‘)">
</body>
</html>
13.如何讓我的頁面出現一個會講話的小人？Merlin
HTML 代碼片段如下:
<HTML>
<HEAD>
<TITLE>默林</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY>
<p><OBJECT id=sims classid=CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F>
</OBJECT>
<SCRIPT>
var MerlinID;
var MerlinACS;
sims.Connected = true;
MerlinLoaded = LoadLocalAgent(MerlinID, MerlinACS);
Merlin = sims.Characters.Character(MerlinID);
Merlin.Show();
Merlin.Play("Surprised");
Merlin.Speak("大家好");
Merlin.Play("GestureLeft");
Merlin.Think("我是默林！");
Merlin.Play("Pleased");
Merlin.Think("可愛嗎？");
Merlin.Play("GestureDown");
Merlin.Speak("哈哈！");
Merlin.Hide();
function LoadLocalAgent(CharID, CharACS){
LoadReq = sims.Characters.Load(CharID, CharACS);
return(true);
}
</SCRIPT>
</p>
<p> </p>
<p>看此效果必須裝有office2000！??！</p>
</BODY>
</HTML>
14.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動
HTML 代碼片段如下:
<html><head>
<STYLE>
body{background-image:url(logo.gif);
background-repeat:no-repeat; background-position:center }
</STYLE>
</head>
<body bgproperties="fixed" >
</body>
</html>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼 ， 再按運行]
background-repeat:no-repeat; 是讓背景圖不占滿整個頁面
body bgproperties="fixed" 是拉動scroll時背景圖不動
15.文本輸入框什么屬性能實現不可輸入？
HTML 代碼片段如下:
<input type="text" name="textfield" disabled>
或者
<input type="text" name="textfield" readonly>
16.如何禁止自己的頁面在別人的框架里打開？
把以下代碼加至你的<head>區
<script>
if (window.top!=self){
window.top.location=self.location
}
</script>
17.如何實現首頁全屏幕顯示？
HTML 代碼片段如下:
<html>
<body><script language="<B style="color:black;background-color:#A0FFFF">javascript</B>">
var coolw=642
var coolh=400
var coolhuang=window.open("http://www.35ui.cn","coolhuang","width="+coolw+",height="+coolh+",
fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0")
window.close()
</script></body></html>
18.如何監聽一個窗口被關閉了？
HTML 代碼片段如下:
<body onunload="alert(‘‘‘‘你關閉了這個窗口‘‘‘‘)">
19.如何禁止Ctrl+N？
HTML 代碼片段如下:
<body onkeydown=return(!(event.keyCode==78&&event.ctrlKey))>
如何把頁面加入用戶的收藏夾？
HTML 代碼片段如下:
<a href="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/ 如何在我的'頁面中加入背景音樂？
IE: <bgsound src="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/*.mid" loop=infinite>
NS:<embed src="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/*.mid" autostart=true hidden=true loop=true>
*.mid你的背景音樂的midi格式文件
關于頁面轉換效果
<meta http-equiv="page-enter" content="revealTrans(Duration=4,Transition=23)">
或
<meta http-equiv="page-exit" content="revealTrans(Duration=4,Transition=23)">
說明：Transition=23是隨機效果 ， 另可以選0-22任一數字固定某個效果
如何設定打開頁面的大小
HTML 代碼片段如下:
<body onload="top.resizeTo(300,200);"><!--(width ， height)-->
怎樣雙擊滾屏 ， 單擊停止？
HTML 代碼片段如下:
<html>
<head>
<title>新網頁1</title>
</head>
<body>
<script language"<B style="color:black;background-color:#A0FFFF">javascript</B>">
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",10);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize
</script>
<p>a</p><p>a</p><p>a</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>a</p>
</body>
</html>
如何讓body中的文字不被選中？
HTML 代碼片段如下:
<body onselectstart="return false" >aaa</body>
如何讓彈出的窗口不能關閉？
在新開的窗口中加入如下代碼
<body onunload=open(location.href)>
</body>
如何讓瀏覽器在保存頁面時保存失??？
HTML 代碼片段如下:
<NOSCRIPT>
<<B style="color:black;background-color:#ffff66">IFRAME</B> SRC="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/*.html">
</<B style="color:black;background-color:#ffff66">IFRAME</B>>
</NOSCRIPT>
表單中如何用圖片按鈕實現 reset?
<html>
<head>
<script>
function aaa(){
document.forms[0].reset()
}
</script>
</head>
<body>
<form>
<textarea rows="2" name="S1" cols="20"></textarea>
<input type="submit" values="提交" name="B1">
<image src="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/logo.gif" onclick=aaa()>
</form>
</body></html>
進入網頁時彈出的信息對話框
<body onLoad="window.alert(‘‘‘‘歡迎光臨本站‘‘‘‘)">
關閉窗口后彈出對話框
<body onUnload="window.alert(‘‘‘‘謝謝你的光臨!歡迎下次再來!‘‘‘‘)">
告別提示
<body onUnload= alert("再見 ， 感謝你的訪問！")>
右鍵菜單的制作
<OBJECT id=menu type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM name="Command" value="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/Related Topics,menu">
<PARAM name="Item1" value="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/動易;http://www.35ui.cn">
<PARAM name="Item2" value="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/搜狐;http://www.35hu.cn">
<PARAM name="Item3" value="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/新浪;http://www.35no.cn">
<PARAM name="Item4" value="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/網易;http://www.chinsgp.cn">
<PARAM name="Item5" value="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/互動學院;http://www.35ui.cn">
</OBJECT> <script> if (document.all) document.body.onmousedown=new Function("if (event.button==2) menu.Click();") </script>
下拉菜單
<object id=HHCtrl type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"> <PARAM name="Command" value="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/Related Topics,Menu"> <PARAM name="Item1" value="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/aspease;http://www.35ui.cn"> <PARAM name="Item2" value="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/byhu;http://www.35ui.cn"> <PARAM name="Item3" value="https://pipe99.com/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/lzz;http://www.35ui.cn"> </object> <a href=javascript:HHCtrl.Click() title="下拉菜單">下拉菜單</a>
;
如何用html編寫一個簡單的網頁簡單的html網頁可以直接利用文本編寫的 ， 無需下載特定編輯器 。
1、在我們的windows操作系統中 ， 桌面上鼠標右鍵新建一個txt文本 ， 并命名為"最簡單網頁",只是便于標識 ， 實際上并不影響我們的操作 。注意我們需要提前在文件屬性中把擴展名顯示出來 。
2、我們打開文件夾屬性設置 ， 將文件擴展名顯示出來 ， 后面我們需要對文件擴展名進行操作 ， 不同操作系統的設置位置不太一樣 ， 我們可以直接搜索"文件夾屬性"來進行查找修改 。
3、然后輸入最簡單的HTML文本語言 。
代碼如下：
<html>
<body>
最簡單的網頁
</body>
</html>
4、保存并關閉txt文本 ， 然后修改我們txt文本的擴展名為html ， 此時會彈出警告框 ， 提示我們修改后可能會導致文件不能使用 ， 這是操作系統的一個處理邏輯 ， 為了防止無意或惡意的損壞文件的行為 。
5、無需擔心 ， 因為這在我們自己的掌控之下 ， 確認警告 ， 點擊"是" ， 然后雙擊打開我們自己的第一個html網頁 ， 就可以看到一個最簡單的html網頁了 。

html 網頁設計direction 表示滾動的方向 ， 值可以是left ， right ， up ， down ， 默認為left
behavior 表示滾動的方式 ， 值可以是scroll（連續滾動）slide（滑動一次）alternate（來回滾動）
loop 表示循環的次數 ， 值是正整數 ， 默認為無限循環
scrollamount 表示運動速度 ， 值是正整數 ， 默認為6
scrolldelay 表示停頓時間 ， 值是正整數 ， 默認為0 ， 單位是毫秒
align 表示元素的垂直對齊方式 ， 值可以是top ， middle ， bottom ， 默認為middle
bgcolor 表示運動區域的背景色 ， 值是16進制的RGB顏色 ， 默認為白色
結果：
<marquee direction="left" behavior="alternate" bgcolor="red" height="200" width="300">乘風破浪會有時,直掛云帆濟滄海 。</marquee>
【如何用html編寫一個簡單的網頁 網頁設計html+css代碼模板】關于網頁設計html和網頁設計html+css代碼模板的內容就分享到這兒！更多實用知識經驗 ， 盡在 m.apearl.cn