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

基本结构

<caption></caption>表格标题

<thead><tr><th></th></tr></thead>表格头部 <th></th>默认样式就是头部整体加粗 h:heads

<tbody><tr><td></td></tr></tbody>表格主体 <td></td> d:data

<tfoot></tfoot>表格脚注

常用属性

<table border="1" width="500" height="500" cellspacing="0"></table>

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

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

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

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

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

常用标签补充

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

注意点:

1. 不要用 <br> 来增加文本之间的行间隔，应使后面即将学到的 CSS margin 愿性
2. <hr>的语义是分隔，如果不想要语义，只是想西一条水平线，那么应当使用 CSS 完成

表单基本结构

<form action="https://www.baidu.com/s" target="_self" method="get">

<!--

<form action="https://www.baidu.com">

s即为search，有s的会返回搜索结果，没有s的会打开主页让你自己搜索

form表单

常用属性：

action:用于指定表单的提交地址（需要与后端人员沟通后确定）

traget是打开方式:_self 在本窗口打开

_blank 在新窗口打开

method的属性值为get post，默认值为get

method:用于控制表单的提交方式，暂时只需要了解

-->

<input type="text" name="wd">

<!--在浏览器的地址栏会出现wd=如何一夜暴富，这样的搜索名值对

搜索框提交请求给服务器，服务器响应请求，返回结果

百度的name值是wd，京东的name值是keyword，是固定的

input 输入框

type：设置输入框的类型，目前用到的值是text，表示普通文本

name: 用于指定提交数据的名字（需要与后端人员沟通后确定）

button:按钮

-->

<button>搜索</button>

<!--用超链接的方式写，缺点就是会写死-->

<a href="https://search.jd.com/search?keyword=手机">搜索手机</a>

</form>

文本域和密码框

<form action="https://search.jd.com/search">

账户: <input type="text" name="account" value="zhangsan" maxlength="10"><br>

密码:<input type="password"name="pwd"value="123"maxlength="6"><br>

<button>确认</button>

</form>

文本输入

<input type="text">

常用属性如下:

name 属性: 数据的名称

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

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

密码输入

<input type="password">

常用属性如下:

name 属性: 数据的名称

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

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

单选框和多选框

<input type="radio"name="sex" value="female">女

<input type="radio" name="sex" value="male">男

常用属性如下:

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

value 属性: 提交的数据值

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

复选框

<input type="checkbox"name="hobby" value="smoke">抽烟

<input type="checkbox"name="hobby" value="drink">眼酒

<input type="checkbox" name="hobby" value="perm">级头

常用属性如下:

name 属性:数据的名称。

value 属性: 提交的数据值

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

隐藏域和提交按钮

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

<input type="hidden" name="tag" value="100">

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

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

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

提交按钮

<input type="submit" value="点我提交表单">

<button>点我提交表单</button>

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

提交和重置

<!-- 确认按钮 第一种写法 -->

<button type="submit">确认</button>

<!-- 确认按钮 第二种写法 -->

<!-- <input type="submit" value="确认"> -->

<!-- 重置按钮 第一种写法 -->

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

<!-- 重置按钮 第二种写法 -->

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

提交按钮

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

2. button 不要指定 name 属性

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

重置按钮

1. button 不要指定 name 属性

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

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

普通按钮

<input type="button" value="普通按钮">

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

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

文本域

<textarea name="msg" rows="22"cols="3">我是文本域</textarea>

常用属性如下

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

下拉框

<select name="from">

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

coption value="江">江宁</option>

coption value="吉">吉林</option>

coption value="粤"selected>广东</optionz

</select>

常用属性及注意事项:

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

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

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

禁用表单控件

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

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

写法一:

<label for="zhanghu">账户:</label>

<input id="zhanghu" type="text" name="account" maxlength="10"><br>

写法二：

<label>

密码:

<input id="mima" type="password" name="pwd" maxlength="6">

</labe1>

4.label标签

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

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

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

fieldset和legend

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

legend 分组名称

以上都是HTML4的内容

框架标签

<iframe></iframe> 利用<iframe>嵌入一个普通网页

|--------|----------------|--------------------------|-------|
| 框架标签 | 功能和语义 | 属性 | 单/双标签 |
| iframe | 框架（在网页中嵌入其他文件） | name:框架名字，可以与target属性配合 | 双 |
| iframe | 框架（在网页中嵌入其他文件） | width:框架的宽 | 双 |
| iframe | 框架（在网页中嵌入其他文件） | height：框架的高度 | 双 |
| iframe | 框架（在网页中嵌入其他文件） | frameborder:是否显示边框，值:0或1 | 双 |

iframe 标签的实际应用

1在网中嵌入广告

1. 与超链接或表单的 target 配合，展示不同的内容

与超链接<a>配合使用

<a href="https://www.toutiao.com" target="tt">点我</a>

<iframe name="tt" frameborder="0" width="900" height="800"></iframe>

与表单<from>配合使用

<form action="https://www.toutiao.com" target="container">点我</a>

<iframe name="container" frameborder="0" width="900" height="800"></iframe>

HTML 字符实体

空格

小于号 < <

大于号 > >

和号 & ; &

引号 " "

反引号 ´ ´

分 (cent) ¢ ¢

镑(pound) £: £

元 (yen) ¥ ¥

欧元(euro) € €

版权 (copyright) © ©

注册商标 ® ®

商标 ™ ™

乘号 ×; ×

除号 ÷ ÷

html设置语言：

1. 主要作用：

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

有利于搜索引擎优化

2具体写法：

<html lang="zh-CN">

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

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

zh-TW：中文-中国台湾

zh:中文

en-US：英语-美国

en-GB：英语-英国

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

zh-Hans:中文-简体

zh-Han：中文-繁体

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

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

<iframe>不会独占一行，可以设置宽高,用 row col

可以为特定的元素设置lang

dir写在bdo里面是倒序输出文字，dir写在<div>里面是靠左或靠右

<bdo dir="rtl">你是年少的欢喜</bdo>

<div dir="rtl">你是年少的欢喜</div>

<meta>元信息

1. 针对 IE 浏览器的兼容性配置

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

1. 针对移动端的配置

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

1. 配置网页关键字

<meta name="keywords"content="8-12个以英文逗号隔开的单词/词语">

5.配置网页描述信息

<meta name="description"content="88字以内的一段话，与网站内容相关">

6.针对搜索引擎爬虫配置:

<meta name="robots" content="此处可选值见下表">

index 允许搜索爬虫素引此页面

noindex 要求搜索爬虫不索引此页面。

follow 允许搜索爬虫跟随此页面上的链接

nofollow 要求搜索爬虫不跟随此页面上的银接。

a11 与 index，follow 等价

none 与 noindex，nofollow 等价

noarchive 要求搜索引擎不缓存页面内容

nocache noarchive 的替代名称

7.配置网页作者:

<meta name="author" content="tony">

8.配置网页生成工具

<meta name="generator" content="Visual Studio Code">

9.配置定义网页版权信息:

<meta name="copyright" content="2023-2027e版权所有">

10.配置网页自动刷新

不写URL的话，网页会在十秒后原地刷新

<meta http-equiv="refresh" content="10;url=http://www.baidu.com">

完整的网页的元信息，参考MDN