HTML1.0笔记.doc

使用DIV+CSS布局网页、使用CSS美化网页、制作精美的商业网站。会使用HTML的基本结构创建网页，会使用文本相关标签排版文本信息，会使用图像相关标签实现图文并茂的页面，会使用a标签创建超链接、锚链接以及功能性链接。HTML：Hyper Text（超文本） Markup（构造） Language。DIV：层叠样式表中的定位技术DIVision，划分、图层；编程中叫整除。CSS：Cascading Style Sheets，层叠样式表、级联样式表，一种用来表现HTML或XML等文件样式的计算机语言，能做到网页表现与内容分离的一种样式语言。1.html的网页基本结构： 页面名称、标题 /文件的头部 要显示的内容都放在body中 /主体部分 .标签标记着 HTML 文档的开始和结束网页编辑工具：记事本、UltraEdit。UltraEdit：一套强大的文本编辑器。PHP：Hypertext Preprocessor、超文本预处理器，一种通用的开源脚本语言，主要适用于Web开发领域。JavaScript：有一种直译脚本语言，市一中动态类型、弱类型、基于原型的语言，内置支持类型。与JavaEase功能一样，可以在浏览器上运行。JavaScript就爱内容与ECMA标准，也成为ECMAScript。ECMA：欧洲计算机制造协会。DOCTYPE声明：一个文档类型标记是一种标准通用标记语言的文本类型声明，目的是要告诉通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。DTD：文本类型定义DOCTYPE声明：/Strict（严格类型）、Transitional（过渡类型）、Frameset（框架类型）/网页网址 无标题文档 如果使用Dreamweaver创建网页，默认的创建XHTML1.0的过渡类型。2.基本标签： a：标题标签：通常用于标题或主题，体现标签语义化。 （1）标题的特点：文字变大，上下有间距。 （2）使用标签：.(文字由大变小) b：段落标签： 特点：文字大小不变，用来标示这是一段文字，具有换行功能。 标签： c：换行标签： 特点：只换行，不设置上下间距 d：水平线标签： 说明：width设置宽度，单位可以给百分比，或者多少px像素。align设置水平对齐方式，取值：left、center(默认)、right。示例：width=50%或者 width=200px e：设置文字格式： （1）加粗： （2）倾斜： 注意：如果出现标签嵌套，一定要注意嵌套关系，不要交叉嵌套 错误代码：aaaa，改正：aaa。 f：特殊符号以及转义码： 空格： 、版权符：©、小于号:<、大于号：>、" g：标签：网页名 h：标签 /网页的字符编码，网页常用的字符编码有gb2312、utf-8/搜索关键词/内容描述3. 图像标签：常用的图片格式：JPG（JPEG）、GIF（JPG、GIF是网页中最常用的格式）、PNG（受浏览器兼容性的限制）、BMP 语法： 说明：src：图片的路径、width：图片宽度、height：图片高度、title：鼠标悬停提示文字、alt：图像的替代文字，alt属性常和src配合使用。 示例： 说明：说明img标签的与之前学习的标签一样，不是成对的标签，直接在最后以/闭合，体现标签的语义化。4.超链接标签：链接文本或图像 功能：实现多个页面之间的跳转 语法：文本或图片 示例：文本超链接：无漂白薄皮核桃 图像超链接： 特殊值：当href=#时表示刷新 示例：刷新 补充：链接在哪个窗口打开 target=_self表示：相对路径，在当前窗口中打开新页面 target=_blank表示：绝对路径，新建窗口显示新页面内容5.超链接效果： （1）多页面跳转：从一个页面链接到另外一个页面，网站上使用最多的就是页面间链接，例如网站导航菜单、新闻列表、商品列表等链接，通常都是页面间链链。 （2）单页面内容跳转（锚链接：从A页面的甲位置跳转到本页中的乙位置，从A页面的甲位置跳转到B页面中的乙位置。） 实现步骤：a.先定义要跳转的位置：文本 示例：第一章内容开始 b.开始定义由谁跳转：文本 示例：第一章 花千骨1 整体效果：点击花千骨1，快速跳转到文章开始位置 （3）功能性跳转：跳转到电子邮件（Outlook）、QQ、MSN 语法：文本会使用有序列表实现数据展示，会使用无序列表实现数据展示，会使用定义列表实现数据展示，会使用表格实现数据展示，会使用进行页面设计。无序列表和定义列表在网页制作中应用非常广泛，使用可以重用页面内容，在制作网页时可以减少工作量。1.表的分类：有序列表、无序列表、自定义列表（定义列表常用于图文混排的局部布局）2.无序列表：/声明无序列表 /声明列表项 说明：一对li表示一个列表项，和标签均为成对出现。列表项中可以包含图片、文本，还可以嵌套列表、其他标签等。 type=disc：项目符号显示为尸体圆心，默认值。 type=square：项目符号显示为实体方心 type=circle：项目符号显示为空心圆。 注意：type可改变无序列表的项目符号即可，并且说明在实际网页制作中通常使用CSS来设置项目符号。3.有序列表：/声明有序列表 /声明列表项 说明：和标签均为成对出现，有序列表默认以数字序号显示，与无序列表一样，也可以嵌套列表、可以包含图片、文本、其他标签等 设置项目符号：type=1/a/A/i/I：使用数字作为项目符、使用大写/小写字母作为项目符号、使用大写/小写罗马数字作为项目符号。4.自定义列表：/声明定义列表 列表项标题/声明列表项 列表项内容/定义列表项内容 说明：定义列表也可以嵌套列表、包含图片、文本、其他标签等，以后的网页制作中经常会用到定义列表，特别是图文混排的情况，无项目符号和显示顺序。5. 表格的基本语法：/表格标签 /行标签 第1个单元格的内容/列或者单元格标签 第2个单元格的内容 . 第1个单元格的内容 第2个单元格的内容 . 说明：使用表格的原因，表格常用于结构一致的数据。width和border对于单元格也是适用的，文字或图片最终放置在td标签中。1.使页面内容工整 2.实现页面整体的布局 对齐方式：表格对齐方式：默认对齐、居中对齐、左对齐、右对齐。 单元格对齐方式：水平对齐方式、垂直对齐方式。 align水平对齐方式：left左对齐、center居中对齐、right右对齐。 valign垂直对齐方式：top顶端对齐、middle居中对齐、bottom底端对齐、baseline基线对齐。 说明：两个属性添加的位置：tr或者td标签中 注意：在实际网页制作中设置对齐方式通常使用CSS设置。 显示边框线：在table标签中添加如下属性：border=1设置边框线的宽度，cellpadding=0,cellspacing=0取消边框线之间的间距。6.合并单元格：规律：水平方向上的合并，属于合并列。垂直方向上的合并，属于合并行。 合并列：colspan=合并的列数。 注意：只要涉及到合并操作，那么必然会有单元格被删除。添加在td中。 合并行：rowspan=合并的行数。 注意：合并完行以后，需要删除被占行中的td。添加在td中。 示例： 学生成绩 张三 语文 98 7. 框架：，框架，内联框架iframe。 功能：使超链接的页面在本页面中的一个区域内显示。 比如：单击左侧导航，改变右侧内容，顶部和底部不需要再次加载。8.框架 语法： . 说明：cols表示横向分割，rows表示纵向分割，src表示应用界面的地址。描述窗口的分割，定义放置在每个框架中的HTML页面，框架分割窗口的几种方法：纵向、横向以及横纵向同时分割。在横向和纵向分割同时使用时，讲解框架的常用属性，例如scrolling（是否显示滚动条）、noresize（是否允许调整框架窗口大小）、name（框架标识名），并且着重说明name，它的作用主要是实现窗口间的关联。 窗口间的关联：/框架窗口名称 ./在框架窗口中打开链接 说明：框架中name的作用和创建超链接时，target属性的值设置为框架窗口名称。_blank和_self和_parent和_top。9.内联框架iframe 功能：使超链接的页面在本页面中的一个区域内显示。 比如：单击左侧导航，改变右侧内容，顶部和底部不需要再次加载。 语法： 说明：name :框架的名字，框架标识名。 src：框架默认情况下连接的页面，引用页面地址。 frameborder：边框。Scrolling：是否出现滚动条。noresize：是否允许调整框架窗口大小。width、height：框架宽度、高度。 实现步骤：在页面中定义iframe标签，并定义name值 在超链接的标签中添加target属性 示例代码：. 1.表单的作用:获取用户输入的数据的一种方式 应用场合：登录，注册，查询信息(百度)2.表单的基本语法： 表单元素3. 表单元素(控件)：4.类型值介绍：(1)文本框：(2)密码框：(3)单选按钮：注意：name值要一致(4)复选框：小结：单选和复选的相同点： 值要一致 b.设置默认选中都是用:checked=checked(5).下拉框： 要显示的值 (6)按钮： a:重置按钮 功能：清空表单中用户填写的数据 b:提交按钮 功能:将用户填写的数据进行提交补充：get和post提交方式的区别： get提交会在地址栏中显示提交的数据 post不会显示，所以更安全。 c:普通按钮 特点：不带有任何功能 d:带有提交功能的图片按钮 (7)多行文本域： 文本内容 大多数情况下，用来书写协议内容(8)文件上传控件 5.只读设置： readonly=readonly 示例：6.禁用： disabled=disabled(文本框或者按钮上添加) 示例： 1.css的作用：用来美化页面2.css的基本语法： 选择器 样式声明1; 样式声明2 说明：各样式声明之间用分号隔开，最后一个样式的分号可以省略3.css样式写的位置： 在head标签中添加style标签示例：(内部样式) css代码 4.选择器的种类： 选择器的作用:告诉程序，选取页面中的哪一部分来设置样式 (1)标签选择器 语法： 标签名样式声明 执行特点：页面中所有被该标签包围的内容，样式都改变 示例： pcolor:red/页面中所有的p标签中的内容，颜色变为红色 即时性 (2)类选择器： 语法： .自定义类名样式声明 注意：类选择器定义时，先写点(.) 使用类样式前先在标签中引用： 语法： 示例： 步骤1：先定义： .acolor:red 步骤2：使用 1111 (3)id选择器： 语法： #id名样式声明 注意：id名的值来自标签中id属性的取值 示例： 选择器：#abc样式值 小结： 标签选择器直接应用到html的标签中 类选择器需要先定义后使用，并且可以重复使用 id选择器，一个页面中只能使用一次，id和name属性功能一致，但是 id值不允许重复 样式声明： 设置文字大小：font-size:20px 文字颜色：color:red5.css样式写的位置： (1)行内样式(在标签内添加样式) 使用场合：某个标签单独设置样式时 语法： 示例： 测试文字 (2)内部样式(在本网页中添加标签) 使用场合：设置某个页面效果时 (3)外部样式： 实现步骤： 步骤1：将css样式单独放置在 .css文件中 注意:css文件中只存放css代码，不存放标签 步骤2：将css文件引入到要使用的页面 引入方式1：链接式:在head标签中使用 语法: 6.三种选择器的优先级：(高-低) ID选择器 类选择器 标签选择器 三种css样式的优先级:(高-低)-采用就近原则 行内样式内部样式外部样式补充：块级标签: 特点：辅助css样式选择器的定位7.高级选择器 分类： (1)后代选择器 父标签名 子标签名字样式声明 说明：如果出现标签嵌套，那么外层标签称为父级标签 内层标签称为子级标签 注意：中间用空格隔开 使用