11-【HTML全解】HTML重难点标签

本文链接：https://blog.csdn.net/abc465200/article/details/105327909

本文深入讲解HTML中的a、Table、img、Form等基础标签的使用方法及属性，包括超链接、表格布局、图片展示和表单提交等功能，涵盖常用属性如href、src、alt、action等，以及响应式设计、事件监听等高级应用。

摘要由CSDN通过智能技术生成

这里写目录标题

一 .先学习几个英语
二. a标签是什么
三.Table标签是什么
四.img标签怎么用
五.Form标签
感想

一 .先学习几个英语

hytype 超级的 target 目标 reference 引用
entrance 进入 frame 框架，边框 blank 空白
parent 父母之一 load 加载 canves 画布、加载

二. a标签是什么

a中href9种取值

href =hype reference 超链接
不能双击打开HTML：
法一：终端 yarn global add http-server 再http-server -c-1 网址后加/a-href.html
法二：终端 yarn global add pracel 再 parcel a-href.html

网址的三种：

<a href="https://baidu.com">超链接</a>
<a href=" http://baidu.com">超链接</a>
<a href=" //baidu.com">超链接</a>

常用第三种由于自由匹配可在控制台勾选 network - Preserve log来确定
2.伪协议3种

/a/b/c或者a/b/c
这不是文件的路径开头带不带/都代表http当前目录相对绝对路径
<a href="./a-href.html">c.html</a>或者 <a href="a-href.html">c.html</a>
都是当前目录

伪协议3种

javascript伪协议

 <a href="javascript:alert(1);">javascript伪协议</a>

常用于实现点击查看网页不变化

<a href="javascript:;">查看不变化</a>

因为即使为空为#都会有变化

<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>15</p>
    <p>16</p>
    <p>17</p>
    <p>18</p>
    <p>19</p>
    <p>20</p>
    <a href="https://baidu.com">超链接</a>
    <a href=" http://baidu.com">超链接</a>
    <a href=" //baidu.com">超链接</a>
    <a href="b/c/c.html">c.html</a>
    <a href="./a-href.html">c.html</a>
    <a href="javascript:alert(1);">javascript伪协议</a>
    <a href="javascript:;">查看不变化</a>
    <a href="">查看不变化为空</a>
    <a href="mailto:1429483153@qq.com;">发邮箱</a>
</body>

mailto:邮箱

<a href="mailto:1429483153@qq.com;">发邮箱</a>

tel:电话

<a href="tel:17601439455">href里打电话</a>

id href中不用写id 直接写内容

    <a href="#ccc">id</a>

a的target属性

_blank 新的空白页
_self 自身
_top 在最顶层分别在a/b/c各文件夹创index

 <iframe **width="800" height="200"** src="./b/b.html" frameborder="0"></iframe>

 <iframe width:500px width:300px src="/b/c/c.html" frameborder="0">嘻嘻嘻嘻</iframe>

<a href="//google.com" target="_top">top</a>

_parent 在它的上一层打开
程序员命名
此时是新建个xxx的标签打开百度
window.name

<a href="https://baidu.com" target="xxx">超链接</a>

控制点击不同按钮改变框架内容

    <a href="https://baidu.com" target="xxx">超链接</a>
    <a href="https://google" target="xxx">超链接</a>
    <hr>
    <iframe src="" name="xxx"></iframe>
    <hr>
    <iframe src="" name="yyy"></iframe>

iframe.name

三.Table标签是什么

1.主要为三个标签顺序写错还是按下面解析

        <thead></thead> 
        <tbody></tbody>
        <tfoot></tfoot>

2.内部包含三个标签

        <tr>     
            <th</th>
            <td></td>
        </tr>

table row 行 table head表行 table data表数据
3.table相关样式

table-layout:auto //根据个性化调节宽度
table-layout:fixed //根据平均分布宽度
border-collapse:collapse //边框单线
border-spacing：0 //间隔为0

