简介：
HTML、JavaScript、Ajax与CSS 赵旭 zhaoxu@tedu.cn 1、WEB基础知识(了解) 1、网络 - 网 由若干台电脑、手机、平板基于网线(WIFI)连接起来构成的网络结构 2、基于Internet上的程序 1、C/S结构：Client-Server架构，特点为必须通过指定的客户端软件才能访问服务器端的一种程序（如桌面版QQ等） 2、B/S结构：Browser-Server架构，浏览器即可实现访问服务器端功能的一种程序（网页版百度、网页版京东等） 3、WEB 1、什么是WEB：基于Internet上的应用程序(网页应用)，其表现形式为保存在服务器端的特定页面(**.html**或**.htm**结尾的文件)即为WEB页面，简称WEB页 2、WEB浏览器的功能： 1、接收用户请求（UA : User Agent） 2、执行HTML及脚本 3、以图形化方式展示网页内容 3、主要浏览器产品包括：Microsoft Internet Explorer (IE)、Mozilla Firefox、Google Chrome、Apple Safari和Opera Opera(欧朋) 4、主要技术包括：HTML5（重点）、CSS和JavaScript 2、HTML入门(重点) 1、什么是HTML：Hyper Text Markup Language，超级文本标记语言 超文本同样具备独特的优势，与普通文本不同；普通文本a 是被标记为普通字符a的字符集合；而超文本中的a 则用作超链接标识符，具有特殊的功能。 普通内容块 b : 基础元素 b 通过加粗技术突出显示关键信息部分 a : 该种方式具有显著的效果 文本标记的表现形式：超文本的编码方式，语言结构遵循基本语法规则；而HTML则遵循其特定的字符集合和语法规则。 Web页面(HTML页面)就是由 HTML语言进行构建开发的，其通常以其名称后缀命名为.html或.htm的文件。 开发 & 运行网页的工具： 1、文本编辑器和网页浏览工具 2、浏览器和记事本 3、HTML的基础语法称为标记语法 4、在HTML中，标记由尖括号< >包围，用于描述功能符号 5、使用时，标记分为两类： 1. 封闭类型的标记也称为双标记，必须成对出现。例如：

...

标题元素的属性设置如下： align 文本的水平对齐方式 取值：left center right 通过以上方法，可以实现对文本内容的精准展示效果。 4、段落元素 语法：

属性：align : 左对齐 中心对齐 右对齐 示范： 在02-text.html中，增加以下内容： 1、使用段落标记表示：第一个段落；第二个段落文本表现为右对齐。 5、换行元素
6、分割线元素 作用：在页面中以直线形式呈现的元素。其语法为

---

，属性包括size（宽度值）、width（指定宽度，可用百分比表示）、align（水平对齐方式）和color（颜色）。例如，在02-text.html中添加一根水平线，设置size为5px、width为50%、居中对齐并将其颜色设为红色。 7、预格式化 作用：保持源文件中的回车和空格效果的元素。语法：

  

8、分区元素  
1、块分区元素  
语法：
  
作用：用于布局；其内部嵌套其他标记时需遵守特定规则，例如不能嵌套其他块级元素。  

2、行内分区元素  
语法：  
作用：在同一行中设置不同样式的文本样式。  

9、行内元素与块级元素分类  
按表现形式将元素分为两类：  
1、行内元素：指在一行中可以显示多个元素的类型，包括、、等标记。其作用是包裹并调整文本的表现形式。  

2、块级元素：指每个元素独占一行显示的类型，如
、
、
等标记。其主要功能是布局排版。注意以下两点：  
a. 
标签不能嵌套其他块级元素；  
b. 在行内元素中尽量避免嵌套块级元素以保持结构清晰。

4、图像与链接  
1、URL  
定义：用于标识资源文件位置的统一资源定位符（URL）。其组成部分包括协议名、主机名、目录路径和文件名。  

2、URL在WEB中的表现形式包含三种类型：  
第一种是绝对路径，从当前目录开始查找资源的位置；第二种则是相对路径或其他形式。例如，在02-text.html中，完整的绝对路径由四个部分组成：  
1. 协议（如http）；  
2. 主机名或IP地址（www.codeboy.com）；  
3. 目录路径（imgheader）；  
4. 文件名（logo.png）。  

