HTML-02

表格 <table>

整体结构

标准的表格table有四个部分组成：

• 表格的标题：不用解释了吧 <caption>
• 表格的头部：不用解释了吧 <thead>
• 表格的主体：不用解释了吧 <tbody>
• 表格的脚注：比如说显示总条数啊啥的。(可写可不写) <tfoot>

在表格上加边框

<!-- 在<table>标签中加上border属性 -->

表格的头部 <thead>

一行<tr>，行里面是单元格<th>

表格的主体 <tbody>

一行<tr>，行里面是单元格<td>

表格脚注 <tfoot>

一行<tr>，行里面是单元格<td>

常用属性

<table>中的属性

border		控制表格最外侧的边框大小，单位是px
wideh		整个表格的宽度，会按照每一列最长字数进行一定比例的分配，单位是px；是至少这么大，可以用别的属性调整
height		控制整个表格的高度，会改变主体的高度，头部和脚注的高度不变，单位是px；是至少这么大，可以用别的属性调整
callspacing	调整整个表格的单元格之间的缝隙大小，单位是px，0的话并不是合并单元格，而是边框的距离为0

<thead>中的属性

height		控制表格头部的高度，单位是px；
align		对齐方式，水平对齐方式。left(左)、right(右)、center(居中)(默认)
valign		对齐方式，垂直对齐方式。top(顶部)、bottom(底部)、middle(居中)(默认)

<tbody>中的属性

height		控制表格主体的高度，单位是px；如果在<table>中加了height，而且这个值比<thead>、<tbody>、<tfoot>的height值的和加起来都多，多出的部分会加到<tbody>的height属性上
align		对齐方式，水平对齐方式。left(左)、right(右)、center(居中)(默认)
valign		对齐方式，垂直对齐方式。top(顶部)、bottom(底部)、middle(居中)(默认)

<tfoot>中的属性

height		控制表格脚注的高度，单位是px；
align		对齐方式，水平对齐方式。left(左)、right(右)、center(居中)(默认)
valign		对齐方式，垂直对齐方式。top(顶部)、bottom(底部)、middle(居中)(默认)

<tr>中的属性

height		控制表格一行的高度，单位是px；
align		对齐方式，水平对齐方式。left(左)、right(右)、center(居中)(默认)
valign		对齐方式，垂直对齐方式。top(顶部)、bottom(底部)、middle(居中)(默认)

<th>中的属性

width		控制宽度，单位是px；修改了之后，这一行的宽度都会改变
height		控制表格一行的高度，单位是px；
align		对齐方式，水平对齐方式。left(左)、right(右)、center(居中)(默认)
valign		对齐方式，垂直对齐方式。top(顶部)、bottom(底部)、middle(居中)(默认)
rowspan		指定要跨的行数
colspan		指定要跨的列数

<td>中的属性

和<th>能写的属性一样

补充的常用标签

换行<br> (单标签)

分割线<hr> (单标签)

按原文显示<pre> (双标签)

保留原有的格式，有几个空格，有几个换行都可以

一般用于在原文中嵌入大量的代码

表单<form>

网页中的交互区域

<form action="https://www.baidu.com/s" method="get" target="_blank">
	<input type="text" name="wd">
	<button>搜索</button>
</form>

action	提交的地址
method	请求方式，默认值是get
target	方式，可以是_blank（新页面打开）、_self（当前页打开）

input	输入框		单标签
button	按钮		双标签

表单控件

文本输入框<input type="text"

属性

type		类型。text
name		名字
value		输入框中的默认值
maxlength	最大长度

密码输入框<input type="password"

属性

type		类型。password
name		名字
value		输入框中的默认值
maxlength	最大长度

单选框<input type="radio"

属性

type		类型。radio
name		将多个单选框，划分到同一组，让其只能选一个
value		选择的按钮代表的值
checked		默认勾选

多选框框<input type="checkbox"

属性

type		类型。checkbox
name		将多个多选框，划分到同一组
value		选择的按钮代表的值
checked		默认勾选

隐藏域<input type="hidden"

将输入框进行隐藏

属性

type		类型。hidden
name		名字
value		选代表的值

提交

<input type="submit"

