表格

创建表格的基本语法:


//该行也可删除,即不要标题










表格标题
第一行第一列 第一行第二列 第一行第三列
第二行第一列 第二行第二列 第二行第三列

表格中的属性

属性名 含义 常用属性值
Border 设置边框 默认为0 没有边框 单位为px 像素值
Cellspacing 设置单元格与单元格之间的距离 单位为px 像素值
默认2px
Cellpadding 设置文字与单元格之间的距离 默认1px
Width 设置表格的宽度 单位px
Height 设置表格高度 单位px
Align 设置表格在网页中的对齐方式 Left 左
Right 右
Center 居中
bgcolor 设置背景颜色 white ,red,green

表格的结构

在使用表格进行布局时,可以将表格划分为头部、主体和页脚,具体 如下所示::用于定义表格的头部,必须位于

标记中,一般包含网页的logo和导航等头部信息。</ tfoot >:用于定义表格的页脚,位于
标记中标记之后,一般包含网页底部的企业信息等。:用于定义表格的主体,位于
标记中</ tfoot >标记之后,一般包含网页中除头部和底部之外的其他内容。

表格补充知识:合并单元格












  1. <td>JavaScript教程</td><br /> <td>PHP教程</td><br /> </tr><br /></table>

演示效果

image.png

表单

常见的表单:银行开户,学籍录入,网上注册信息等等。。表单的作用:主要负责数据采集功能。对于表单构成中的表单控件、提示信息和表单域,初学者可能比较难理解,对他们的具体解释如下:
表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息:一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
表单域:他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。
语法:


Name :定义表单的名称
Method: 定义表单结果从浏览器传送到服务器的方式,默认参数为:get ;
Action :用来指定表单处理程序的位置(服务器端脚本处理程序)

input控件

image.png

textarea控件

语法:

Cols:相当于宽度
Rows:相当于高度

select控件


image.png

表单演示

image.png

代码



用户信息
用户名:

密码:

籍贯:



性别:


爱好:打篮球
打游戏
逛街
抽烟,喝酒,烫头

请上传帅气的头像:

介绍自己:






标签语义化

-标签语义化概念:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)
-标签语义化意义:
1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通,有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取;
3:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)
4:便于团队开发和维护

注意事项

1:尽可能少的使用无语义的标签div和span;
2:在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;3:不要使用纯样式标签,如:b、font、u等,改用css设置。
4:需要强调的文本,可以包含在strong或者em标签中strong默认样式是加粗(不要用b),em是斜体(不用i);

总结

-认识表格及重要属性
-认识form表单标签,掌握其用法
标签语义化
meat标签 字符集

学科
目录 课程
Web html基础教程 css基础教程