基本结构
<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 | 按原文显示（一般用于在页面中嵌入大段代码） | 双 |
注意点:
- 不要用 <br> 来增加文本之间的行间隔，应使后面即将学到的 CSS margin 愿性
- <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="点我重置">
提交按钮
-
button 标签 type 属性的默认值是 submit 。
-
button 不要指定 name 属性
-
input 标签编写的按钮，使用 value 属性指定按钮文字。
重置按钮
-
button 不要指定 name 属性
-
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>
常用属性如下
- rows 属性: 指定默认显示的行数，会影响文本域的高度
- cols 属性: 指定默认显示的列数，会影响文本城的宽度
- 不能编写type 属性，其他属性，与普通文本输入框一致
下拉框
<select name="from">
coption value="黑">黑龙江/option>
coption value="江">江宁</option>
coption value="吉">吉林</option>
coption value="粤"selected>广东</optionz
</select>
常用属性及注意事项:
-
name 属性: 指定数据的名称。
-
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在网中嵌入广告
- 与超链接或表单的 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设置语言：
- 主要作用：
让浏览器显示对应的翻译提示
有利于搜索引擎优化
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>元信息
- 针对 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="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