ACCP6.0HTML知识点个人课件.pptx

HTML总结 河南科技大学软件学院 刘丁源 HTML主要学习内容 HTML基本结构 DOCTYPE声明 meta标签 title标签：title标题/title 标题标签：h1…/h1、h2…/h2、h3…/h3 段落标签：p…/p 换行标签：br/ 水平线标签：hr/ 字体样式标签：加粗：strong…/strong 斜体：em…/em 各种标签 注释和特殊符号 图像标签 超链接 超链接 超链接 三种列表及其标签 1.无序列表 列表、表格与框架 ul li桔子/li li香蕉/li li苹果/li /ul 列表、表格与框架 2.有序列表 列表、表格与框架 ol li桔子/li li香蕉/li li苹果/li /ol 列表、表格与框架 3.定义列表 列表、表格与框架 dl dt所属学院/dt dd计算机应用/dd dt所属专业/dt dd计算机软件工程/dd /dl 列表、表格与框架 列表对比 列表、表格与框架 表格 列表、表格与框架 table tr td第1个单元格的内容/td td第2个单元格的内容/td …… /tr tr td第1个单元格的内容/td td第2个单元格的内容/td …… /tr /table 表格对齐方式 默认对齐、居中对齐、左对齐、右对齐 单元格对齐方式 水平对齐方式、垂直对齐方式 列表、表格与框架 表格的跨行和跨列 列表、表格与框架 框架 列表、表格与框架 表单语法 表单 在实际网页开发中通常采用post方式提交表单数据 表单元素格式 表单 表单 表单 表单 表单 表单 隐藏域 只读和禁用 表单 input type=hidden value=666 name=userid 语义化的表单 增强鼠标的可用性 自动将焦点转移到与该标注相关的表单元素上 表单元素的标注 表单语义化 语义化的目标是为了页面结构更加合理 在网页设计和开发过程中，使用语义化的标签，能够达到见名知义的作用 语义化的结构，更加符合Web标准，更利于搜索引擎的抓取（SEO的优化）和开发维护 表单语义化总结 表单主要用来制作动态网页，方便和用户进行交互。 常用的表单元素有文本框、密码框、单选按钮、复选框、列表框、按钮、多行文本框。 使用label标签的for属性与表单元素的id属性相结合控制单击该标签时，对应的表单元素自动获得焦点或者被选中。 表单元素的只读和禁用属性为readonly和disabled 语义化的表单结构使得页面简洁、合理，同时也符合W3C开发标准、有利与被网络搜索引擎抓取。 表单总结 CSS基本语法结构 CSS样式表 CSS样式表 三种选择器 1.标签选择器 CSS样式表 2.类选择器 CSS样式表 3.ID选择器 CSS样式表 CSS样式表 CSS样式表 CSS样式表 CSS样式优先级 CSS样式表 CSS复合选择器 CSS样式表 CSS样式表 CSS样式表 字体样式设置 CSS设置页面元素属性 文本属性 CSS设置页面元素属性 CSS设置页面元素属性 超链接伪类 CSS设置页面元素属性 盒子模型 盒子模型 边框粗细的定义方法 border-width：thin（或medium、thick、像素值） 盒子模型 border-top-width:5px; border-right-width:10px; border-bottom-width:8px; border-left-width:22px; border-width:5px ; border-width:20px 2px; border-width:5px 1px 6px; border-width:1px 3px 5px 2px; 边框样式的定义方法 border-style： none（无样式） hidden（隐藏） dotted （点线） dashed（虚线） solid （实线） double （双线） …… 盒子模型 外边距（margin） margin、margin-top、margin-right、margin-bottom、margin-left 网页居中对齐 盒子模型 margin-top: 1 px margin-right : 2 px margin-bottom : 2 px margin-left : 1 px margin :3px 5px 7px 4px; margin :3px 5px; margin :3px