http://www.codeboy.com/img/header-logo.png
imgheaderlogo.png
2、相对路径(重点)
应用场景：使用本机文件时采用的路径查找方式
什么是相对路径：
从当前文件所在位置出发，依次经过的路径即为相对路径。

1)同目录直接使用
2)子目录先进入
3)父目录先返回

3、根相对路径
格式以破折号开头。
: 表示服务器的根路径（通常在Windows中是 drive:\ 或 C:\）
2、图像部分
1、支持的图片文件类型：
JPG 图片，GIF 动态图，PNG 透明图。

2、标签属性描述：
标记：
属性：
src：指定要显示的图像 URL
宽度和高度：分别指定了图片在网页中的宽度和高度值
title：鼠标悬停时，要求显示的文字

1）操作步骤如下：
第一步、将学子网的 logo 下载至本地
第二步、将其放置到自己的网页中展示位置即可完成

3）创建超链接的方式有两种：
第一种情况：
打开当前页面
第二种情况：
打开自身标签页

4、链接的四种表现形式
1)点击下载按钮触发操作，资源为 zip 或 rar 时则会执行下载操作。
2）创建一个电子邮件相关超链接，例如：联系我们
前提条件：
必须在计算机上安装并配置好至少一个邮件客户端

3)返回页面顶部的空连接处，访问者点击后将跳转回至当前页面
4）通过输入JavaScript脚本代码执行特定操作

5、锚点部分
1）作用：在网页中指定位置做标记，并允许从其他位置跳转到该标记位置。
2）定义锚点方式：
a) 使用  例如：下载
b) 在任何标记的 id 属性上设置锚点标识

3）链接到锚点的方式有两种：
第一种情况：跳转至指定位置
第二种情况：从特定位置跳转

6、表格部分
维持原有格式和内容，无需修改

表格的作用是通过特定的方式呈现信息。它由行和列组成的单元格结构构成，在HTML中使用
标签来定义。

表格的语法包括多个关键元素：
1. 标记出一个数据表，其中包含tr、th和td元素。
2. 表示一行的数据，通常放置在内部。
3. 
用于定义单元格标题，并且需要设置为水平居中对齐。
4. 
是表格的标题，必须位于之后的所有之上。

常用属性包括：
1. 宽度（width）、高度（height）和对齐方式（align），分别控制整体布局和内容排列。
2. 边框宽度（border）、背景颜色（bgcolor）、单元格间隙（cellspacing）和填充色（cellpadding），影响表格样式。
3. 标签包裹这些单元格。
3. 表尾行分组：单独定义最后一行为表尾内容，通常用标签包裹。

创建不规则表格需利用td的colspan和rowspan属性。例如，通过设置colspan可以实现跨列显示多个单元格，而rowspan则允许在同一单元格中显示多行内容。

嵌套结构要求所有被嵌套的内容只能放置在td元素内部。

1、创建一个有序HTML列表，并包含两个项目元素，分别展示两部小说的名称。

2、在每个项目中添加三个至四个角色描述项。这些描述项可以是文本框或多行文本域等不同的input类型。

3、通过特定的数据组织形式将信息进行展示。

4、
用于声明包含解释的一系列项目，每个项目由
定义对象名称或名词，并用
说明具体内容。

5、在页面布局中实现文本与图片混合显示效果。这种格式不仅能够提升网页的视觉体验，还能为用户提供更丰富的内容呈现方式。

6、通过使用一系列标签来组织网页内容的逻辑架构，不仅有助于提高代码可读性，还能增强浏览器对内容的理解。

7、只有在表单元素内部设置相应的属性并正确绑定到特定的资源时，其数据才会成功传输。例如，在form标记中指定action、method和enctype等属性以实现更灵活的数据提交方式。

8、通过合理配置不同的input类型（如文本框、多行文本域等），可以实现更灵活的数据提交方式。

9、在使用不同类型的input元素时，需要特别注意其特定的使用场景。例如，select标签通常用于单选情况，而textarea则适合需要用户输入较长文本的情况。

10、确保每个表单控件都有一个唯一的name属性，并将其值正确传递给服务器处理程序以实现更高效的交互体验。

