一个好的html实例资源-CSDN文库

共178个文件

svn-base：94个

jpg：41个

html：31个

需积分: 9 124 浏览量 2008-09-09 11:20:13 上传评论 1 收藏 1.03MB RAR 举报

HTML（HyperText Markup Language）是构建网页的基础语言，它定义了网页的结构和内容。一个优秀的HTML实例应该遵循良好的编码规范，确保语义清晰、可读性强，并且兼容各种浏览器。在这个实例中，我们不仅有HTML，还有CSS（Cascading Style Sheets）用于样式控制，以及JavaScript用于增加交互性。 HTML部分主要包含以下知识点： 1. **基本结构**：HTML文档通常以`<!DOCTYPE html>`声明开始，然后是`<html>`标签，它包含了整个文档的上下文。`<head>`部分存储元信息，如页面标题（`<title>`），而`<body>`部分则包含可见内容。 2. **语义化标签**：为了提高可访问性和SEO，应使用语义化的标签，如`<header>`、`<nav>`、`<main>`、`<article>`、`<aside>`和`<footer>`，它们分别代表页面头部、导航、主体、文章、侧边栏和页脚。 3. **文本元素**：HTML提供了多种标签来处理文本，如`<p>`（段落）、`<h1>`到`<h6>`（标题）、`<em>`（强调）、`<strong>`（重要强调）、`<a>`（链接）等。 4. **图像和多媒体**：`<img>`标签用于插入图像，`<audio>`和`<video>`标签用于嵌入音频和视频。`<source>`标签可以指定不同格式的媒体资源，以适应不同设备。 5. **表格**：`<table>`、`<tr>`（行）、`<td>`（单元格）和`<th>`（表头）用于创建表格。`<caption>`添加表格标题，`<colgroup>`和`<thead>`、`<tbody>`、`<tfoot>`用于组织表格结构。 6. **列表**：`<ul>`（无序列表）、`<ol>`（有序列表）和`<li>`（列表项）用于创建各种列表。`<dl>`、`<dt>`（定义术语）和`<dd>`（定义描述）用于创建定义列表。 CSS部分涉及以下内容： 1. **选择器和属性**：CSS通过选择器（如类名、ID、元素名等）来定位HTML元素，并使用属性（如`color`、`font-size`、`background-color`等）来设置样式。 2. **盒模型**：理解盒模型至关重要，它包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。这些属性共同决定了元素的最终尺寸和位置。 3. **布局技术**：CSS提供流体布局（百分比宽度）、网格系统（CSS Grid）、Flexbox和Grid布局，以及旧式的定位（如`position`属性）来实现响应式设计。 4. **响应式设计**：利用`media queries`，我们可以根据设备特性（如屏幕尺寸）调整样式，以确保在不同设备上良好显示。 5. **CSS预处理器**：Sass、Less等预处理器可以引入变量、嵌套规则、混合和函数等功能，提高CSS的可维护性。 JavaScript部分涵盖： 1. **DOM操作**：通过JavaScript，我们可以获取、修改、添加或删除HTML元素，这得益于Document Object Model（DOM）的API。 2. **事件处理**：JavaScript可以监听并响应用户的交互，如点击、滚动、输入等，通过`addEventListener`方法添加事件监听器。 3. **函数与变量**：JavaScript中的函数可以封装代码，变量用于存储数据。理解作用域（全局和局部）和数据类型（原始类型和引用类型）是基础。 4. **AJAX与Fetch API**：这些技术允许异步加载数据，更新页面而无需刷新，提升用户体验。 5. **面向对象编程**：JavaScript支持类和原型继承，可以创建复杂的对象结构。综合以上，一个优秀的HTML实例会结合HTML、CSS和JavaScript，构建出结构清晰、样式美观、交互丰富的网页。通过学习和实践这样的实例，开发者可以深入理解Web开发的基本原理，并能创建符合现代标准的网页。

资源推荐

资源详情

资源评论

收起资源包目录

一个好的html实例（178个子文件）

all-wcprops 5KB

temp1.css 8KB

Thumbs.db 58KB

entries 8KB

format 2B

btbg.gif 1KB

id.gif 1KB

pwd.gif 1KB

ibm-logo.gif 366B

member_mainbg.gif 154B

pdmnomb002.html 10KB

pdmnomb001.html 9KB

pdminfb002.html 8KB

pdmnomb003.html 7KB

pdmnomb004.html 7KB

pdminfb001-1.html 6KB

pdminfb003.html 6KB

pdminfb001.html 6KB

pdmstab001.html 6KB

main.html 6KB

pdmstab003.html 4KB

