HTML常用标签详解-优快云博客

MDN的html标签—地址

标签太多了简单记录一下比较复杂而且常用的几个

iframe 标签

HTML内联框架元素 <iframe> 表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。
iframe的name和a标签的target搭配使用

<iframe src="https://www.baidu.com" name="xxx"></iframe>

a 标签(anchor)

<a href="//qq.com">QQ</a>href里写的是无协议地址，当前用的是http协议就自动继承http协议.
我们在终端运行sudo npm i -g http-server即可安装一个服务器，进入你写index.html的文件夹里运行http-server即可开启服务器，然后在浏览器浏览终端返回的地址即可用http协议来访问你写的文件
<a href="?name=xxx">qq</a>点击之后会在当前页面发起?name=pyz的请求
<a href="#xxx">#qq</a>点击之后不会发起请求，因为锚点仅仅是在当前页面内的跳转
<a href="javascript:;">qq</a>点击之后没动作

form 标签

HTML <form> 元素表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息(一般是post)

input和form

submit

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

form用post时,查询参数可以写在action里
form要有一个submit才能提交

checkbox&radio

input一定要有name才能提交

<label><input type="checkbox" name="apple" value="yes">苹果</label>
<label><input type="checkbox" name="banana" value="yes">香蕉</label>
<label><input type="radio" name="hobby" value="yes">eat</label>
<label><input type="radio" name="hobby" value="yes">play</label>

textarea

resize设置为none,便可以固定宽高

<textarea style="resize: none; width: 200px; height: 100px;"  name="hobbies"></textarea>

select

<select name="group" multiple>
    <option value="">-</option>
    <option value="1">第一组</option>
    <option value="2">第二组</option>
    <option value="3" disabled>第三组</option>
    <option value="4" selected>第四组</option>
</select>

table 标签

tr(table row) td(table data) th(table head)
下边是MDN的用法示例:

p>Simple table with header</p>
   <table>
     <tr>
       <th>First name</th>
       <th>Last name</th>
     </tr>
     <tr>
       <td>John</td>
       <td>Doe</td>
     </tr>
     <tr>
       <td>Jane</td>
       <td>Doe</td>
     </tr>
   </table>

注意:tr并不是table的子元素,因为tr默认会放到tbody里

<p>Table with thead, tfoot, and tbody</p>
  <table>
    <thead>
      <tr>
        <th>Header content 1</th>
        <th>Header content 2</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>Footer content 1</td>
        <td>Footer content 2</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Body content 1</td>
        <td>Body content 2</td>
      </tr>
    </tbody>
  </table>

  <p>Table with colgroup</p>
  <table>
    <colgroup span="4" class="columns"></colgroup>
    <tr>
      <th>Countries</th>
      <th>Capitals</th>
      <th>Population</th>
      <th>Language</th>
    </tr>
    <tr>
      <td>USA</td>
      <td>Washington D.C.</td>
      <td>309 million</td>
      <td>English</td>
    </tr>
    <tr>
      <td>Sweden</td>
      <td>Stockholm</td>
      <td>9 million</td>
      <td>Swedish</td>
    </tr>
  </table>

  <p>Table with colgroup and col</p>
  <table>
    <colgroup>
      <col class="column1">
      <col class="columns2plus3" span="2">
    </colgroup>
    <tr>
      <th>Lime</th>
      <th>Lemon</th>
      <th>Orange</th>
    </tr>
    <tr>
      <td>Green</td>
      <td>Yellow</td>
      <td>Orange</td>
    </tr>
  </table>

  <p>Simple table with caption</p>
  <table>
    <caption>Awesome caption</caption>
    <tr>
      <td>Awesome data</td>
    </tr>
  </table>

写的太仓促了.着急学CSS,html标签过段时间要好好复习