HTML重难点

Tech
HTML

a 标签

属性

  • href hyper reference.

    新建终端，执行：
    yarn global add http-server
    在本地运行，不保留缓存：
    http-server -c-1或者
    http-server . -c-1
    使用http-server预览html,不要双击打开。
    可以使用hs -c-1缩写版本，快一点。

还可以使用parcel：
yarn global add parcel
parcel #filename.suffix

  • target
<!— 可以指定在哪个地方打开超链接 (在空白页打开)—>
<a href=“https://google.com” target=“_blank”>hyper link</a>
  • download
<!-- 下载这个网页，基本不能用—>
<a href=“https://google.com” download>hyper link</a>
  • rel=noopener 防止一个 js 的 bug。

作用

  • 跳转外部页面
  • 跳转内部锚点
  • 跳转到邮箱或电话等

a的href的取值

  • 网址
https://google.com
http://google.com
//google.com

<a href=“//google.com”> hyperlink</a>
  • 路径
/a/b/c以及a/b/c
index.html以及./index.html

<a href=“./index.html”> c.html</a>

哪里开的服务，哪里就是根目录。

  • 伪协议
javascript:代码;
mailto:邮箱
tel:手机号
#id(跳转到相应的id)

<a href="“javascript:alert(1);”"> JavaScript伪协议</a>
<a href="“javascript:;”"> 空的伪协议，偶尔有用嘻嘻</a>

如果你想要做一个a标签，又希望他什么也不做。那么可以使用上面的方法。

<a href="“#xxx”"> c.html</a> <a href="“tel:9492439921”"> call me maybe:)</a>

a的target的取值

内置名字

  • _blank
  • _top
  • _parent
  • _self
<!— 在新的页面打开 -->
<a href=“https://google.com" target=“_blank”>google</a>
<!— 在当前页面打开 -->
<a href="https://google.com” target="_self">google</a>
<!-- 在最顶层页面打开 -->
<a href="https://google.com" target=“_top”>google</a>
<!— 在父级窗口打开 —>
<a href=“https://google.com” target=“_parent">google</a>

程序员命名

  • window的name
<!— 如果有一个叫xxx的窗口，就用它，如果没有就用xxx打开 —>
<a href=“https://google.com” target=“_parent">xxx</a>
  • iframe的name
<a href=“//google.com">google</a>
<a href="//baidu.com”>baidu</a>
<hr />
<iframe src="" name="xxx"></iframe>
<hr />
<iframe src=“” name="yyy"></iframe>

iframe标签

内嵌窗口，已经很少使用了，还有些老系统在用。用 AJAX 吧，别用这个了，这里不多介绍。

table标签

一个表头

<table>
  <thead>
    <!— table row —>
    <tr>
      <th>英语</th>
      <th>翻译</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>hyper</td>
      <td>超级</td>
    </tr>
    <tr>
      <td>target</td>
      <td>目标</td>
    </tr>
    <tr>
      <td>reference</td>
      <td>引用</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>空</td>
      <td>空</td>
    </tr>
  </tfoot>
</table>

相关的标签：table,thead,tbody,tfoot,tr,td,th

两个表头

<table>
  <thead>
    <tr>
      <th></th>
      <th>Jack</th>
      <th>Alice</th>
      <th>Bob</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Math</th>
      <td>12</td>
      <td>34</td>
      <td>23</td>
    </tr>
    <tr>
      <th>English</th>
      <td>12</td>
      <td>34</td>
      <td>23</td>
    </tr>
  </tbody>
</table>

相关的标签：table,thead,tbody,tfoot,tr,td,th

相关的样式

<style>
  table {
    /* 根据内容预测多宽 */
    table-layout: auto;
    /* 尽量平均 */
    /* table-layout: fixed; */
    border-spacing: 0px;
    border-collapse: collapse;
  }
</style>

img标签

<img src=“dog.png" alt=“” />

作用

发出 get 请求，展示一张图片

属性

  • alt 如果加载失败了，显示一句话提示用户
  • height/width 只写高度，宽度会自适应。只写宽度，高度会自适应。永远不要使图片变形。
  • src 图片地址

事件

  • onload/onerror 监听图片是否加载成功
<img id=“xxx" width="400" ssrc=“dog.png" alt=“” />
<script>
  xxx.onload = function() {
  console.log(“图片加载成功”);
  };
  xxx.onerror = function() {
  console.log("图片加载失败");
  };
</script>

可以在图片失败的时候进行挽救。

响应式

max-width:100%

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  img {
    max-width: 100%;
  }
</style>

可替换元素

考试很可能会问。

form标签

表单

作用

发 get 或者 post 请求，然后刷新界面

<form action="/xxx">
    <input type=“text" />
    <input type=“submit” />
</form>
<!-- 控制请求打开页面 -->
<form action=“/yyy”>
    <!-- method控制是get还是post方式 -->
    <input type="text" method="POST" />
    <input type="submit” />
</form>

属性

  • action 上面讲了，不再赘述。
  • autocomplete
<form action="/yyy">
  <input type=“text" method=“POST” autocomplete=“on” />
  <input name="username" type="“text”" />
  <input type="submit” />
</form>
  • method GET/POST
  • target
<form action="/yyy">
  <input type=“text" target=“_blank” />
</form>
  • value
<form action="/yyy”>
    <input type=“text” value=“try me” />
</form>

事件

  • onsubmit
<form action="/yyy">
    <input name=“username” type=“text” />
    <!— 可以提交 -->
    <button type="submit”>
    <strong>do it </strong>
    </button>
    <!-- 提交不了 -->
    <button type=“button”>
    <strong>do it </strong>
    </button>
</form>

想要触发 submit，必须要有一个type=’submit’的东西。

input标签

作用

让用户输入内容

属性

  • 类型type:
<form action=“/yyy”>
    <input type="text” />
    <!— 输入颜色 -->
    <input type=“color" />
    <!— 输入密码，不展示具体内容 —>
    <input type="password" />
    <!— 单选 —>
    <input name="gender" type="radio" />male
    <input name="gender” type=“radio” />female
    <br />
    <!— 多选 —>
    <input name="hobby" type="checkbox" />唱
    <input name="hobby" type=“checkbox" />跳
    <input name="hobby" type="checkbox" />rap
    <input name="hobby" type="checkbox" />篮球
    <!-- 上传 -->
    <input type="file" />
    <!-- 选择多个文件 -->
    <input type="file" multiple />
    <!-- 看不见的，比如取id等 —>
    <input type=“hidden” />
</form>
  • textarea
<textarea style="resize: none; width: 50%; height: 300px;”></textarea>
  • select
<select>
<option value="1”>Monday</option>
<option value=“2”>Tue</option>
<option value="3">Wed</option>
</select>

事件

  • onchange
  • onfocus 当鼠标集中的时候
  • onblur 当鼠标出来的时候

验证器

HTML5 新增功能

<input type="text" required />

必须传，否则传不了。

注意事项

  • 一般不监听input的click事件
  • form里面的input要有name

    上述例子里没有写，但是其实应该有name。

  • form里要放一个type=submit才能触发submit事件

其他标签

  • video
  • audio
  • canvas
  • svg
comments powered by Disqus