javascript课程笔记中介，详细，事例指导资源-CSDN文库

需积分: 3 194 浏览量 2012-03-26 09:36:13 上传评论收藏 176KB DOC 举报

### JavaScript 课程笔记详解 #### 一、HTML基础概述 HTML，全称为HyperText Markup Language，即超文本标记语言，是一种被广泛应用于网页开发的基础语言。通过特定的语法，HTML能够构建出完整的网页结构，而这些结构将由浏览器进行解析并最终呈现给用户。 #### 二、HTML文件的基本结构 HTML文件具有明确且固定的结构框架： ```html <!DOCTYPE html> <html> <head> <title>页面标题</title>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <script src="script.js"></script>  <style> /* CSS样式代码 */ </style>  <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body>  <p>这是页面的主要内容。</p> </body> </html> ``` - **`<!DOCTYPE html>`**：文档类型声明，告知浏览器这是一个HTML5文档。 - **`<title>`**：设置网页的标题，显示在浏览器标签页上。 - **`<meta>`**：定义文档的元数据，如字符集、视口等。 - **`<script>`**：用于引入JavaScript文件或内联JavaScript代码。 - **`<style>`**：定义内联CSS样式。 - **`<link>`**：用于引入外部CSS文件。 - **`<body>`**：网页的主体部分，包含所有可见内容。 #### 三、Web开发标准 W3C推荐的“分离关注点”原则，即将网页的结构、样式和行为分别用不同的技术实现： - **HTML**：负责定义页面的结构和内容。 - **CSS**：负责页面的布局和外观。 - **JavaScript**：负责页面的交互逻辑和动态效果。这样的分离有助于提高网页的可维护性、可读性和扩展性，并且有利于搜索引擎优化。 #### 四、链接（Link）链接是HTML中非常重要的元素之一，用于在不同页面之间建立连接。 - **基本使用**：`<a href="url地址" target="_blank">描述</a>`，其中`_blank`表示在新窗口中打开链接，而`_self`则表示在当前窗口打开（默认行为）。 - **图片链接**：`<a href="url地址"><img src="图片地址" width="" height="" border=""/></a>`，使用图片作为链接的目标。 - **热点**：使用`<area>`标签创建图像上的可点击区域，如： ```html <img src="index04.jpg" width="500" height="500" border="0" usemap="#m1"/> <map name="m1" id="m1"> <area shape="rect" coords="x1,y1,x2,y2" href="#"> <area shape="circle" coords="cx,cy,radius" href="#"> <area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="#"> </map> ``` - **锚点**：在同一个页面内跳转，如： ```html <a name="top"></a> <a href="#top"></a> ``` - **发送邮件**：使用`mailto:`协议创建邮件链接，如： ```html <a href="mailto:sally@126.com?subject=hello"></a> ``` - **上传文件**：创建一个文件上传表单，如： ```html <form action="upload.do" method="post" enctype="multipart/form-data"> <input type="file" name="file1" value="uu"> </form> ``` #### 五、列表（List）列表是网页设计中常用到的一种组织信息的方式。 - **无序列表**（Unordered List）：使用`<ul>`和`<li>`标签，如： ```html <ul> <li>项目1</li> <li>项目2</li> <li>项目3</li> </ul> ``` - **有序列表**（Ordered List）：使用`<ol>`和`<li>`标签，如： ```html <ol> <li>项目1</li> <li>项目2</li> <li>项目3</li> </ol> ``` - **列表嵌套**：可以在列表项中再次使用`<ul>`或`<ol>`来创建子列表，如： ```html <ul> <li>项目1 <ul> <li>子项目1</li> <li>子项目2</li> </ul> </li> <li>项目2</li> <li>项目3</li> </ul> ``` #### 六、表格（Table）表格是用来组织数据的有效方式，适用于显示表格形式的数据。 - **基本使用**：`<table>`、`<tr>`和`<td>`标签用于构建表格结构，如： ```html <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="left">ID</td> <td>Name</td> <td>Salary</td> </tr> <tr> <td>1</td> <td>ZS</td> <td>2000</td> </tr> </table> ``` - **不规则表格**：使用`colspan`和`rowspan`属性来合并单元格，如： ```html <table> <tr> <td colspan="2">标题</td> </tr> <tr> <td>名称</td> <td>张三</td> </tr> <tr> <td rowspan="2">其他信息</td> <td>年龄</td> </tr> <tr> <td>25</td> </tr> </table> ``` - **表格的另一种写法**：使用`<thead>`、`<tfoot>`和`<tbody>`标签来组织表格内容，如： ```html <table> <caption>员工信息</caption> <thead> <tr> <th>ID</th> <th>Name</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <td colspan="3">总计</td> </tr> </tfoot> <tbody> <tr> <td>1</td> <td>ZS</td> <td>2000</td> </tr> </tbody> </table> ``` - **表格嵌套**：可以在表格的单元格中嵌套另一个表格，以展示更复杂的数据结构。 #### 七、表单（Form）表单是用户与网站进行交互的重要工具，用于收集用户的输入信息。 - **登录表单**：用于收集用户的用户名和密码等信息，如： ```html <form action="submit.php" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username"> <br> <label for="password">密码：</label> <input type="password" id="password" name="password"> <br> <input type="submit" value="提交"> </form> ``` 通过以上介绍，我们对HTML的基础知识有了更深入的理解，这对于后续学习JavaScript和CSS等前端技术至关重要。

资源推荐

资源详情

资源评论