WebUnit03_HTML标记语言.ppt

Web技术导论;课程目录;Unit 1 Web基础;目录;教学目标;知识单元与知识点;重点难点;U31 标记语言的产生与发展;标记语言的概念;超文本标记语言HTML;可扩展标记语言XML;U32 超文本标记语言HTML;HTML标记的概念及认知;标记的语法;HTML文档结构;文件头标记及子标记;meta标记;meta标记—HTTP头;meta标记--name属性;;;文档体标记body及主要属性;文档体body/body;文本内容标记;图像标记img;AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐。 AbsMiddle 图像的中间与同一行中最大元素的中间对齐。 Baseline 图像的下边缘与第一行文本的下边缘对齐。 Bottom 图像的下边缘与第一行文本的下边缘对齐。 Left 图像沿网页的左边缘对齐，文字在图像右边换行。 Middle 图像的中间与第一行文本的下边缘对齐。 NotSet 未设定对齐方式。 Right 图像沿网页的右边缘对齐，文字在图像左边换行。 TextTop 图像的上边缘与同一行上最高文本的上边缘对齐。 Top 图像的上边缘与同一行上最高元素的上边缘对齐。;举例;超链接标记a…/a;超链接标记a的属性;超链接标记a的重点难点;表格（Table）;;举例2—单元格中图片和文字的垂直居中;举例3—表格的tbody与标签式表格;代码--表格标记-1tbody.htm;表单Form;表单输入域;表单举例1—上传文件;表单页面news-add.jsp;表单处理程序news-addfilesave.jsp;层叠样式表CSS技术;CSS属性--1字体属性;CSS属性--2颜色和背景属性 ;CSS属性--3文本间距与文本对齐属性;CSS属性--4容器属性;CSS属性--4容器属性(Cont.);CSS属性--5列表属性;CSS属性--6鼠标状态属性;CSS属性--7定位属性;CSS属性--8滤镜属性;CSS样式表定义;CSS样式表定义的一般形式;HTML选择符;类选择符;ID选择符 ;在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。 ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中的类用ID代替： p id=”left” 这个段落左对齐 /p 定义ID选择符要在ID名称前面加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id=“left”的元素： #left { font-size : 100% ; font-weight : bold ; color:Purple ; background-color:transparent } 下面这个例子，ID属性只匹配id=“left”的段落元素： p#left { font-size : 100% ; font-weight : bold ; color:Purple ; background-color:transparent;关联（包含）选择符;组合选择符;伪（类）元素选择符;修改标记的默认显示样式;方法1—修改默认显示;方法2—使用内联样式;方法3—使用自定义样式类;方法4--使用ID选择符;页面设计效果;使用id选择符和class选择符的不同;样式（.css）文件;举例1—定义通用样式文件mycommon.css;举例2—定义关于table的样式文件mytable.css;表格样式的使用;span标记;span举例—span标记区的访问方法;span举例—常见应用;图层标记div;举例—图层的显示和隐藏;代码;代码（续1）;代码（续2）;使用帧;帧的应用—页面设计;代码—index.htm;代码-- scrollleft.html;浮动帧iframe标记;代码--myiframe.htm（1）;代码--myiframe.htm（2）;代码--myiframe.htm（3）;问题思考;;Unit 1 Web基础