HTML学习20.docx

1、HTML学习20字体标签设置字体为8,颜色为:#abc001,字体为:宋体要修饰的文字内容换行第一行内容第二行内容第三行内容段落这是第一行P标签这是第二行P标签这是第三行P标签注意P标签与br标签的区别（P标签行与行之间存在间距）P标签和br标签都能实现换行效果H1-H6标签这是H1的内容这是H2的内容这是H3的内容这是H4的内容这是H5的内容这是H6的内容H1-H6 的标题标签是由大到小显示H1:一级标签H6:六级标签HTM内容 页面标题 内嵌样式 Body属性Imgalt:图片路径错误时，显示文字，图片路径正确时正常显示图片 鼠标移到图片上时提示信息 marquee 跑马灯directio

2、n:方向 up|down|left|rightscrolldelay:多少毫秒移动一次(1000毫秒=1秒)scrollamount:每次移动多少像素 要移动的内容 内容滚动标签 特殊符号 空格<小于>大于"引号©版权符号Pre * * * * * * * * * *超链接用法一:页面之间的跳转文字点此跳转用法二:锚标记效果使用a标签定义锚标记跳转到锚标记处用法三:启动电子邮箱发送邮件联系我们联系我们错误的写法:mail to: xxxmailto:/xxxtarget:_self:在本页面打开(默认的)_blank:在新窗口打开_parent:在父窗

3、口打开_top:在整个框架打开框架页的name:在指定的框架页打开在框架页面打开hr水平线noshade=noshade是否有阴影效果table表格table表格tr 行td单元格th 表头caption 表格标题3行3列的表格 align 比较特殊 是直接将表格布局对齐表格的标题(表格的外面)表头 table head(把内容居中并字体加粗) 这是表格标题 这是表头 注意练习跨行和跨列表单接收用户输入的数据并提交到服务器的一种界面get:显示提交 提交时数据会显示在地址栏上不安全(有提交大小限制)post:隐式提交 提交时不会显示出数据安全（没有提交大小限制)注意Post和Get之间的区别n

4、ame属性是由服务器使用的告知服务器提交的数据是做什么用途的当服务器得到该数据时则知道数据是userName(用户名)每个表单控件都有name属性-表单元素通过设置不同的type值来显示出不同的效果文本框相同(因为默认type的值是text)默认文本框密码框readonly=readonly 只读(只能看不能修改)maxlength=最大长度 只能输入多少个字单选按钮在多个选项中只能选择一个关键点要让多个单选按钮产生互斥必须将它们的name属性设置为一样的(作为一组)checked=checked 默认选中复选框可以选择多个名字不相同（可选）checked=checked 默认选中文件上传用于

5、上传文件普通按钮bottom(下)button(按钮)下拉菜单下拉菜单 菜单项 菜单项 菜单项 selected=selected 默认选中的项多行文本框 值是本标签包围在里面的readonly=readonly 只读(只能看不能修改)重置按钮所有按钮的value都是按钮上要显示的文字提交按钮提交按钮分两种1.普通提交按钮普通提交按钮2.图片提交按钮(不等于图片按钮)普通图片按钮是通过css样式修饰出来的和图片提交按钮是两种不同的事物重要区别提交按钮可以提交数据普通按钮是不能提交数据的提交按钮必须和form表单一起使用普通按钮是可以单独使用的Csscss样式定义分三种1.内嵌样式. 这里写样式

6、2.行内样式3.外部样式1.定义*.css样式文件2.在页面中使用导入外部样式文件样式定义区别内嵌样式和外部样式定义的样式可以反复使用而行内样式只能使用在标签中无法反复使用必须在写一次-.red color:red;css优先顺序优先使用行内样式其次内嵌样式最后外部样式-选择器分三种标签选择器标签名 样式定义所有的div都会使用该样式(比较绝对)div color:red;.类选择器.red color:red;应用时需要通过class属性对样式进行调用类样式可以有选择的使用使用效果不用效果使用效果#Id选择器#red color:red;通过id对样式进行调用可以自由选择-color:#00

7、0000; 字体颜色background:url(:背景图片路径) 或 背景颜色;既可以设置:背景图片又可以设置背景颜色background-color:背景颜色;background-image:背景图片background-repeat:设置背景图片的重复repeat(默认)水平和垂直都重复no-repeat 不重复repeat-x 水平重复repeat-y 垂直重复-border:1px solid 颜色;设置四边边框粗细、边框效果、边框颜色顺序没有要求设置各边的边框border-left:1px solid 颜色;border-right:1px solid 颜色;border-top

8、:1px solid 颜色;border-bottom:1px solid 颜色;border-left-width:边框粗细;border-left-color:边框颜色;border-left-style:边框样式;可以任意组合border-top-width:边框粗细;border-top-color:边框颜色;border-top-style:边框样式;设置四边的颜色border-color:边框颜色border-style:边框样式border-width:边框粗细-border设置边框left|right|top|bottom边框方向color|style|width 边框特征进行

9、任意组合 font-family:字体类型 font-size:字体大小 font-style:正常或倾斜 font-weight:粗体 间距 margin: 上 右 下 左; margin-top:100px 或 20% margin-right:100px 或 20% margin-bottom:100px 或 20% margin-left:100px 或 20% 填充 padding:上 右 下 左; padding-top:100px 或 20% padding-right:100px 或 20% padding-bottom:100px 或 20% padding-left:100

10、px 或 20% 浮动 float:left 或 right;左右浮动 clear:both left right;清除浮动 text-decoration:文字的下划线 上划线等效果 text-align:水平对齐方式vertical-align:垂直对齐方式 list-style:列表效果针对(ul和ol)框架集frameset框架集frame框架页要实现框架效果页面数量等于框架页数量+1总页面数=框架页数+1(主框架)在使用frameset时不能写到body中 frameset属性rows 按行拆分cols 按列拆分bordercolor:边框颜色framespacing:框架页的间距frameborder:是否有边框 yes|no|1|0frame 属性bordercolor:边框颜色frameborder:是否有边框 yes|no|1|0scrolling:是否有滚动条 yes|no|1|0noresize=noresize 是否可以拖动大小src:默认显示的框架页name:框架页的名字在框架页中打开页面