我们想做一个网页，首先该干什么呢？
当然是先想做个什么样的网页，比如邮箱，门户等等。
想好之后呢？
我们先布局，首先肯定来个登录页面。
登录页面从哪找呢？
一个由美工提供或者自己用搜索引擎将图片下载和右击图片点属性选中网上的图片链接过去
有了登录页面图，我们首先多建立几个.html文件进行编写
先做好登录页面，看到这个图片，我们用什么划分和进行页面布局呢？
我们用学过的表格进行大致的定位，确定图片宽高多少，然后依据图片提供的参数对应的向表格里提供图片的宽高
有时第二行表格框架位置并不理想，因此我们需要使用faststone capture的软件测量一下像素比例。
<html> <body> <!--看注释时请结合图片一起看--> <form action="emailhomepage.html" method=*> <!--form action指定的跳转页面为emailhomepage.html，跳转到我写的邮箱首页--> <center> <!--居中--> <table> <!--table为制表符，<tr>为列，<td>为行--> <tr><td> </td></tr> <!--表格居中并下压，若不写 (空格)表格容易出现错乱，因为它认为你什么都不写就不该占这位置--> <tr><td> </td></tr> <tr><td> </td></tr> </table> <table border="1px" width="535" bordercolor="yellow" height="300" background="biggd.jpg"> <!--border="1px"为边框指定1个像素方便查看，535为登录图片的宽度，300为高度，表格为此参数是为了 锁定图片写入范围，方便规划。布局完美后可以将边框指定0像素border="0px"，边框颜色bordercolor="yellow"去掉--> <tr> <td width="230px"rowspan="2"> </td> <!--宽度为230px是第一行与第二行之间的边框横向宽度 rowspan="2"跨两行--> <td colspan="2"> <table border="1px" bordercolor="red"width="100%"height="100%"> <!--100%是为了填充第二行整个嵌入表格--> <tr><td> </td></tr><tr><td>用户名:</td><td><input type="text" name="username"/></td></tr> <tr><td>密 码:</td><td><input type="password" name="password"/></td></tr> <!--<input type="*">可以指定功能按钮和输入框, <input type="*">中""不可随便乱填--> <th><input type="submit" value="进入邮箱" /></th><th><input type="reset" value="重新填写"></th> </tr> <tr> <td><a href="#">找回密码</a></th><td><a href="#">注册用户</a></th> </tr> </table> </td> </tr> <tr> </table> </center> </body></html>
成功后如图，还记得我在注释上写了什么吗？
再做好网页框架
<html> <frameset rows="20%,*" border="0" noresize/> <!--上面的横向页面比例20%，下面的框架页面80% noresize不能拖动边框--> <frame src="top.html"> <!--指定横向框架页面为top.html--> <frameset cols="20%,*" /> <!--为下面框架页面80%设置20%的左纵向页面，右纵向页面也就为80%了--> <frame src="left.html"name="l1"> <!--指定左纵向页面为left.html，并为左纵向框架命名为"l1"(命名方便我们指定框架 ，比如叫张三，你喂喂喂，谁也不知你叫谁)--> <frame src="right.html"name="r1"> <!--这行标签代码，你想想看--> </frameset> <!--结尾就不用说了--> </frameset> <!--差点忘了说，框架是不能写body体的--></html>
我将我做框架的html文件复制到其他路径和按照默认边框显示方便大家观看
我们指定A边框里内容的页面也就是注释说的指定横向框架页面为top.html，我们放入几张图片到盘符相对路径
红箭头所指就是我们放入的图片
开始到top.html写入内容
<body> <center><img src="/static/imghwm/default1.png" data-src="logo.gif" class="lazy" / alt="异说html初学实战邮箱页面布局_html/css_WEB-ITnose" ><img src="/static/imghwm/default1.png" data-src="760-60.gif" class="lazy" / alt="异说html初学实战邮箱页面布局_html/css_WEB-ITnose" ></center></body>
我们然后到右边框写入内容，记住我到注释里写的是我们指定的是right.html
<html> <body> <table> <tr><td> </td></tr> <tr><td> </td></tr> </table> <table> <tr><td> </td></tr> <tr><td> </td></tr> </table> <table> <tr><td> </td></tr> <tr><td> </td></tr> </table> <font color="red"><center>你成功登录了清辉在线邮箱系统</center></font> </body></html>
我们再到左边框left.html写入内容
<html> <body bgcolor="#FEC100"> <!--"#FEC100"为颜色的十六进制--> <center> <table> <tr><td> </td></tr> <tr><td> </td></tr> </table> <table width="200"border="1" bgcolor="#FBE5C2"> <!--border="1"现在为测试用的，当母体框架为0时，子框架还是不会显示，而表格是越近越优先--> <tr><td> </td></tr> <tr><td><a href="newemail.html" target="r1"><center>新邮件</center></a></td></tr> < !--<a href="newmail.html" target="r1">为超链接指定页面为newmail.html， target="r1"还记得我在上面写了为框架命名吗？页面指定跳转到右框架--> <tr><td><a href="newinbox.html" target="r1"><center>收件箱</center></a></td></tr> <tr><td><a href="#" target="r1"><center>草稿箱</center></a></td></tr> <tr><td><a href="writemail.html" target="r1"><center>写邮件</center></a></td></tr> <tr><td><a href="address.html" target="r1"><center>地址本</center></a></td></tr> <tr><td> </td></tr> <tr><td><a href="emaillogin.html" target="_blank"><center>安全退出</center></a></td></tr> <!--target="_blank"打开新窗口--> <tr><td> </td></tr> </table> </center> </body></html>
我们开始进入写好的登录页面看看，再点击进入邮箱，看到了如下图
我们在超链接新邮件这里指定页面为newemail.html写入内容
<html> <body> <h3 id="hello-Sily">hello,Sily</h3> </body></html>
我们在往收件箱指定的newinbox.html写入
<html> <body> <h2 id="未读邮件">未读邮件</h2> <hr width="70%"align=left noshade> <!--线占70%宽度，水平居左并且没有阴影> <table border="1" bordercolor="#FEC100" width="640px;"> <tr bgcolor="#FEC100" border="0"> <td> </td> <!--还记得我在定义登录图片的注释吗？--> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th>编号</th> <th>标记</th> <th>发件人</th> <th><center>标   题</center></th> <th>日   期</th> </tr> <tr> <td>1、</td> <td>未读</td> <td>admin@hui.com</td> <td>欢迎注册清辉在线邮箱</td> <td>2005-02-01</td> </tr> <tr> <td>2、</td> <td>未读</td> <td>lisdy@so.com</td> <td>测试!!!</td> <td>2005-04-09</td> </tr> <tr> <td>3、</td> <td>未读</td> <td>lis@so.com</td> <td>测试!!!</td> <td>2005-04-09</td> </tr> <tr> <td>4、</td> <td>未读</td> <td>ls@s.com</td> <td>测试!!!</td> <td>2003-04-04</td> </tr> <tr> <td>5、</td> <td>未读</td> <td>lsday@co.com</td> <td>测试!!!</td> <td>2006-04-09</td> </tr> </table> <hr width="70%"align=left noshade> <table border="0" bgcolor="#F8E494"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td rowspan="6"> 共有邮件5封 每页20封 共一页 第1页 <a href="#">上一页</a> <a href="#">下一页</a> </td> </tr> </table> </body></html>
如图
我们再开始往写邮件指定的writemail.html写入
<html> <body> <center> <table border="0"> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> <textarea name="mytextarea" cols="40" rows="10"> <!--定义横向像素为40，纵向为10的文本域--> </textarea><br/> <input type="file" name="fone"/>上传文件<br/> <input type="radio" name="n1" value="anonymous"/>匿名 <!--单选框--> <input type="radio" name="n1" value="public"/>公开<br/> <input type="image" src="2.png"> <！--以图片定义按钮--> </center> </body></html>
如图
我们再到地址本指定的address.html写入
<html> <select name="address"> <option value="shanghai">上海</option> <option value="beijing" >北京</option> <option value="guanzhou">广州</option> <option selected>新疆</option> <!--默认选到新疆--> </select><p> <input type="submit"><input type="reset"></html>
如图
我们一开始在安全退出的指定页面写了内容，不记得了吗？登录页面想起没有？点安全退出就开新窗口显示登录页面了
ps:
其实这个案例来自韩老师的视频，我尽量默写和模仿这个例子用了5个小时左右吧，毕竟自身基础也不是特别好，本来其实做这事不只这一种方法，前提要有效果:一、表格框架文本域按钮什么的，二、iframe，当他人或是自己完成后用iframe嵌套，相当于盗链了，三、图片映射map。
我写时的感受，的确很郁闷，表格实在太多了，好多冗余代码。目前刚入门知识有限，没做好，可以用丑形容，请大家见谅了。
HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AMHTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。
HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AMHTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。
HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AMHTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。
HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AMHTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AMHTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AMHTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。
HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AMHTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。
HTML：建立網頁的結構Apr 14, 2025 am 12:14 AMHTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