将表格提交

属性

type		类型。submit
value		按钮的值

或者

<button type="submit">提交</button>

将表格提交

属性

type		类型。submit（默认）

重置按钮

<button type="reset">重置</button>

将表单重置到默认设置

或者

<input type="reset" value="重置">

value的值是按钮显示的值，可以不写，默认就是重置。

普通按钮

<button type="button">普通按钮</button>

type		button
还有别的属性，可以完成很多东西，但是在JS、css中才能用

或者

<input type="button" value="按钮显示的值">

文本域<textarea>

属性

name		名字
cols		列数（宽度）后期可以用css调
rows		行数（高度）后期可以用css调

下拉框<select>

属性

name		名字

选项<option>

<option value="文字代表的值">显示的文字</option>

value		实际的值，如果不写，值是显示的文字
selected	默认值，默认该选项被选中

禁用表单控件

在表单控件中加上disable属性，不用加属性值。禁用

<label>标签 关联控件

可以与表单控件进行关联，相当于你点击了<label>标签就认为你点了关联的表单控件，让其获得了焦点。

<label for="关联的表单控件的id值">显示的名字</label>

或者

在<label>标签中写表单控件，也能做关联

对表单内容进行分类<fieldset>（了解）

在<fieldset>标签里面，加上<legend>标签，表示该分类的描述

在<legend>标签后面接着写表单的内容

框架标签<iframe>

将别的网页嵌入到网页中

<iframe src="网页地址" frameborder="边框">

属性

src		嵌入的网页地址
frameborder		边框，只有0和1。0是没有边框，1是有边框。
height		高度，单位：像素
width		宽度，单位：像素

嵌入别的内容

src的地址除了是网页地址，还可以别的内容，只要是浏览器能够打开的，都可以嵌入。

打开网页自动下载

src的地址指向的不是浏览器能打开的（例如：压缩包），会自动跳到浏览器的下载页面

通过点击，展开内容

<a href="aa.html" target="tt">点我</a>
<a href="aaa.html" target="tt">点我2</a>
<iframe name="tt" frameborder="0" width="900" height="300"></iframe>

通过超链接的target属性，连接<iframe>的name属性，点击后会在<iframe>里加载超链接的链接地址内容。

可以多个超链接连接同一个<iframe>

除了超链接之外，还有可以与表单<form>的target属性进行关联。

<form action="https://so.toutiao.com/search" target="toutiao">
	<input type="text" name="keyword">
	<input type="submit" value="头条搜索">
</form>

<iframe name="toutiao" frameborder="0" width="900" height="300"></iframe>

<!-- 将表单的内容提交到表单填的地址，将返回的结果放在iframe框架里 -->

HTML字符实体

相当于转译了

空格（ 或 ）

小于号< 大于号>

&符&

¥符¥

©符(版权)©

×符(乘号)`×``

÷符(除号)÷

.....等等

全局属性

id一个网页中的唯一标识

class类名，给标签指定类名，通过css设置样式

stylee样式

dir文字在屏幕的靠左或靠右

title提示

lang什么语言

meta原信息

网页的基本信息，可以有多个metal

设置编码集

<meta charset="UTF-8">

兼容性设置，正对IE浏览器的兼容性设置

<meta http-equiv="X-UA-Compatible" content="IE=edge">

移动端的配置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

网页关键字

<meta name="keywords" content="这个网页的关键字，对网页的描述，用英文逗号隔开">

网页的描述

<meta name="description" content="网页简述">

针对搜索引擎爬虫的配置

<meta name="robots" content="可选择如下">

值	描述
index	允许搜索爬虫索引此页面
noindex	要求搜索爬虫不索引此页面
follow	允许搜索爬虫跟随此页面上的链接
nofollow	要求搜索爬虫不跟随此页面上的链接
all	与index，follow等价
none	与noindex，nofollow等价
noarchive	要求搜索引擎不缓存页面内容
nocache	noarchive的代替名称

网页的自动刷新

<meta http-equiv="refresh" content="0; url=http://example.com">

这种刷新是不能回退的

content="0		这是表示网页多少秒刷新
url=http://example.com		你跳转的地址，如果不写，会本地刷新