html重点标签总结

一、 iframe 的学习

iframe通俗的的理解就是，可以在页面里面嵌套新的页面

它的使用会使页面变卡，一般会有一个固定的尺寸，默认的。他也属于可替换元素行列。我们可以通过CSS来改变尺寸

frameborder 消除边框

name 属性与a标签结合

<!-- <iframe name=iframe src="http://qq.com" ></iframe> -->

<iframe name="000" src="" ></iframe>

<a target="000" href="http://qq.com">aaaa</a>

a 标签的链接会在iframe的内嵌窗口里面打开

二、 a 标签的学习

a标签四种常见的target

       <a href="http://qq.com" target="_blank">topQQ</a> //在新的页面打开链接

        <a href="http://qq.com" target="_self">topQQ</a> //在当前窗口打开链接

        <a href="http://qq.com" target="_parent">parentQQ</a> //在父级

        <a href="http://qq.com" target="_top">topQQ</a> // 在顶级

a 标签可以设置download属性，使其不打开链接。而是下载当前页面的HTML。

也可以把你当前目录下的文件下载 。

 <a href="http://qq.com" download>下载</a>

 <a href="222/分配的ip地址.xls" download>下载文件</a>

a 标签会自动添加当前页面的协议。例如以下例子，如果不写http协议，会根据当前页面的协议自动加上，如果当前页面是http协议（通过下面的http-server模拟），那么就打开 qq.com ，如果只是本地的HTML，那么协议时file协议，不会下载

<a href="//qq.com" download>下载</a>

<a href="//qq.com" download>下载</a>

a 标签会在地址栏后加上锚点，即#开始的那串字符串

<a href="#kkkk" download>下载文件</a>

a 标签会在地址栏后加上?name=wushao

一定要记得a标签可以发起get请求

<a href="?name=wushao" download>下载文件</a>

a 标签可以使用 伪协议 ，这是历史遗留问题，以前的前端想在 a 标签里面直接打开js代码。现在常用于一些奇葩需求。

如果，你不想这个 a 标签，有任何动作，无法点击，就用伪协议。

<a href="javaScript:;" target="_top">topQQ</a> //无法操作了

<a href="javaScript:alert(1);" target="_top">topQQ</a>

反之如果你只是加锚点，那么会定位到开始位置。

如果你 href=" " ，那么会刷新页面。

综上所述，如果你对 a 标签什么也不想做，就用伪协议,详见MDN 的a标签

无障碍建议

锚点标签常常通过将 href 属性设置为 "#" 或 "javascript:void(0)" 来创造一个能阻止页面刷新的伪按钮的方式 被滥用。 这些属性值会在拖动 / 复制链接时导致意外行为，在新窗口 / 新标签打开链接，加入书签以及 JavaScript 仍在下载时会出现错误或被禁用。这也会向辅助技术（如屏幕阅读器）传达不正确的语义。在这些情况下，推荐使用 <button> 来代替。通常情况下，您应该只将锚点用于正常的 URL 导航。

那么就有三种写法了

• href="javaScript:;"
• href="javaScript:void(0);"
  
  或者直接 href="#"

---

小型服务器 npm i -g http-server

它会安装在npm目录下，把bin目录添加到 ~/.bashrc 脚本配置文件里面，在文件的最后一行加上

export PATH="http-server的绝对路径:$PATH"

配置好path之后，就可以直接使用了。

在你想模拟http协议环境的时候，在那个目录下打开http-server就可以用了

---

三、 form 标签的学习

form a 标签最大的区别就是 form 标签是post提交，虽然你可以修改成get,但是没有人蛋疼的这么做。

• 默认的get方法演示

<form action="users" >

        用户:<input type="text" name="name"><br>

        密码:<input type="text" name="password"><br>

        <!-- <input type="submit" value="提交"> -->

        <input type="button" name="button" value="button">

        <button type="submit">提交</button>

 </form>

以上是智障的写法，下面是优雅的写法 。

• 注意form必须要用一个type=submit的input不然无法提交数据！！！！

<form action="users"  method="post">

        用户:<input type="text" name="name"><br>

        密码:<input type="text" name="password"><br>

        <input type="submit" value="提交">

        <input type="button" name="button" value="button">

 </form>

• 以前我们在请求里面只能看见前三个部分，有了form标签之后，终于能看到第四部分，form data啦

  

  post解析.png
