tuola学习笔记#2 《HTML常用标签》

tuola
113 阅读2分钟

HTML常用标签

a 标签

  • 属性：
    • harf ：可跳转外部网站或跳转内部锚点
    • target ：点击跳转的方式
    • download ：点击后下载（部分浏览器不支持）
    • rel=noopener ：使用target="_black"时保护新页面上的window对象上的opener不指向上一个页面的winodw对象
  • 作用：
    • 超链接
    • 跳转到外部界面
    • 跳转到内部锚点
    • 跳转到邮箱或电话
//跳转到外部网站
  <div>
       <a href="https://www.google.com">跳转到谷歌</a>
       <a href="http://www.google.com">跳转到谷歌</a>
       <a href="//google.com">跳转到谷歌</a>
  </div>

//跳转到内部锚点
  <div>
       <a href="#锚点id名称">跳转到该id名称的锚点</a>
  </div>

  • a标签中herf的取值：

    • 网址链接
    • 路径（如a/b/c或/desktop/index.html）
    • id （可跳转到内部锚点）
    • javascript: 使点击后无任何操作
    • mailto:邮箱 跳转到邮箱
    • tel:手机号 跳转到手机号

  • a标签中target的取值：

    • _black 在新窗口中打开页面
    • _top 在（内嵌页面iframe）顶层窗口打开
    • _parent 在父窗口页面打开
    • _self 默认值，在当前页面打开

  • 程序员命名

    • iframe的name
    • window的name如果已有命名，则会在命名的窗口打开页面，如果没有命名的页面则windows.name新建页面x之后在此页面打开。

img 标签

  • 作用
    • 发出一个get请求，展示一张图片
  • 属性
    • alt 若src加载失败则会显示alt中的内容
    • src source的简写，可以放入图片源地址/网络地址/相对路径地址/绝对路径地址
    • height 设置图片高度
    • width 设置图片宽度
  • 事件
    • 若加载成功会调用onload
    • 若加载失败会调用onerror

table 标签

  • 相关的标签
    • table 表格标签
    • thead 表格的头部
    • tbody 表格的躯干
    • tr 表格的一行table raw
    • td 表格内数据
    • th 表格一列表头
    • tfoot 表格的尾部
    <table>
        <!-- 头部 -->
        <thead>
            <tr>
                <th></th>
                <th>学生a</th>
                <th>学生b</th>
            </tr>
        </thead>
        <!-- 躯干 -->
        <tbody>
            <tr>
                <td>成绩</td>
                <td>80</td>
                <td>90</td>
            </tr>
        </tbody>
        <!-- 尾部 -->
        <tfoot>
            <tr>
                <td>总分</td>
                <td>80</td>
                <td>90</td>
            </tr>
        </tfoot>
    </table>

  • 相关的样式

    • table-layout常用有两个属性

      • auto 自动表格布局，表格及单元格的宽度取决于其包含的内容
      • fixed 表格和列的宽度通过表格宽度决定，某一列的宽度仅由首行单元格决定

    • border-collapse 单元格边框合并

    • border-spacing 单元格边框距离设置

  • 图片设置响应式

    • max-width:100%

  • img标签是可替换元素

from表单标签

  • 作用
    • 发起get或者post请求，然后刷新页面
  • 属性
    • action 发出页面请求
    • autocomplete 自动填充
    • method 使用get或者post来请求
    • target 提交到什么页面
  • 事件
    • onsubmit 提交时就触发

input标签

  • 作用
    • 让用户可以输入内容
  • 属性
    • 类型type
    • 其他name
  • 事件
    • onchange改写
    • onfocus聚焦
    • onblur失焦
  • 验证器
    • HTML5新增功能

其他输入标签

  • label
  • textarea
  • select+option

其他标签

  • canvas
  • video
  • audio
  • svg
avatar
文章
阅读
粉丝