HTML常用标签

柯云泽
113 阅读3分钟

HTML常用标签

  • a标签的用法

  • 属性

    • href：hyper reference 超链接，链接到某个地址/网站

      取值：

      1. 网址：http / https协议 / 无协议网址
      2. 路径：a/b/c或index.html或./index.html
      3. 伪协议：mailto:邮箱（跳转到发送邮件） / JavaScript:代码;(常用于不做任何事的a标签) / tel：手机号码（跳转到拨号界面）
      4. id

    • target：对象，指定链接打开方式（当前页面/新页面）

      取值：

      • 内置名字：

        1. _blank:在当前页面打开
        2. _top:在当前页的顶部打开（相对于多个窗口而言）
        3. _parent:在父级窗口打开
        4. _self: 在自己的部分打开
        5. 若取未知窗口xxx为值，有此窗口则在此窗口打开，没有则新建窗口命名为xxx并打开链接

      • 程序员命名：

        1. window的name
        2. iframe（内嵌窗口）的name（谷歌不允许被iframe指向打开）

    • download：下载网页（不常用）

    • rel=noopener ：防止bug

  • 作用

    1. 跳转到外部页面
    2. 跳转到内部锚点
    3. 跳转到邮箱或电话等

  • img标签的用法

  • 属性

    1. src：图片路径/网址
    2. height：高度（只写height则wight自适应）
    3. width：宽度（只写wigth则height自适应）
    4. alt：可选的/替换的（如果图片加载失败，则显示图片表述）

  • 作用

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

  • 事件

    onload/onerror：监听图片是否加载成功，若加载失败，可以有备用方案/提示图

  • 响应式

    max-width：100%（使得图片宽度对屏幕宽度自适应）

  • table标签的用法

    • table标签中包含的标签：
    <table>
<thead>表头</thead>
<tbody>表体
 <tr>table row 
    <th>表头</th>
    <td>table data 表格数据</td>
 </tr>
</tbody>
 <tfoot>表底</tfoot>
 </table>

    • table相关的样式：

      1. table-layout(定义了用于布局表格单元格，行和列的算法)： auto（个性化定制）/fixed（尽量平均）
      2. border-collapse：控制表格合并（默认不合并）
      3. border-spacing：控制表格间的间距
&如果需要两列表头，直接在tbody/tfoot中按需使用th标签即可。

&易错点：tbody必须有，否则浏览器会自动帮忙纠错。

  • form标签的用法

    <form action="xxx" method="POST" 
autocomplete="on" target="_blank">
<input name="username" type="text"/>
<input type="submit" value="上交"/>
</form>

  • 属性

    1. action:请求的页面地址
    2. autocomplete:是否自动填充
    3. method:控制发送请求的方式(get/post)
    4. target:控制具体哪个页面转到请求的目标页面,用法同a标签中的target

  • 作用

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

  • 事件

    onsubmit:点击submit按钮的时候触发该事件

&&: input中的submit与button中submit的区别: input中不支持使用其他标签,button中可以使用其他标签(加粗文字/置入图片).

&&: 一般不会监听input的click事件,form里面的input必须有name

&&: form表单中必须有一个type=submit的标签(无论button/input)才能触发submit事件.若没有,会把仅有的未设置属性的button标签设置成type=submit.

  • input标签的用法

  • 常用类型

    1. text:可输入文本
    2. color:选择颜色
    3. password:不显示输入内容
    4. radio:单选,当多个个input框的name值相同,只能选中其中一个.
    5. checkbox:多选,拥有同一个name值的checkbox为一组.提交时会以数组提交.
    6. file:选择文件,默认为单选.具有multiple属性时可以多选.
    7. hidden:隐藏input框,一般用于js自动填充后提交.
    8. textarea:可输入多行,可通过css控制文本框的大小.
    9. select:选择框,通过option标签自定义可选内容,单选.

  • 作用

    让用户输入内容

  • 事件

    onchange:输入改变时触发

    onfocus:鼠标选中某框时触发

    onblur:鼠标离开某框时触发

  • 一些感想

    HTML有很多标签,这些标签出现在我们常用的各个网页上.可以说HTML是一个网页的骨架.

avatar
文章
阅读
粉丝