4.table代码展示

    <style>
        table {
            table-layout: fixed;
            border-collapse: collapse;
            border-spacing: 0;
        }

        table,
        tr,
        td,
        th {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th></th>
                <th>小小红</th>
                <th>小红</th>
                <th>小红</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>数学</th>
                <td>88</td>
                <td>88</td>
                <td>88</td>
            </tr>
            <tr>
                <th>数学</th>
                <td>88</td>
                <td>88</td>
                <td>88</td>
            </tr>
            <tr>
                <th>数学</th>
                <td>88</td>
                <td>88</td>
                <td>88</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>数学</th>
                <td>88</td>
                <td>88</td>
                <td>88</td>
            </tr>
        </tfoot>
</body>

四.img标签怎么用

作用
发送一个get请求，展示一张图片
属性
src 来源于source 资源地址
alt 图片失败显示文字
width/height 设置一个即可高/宽按图片比例自动调节
事件主要在js中onload onerror
进行图片加载监听在文件夹加404图片

<body>
    <img **id="xxx"** src="毕业时间安排1.png" alt="狗子" height="50">
    <script>
        **xxx.onload** = function () {
            console.log("下载成功");
        }
        **xxx.onerror** = function () {
            console.log("下载失败");
            xxx.src = "/404.png";
        }
    </script>
</body>

响应式手机

    <style>
        *img {
            max-width: 100%;
        }
    </style>

在这里插入图片描述

五.Form标签

作用
发送get/post请求然后刷新页面
属性
action 提交的地址
method get/post
autocomplete 自动填充内容 on显示 off不显示

    <form action="yyy" method="POST" **autocomplete="on"**>
        <input **name="username"** type="text">
        <input type="submit">
    </form>

在这里插入图片描述
4. target属性
用来把刷新的页面放在哪个地方
可以链接iframe中的name 与前面a标签类似
5. 区别input和button标签
button里面可以放其他标签，都可以提交表单刷新页面

        <input type="submit" value="搞起">
        <button type="submit">
            <!-- <strong>提交</strong> -->
            <img width="50" src="/404.png" alt="">
        </button>

在这里插入图片描述
记住这句话表单必须要有type=submit才能提交
6. type属性

   <form action="yyy" method="POST" autocomplete="on" target="a">
        <input name="username" type="text">
        <input type="submit" value="搞起">
        <button type="submit">
            <!-- <strong>提交</strong> -->
            <img width="50" src="/404.png" alt="">
        </button>
        <input type="color" name="" id="">
        <input type="button" value="ass">
        <input type="checkbox" name="" id="">hahaha
        <input type="checkbox" name="" id="">hahaha
        <input type="checkbox" name="" id="">hahaha
        <input type="checkbox" name="" id="">hahaha
        <input type="date" name="" id="">
        <input type="datetime" name="" id="">
        <input type="email" name="" id="">
        <input type="submit" value="11">
        <input type="file" name="" id="">
        <input type="file" name="" id="" multiple>
        <input type="hidden" name="">
        <hr>
        <input type="image" src="/404.png" alt="">
        <input type="radio" name="gender" id="">男
        <input type="radio" name="gender" id="">女
        0<input type="range" name="" id="">100%
        <input type="tel" name="" id="">
        <input type="url" name="" id="">
        <input type="submit" value="提交">
        <select name="" id="">
            <option value="">-请选择-</option>
            <option value="1">星期一</option>
            <option value="1">星期一</option>
        </select>
        <textarea style="resize: none" id="" cols="30" rows="10"></textarea>
    </form>

需要注意的是file多个文件上传下拉多选单选name相同 textarea清楚样式等等输入input一般都有提示
7. 事件

onchange
onfocus //鼠标放上时
onblur //脱离鼠标

总结
一般不监听input的click事件
form中input有name
表单必须要有type=submit才能提交

感想

HTML之前学过现在重新学习又像是发现了新大陆所以真的是知识渊源流长细节决定成败!