HTML常见标签有以下五个：
<a>，<form>，<input>，<button>，<table>
还有一个已经不常见了，但旧网页中还有的<iframe>。
（下拉列表<select>和多行文本框<textarea>也都会讲一下）
<iframe>标签(旧标签)
内联框架元素 <iframe> 表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中
举例：
<head>
<style>
iframe{
width:100%;
height:400px;
}
</style>
</head>
<body>
<iframe name=xxx src="#" frameborder="0"> </iframe>
<a target=xxx href="http://qq.com"> QQ </a>
<a target=xxx href="http://baidu.com"> 百度 </a>
</body>
解释一下各段属性的意思：
css部分
<head>
<style>
iframe{
width:100%;
height:400px;
}
</style>
</head>
这部分是设置iframe标签的css属性
1.<style>扩起来的部分是整个html页面css的内部样式表
2.iframe扩起来的部分是对自身的属性设置
3.width是宽的意思，这里可以理解为iframe的宽为100%
4.height是高的意思，这里可以理解为iframe的高为400px(css像素)
这里的注意点是，css的宽与高是不一样的，比如宽能拉到了100%，高却不行，这个要靠自己查和理解。
html部分
<body>
<iframe name=xxx src="#" frameborder="0"> </iframe>
<a target=xxx href="http://qq.com"> QQ </a>
<a target=xxx href="http://baidu.com"> 百度 </a>
</body>
这部分是iframe的主体信息
1.name=xxx窗口的名称是xxx
2.src="#" 在当前页面设置
3.frameborder="0" iframe自带一个3D效果框，很丑，设置参数为0以取消该效果框
4.target=xxx在name=xxx的窗口打开链接
<a>标签
<a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
target属性:
<a href="http://qq.com" target="_blank">QQ</a>
<a href="http://qq.com" target="_self">QQ</a>
<a href="http://qq.com" target="_parent">QQ</a>
<a href="http://qq.com" target="_top">QQ</a>
target="_blank" 在空页面打开
target="_self" 在自己页面打开(iframe在自己区域)
target="_parent" 在父/母打开
target="_top" 在顶层窗口打开
download强制下载:
<a href="http://qq.com" download>下载</a>
让用户下载链接中的任何文件，是任何文件！
herf属性:
(herf指定的值有以下6种)
- 相对路径
<a href="./www.qq.com"></a>
- 绝对路径
<a href="/www.qq.com"></a>
- 有协议路径
-http协议
<a href="http://www.qq.com"></a>
-
file协议
<a href="file:///user/1520.png"></a>
- 无协议路径
<a href="//xxx/xxx/x.html"></a>
这种情况下浏览器会以你的当前协议，给超链接加上协议。比如你当前是http协议，他就会请求http://xxx/xxx/x.html
-
javascript:伪协议(执行js代码)
<a href="javascript:;"></a>
执行javascript:后面跟着的代码，如果没有，就什么都不做。
- 锚点(fragment)
<a href="#name"></a>
<p id="name">段落</p>
跳转到id对应的地方
<form>标签
<form>元素 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。
<a>和<form>都可以跳转页面，但<a>只能发起GET请求，而<form>一般用于POST请求
一个最简单的提交按钮是这样的：
<form action="index2.html" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
</form>
1.<form> 标签包住的部分就是要提交的数值
2.method="post"改变<form>的请求方式
3.<input type="text" name="username"> 提交用户名
4.<input type="password" name="password"> 提交密码
5.<input type="submit" value="提交"> 提交按钮
注意点
- 如果没有提交按钮，就无法提交
<form>的内容 -
<form>主要是发起一个POST请求的
<input>&<button>标签
<input>元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。
<input>的type属性是有很多值的。
type="button"和type="submit"的区别
<button>按钮</button>
<button type="button">按钮</button>
<input type="button" value="按钮">
<input type="submit" value="按钮">
1.<button>按钮</button>自动升级成(提交按钮)
2.<button type="button">按钮</button>(普通按钮)
3.<input type="button" value="按钮">(普通按钮)
4.<input type="submit" value="按钮">(提交按钮)
可见type="button"是一个不能提交的普通按钮
而type="submit"是一个可提交按钮
type="checkbox"多选框
<label><input type="checkbox" name="fruit" value="orange">橘子</label>
<label><input type="checkbox" name="fruit" value="banana">香蕉</label>
1.<label>中的内容是用户能看到的选项，用<label>把<input>包起来可以少写一个变量
2.name="fruit"是一个提交参数，是指提交的东西
3.velue="orange"是一个提交值，是提交东西的值
4.加了name后，服务器就了解提交的是什么了
网页提交的信息格式是：name=velue的，这里就是fruit=orange
type="radio"单选框
<p>你开心吗？</p>
<label><input name="happy" value="yes">YES</label>
<label><input name="happy" value="no">NO</label>
1.当type="radio"时，如果多个选项的name=相同值，那么就只有一个能被选中
2.name，value，<label>的用法和多选框一样
<table>表格标签
table 元素表示表格数据 — 即通过二维数据表表示的信息。
1. <table>只有3个子元素：<thead>，<tbody>，<tfoot>
- 意思分别是
<thead>表格头
<tbody>表格体
<tfoot>表格脚 - 就算把
<tfoot>放在<thead>上面也没关系，因为表格顺序是按<thead>→<tbody>→<tfoot>排列的
2. 除此之外，还有三个元素：<tr>，<td>，<th>
- 意思分别是
<tr>表格行(table row)
<td>表格数据(table date)
<th>表格标题(table header)
3.<table border=xxx>表格边框
- 这个元素是用来设置表格周围的边框长度的
- 用下面的css可以合并各个border
<style>
<table>{
border-collapse:collapse;
}
</style>
4. <colgroup>元素
这个属性是用来控制表的属性的，举例：
<colgroup>
<col width=100>
<col width=200>
<col width=100>
<col width=70>
</colgroup>
-
<col width=xxx>控制哪一列的宽度为xxx - 如果添加
bgcolor参数可以改变表格颜色
<select>下拉列表
<select name="分组">
<option value=" ">-</option>
<option value="1">第一组</option>
<option value="2">第二组</option>
<option value="3" disabled>第三组</option>
<option value="4" selected>第四组</option>
</select>
-
<select>包起来的部分是整个下拉列表 -
<option>包起来的部分是单个选项 - 第三组的
disabled参数用户不能选这个选项 - 第四组的
selected参数是默认选中这个选项 - 在<select>里设置multiple，用户就可以多选
<textarea>多行文本框
举例：
<textarea style="resize:none;width:200px;height:200px;"
name="爱好"></textarea>
这就是一个宽200px，高200px的文本框。
本章注意点
<input>有很多type,但是没有子元素
<button>是有子元素的
<form>是用来发起POST请求的
网友评论