HTML一些重难标签

141 阅读2分钟

1.a标签

1.1作用

<a> 元素(或称锚元素)可以通过创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

1.2属性

1.download

将网页下载到本地,很多浏览器不支持这个功能。使用时一定要加路径。

<a href="/images/baiduimage.jpg" download="baidu">

2.href的取值:

2.1网址:
google.com
google.com
//google.com

2.2路径:
/x/y/z
x/y/z
index.html
./index.html

2.3伪协议:

<a href="javaScript:alter(1);">javaScript伪协议,能使页面不会有任何改动.</a>
<a href="mailto:000000@qq.com">发送邮件</a>
<a href="tel:00000000">若在手机端,可以直接打电话</a>

2.4id HTML中a标签中href="#xxx",当点击后,页面会跳转到标签中id="xxx"的地方

3.target

该属性指定在何处显示链接的资源。

<a target="top">在顶部窗口打开</a>
<a target="self">在当前页面打开</a>
<a target="blank">在空白页打开网页</a>
<a target="parent">在父级窗口打开</a>
< a target="xxx">如果有个窗口叫xxx就直接打开,没有就创造一个并打开</a>

2.img标签

2.1作用

发出一个get请求,展示一张图片。

2.2事件

onload/onerror

 <img src="mianhuacao.jpg" alt="一堆草" id="zzz" width="360">
 <script>
     zzz.onload = function () {
         console.log("图片加载成功");
     };
     zzz.onerror = function () {
         console.log("图片加载失败");
     };
 </script>

ef290bed22aea83c694284a0c3eacb6.png

2.3响应

将图片大小调整为自适应屏幕大小

max-width:100%

2.4属性

src alt

3.form标签

3.1功能

发出get或post请求,刷新页面。

3.2属性

autocomplete 给出自动建议
action method target

4.table标签

4.1相关标签

thead表头
tbody表身
tfoot表尾
在写代码时一定要使用规范,表格的表头表身表尾一定要划分清楚。
tr表格中的一行
th一行的第一列,表格中的表头
td表格中的一个单元格

4.2相关样式

table-layout:auto;表设置表格布局算法
border-spacing:0px;相邻单元格的边框间的距离
border-collapse:collapse;相邻单元格间的边框合并

4.3例子

    table {
        table-layout: auto;
        border-spacing: 20px;
        border-collapse: collapse;
    }

    td,
    th {
        border: 1px solid;
    }
</style>

<body>
    <table>
        <thead>
            <tr>
                <th></th>
                <th>读书</th>
                <th>跑步</th>
                <th>打篮球</th>
                <th>敲代码</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>懒羊羊</th>
                <td>8</td>
                <td>7</td>
                <td>6</td>
                <td>5</td>
            </tr>
            <tr>
                <th>美羊羊</th>
                <td>6</td>
                <td>7</td>
                <td>6</td>
                <td>5</td>
            </tr>
            <tr>
                <th>喜羊羊</th>
                <td>2</td>
                <td>5</td>
                <td>3</td>
                <td>5</td>
            </tr>
            <tr>
                <th>沸羊羊</th>
                <td>8</td>
                <td>7</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>评价</th>
                <td>良好</td>
                <td>良好</td>
                <td>差</td>
                <td>良好</td>
            </tr>
        </tfoot>
    </table>
</body>

效果

53addfc1c024121635ca5fbbf45d5a3.png