1/29 HTML常用标签-CSDN博客

本文链接：https://blog.csdn.net/m0_53364469/article/details/113399120

英语小课堂

hyper 超级 target 目标 reference 引用 frame 边框 error 错误

blank 空白 parent 父母 self 自己 load 加载 canvas 画布

a标签

小贴士：

命令行执行 yarn global add http-server

http-server -c-1 然后点击一个地址在输入自己要打开网页的名字

或者执行 yarn global add parcel 然后用 parcel 加网页名字打开

属性

href 超级链接作用：取值网址路径伪协议 id href=#xxx

    <!-- 伪协议：-->
	javascript:;
	<a href="javascript:alert('你好');">伪协议</a>
    <a href="javascript:;">空伪协议阻止页面刷新</a>

	<!--mailto:邮件地址	发邮件给谁-->
    <a href="mailto:xxx@qq.com">发邮件给XXX</a>

	<!--tel:手机号	打电话给谁-->
    <a href="tel:12345678901">打电话给谁</a>

	<!--id	href=#xxx-->
	<p id="xxx">跳转到这里</p>
    <a href="#xxx">跳转</a>

target 页面打开方式

内置样式

    
	<a href="https://www.baidu.com/" target="_blank">这是一个网页 在新的页面打开</a>
    <a href="//www.baidu.com/" target="_top">在最顶层窗口打开</a>
<!-- 主页  
    解释 _self 和 _parent 的用法
    主页里面创建了一个一个盒子 用iframe标签引用其他标签里面的内容 
	注释：iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
-->
    <div style="width: 800px;height: 400px;">
    <iframe src="iframe01.html" frameborder="0" width="800px" height="300px"></iframe>
    </div>
<!-- 
    第一个链接页面 在里面链接了一个百度网页 点击百度网页就会在自身的盒子内打开一个网页
	下面又链接了第二个网页 用_parent 跳转就会在他的父盒子即parents类盒子打开链接页面
-->
    <body style="background-color: brown; ">
        我是iframE01 里面有个a标签
        <div class="parents">
            <a href="//www.baidu.com/" target="_self">链接</a>
            <iframe src="iframe02.html" frameborder="0">这是第二个</iframe>
        </div>
    </body>
<!-- 第二个链接页面-->
    <body style="background-color: green; ">
        我是iframE02 里面有个a标签
        <div>
            <a href="//www.baidu.com/" target="_parent">链接</a>
        </div>
    </body>

程序员样式 name 组合 iframe

	<a href="//google.com" target="xxx">google</a>
    <a href="//www.baidu.com/" target="xxx">baidu</a>
    <hr />
    <iframe style="border: none;  width: 600px ; height: 300px;" src="" name="xxx"></iframe>
    <hr />

download 下载 rel=noopener

table标签

    <style>
        table {
            /* auto 根据内容调整宽高 */
            table-layout: fixed;
            /* 是否合并 */
            border-collapse: collapse;
            /*控制表格与表格之间的距离  */
            border-spacing: 20px;
        }
        
        th,
        td {
            border: 1px solid red;
        }
    </style>
    <table>
        <thead>
            <tr>
                <th>英语</th>
                <th>翻译</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>error</td>
                <td>错误</td>
            </tr>
            <tr>
                <td>look</td>
                <td>看</td>
            </tr>
            <tr>
                <td>error</td>
                <td>错误</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>空</td>
                <td>空</td>
            </tr>
        </tfoot>
    </table>

img 标签

小贴士：

永远不能让图片变形

    <img id="xxx" src="images/hua.jpg" alt="这是一朵花">
    <!-- 图片加载失败 用 alt描述图片 -->
    <script>
        // 事件 onload onerror 
        xxx.onload = function() {
            console.log("图片加载成功");
        }
        xxx.onerror = function() {
            xxx.src = '/images/huacopy.jpg';
        };
    </script>

form标签和input标签

小贴士：

一个form表单必须要有一个标签含有 type=“submit” 才可以提交否则默认提交

input :submit和button有什么区别

input里面不能再有内容 button里面可以有任何东西有任何标签

    <!-- autocomplete 自动填充 
         target 我要提交到那个页面
	     method 必须选中 POST/GET
	-->
    <form action="/xx" method="POST" autocomplete="on" target="_blank">
        <input type="text" name="username" id="">
        <input type="submit" value="提交咯01">
        <!-- button不写 type="submit" 默认就是 type="submit" -->
        <button type="submit">
            <strong>提交咯02</strong>
        </button>
        <hr>
        <input type="password" name="" id="">
        <hr>
        <input type="radio" name="gender" id="">男
        <input type="radio" name="gender" id="">女
        <hr>
        <!-- 同一个name就表明他们是一组的 -->
        <input type="checkbox" name="hobby" id="">唱
        <input type="checkbox" name="hobby" id="">跳
        <hr>
        <!-- multiple 同时上传多个文件 -->
        <input type="file" name="" id="" multiple>
        <hr>
        <!-- 看不见的 给机器留的 不是给我们用的 自动填一些ID /字符串-->
        <input type="hidden" name="">
        <hr>
        <textarea name="" id="" cols="30" rows="10" style="resize: none; width: 50px; height: 50px;"></textarea>
        <hr>
        <select name="" id="">
            <option value="">-请选择-</option>
            <option value="1">星期一</option>
            <option value="2">星期二</option>
        </select>
        <!-- 事件
        onchange/onfocus/onblur
        -->
    </form>