2、输入字段或文本区域 与 密码领域
输入字段：<input type=plain text content>
密码领域：<input type=complex password>
具备除上述提到的几个特性之外，该资源还提供了以下几项功能：1. maxlength属性用于控制输入字段的最大长度（取值范围为整数），2. readonly属性表示只能显示内容而无法进行编辑操作。问题解答如下：readonly与disabled的区别在于，前者仅限于字段内容不可修改，而后者不仅阻止了数据的更改，还禁止提交给服务器；3. placeholder功能的作用是为文本框提供一个预设的提示文字，默认显示在输入区域中；4. 按钮部分介绍包括：- 提交按钮（标记：），用于将表单提交至服务器；- 重置按钮（标记：），用于清空并恢复表单初始状态；- 普通按钮，通过JavaScript自定义功能实现特定操作。此外，在HTML标签中，常用的属性包括：type为submitresetbutton等；5. 单选按钮与复选框的区别在于，单选按钮允许用户仅选择一个选项（标记：），而复选框则可选择多个选项（标记：）。
属性：
1. name
为各组提供一个统一的名称标识，确保同一分组内的单选按钮或复选框具有相同的名称。

2. value
不允许留空字段。

3. checked
初始状态默认勾选，无值属性设置。

4. 隐藏域 和文件选择框
1、隐藏域：
将敏感数据存储在不可见字段中以保护用户隐私信息。例如，在表单或数据库中隐藏那些不需要显示给用户的详细信息。

2、文件选择框：
通过本地设备上传可选文件，确保服务器仅收到用户已确认的文件内容而不直接暴露下载来源。

5. form属性
1、method：必须设置为post，以确保数据提交方式正确无误。
2、enctype：指定为multipart/form-data，以便支持多文件同时上传至服务器端处理。




http://localhost/02-HTMLDay02login.php?username=wenhua_li&userpass=bingbinghttp:localhost02-HTMLDay02login.php?username=w enhua li&password=f eng jie&gender=m a&question=0&question=1&question=2&question=3该登录页面的完整链接为HTTP://localhost02-HTMLDay02login.php，并包含以下参数：用户名wenhua.li、密码fdsafdsafdsa、性别标识码0以及多个问题字段，包括从0到3的问题内容和用户ID 10000567789。
表单标记：
1、form ...  
2、input ...  
3、textarea 标记：$attr(name) = 提交字段名; $attr(cols) = 列数; $attr(rows) = 行数; $attr(readonly) = 只读；
Demo : 
创建 01-form.html 文件
添加多行文本域控件，设置其列为50、行为5，并命名为intro；  
4、选项框标记：...  
1、标记：
2、属性：
1、$attr(name) = 控件名称
2、$attr(size) = 显示选项数量，默认为1（下拉列表），大于1时为滚动列表。
3、$attr(multiple) = 多选，无值的属性；
4、...  
1、标记：
2、属性：
1、$attr(value) = 提交给服务器的选项值
2、$attr(selected) = 默认被选中；  
5、其它标记：label元素的作用为将文本内容与其对应的表单字段联系起来；
标记：文本
属性：
1、$attr(for) = 指定要关联的表单控件的ID值
2、用于对多个控制框进行归类，如使用
分组标题
；  

 

 3、浮动框架
 作用：允许将其他网页嵌入当前页面中
 标记：<iframe>
 属性：
 1、src 引入的外部网页地址
 2、frameborder 指定浮动框架是否显示边界，默认情况下会显示 边界仅在关闭时才会消失
 不需要边框则设置为 0
 3、width 调整嵌入窗口宽度
 4、height 调整嵌入窗口高度
 练习：
 创建一个名为 02-iframe 的网页，将 01-form.html 页面嵌入其中 ，适当调整显示区域的宽高比，并确保边界在关闭时消失

 6、新增 input 元素（HTML5）
 作用：提供数据验证功能
 标记：<input>
 属性：
 1、type email 验证输入是否为有效的电子邮件地址
 2、type search 提供快速清除文本框功能
 3、type url 验证输入是否符合 Web 网站的 URL 格式（绝对路径）
 4、type tel 在移动设备上启用拨号键盘，在 PC 设备上无效
 5、type number 只接受数字输入或选择数字
 属性：
 1、min 规定控件可接受的最小值
 2、max 规定控件可接受的最大值
 3、step 每次微调时的变化量，默认为 1
 6、range 类型
 作用：创建一个滑动条控制数值范围
 标记：<input type=range>
 属性：
 1、min 滑动条的最小值
 2、max 滑动条的最大值
 3、value 设置初始显示的数值

 7、color 类型
 作用：提供颜色选择器
 标记：<input type=color>

 8、date 类型
 作用：创建日期输入字段
 标记：<input type=date>

 9、week 类型
 作用：创建可以选择一周日期的控件
 标记：<input type=week>

 10、month 类型
 作用：创建选择月份的控件
 标记：<input type=month>

                

              
              

                
