本文的目的通过重点标签的学习前进
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 标签四种常见的 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 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 仍在下载时会出现错误或被禁用。这也会向辅助技术(如屏幕阅读器)传达不正确的语义。在这些情况下,推荐使用 来代替。通常情况下,您应该只将锚点用于正常的 URL 导航。
- "javascript:void(0)" 来创造一个能阻止页面刷新的伪按钮的方式
那么就有三种写法了
小型服务器
它会安装在 npm 目录下,把 bin 目录添加到~/.bashrc 脚本配置文件里面,在文件的最后一行加上
- npm i -g http-server
- export PATH = "http-server的绝对路径:$PATH"
配置好 path 之后,就可以直接使用了。
在你想模拟 http 协议环境的时候,在那个目录下打开 http-server 就可以用了
form a 标签最大的区别就是 form 标签是 post 提交,虽然你可以修改成 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 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 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 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 一样的效果
- <input id="play" type="checkbox" name="loveme" checked> <label for="play">篮球 </label>
- <label ><input type="checkbox" name="loveme" checked> 篮球 </label>
- <button name="button" type="button"> Click me </button>
- //仅表示按钮,没有任何作用.它可以有与元素事件相关的客户端脚本,当事件出现时可触发,与js结合使用
- <button name="button" type="submit"> Click me </button>
- //此按钮提交表单数据给服务器
- <input type="range" name="" value="">
- <select>
- <option value="1">湖人</option>
- <option value="2" selected>凯尔特人人</option>
- <option value="3">马刺</option>
- </select>
凯尔特人人是默认勾选的
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 的 外部对象。 典型的可替换元素有
和 表单元素,如 。 某些元素只在一些特殊情况下表现为可替换元素,例如 和
上面是 MDN 的原话,反正我看的云里雾里。用图片解释一下吧。
img 标签的尺寸其实是由 src 决定的,但只是第三级的重要性,你可以用 width 修改,你也可以用 CSS 来修改。
不仅仅有 none inline block inline-block 还有很多
常见的 display 默认的是 block 的有 divp 、form 和 HTML5 中的新元素: header 、 footer 、 section。我们不需要特别关心 display 的,因为这个主要由 CSS 修改
具体的细节可以查看 MDN list sytle
具体的符号样式的设置可以看 list-style-type
比如你想改成方形,就用 list-style-type: type
来源: http://www.jianshu.com/p/34c8e98b441b