pdmmasb002.html 4KB

pdmautb001.html 4KB

menu.html 3KB

pdminfb007.html 3KB

pdmstab002.html 3KB

pdmautb005.html 3KB

pdmmasb001.html 3KB

pdmstab004.html 3KB

pdminfb004.html 2KB

pdminfb006.html 2KB

pdminfb005.html 2KB

pdmnomb005.html 2KB

pdmparb001.html 2KB

pdmautb004.html 2KB

pdmautb003.html 2KB

pdmautb002.html 2KB

top.html 1KB

frame.html 655B

Error.html 509B

main.jpg 172KB

background.jpg 114KB

main_02.jpg 51KB

main_08.jpg 43KB

main_13.jpg 30KB

main_03.jpg 28KB

inb_txtarea.jpg 17KB

inb_txtarea_unusable.jpg 17KB

inb_txt.jpg 16KB

inb_txt_unusable.jpg 16KB

left_bg.jpg 16KB

right_bg.jpg 15KB

head_left01.jpg 14KB

head_left02.jpg 14KB

bt_01.jpg 14KB

pencil.jpg 14KB

bt_12.jpg 14KB

bt_11.jpg 14KB

bt_02.jpg 14KB

head_left.jpg 14KB

xx.jpg 14KB

bt.jpg 14KB

calicon.jpg 13KB

head_right.jpg 13KB

head_middle.jpg 13KB

exspan.jpg 13KB

tdline2.jpg 13KB

collspan.jpg 13KB

dashline.jpg 13KB

solidline.jpg 13KB

headline.jpg 12KB

tdline1.jpg 12KB

main_01.jpg 5KB

main_04.jpg 627B

main_09.jpg 495B

main_05.jpg 410B

main_12.jpg 378B

main_10.jpg 355B

main_06.jpg 322B

main_11.jpg 310B

main_07.jpg 309B

calendar.js 46KB

temp1.js 2KB

main.jpg.svn-base 172KB

background.jpg.svn-base 114KB

Thumbs.db.svn-base 58KB

main_02.jpg.svn-base 51KB

main_08.jpg.svn-base 43KB

main_13.jpg.svn-base 30KB

main_03.jpg.svn-base 28KB

inb_txtarea.jpg.svn-base 17KB

inb_txtarea_unusable.jpg.svn-base 17KB

inb_txt.jpg.svn-base 16KB

inb_txt_unusable.jpg.svn-base 16KB

left_bg.jpg.svn-base 16KB

right_bg.jpg.svn-base 15KB

head_left01.jpg.svn-base 14KB

head_left02.jpg.svn-base 14KB

bt_01.jpg.svn-base 14KB