全部评论
                  (0)
                

                  
还没有任何评论哟~
                
              
            
            
          
        
      
      

        
      
      

        

      
      

        

      
      

        

      
      

        

      
      

        

      
      
    
    

      

      客服
  



  

    

  

                            

                                

                                    
                                
                                

                                    《架构学习入门：从零开始的读书笔记》
                                
                                
优质
                                

                                    

                                    本书是作者在阅读架构相关书籍时所做的笔记和心得分享，适合对软件架构感兴趣但缺乏系统性知识的读者。

《从零开始学架构》读书笔记：以思维导图的方式归纳总结知识要点。
                                    

                                
                            


                            

                                

                                    
                                
                                

                                    「MySQL」从零开始到删库实战-Markdown笔记
                                
                                
优质
                                

                                    

                                    本Markdown笔记旨在为初学者提供一份详尽的MySQL学习指南，涵盖了从数据库基础概念、SQL语法到高级应用技巧以及安全管理等各个方面。通过系统化的学习路径和实用案例，帮助读者快速掌握MySQL的核心技能，并达到能够进行数据库管理和维护的程度。

MySQL从零到删库-Markdown格式的笔记
                                    

                                
                            


                            

                                

                                    
                                
                                

                                    Python从零开始入门
                                
                                
优质
                                

                                    

                                    《Python从零开始入门》是一本专为编程新手设计的基础教程，内容涵盖Python语言的基本语法和核心概念，旨在帮助读者快速掌握Python编程技能。

零基础Python快速入门知识要点：根据笔者的学习经验总结如下。
                                    

                                
                            


                            

                                

                                    
                                
                                

                                    深度学习从零开始入门.pdf
                                
                                
优质
                                

                                    

                                    《深度学习从零开始入门》是一本面向初学者的教程，系统地介绍了深度学习的基础知识和核心概念，帮助读者掌握神经网络的设计与实现。

零基础入门深度学习系列：

1. 感知器  
2. 线性单元与梯度下降  
3. 神经网络及反向传播算法  
4. 卷积神经网络   
5. 循环神经网络  
6. 长短时记忆网络(LSTM)  
7. 递归神经网络
                                    

                                
                            


                            

                                

                                    
                                
                                

                                    Eclipse 入门指南：从零开始学习
                                
                                
优质
                                

                                    

                                    《Eclipse入门指南：从零开始学习》是一本专为编程新手设计的教程书籍，它以简洁明了的方式介绍了如何使用Eclipse这一强大的集成开发环境来编写和调试程序。无论是初涉软件开发的新手还是想要提升技能的开发者，《Eclipse入门指南》都是您理想的学习伙伴。

**Eclipse 入门指南**

Eclipse 是一个广泛使用的开源集成开发环境（IDE），尤其在Java编程领域中占据重要地位。对于初学者来说，掌握Eclipse的基本操作是学习Java编程的第一步。本指南将帮助“小白”快速入门，了解如何安装、配置以及使用Eclipse进行开发。

### 一、Eclipse的安装

1. **下载Eclipse**: 访问Eclipse官网下载适合你的操作系统的版本。根据描述中的标签，我们关注的是Java版本。
2. **运行安装程序**: 下载完成后，双击运行安装程序，按照提示进行下一步操作。
3. **选择工作区**: 安装过程中会提示选择工作区，这是Eclipse存储项目文件的地方，可以自定义设置。
4. **完成安装**: 完成安装后，启动Eclipse，你将看到初始界面。

### 二、Eclipse界面介绍

Eclipse 主要由以下几个部分组成：

1. **菜单栏**: 包含文件、编辑、导航、窗口和帮助等选项，提供Eclipse的所有功能入口。
2. **工具栏**: 快捷方式按钮，用于执行常用操作，如新建、保存、运行等。
3. **透视图**: 可以根据不同的工作需求切换不同的视图布局，例如Java透视图、调试透视图等。
4. **工作台**: 显示项目的文件和文件夹，以及打开的编辑器。
5. **问题视图**: 显示代码中的错误和警告。
6. **控制台视图**: 显示程序运行时的输出信息。

