html表单布局及CSS样式.doc_第1页
html表单布局及CSS样式.doc_第2页
html表单布局及CSS样式.doc_第3页
html表单布局及CSS样式.doc_第4页
html表单布局及CSS样式.doc_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML（二）一、HTML中的特殊符号 1.常用的特殊符号： 特殊符号 字符实体 示例 空格   A    B 大于号 > a <b 小于号 < <html> 引号 " "姓名" 版权符号 © Copyright© All Reserved 2.表单（标签） 2.1、表单的基本语法： action：规定到表单提交之后，由谁处理，默认为当前页面 method：有两种取值get和post（更安全，数据量更大） 表单内部由大量表单元素构成 2.2、表单元素的基本格式 2.3、表单元素的逐一介绍 1、文本框（type:txt） 2、密码框 3、重置、提交和普通按钮 4、单选按钮（radio） 男 女 5、复选框（check和post） 运动    游泳    玩游戏 6、文件域（上传文件） 7、下拉列表框 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月 月  8、多行文本域 欢迎阅读服务协议 9、隐藏域 10、只读和禁用属性 a、 只读 欢迎阅读服务协议 b、禁用 同意以上协议   3.HTML的注释 要避免在注释内容中使用(不规范) 可以用= =或者#代替-4、表格布局 4.1、基本语法 /行 百度/单元格 猫扑 4.2、跨列学生成绩/跨两列 4.3、跨行 李四 4.4、跨行跨列 学生成绩 5、表格的高级标签 表格数据的分组标签,6、表格布局 采用form-table-tr-td进行页面布局 7、CSS样式表CSS是Cascading Style Sheets 的缩写，层叠样式表（W3C规范之一），把网页的内容和外观的美化分开。 优点： a、实现内容和样式的分离，利于团队开发 b、实现样式复用，提高开发效率。 c、实现页面的精确控制（有很强大的排版功能） d、利于搜索引擎的搜索 7.1、CSS基本语法 样式表主要是由样式规则组成。 基本语法包括三个部分：选择器、属性和属性值 a、样式表一般用标签来声明样式规则，基本结构： 选择器对象属性1：属性值1；对象属性2：属性值2； b、选择器的分类 1、标签选择器（当需要对页面内某类标签的内容进行修饰的时候采用） li（标签名） color:#f00;（属性名1） font-family:黑体;（属性值2） font-size:36px; （属性值3） 。 2、类选择器 使用步骤分两步： a、定义样式: 类名 属性名1：属性1； 属性名2：属性2； 。 b、应用样式，使用标签的class属性引用类样式 标签内容 3、ID选择器（一般用来修饰标签） a、 首先使用ID属性标识被修饰的页面元素。 b、定义相应的ID选择器的样式。 #ID标识名 属性名1：属性值1； 属性名2：属性值2； 优先级：类选择器标签选择器ID选择器 8、常用的样式修饰 样式分为文本及字体、背景、列表几个方面。 1、文本和字体属性 a、文本属性用于定义文本的外观，包括颜色、行高、对齐方式、字符间距等。 属性名 含义 举例 应用场景 line-height 设置行高（单位px） line-height=25px 布局多行文本 text-align 设置对齐方式( 常用的取值为：left、right、center) text-align=center 适应于各种元素对齐 letter-spacing 字符间距（常用：3px;5px;） letter-spacing=5px 加大字符间距 text-decoration 文本修饰（underline,none） text-decoration=none 下划线的加或者去 white-space 规定如何处理空白(nowrap不换行) white-space=nowrap 不换行 b、字体属性，用来定义字体类型，字号的大小，字体是否加粗等。 属性名 含义 举例 应用场景 font 在一个声明中设置字体的所有属性 font:bold 12px 宋体 ； 常用于字体样式缩写font-familu 字体类型 font-family:黑体 ； 设置字体类型font-size 字体大小 font-size：12px;font-weight 字体 的粗细 font-weight:bold;(粗体)c、背景属性 用来定义网页的背景色或者背景图片，精确的控制背景出现的位置和平铺的方向 属性名 含义 举例 应用场景background 声明所有的背景属性 background:#ccc url(images/bg.png)repeat-x 20px -100pxbackground-color 背景颜色 background-color:#RGB; background-image 背景图片 background-image:url(images/bg.png);background-repeat 背景平铺方式 background-repeat:no-repeat;(背景不平铺)bcakground-position 背景出现的初始位置 background-position:20px-100px; 位置分别代表X，Y轴方向的坐标针对于background-repeat属性我们又可以细分为： 平铺方式 含义 应用场景 repeat 纵横向都平铺（默认值） 用小图片来构建整个背景 repeat-x 横向平铺 repeat-y 纵向平铺 norepeat 背景图不重复平铺针对于bcakground-position属性我们又可以细分为：（可以精确的控制背景图出现的位置） a、 Xpos Ypos代表设
人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论