1/29 HTML常用标签

英语小课堂

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:;
	伪协议
    空伪协议阻止页面刷新

	
    发邮件给XXX

	
    打电话给谁

	
	

跳转到这里

跳转
target 页面打开方式
内置样式
    
	<a href="https://www.baidu.com/" target="_blank">这是一个网页 在新的页面打开a>
    <a href="//www.baidu.com/" target="_top">在最顶层窗口打开a>

    <div style="width: 800px;height: 400px;">
    <iframe src="iframe01.html" frameborder="0" width="800px" height="300px">iframe>
    div>

    <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
	google
    baidu
    

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>errortd>
                <td>错误td>
            tr>
            <tr>
                <td>looktd>
                <td>td>
            tr>
            <tr>
                <td>errortd>
                <td>错误td>
            tr>
        tbody>
        <tfoot>
            <tr>
                <td>td>
                <td>td>
            tr>
        tfoot>
    table>

img 标签

小贴士:

​ 永远不能让图片变形

    <img id="xxx" src="images/hua.jpg" 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里面可以有任何东西有任何标签

    
    <form action="/xx" method="POST" autocomplete="on" target="_blank">
        <input type="text" name="username" id="">
        <input type="submit" value="提交咯01">
        
        <button type="submit">
            <strong>提交咯02strong>
        button>
        <hr>
        <input type="password" name="" id="">
        <hr>
        <input type="radio" name="gender" id=""><input type="radio" name="gender" id=""><hr>
        
        <input type="checkbox" name="hobby" id=""><input type="checkbox" name="hobby" id=""><hr>
        
        <input type="file" name="" id="" multiple>
        <hr>
        
        <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>
        
    form>
小贴士

​ 一般我们不监听input的click事件

​ form里面的input要有name

​ form里面放一个 type="submit"才能触发submit事件

感想

相对于之前学的常用标签的基础上又学习了很多。单独的标签上的用法了解到了更多和很多标签的注意事项。


资料来源:饥人谷

本文为贰贰的原创文章,著作权归本人和饥人谷所有,转载务必注明来源

你可能感兴趣的:(基础前端,html)