### 三、创建Java项目

1. **新建项目**: 通过菜单栏选择“文件”>“新建”>“Java项目”，输入项目名称，选择JRE版本，点击“完成”。
2. **编写代码**: 在项目中创建新的Java类，使用内置的文本编辑器编写代码。
3. **编译和运行**: 保存代码后，Eclipse会自动编译。点击工具栏上的绿色三角形或使用快捷键运行程序。

### 四、Eclipse的其他重要功能

1. **代码助手**: 输入`.`或`(`时，Eclipse会提供自动补全和方法提示，提高编码效率。
2. **重构**: 提供重命名、提取方法、移动等重构功能，帮助你安全地修改代码结构。
3. **调试**: 使用调试透视图，你可以设置断点、单步执行、查看变量值，以便找出程序中的问题。
4. **插件系统**: Eclipse有一个强大的插件生态系统，你可以安装各种插件以扩展其功能，如Mylyn（任务管理）、Git（版本控制）等。

### 五、注意事项

1. 注意.pdf: 这份文档可能包含了关于Eclipse安装或使用过程中的注意事项，如系统需求、依赖库安装等。
2. 下注意.pdf: 可能涉及Eclipse与其他软件的兼容性问题，或者是特定环境下的配置建议。
3. 说明.pdf: 可能是对Eclipse某些功能的详细解释，或是解决常见问题的步骤。

通过阅读提供的PDF文件，你将能更深入地理解Eclipse的使用，并避免在学习过程中遇到的常见问题。记住，实践是最好的老师，不断在Eclipse中尝试和探索，你很快就能从“小白”成长为熟练的开发者。
                                    

                                
                            


                            

                                

                                    
                                
                                

                                    韩顺平_从零开始系统学习Java【完整笔记】1
                                
                                
优质
                                

                                    

                                    本课程由韩顺平老师主讲，适合初学者全面掌握Java编程语言。内容涵盖基础知识到高级特性的深入讲解，帮助学员构建完整的知识体系和实战能力。

第1章 内容介绍

1.1 本套JAVA课程内容  
1.1.1 课程的三个阶段  
1.1.2 关于课程的说明  
1.1.3 课程特色  

1.2 JAVA就业方向
                                    

                                
                            


                            

                                

                                    
                                
                                

                                    《Node.js学习笔记：从入门到精通》png
                                
                                
优质
                                

                                    

                                    本书为初学者提供全面的Node.js编程指南，涵盖基础知识、核心概念以及高级主题，帮助读者逐步成长为Node.js专家。

《深入浅出Node.js》阅读笔记
                                    

                                
                            


                            

                                

                                    
                                
                                

                                    韩顺平Java从入门到精通学习笔记完整版
                                
                                
优质
                                

                                    

                                    《韩顺平Java从入门到精通学习笔记完整版》是由知名IT教育专家韩顺平老师精心编写的系统性教程，内容涵盖了Java编程语言的基础知识及高级特性，旨在帮助初学者快速掌握并深入理解Java技术。本书通过大量实例和练习题，让读者在实践中提升技能，适用于自学或课堂教学使用。

韩顺平的《Java从入门到精通》笔记完整版非常适合初学者学习。
                                    

                                
                            


                            

                                

                                    
                                
                                

                                    MFC从零开始入门手册(PDF)
                                
                                
优质
                                

                                    

                                    《MFC从零开始入门手册》是一本全面介绍Microsoft Foundation Classes(MFC)编程技术的学习指南。本书以PDF形式呈现，适合初学者循序渐进地掌握Windows应用程序开发技能。

关于鸡做米的MFC资料整理而成的一份零基础入门MFC软件编程教程已经完成，并包含详细的操作流程。该资料已转换为PDF格式。
                                    

                                
                            




元素的属性如width、height、colspan、rowspan，用于定义单元格大小及跨列或跨行显示内容。
4. 
额外支持border和collapsed属性，分别控制边框显示和折叠功能。

tr元素具有对齐方式（align）和垂直对齐方式（valign），以及背景颜色设置。此外，td和th还支持colspan、rowspan等跨列或跨行特性。

表格的复杂应用包括：
1. 行分组：允许将若干行组合到一个组中进行统一管理。
2. 表头行分组：单独定义第一行为表头内容，并使用