共 178 条

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>直属人员选择</title> <link rel="stylesheet" href="temp1.css" type="text/css" /> </head> <Script language="JavaScript" src="temp1.js" type="text/javascript"></Script> <body> <table width="100%" border="0" cellspacing="2" cellpadding="0"> <tr><td><span class="pageName">直属人员选择</span></td></tr> <tr><td class="line1"></td></tr> <tr height="2%"><td></td></tr> <tr> <td> <table width="100%" border="0" cellpadding="4" cellspacing="2" > <tr> <td width="8%" class="title"><label class="lbfont1">发布人</label></td> <td width="25%" class="content"><label class="lbfont1">巴菲特</label></td> <td width="8%" class="title"><label class="lbfont1">发布类型</label></td> <td width="25%" class="content"><label class="lbfont1">Training</label></td> <td width="8%" class="title"><label class="lbfont1">截止日期</label></td> <td width="25" class="content"><label class="lbfont1">2008/07/16</label></td> </tr> <tr> <td valign="top" class="title"><label class="lbfont1">标题</label></td> <td colspan="5" valign="top" class="content"><label class="lbfont1">美国金融危机量化估测</label></td> </tr> <tr class="title"> <td colspan="6" valign="top" class="title"><label class="lbfont1">内容</label></td> </tr> <tr class="content"> <td colspan="6" valign="top" class="content"><label class="lbfont1">根据逐渐披露的数据，我们可以开始对美国的金融危机作一个量化的估测了。根据最近数据，美国当前的CDS市场规模为62万亿美元；根据最近房利美房地美危机的披露，房屋按揭贷款市场规模为11万亿美元；其他的私人债务比如学生贷款、汽车贷款、信用卡债务，尚待披露。估测美国总体债务规模（不包括美国国债），应该在110万亿美元以上。假定年度到期的债务占30%，那么年度相关债务规模在40万亿左右。</label></td> </tr> </table> </td> </tr> </tr> <tr height="2%"><td></td></tr> <tr><td class="line1"></td></tr> <tr> <td> <table width="100%" border="0" cellpadding="4" cellspacing="2" > <tr class="content"> <td width="10%" valign="top" class="title"><span class="title"> <label class="lbfont1">姓名</label> </span></td> <td width="15%" valign="top" class="content"><input name="text" type="text" class="textinputlarge"/></td> <td width="10%" valign="top" class="title"><span class="title"> <label class="lbfont1">Band</label> </span></td> <td width="15%" valign="top" class="content"><select class="selectinput" name="select"> <option class="optionselect"></option> <option class="optionselect">6</option> <option class="optionselect">7</option> <option class="optionselect">8</option> </select></td> <td width="10%" valign="top" class="title"><span class="title"> <label class="lbfont1">职务</label> </span></td> <td width="15%" valign="top" class="content"><input name="text2" type="text" class="textinputlarge"/></td> <td width="10%" valign="top" class="title"><span class="title"> <label class="lbfont1">主要技能</label> </span></td> <td valign="top" class="content"><input name="text3" type="text" class="textinputlarge"/></td> </tr> <tr class="content"> <td colspan="8" align="right" valign="top"><input name="button" type="button" class="bt1" value="查询" /></td> </tr> </table> </td> </tr> <tr height="2%"><td></td></tr> <tr> <td> </td> </tr> <tr><td class="line1"></td></tr> <tr height="2%"><td></td></tr> <tr> <td valign="top" width="850"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" width="30%"> <table width="300px" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed"> <tr class="trheadcls"> <th width="15%"><input type="checkbox" class="checkboxinput" name="userall" onClick="javascript:checkboxselectall('userall','users');"/></th> <th>Name</th> </tr> <tr class="trcls1"> <td><input type="checkbox" class="checkboxinput" name="users"/></td> <td><a href="javascript:fnOpenPopWinWithSize('pdmnomb004.html','20','200','700','600')" class="mainlink1">Cheng Fang Kong Ming</a></td> </tr> <tr class="trcls2"> <td><input type="checkbox" class="checkboxinput" name="users"/></td> <td><a href="javascript:fnOpenPopWinWithSize('pdmnomb004.html','20','200','700','600')" class="mainlink1">Li Si</a></td> </tr> <tr class="trcls1"> <td><input type="checkbox" class="checkboxinput" name="users"/></td> <td><a href="javascript:fnOpenPopWinWithSize('pdmnomb004.html','20','200','700','600')" class="mainlink1">Wang Wu</a></td> </tr> </table> </td> <td valign="top" width="70%"> <div style="overflow-x:scroll; width:550px"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr class="trheadcls"> <th class="thdynamiccls">Notes ID     </th> <th class="thdynamiccls">Band     </th> <th class="thdynamiccls">Job role     </th> <th class="thdynamiccls">Location     </th> <th class="thdynamiccls">Primary Skill     </th> <th class="thdynamiccls">Secondary Skill     </th> <th class="thdynamiccls">Japanese Level     </th> <th class="thdynamiccls">Englist Level     </th> <th class="thdynamiccls">Would you like working in Dalian     </th> <th class="thdynamiccls">Would you like working in Shanghai     </th> <th class="thdynamiccls">Would you like working in ShenZhen     </th> </tr> <tr class="trcls1"> <td class="tddynamiccls">Zhang San/Finance/IBM     </td> <td class="tddynamiccls">6     </td> <td class="tddynamiccls">I/T SPECIALIST     </td> <td class="tddynamiccls">Shanghai     </td> <td class="tddynamiccls">Java     </td> <td class="tddynamiccls">VB     </td> <td class="tddynamiccls">3     </td> <td class="tddynamiccls">4     </td> <td class="tddynamiccls"><input type="text" class="textintable"/></td> <td class="tddynamiccls"><input type="text" class="textintable"/></td> <td class="tddynamiccls"><input type="text" class="textintable"/></td> </tr> <tr class="trcls2"> <td class="tddynamiccls">Li Si/Finance/IBM     </td> <td class="tddynamiccls">6     </td> <td class="tddynamiccls">I/T SPECIALIST     </td> <td class="tddynamiccls">Shanghai     </td> <td class="tddynamiccls">Java     </td> <td class="tddynamiccls">VB     </td> <td class="tddynamiccls">3     </td> <td class="tddynamiccls">4     </td> <td class="tddynamiccls"><input type="text" class="textintable"/></td> <td class="tddynamiccls"><input type="text" class="textintable"/></td> <td class="tddynamiccls"><input name="text4" type="text"

评论收藏

内容反馈