html难点标签

iframe 标签

现在已经不常用，用起来会很卡。因为相当于新开一个窗口。

    <iframe name=xxx width="100%" height="500px" frameborder="3"></iframe>
    <a target=xxx href="https://www.weibo.com">weibo</a>
    <a target=xxx href="https://www.sina.com">sina</a>

iframe的name属性和a的target属性相关联。

a标签

跳转页面（HTTP GET 请求）

• target
  • _blank 在新页面打开
  • _self 在当前页面打开
  • _parent iframe父元素打开
  • _top iframe嵌套三层以上，最顶层打开
• download属性
  • 只对同源链接有效
  • http content-type：application/octet-stream
• href
  • 不可以写qq.com，会被当成文件
  • 可以写//qq.com，会自动匹配当前协议，files或者http等
  • ./xxx.html 发起http请求，get ./xxx.html文件
  • #dfgjkdfgj不发http请求，只有锚点不发起请求
  • ?name=cuilei发起http请求
  • javascript: alert(1)
    • javascript: ;点击之后什么都不做
    • 伪协议，历史遗留问题。可以做到不发请求，页面不动
  • 空白也会发出http请求，刷新页面
  • ``没有任何内容也会发出http请求，刷新页面

form 标签

跳转页面（HTTP POST 请求）

里面必须要有submit按钮。

有name属性的才能提交到data。

data中的显示，为html属性name:value

默认为get，只有get和post。

target属性使用和a标签一样。

<form action="users" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>

post

post把参数放到 第四部分里面

action可以修改为查询参数。

utf-8编码格式

method为post时，发出的http请求

get

get把参数放到查询参数里面

method为get时，发出的http请求

input / button

• slider
• search
• range
• controls

type

• button

  button和submit的区别：

  如果form中只有一个<button>button</button>，那么button标签会自动升级为submit提交按钮。

  submit是唯一能确定form能不能提交的按钮。

  如果type是button，只是普通按钮。

• checkbox多选

  • 被选中value默认为on

• radio单选

  • 相同的name属性只有一个会被选中。

<input type="checkbox" id="xxx"> <label for="xxx">吃饭</label>

id=for时，点击文字，checkbox也会反应。

把label包住input可以省略id和for

label功能使文字和input相关联。

• select

• textarea

<textarea style="resize: none; width: 100px; height: 100px;" name="" id="" cols="30" rows="10"></textarea>

table

trtable roll

tdtable data

thtable header

css中添加border-collapse: collapse;，表格变成单线。

    <table border=1>
        <colgroup>
        <col width=100>
        <col width=200>
        <col width=100>
        <col width=70>
        </colgroup>
        <thead>
            <tr>
                <th></th>
                <th>姓名</th>
                <th>班级</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>平均分</th>
                <td>小明</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总分</th>
                <td>小红</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tfoot>
    </table>