阅读 103

HTML常用标签

<a> 标签

<a> 标签的作用

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

<a> 标签的属性

href

包含超链接指向的 URL。

href 属性的取值有:

  1. 网址
  • https://baidu.com

  • http://baidu.com

  • //baidu.com

推荐使用 //baidu.com 这一种写法,它会自动选着使用哪种协议。

  1. 路径
  • /a/b/c 以及 a/b/c

  • index.html 以及 ./index.html

  1. 伪协议

(1)javascript:代码;

可以直接执行 JS 代码。可以通过执行代码 <a href="javascript:;"></a>,使得点击 <a> 标签之后浏览器不进行任何操作。

需要注意的是:

<a href=""></a> 会让页面刷新;

<a href="#"></a> 会让页面跳转到顶部;

<a href=#xxx"></a> 会让页面跳转到 id=xxx 的元素。

(2)<a href="mailto:xxx@gmail.com"></a>

点击 <a> 标签会跳转到邮箱,然后给 xxx@gmail.com 发邮件。

(3)<a href="tel:123456789"></a>

点击 <a> 标签会拨号界面,自动填入号码。

target

target 属性指定在什么页面打开链接。

  • _self:在当前页面打开,这是默认值。
  • _blank:在新窗口打开(点击后,浏览器会新建一个窗口,在该窗口打开链接,且新窗口没有名字)。
  • _parent 在父级页面打开。
  • _top 在顶层页面打开。

target="xxx" 会在 xxx 窗口打开链接;若 xxx 窗口不存在,浏览器就新建一个名字为 xxx 窗口,在该窗口打开链接。

<iframe> 标签

<iframe> 标签用来在网页中内嵌其他网页。可以通过 widthheight 属性来控制 <iframe> 的宽和高。<iframe> 标签现在已经很少使用。

<table> 标签

表格以行(row)和列(column)的形式展示数据。完整的 <table> 标签包含 <thead><tbody><tfoot> 三个元素。

<table> 标签使用方式

表头使用 <th> 标签,数据使用 <td> 标签。

<table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>籍贯</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>上海</td>
            </tr>
            <tr>
                <td>王二</td>
                <td>深圳</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>空</td>
                <td>空</td>
            </tr>
        </tfoot>
    </table>
复制代码

效果如下:

image.png

两个表头的表格实现

如下图表格

image.png

可用下面代码实现:

<table>
    <thead>
        <tr>
            <th></th>
            <th>张三</th>
            <th>李四</th>
            <th>王二</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>语文</th>
            <td>88</td>
            <td>82</td>
            <td>91</td>
        </tr>
        <tr>
            <th>数学</th>
            <td>94</td>
            <td>89</td>
            <td>86</td>
        </tr>
        <tr>
            <th>英语</th>
            <td>77</td>
            <td>89</td>
            <td>98</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>总分</th>
            <td>259</td>
            <td>260</td>
            <td>275</td>
        </tr>
    </tfoot>
</table>
复制代码

<table> 标签常用的样式

  • table-layout:auto;:浏览器会根据表格内容长度自适应调节宽度。
  • table-layout:fixed;:表格的每一列会是等宽,宽度由该列第一行的单元格决定。
  • border-collapse:用来决定表格的边框是分开的还是合并的。值为 separate,每个单元格有独立边框,这是默认属性;值为 collapse,相邻单元格共用边框。
  • border-spacing:指定了相邻单元格边框之间的距离。

一般会设置 <table> 的默认样式为:

table {
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
}
复制代码

<img> 标签

作用

发起GET请求,展示图片。

属性

  • src:引入图片的地址。
  • alt:一般用来设定图片的文字说明,当图片无法展示时,图片位置上会显示该值。
  • widthheight:用来指定图片的宽和高,指定其中一项,另一个会自适应。

响应式

网页在不同的设备上,都可以进行良好的显示,叫做响应式设计。

<img> 标签的样式上加 max-width: 100%; 可以让图片自适应不同尺寸的屏幕。

<form> 标签

作用

发起 GET/POST 请求,然后刷新页面。

属性

  • action:服务器接收请求的 URL。
  • method:提交请求的方法(GET/POST)。
  • autocomplete:是否进行自动填充。可取的值有 off(不自动填充)和 on(自动填充)。
  • target:指定提交后刷新的页面在哪个窗口展示。

<input> 标签

作用

<input> 标签的作用是让用户输入内容。

属性

  • type="text":用来输入纯文本。
  • type="password":密码输入框,输入会被遮挡,输入字符会显示为 * 或者 ·
  • type="radio":单选框,用来选择其中一项。如下:
 <input type="radio" name="gender"> 男
 <input type="radio" name="gender"> 女
复制代码

image.png

  • type="checkbox":复选框(需加相同的 name)。
<input type="checkbox" name="fruit">苹果
<input type="checkbox" name="fruit">橘子
<input type="checkbox" name="fruit">香蕉
<input type="checkbox" name="fruit">草莓
复制代码

image.png

  • type="file":上传单个文件;type="file multiple":上传多个文件。
<input type="file">
<input type="file" multiple>
复制代码

218a33cfe1c8672d8c722846b366b07.png

<textarea> 标签

用来输入多行文本。默认可以随意拖动,可以加样式 resize:none 来使其固定,然后可以在样式里通过 widthheight 来指定宽高。

<textarea style="resize:none; width:500px; height:300px;"></textarea>
复制代码

<select> 标签

用来生成下拉菜单。

option
复制代码

image.png

注意事项

  1. <input><button> 的区别:
    <input> 里不能再有其他标签,
    <button> 里可以放任何东西。
  2. <form> 表单里 <input>name
  3. 一般不监听 inputclick 事件。
  4. form 里必须有一个 type=submit<input> 或者 <button> 才能出发 submit 事件。
文章分类
前端
文章标签