阅读 42

HTML笔记-HTML常用标签

提要:

  1. a 标签
  2. iframe标签
  3. table 标签
  4. img 标签
  5. form 标签
  6. input 标签
  7. 其他标签

一. a 标签的用法

作用:超链接

1. 属性

1) href 超链接

<a href="https://taobao.com">
    TB
</a>
复制代码

取值
① 网址

② 路径

  • href="/a/b/c.html" 虽为绝对路径格式,但表示在当前开启http服务的目录下找文件
  • href="a/b/c.html" 相对路径格式,在当前目录下找文件
  • href="index.html" 或 href="./index.html"

③ 伪协议

  • JavaScript伪协议

href="javascript:alert(1);" 执行alert(1)
href="javascript: ;" "无事发生(不自动刷新、不自动滚回顶部)

  • id

href="#xxx"

  • 邮箱

href="XXXXX@xxx.com"

  • 电话

href="tel:123456789xx"

即a标签可实现跳转到外部页面、内部锚点、邮箱和电话。

2) target 指定在某页面打开超链接

<a href="https://taobao.com" target="_blank">
    TB
</a>
复制代码

取值
① 内置取值

  • _blank 在新窗口打开
  • _self 在当前窗口打开
  • _top 在最顶级窗口打开
  • _parent 在上级窗口打开

② 自命名

  • window的name

target="yyy"
若存在名为“yyy”的窗口,则在该窗口打开;
若不存在则创建名为“yyy”的窗口,然后打开

  • iframe的name

提供一种使用场景:
在一个页面打开多个网站

<a href="//taobao.com" target="xxx">
    TB
</a>
<a href="//baidu.com" target="xxx">
    BD
</a>
<iframe style="border:none"; width:100%; height:800px; src="" name="xxx">
</iframe>
复制代码

3) download 下载页面 (有些浏览器不支持)

<a href="https://taobao.com" download>
    TB
</a>
复制代码

4) rel=noopeaner (后续补充)

二. iframe 标签 (不推荐)

作用:内嵌窗口

三. table 标签的用法

作用:展示表格

1. 结构

<table>
    <thead>……</thead>
    <tbody>……</tbody>
    <tfoot>……</tfoot>
</table>
复制代码

1) thead

<thead>
    <tr>                 新建一行(table row)
        <th>英语</th>    表头用th
        <th>翻译</th>
    </tr>
</thead>
复制代码

2) tbody

<tbody>
    <tr>
        <td>hyper</td>    表中用td
        <td>超级</td>
    </tr>
    <tr>
        <td>target</td>
        <td>目标</td>
    </tr>
</tbody>
复制代码

3) tfoot

<tfoot>
    <tr>
        <td></td>
        <td></td>
    </tr>
</tfoot>
复制代码

2. 样式

1) 单元格宽度

<style>
    table{
        table-layout:auto;    自动算法
        table-layout:fixed;   按首行等宽
    }
</style>
复制代码

2) 单元格边框

<style>
    td,th{
        border:1px solid blue;      加边框
    }
    table{
        border-spacing:20px;        指定相邻单元格边框之间的距离
    }
复制代码
<style>
    td,th{
        border:1px solid blue;      加边框
    }
    table{
        border-collapse:collapse;   合并相邻单元格边框
        border-collapse:separate;   分隔相邻单元格边框
    }
复制代码

四. img 标签的用法

作用:发出GET请求,展示图片

1. 属性

1) alt 图片加载失败时,提示图片信息

<img src="猫咪.PNG" alt="一只奶猫">
复制代码

2) width,height 设置图片尺寸

<img src="猫咪.PNG" width="400">
<img src="猫咪.PNG" height="600">
复制代码

注:不要使图片变形

3) src 图片地址

<img src="网址、路径(/文件)">
复制代码

2. 事件 (JavaScript)

1) onload 图片加载成功时调用

<img id="xxx" src="猫咪.PNG">
<script>
    xxx.onload=function(){
        console.log("图片加载成功");
    };
</script>
复制代码

2) onerror 图片加载失败时调用

<img id="xxx" src="猫咪.PNG">
<script>
    xxx.onerror=function(){
        console.log("图片加载失败");
        xxx.src-"/404.jpg";            加载失败时放一张“挽救图”
    };
</script>
复制代码

3. 响应式

<style>
    img{
        max-width:100%;
    }
</style>
复制代码

五. form 标签的用法

作用:发送GET或POST请求,然后刷新页面

1. 属性

1) action 指定请求页面

<form action="/xxx">
复制代码

2) method 指定用GET/POST请求

(不写默认用GET请求)

<form action="/xxx" method="POST">
复制代码

3) autocomplete 自动填充

<form action="/xxx" autocomplete="on">    浏览器可自动补全条目
<form action="/xxx" autocomplete="off">   浏览器可能不会自动补全条目
<input name="username" type="text">
<input type="submit">
复制代码

4) target 指定在某页面打开表单

<form action="/xxx" target="_blank">    
复制代码

2. 事件

onsubmit 用户提交时触发

六. input 标签的用法

作用:用户输入

1. 属性

1) type 类型

<input type="text">       输入文本
<input type="color">      输入颜色
<input type="password">   输入密码
<input type="email">      输入邮箱
<input type="tel">        输入电话
<input type="number">     输入数字
<input type="search">     输入搜索
<input type="hidden">     看不见的输入
复制代码

单选

<input type="radio" name="gender"><input type="radio" name="gender">复制代码

多选

<input type="checkbox" name="爱好">唱跳
<input type="checkbox" name="爱好">Rap
<input type="checkbox" name="爱好">篮球
复制代码

上传文件

<input type="file">            上传一个文件
<input type="file" multiple>   上传多个文件
复制代码

提交

<input type="submit">
<input type="submit" value="冲鸭">   提交按钮显示为“冲鸭”
复制代码

<button type="submit">冲鸭</button>
<button type="submit"><strong>冲鸭</strong></button>   可以再套其他标签,input不可以
复制代码

2) 其他

value,name,autofocus,checked,disable,maxlength,pattern,placeholder

2. 其他输入标签

1) textarea 标签

作用:输入多行文本

<textarea>……</textarea>   可用鼠标拖动文本框改变大小
<textarea style="resize:none; width:50%; height:100px;">……</textarea>   固定文本框大小
复制代码

2) select + option 标签

作用:提供选项

<select>
    <option value="0"> -请选择- </option>
    <option value="1">星期一</option>
    <option value="2">星期二</option>
    <option value="3">星期三</option>
</select>
复制代码

3) label 标签 (后续补充)

3. 事件

1) onchange 用户输入改变时触发

2) onfocus 用户鼠标聚焦到某处触发

3) onchange 用户从某处出来时触发

4) 验证器 (HTML5新增功能)

如:required表示必须输入,如未输入就提交则会弹出提示要求输入

<input name="username" type="text" required>
复制代码

七. 其他标签 (后续补充)

video,audio,canvas,svg

文章分类
前端
文章标签