HTML常用标签

ChristWan
172 阅读4分钟

HTML重难点

相关单词

单词翻译单词翻译
hyper超级blank空白
target目标parent父母之一
reference引用self自己
frame边框、框架load加载
error错误canvas画布

a标签

属性

  • href

    href = hyper + ref = 超级 + 引用/链接 = 超链接/超级引用

    取值：

    • 网址

      google.com

      google.com

      //google.com（无协议网址）会自动匹配http或https，初学者建议这么写

    • 路径

      /a/b/c（http协议下的/为开启http服务的目录，不是系统盘的根目录） 以及 a/b/c

      index.html 以及 ./index.html（这两种都表示在当前目录下找index.html）

    • 伪协议

      javascript:代码;（:和;都不能少）基本不用了

      <a href="javascript:;">查看</a> //创建一个名称为“查看”的超链接，但是什么都不做

      mailto:邮箱 作用是调用邮箱软件，并且自动填好邮箱地址

      tel:手机号 作用是调用拨号功能，并且自动填好手机号

    • id

      #xxx （xxx为id的名称）作用是跳转到xxx这个标签

  • target

    指定在哪个窗口打开超链接

    取值：

    • 内置名字

      _blank 在空白页面打开

      _top 在顶层页面打开

      _parent 在父级（上一层）页面打开

      _self 在当前页面打开

    • 程序员命名

      windows的name 多个链接target这个name时，重复在name这一个窗口打开链接

      iframe的name

  • download

    不是打开页面，而是下载网页

    不是所有浏览器都支持，尤其是手机浏览器可能不支持

  • rel=noopenner

    “为了防止一个bug”

作用

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

iframe标签

内嵌窗口

已经很少使用了，还有些老系统在用

<iframe src="XXX" frameborder="0"></iframe>

table标签

代码

    <table>//表格
      <thead>
        <tr>//table row 一行
          <th>单词</th>//表头内容会自动加粗
          <th>翻译</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>hyper</td>//table data 表格内容
          <td>超级</td>
        </tr>
        <tr>
          <td>target</td>
          <td>目标</td>
        </tr>
      </tbody>
      <tfoot>//尾部，可省略
        <tr>
          <td>2</td>
          <td>2</td>
        </tr>
      </tfoot>
    </table>

    <table>//双标题表格
      <thead>
        <tr>
          <th></th>
          <th>小红</th>
          <th>小明</th>
          <th>小刚</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>数学</th>
          <td>61</td>
          <td>91</td>
          <td>85</td>
        </tr>
        <tr>
          <th>语文</th>
          <td>79</td>
          <td>82</td>
          <td>92</td>
        </tr>
        <tr>
          <th>英语</th>
          <td>85</td>
          <td>92</td>
          <td>87</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>总分</th>
          <td>240</td>
          <td>270</td>
          <td>274</td>
        </tr>
      </tfoot>
    </table>

相关的样式

table-layout

值

  • auto

        <style>
      table {
        table-layout:auto;
      }
    </style>

    大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。

  • fixed

        <style>
      table {
        table-layout:fixed;
      }
    </style>

    表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。

    使用 “fixed” 布局方式时，整个表格可以在其首行被下载后就被解析和渲染。这样对于 “automatic” 自动布局方式来说可以加速渲染，但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用 overflow 属性控制是否允许内容溢出。

border-collapse

    <style>
      table {
        border-collapse: collapse;
        border-spacing: 0;
      }
      td,
      th {
        border: 1px solid blue;
      }
    </style>

设置表格边框合并

img标签

作用

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

属性

alt

alternate 代替者

如果图片加载失败，就显示alt内容提示用户

height

图片高度，只设置高度，宽度会自适应

width

图片宽度，只设置宽度，高度会自适应

src

图片源

事件

onload

图片加载成功后调用

onerror

图片加载失败后调用

    <img src="12.png" name="xxx" />
    <script>
      xxx.onload = function () {
        console.log("图片加载成功");
      };
      xxx.onerror = function () {
        console.log("图片加载失败");
        xxx.src = "/404.png";
      };
    </script>

响应式

max-width:100%

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

所有页面的图片都是响应式的

可替换元素

可替换元素概念

form标签

  <form action="/xxx">

   <input type="text" />

   <input type="submit" />

  </form>

作用

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

属性

action

必须要写，相当与img的src，控制请求哪个页面

autocomplete

是否自动填充

    <form action="/xxx" autocomplete="on">
      <input name="XXX" type="text" />
      <input type="submit" />
    </form>

method

控制用get还是post来请求页面

  <form action="/xxx" method="POST">//由get改为post

   <input type="text" />

   <input type="submit" />

  </form>

target

控制在哪个窗口打开请求的页面

事件

onsubmit

注意事项

<input type="submit" value="自定义的名称（默认是提交）"/>

和

<button type="submit">自定义的名称</button>

两者区别：input里面不支持其他标签，只支持文本，button里面还可以再加任何东西，比如

<button type="submit"><strong>自定义的名称</strong></button>

input标签

作用

让用户输入内容

属性

类型 type

button、checkbox、email、file、hidden、number、password、radio、search、sunmit、tel、test

file：<input type="file" multiple>选中多个文件

radio：<input name="gender" type="radio" />男 <input name="gender" type="radio" />女input 设置相同name，可以实现多选一

其他

name、autofocus、checked、disabled、maxlenth、pattern、value、placeholder

事件

onchange

输入改变触发的事件

onfocus

鼠标集中到它身上的时候触发的事件

onblur

鼠标从它身上移走的时候触发的事件

验证器

HTML5新增功能

例如：

<input type="text" required/>

加上required之后，如果这里没有输入文本，就无法提交

其他输入标签

select+option

表示选择框

      <select>
        <option value="1">星期一</option>
        <option value="2">星期二</option>
      </select>

tectarea

表示输入框，可定义框的大小可不可变或设定框的大小为固定值

<textarea style="resize: none; width: 50%; height: 300px"> </textarea>

注意事项

  • 一般不监听input的click事件
  • form里面的input要有name
  • form里面要放一个type=submit才能触发submit事件

其他标签

video

audio

canvas

svg

这些标签的兼容性一定要查看文档

avatar
文章
阅读
粉丝