Web前端笔记——表格表单框架实体元信息等笔记

基本结构

表格标题

表格头部   默认样式就是头部整体加粗 h:heads

表格主体    d:data

表格脚注

常用属性

table	表格	width：设置表格的宽度	双
		height：设置表格最小高度，表格最终高度可能比设置的值大
		border:设置表格边框宽度
		cellspacing:设置单元格之间的间距
thead	表格头部	height:设置表格头部高度	双
		align:设置单元格的水平对齐方式，可选值如下： left:左对齐 center:中间对齐 right:右对齐
		valign:设置单元格的垂直对齐方式，可选值如下： top:顶部对齐 middle:中间对齐 bottom:底部对齐
tbody	表格主体	常用属性与thead相同	双
tr	行	常用属性与thead相同	双
tfoot	表格脚注	常用属性与thead相同	双
td	普通单元格	width:设置单元格的宽度，同列所有单元格全部受影响。	双
		height:设置单元格的宽度，同行所有单元格全部受影响。
		align:设置单元格的水平对齐方式
		valign:设置单元格的垂直对齐方式
		rowspan:指定要跨的行数
		colspan：指定要跨的列数
th	表头单元格	常用属性与td相同	双

1.

元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的宽度只能控制表格最外侧边框的宽度，这个问题如何解决? -- 后期靠 CSS 控制。

2.给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了

3.给某个 th 或 td 设置了高度之后，他们所在的那一行的高度就确定了

caption只能通过CSS设置.table的height是最少为那个值，只能大于等于它，

常用标签补充

标签名	标签含义	单/双标签
br	换行	单
hr	分隔	单
pre	按原文显示（一般用于在页面中嵌入大段代码）	双

注意点:

1. 不要用
   来增加文本之间的行间隔，应使后面即将学到的 CSS margin 愿性

2. ---

   的语义是分隔，如果不想要语义，只是想西一条水平线，那么应当使用 CSS 完成

表单基本结构

搜索

搜索手机

文本域和密码框

账户:

密码:

确认

文本输入

常用属性如下:

name 属性: 数据的名称

value 属性:输入框的默认输入值 ，普通输入框可以不写value

maxlength 属性: 输入框最大可输入长度

密码输入

常用属性如下:

name 属性: 数据的名称

value 属性: 输入框的默认输入值 (一般不用，无意义)

maxlength 属性: 输入框最大可输入长度

单选框和多选框

女

男

常用属性如下:

name 属性: 数据的名称，注意: 想要单选效果，多个 radio的 name 属性值要保持一致

value 属性: 提交的数据值

checked 属性: 让该单选按钮默认选中

复选框

抽烟

级头

常用属性如下:

name 属性:数据的名称。

value 属性: 提交的数据值

checked 属性:让该复选框默认选中

隐藏域和提交按钮

隐藏域可以避免非法批量注册

用户不可见的一个输入区域，作用是: 提交表单的时候，携带一些固定的数据

name 属性: 指定数据的名称。

value 属性: 指定的是真正提交的数据

提交按钮

点我提交表单

button标签type属性的默认值是submit

提交和重置

确认

提交按钮

1. button 标签 type 属性的默认值是 submit 。

2. button 不要指定 name 属性

3. input 标签编写的按钮，使用 value 属性指定按钮文字。

重置按钮

1. button 不要指定 name 属性

2. input 标签编写的按钮，使用 value 属性指定按钮文字

input和button的name都不要写，它们的value值会显示在按钮上

普通按钮

普通按钮

注意点: 普通按钮的 type 值为 button ，若不写 type 值是 submit 会引起表单的提交

文本域

我是文本域

常用属性如下

1. rows 属性: 指定默认显示的行数，会影响文本域的高度
2. cols 属性: 指定默认显示的列数，会影响文本城的宽度
3. 不能编写type 属性，其他属性，与普通文本输入框一致

下拉框

coption value="黑”>黑龙江/option>

coption value="江”>江宁

coption value="吉”>吉林

coption value="粤”selected>广东

常用属性及注意事项:

1. name 属性: 指定数据的名称。

2. option 标签设置 value 属性，如果没有 value 属性，提交的数据是 option 中间的文字;如果设置了 value 属性，提交的数据就是 value 的值 (建议设置 value 属性)

3.option 标签设置了 selected 属性，表示默认选中。

禁用表单控件

表单控件的标签设置 disabled 既可禁用表单控件

input、textarea 、 button 、 select 、 option 都可以设置 disabled 属性

写法一:

账户:

写法二：

密码:

4.label标签

labe1 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点两种与 label 关联方式如下:

1.让 label 标签的 for 属性的值等于表单控件的 id 。

2.把表单控件套在 label 标签的里面。

fieldset和legend

fieldset会把标签对里面的内容框起来，表单控件分组

legend     分组名称

以上都是HTML4的内容

框架标签

  利用

与表单配合使用

点我

HTML 字符实体

空格                                      

小于号                <                     <

大于号                >                    >

和号                         & ;                    &

引号                         "                    "

反引号                       ´                   ´

分 (cent)                     ¢                    ¢

镑(pound)                    £:                   £

元 (yen)                      ¥                     ¥

欧元(euro)                    €                    €

版权 (copyright)               ©                    ©

注册商标                     ®                     ®

商标                         ™                   ™

乘号                         ×;                   ×

除号                         ÷                   ÷

html设置语言：

1. 主要作用：

   让浏览器显示对应的翻译提示

   有利于搜索引擎优化

2具体写法：

第一种写法（语言-国家/地区），例如：

zh-CN：中文-中国大陆（简体中文）

zh-TW：中文-中国台湾

zh:中文

en-US：英语-美国

en-GB：英语-英国

第二种写法（语言-具体种类）已不推荐使用，例如:

zh-Hans:中文-简体

zh-Han：中文-繁体

可以在W3C上面看完整具体的要求

全局属性：可以在所有的标签上加的属性