• 如果你的form表单里面没有一个type=submit的input,可以使用type=submit的 button 的标签,也可以使用<button >提交</button>

  <form action="users" >

        用户:<input type="text" name="name"><br>

        密码:<input type="text" name="password"><br>

        <!-- <input type="submit" value="提交"> -->

        <input type="button" name="button" value="button">

        <button type="submit">提交</button>

        //等价于 <button >提交</button>

    </form>

---

form表单 有且只有 两个方法，你不规定method那么就是get,你就是智障；所以你规定method="post"，你不智障；如果你写了这两种之外的方法，那么还是按照get方法提交，你是智障中的战斗机。

---

四、 input button 标签的学习

• input button 标签的最大区别就是 input 标签是空标签。
• input 标签的 type 有很多种,后期我有接触到了type="file"，还可以加上multiple，上传多文件。（12.28更新）
  
  而且input 必须有name属性 ，因为你提交的数据要用，组成name=value。

<input id="POST-name" type="text" name="name"> //普通文本

<input id="POST-name" type="password" name="password"> //密码

<input id="POST-name" type="submit" value="提交"> //提交

<input id="POST-name" type="checkbox" name="name"> //复选框

<input id="POST-name" type="radio" name="name"> //单选框

• 复选框和单选框的小练习

   <form action="users" method="post">

        用户:<input type="text" name="name"><br>

        密码:<input type="text" name="password"><br>

        <!-- <input type="submit" value="提交"> -->

        <input type="button" name="button" value="button">

        <button type="submit">提交</button>

        <br>

        <input id="love" type="checkbox" name="loveme"> <label for="love">爱我 </label>

        <input id="eat" type="checkbox" name="loveme"> <label for="eat">馒头 </label>

        <input id="play" type="checkbox" name="loveme" checked> <label for="play">篮球 </label>

        <input id="apple" type="radio" name="name" checked="checked"><label for="apple">苹果 </label>

        <input id="orange" type="radio" name="name"><label for="orange">橘子 </label>

    </form>

checked="checked" 与 直接书写 checked 一样的效果

• 注意以上的代码中，包含的 label 标签，有时候我们为了人性化的需求，只要鼠标点中文字的一部分就算选中了，所以用 label标签的for属性与input的id属性关联。

<input id="play" type="checkbox" name="loveme" checked> <label for="play">篮球 </label>

• 当然了，你身为一个老司机，应该这么写

<label ><input type="checkbox" name="loveme" checked> 篮球 </label>

• 省了两个属性，简洁优雅。
  
  button 标签也有很多 type

<button name="button" type="button"> Click me </button>

//仅表示按钮，没有任何作用.它可以有与元素事件相关的客户端脚本，当事件出现时可触发,与js结合使用

<button name="button" type="submit"> Click me </button>

//此按钮提交表单数据给服务器

• input 也可以实现滑动的效果

<input type="range" name="" value="">

五、下拉框

<select>

      <option value="1">湖人</option>

      <option value="2" selected>凯尔特人人</option>

      <option value="3">马刺</option>

 </select>

凯尔特人人是默认勾选的

六、 table 标签的学习

table 在古代用来做布局，现在基本不用了。

只有四个元素，thead、tbody、tfoot、colgroup。即使你不写tbody你也有这个标签，而且可以不止一个。thead里面有tr、th，tbody里面有tr、td，tfoot里面有tr、td，colgroup里面有col,用来控制列的宽度，基本不使用了。我现在维护的网页，用的 table 布局，修改很麻烦

tr	table row
th	table header
td	table data

<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>

  //可以包含多个tbody

---

noscript 标签表示如果用户禁用了js,就显示该标签里面的内容

---

七、空元素

就是里面不能有内容的标签

八、可替换标签

CSS 里， 可替换元素（replaced element） 的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有

<img> <object> <video> 和 表单元素，如 <textarea> <input> 。 某些元素只在一些特殊情况下表现为可替换元素，例如 <audio> 和 <canvas>

上面是MDN的原话，反正我看的云里雾里。用图片解释一下吧。

img标签的尺寸其实是由src决定的，但只是第三级的重要性，你可以用width修改，你也可以用CSS来修改。

九、全局属性

十、display不止三种

不仅仅有 none inline block inline-block 还有很多

常见的display默认的是block的有divp 、form 和HTML5中的新元素： header 、 footer 、 section。我们不需要特别关心display的，因为这个主要由CSS修改

li标签的样式可以改成实心原点，方形，也可以加上罗马数字

具体的细节可以查看MDN list sytle

具体的符号样式的设置可以看list-style-type

比如你想改成方形，就用list-style-type: type