HTML学习笔记（二）

表格标记：显示较工整的数据时建议使用

实现一个表格：需要

表格标记：table

行标记：tr

单元格标记：td

 

额外可用标记：thead ，tbody用于设置能快速搜索的表格

 

编写一个2行2列的表格：

 

 

如果需要显示表格的边框，就使用border属性设置，值为固定数值：border=”1”(实际开发中不建议这样使用，一般都是使用样式设置)

表格默认的大小是跟随内容变化的，如果需要定义宽高，通过width和height设置

在表格中使用align可以设置表格的水平对齐方式，如果align使用在tr或td中表示某行或某列中的内容的水平对齐方式

 

在单元格中使用rowspan实现垂直和clospan实现水平合并

合并单元格：

1.    在用于合并的单元格中使用属性，属性的值为合并后单元格所占单元格个数，如rowspan=”2”

2.    将被合并(挤出去)单元格删除

 

补充：通过cellpadding设置表格内容的填充（补白，内间距），通过cellspacing设置单元格之间的间距

 

 

表单标记：用于显示接收用户输入或选择的控件，完成数据的收集和发送

 

标记名：form

必须存在属性：

method：默认值为get，可选值有post和get，如果明确提交数据方式为get，该属性可以不写

action：用于指定表单数据的发送地址

 

表单的数据收集通过其包含的控件标记来实现：

输入控件：input

必写属性：type，用于设置控件类型

           常用值：

Ø  text：默认值，表示文本框

Ø  password：密码框

Ø  radio：单选按钮框，如果想要多个单选成为一组的单选，必须保证该组单选按钮的name属性值一致

Ø  checkbox：复选框

Ø  button：普通按钮，该按钮没有任何效果，效果的实现必须通过javaScript语言开发，按钮中通过设置其value属性来定义按钮显示的文本

Ø  submit：提交按钮，该按钮具有提交数据的功能，通过设置其value属性来定义按钮显示的文本

常用属性：name，用于设置控制名称（在进行web开发时非常重要）

 

下拉列表控件：select，必须结合option（下拉列表项）标记实现

<select>

           <option>2001</option>

           <option>2002</option>

           <option>2003</option>

           <option>2004</option>

       </select>年

文本域控件：textarea

<textarea rows="10" cols="20">

       用户协议

</textarea>

属性rows设置行数，clos设置列数

 

实际开发中：一般借助表格对表单控件进行布局，显示会较工整，每个控件都应该具有一个有意义的name属性值

 

在网页中使用注释（给人看）：

<!—注释文本-->

网页中#表示当前

计算机中加载代码的顺序：从上往下，从左往右逐行执行

 

Post和get的区别：

Post：提交数据在地址栏不可见，数据提交发送慢

Get：提交数据在地址栏可见，发送提交速度快

 

样式：外观，外貌，样子

 

CSS：层叠样式表：

使用方式有3种：

行内样式：

在需要使用样式的标记中，通过style属性定义样式

语法：<标记名style=”样式属性1：属性值; 样式属性2：属性值;….”>被修饰的内容</标记名> 

内部样式表：

在head标记中定义style标记，在style标记中定义各种样式选择器

<style>

样式选择器1

样式选择器2

…..

</style>

 

外部样式表：在样式重复使用上效率更高（在实际开发中使用最多）

1.    创建一个以.css为文件后缀名的样式表文件，在文件中编写各种选择器

2.    在需要引用样式的网页的head标记中通过link标记将样式表文件加载

完整语法：

<link href="样式表地址" rel="stylesheet" type="text/css">

 

网页中常用选择器：

1.    标签选择器:选择器名就是标签名，

使用特点：网页中所有属于指定选择器名的标签都会具有该选择器的样式

语法：

选择器名{

样式属性1：值;

样式属性2：值;

…….

}

2.    ID选择器：选择器名以#后跟自定义的名称

使用特点：在需要使用该选择器的标记中通过属性id=”选择器名”，来使用样式

语法：

  #选择器名{

样式属性1：值;

样式属性2：值;

…….

}

3.    类选择器：选择器名以.后跟自定义的名称

使用特点：在需要使用该选择器的标记中通过属性class=”选择器名”，来使用样式

语法：

  .选择器名{

样式属性1：值;

样式属性2：值;

…….

}

 

Id选择器和类选择器的区别：

在网页中每一个ID选择器只能作用于一个标签，而类选择器可以作用于多个标签，这正是开发准则

 

多种样式使用遵循就近原则。