javascript 课程笔记中介,详细,事例指导
### JavaScript 课程笔记详解 #### 一、HTML基础概述 HTML,全称为HyperText Markup Language,即超文本标记语言,是一种被广泛应用于网页开发的基础语言。通过特定的语法,HTML能够构建出完整的网页结构,而这些结构将由浏览器进行解析并最终呈现给用户。 #### 二、HTML文件的基本结构 HTML文件具有明确且固定的结构框架: ```html <!DOCTYPE html> <html> <head> <title>页面标题</title> <!-- Meta标签用于设置页面元信息 --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 引入外部JavaScript文件 --> <script src="script.js"></script> <!-- 定义内联样式 --> <style> /* CSS样式代码 */ </style> <!-- 引入外部CSS文件 --> <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等前端技术至关重要。
剩余63页未读,继续阅读
- 粉丝: 0
- 资源: 4
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 微信小程序跃动小子保卫主公自动通关之执行计划
- 朋友圈防折叠系统源码,简单使用的小工具,众多营销老板都需要
- STM32L4R/S系列中文参考手册
- 一个由商业级项目升级优化而来的微服务架构,采用Spring Boot 3.2 、Spring Cloud 2023等核心技术构建
- GAIIC2024无人机视角下的双光目标检测(Rank6 解决方案)+文档说明(高分项目)
- Unity3D机械臂动画示例
- 非常好的语音识别源代码100%好用.zip
- 0积分【尊重互联网共享原则】tauri2.0所需插件nsis-tauri-utils.dll
- 基于CNN+LSTM实现的网络流量检测系统python源码(高分课设)+文档说明
- PHP中把动态页面生成静态页面的示例