《HTML常用标签》

菜鸟奋飞之路
194 阅读3分钟

1. a 标签

<a href="//baidu.com" >a标签的href用于写一个链接</a>

1.PNG

2.PNG

href的取值：

·网址(eg://baidu.com) 跳转外部页面

·href的路径

·herf的伪协议：{

javascript: ;做一个a标签，有什么都没效果 <<a href="javascript:;">查看</a>

mailto:邮箱 <a href="mailto:mingtao2022@163.com">发邮件给某人</a>

tel:手机号 <a href="tel:110">打电话给110</a>

·id href=### 跳转指定id

   <p>1</p>
   <p>2</p>
   <p ID="XXX">3</p>
   <p>4</p>
   <a href="#XXX">查看xxx</a>

target的取值

内置名字：

_blank 空白页面打开 <a href="//baidu.com" target="_blank">a标签的href用于写一个链接,在空白页面打开</a>

_top 最上面 <a href="//baidu.com" target="_top">a标签的href用于写一个链接,在最上面打开</a>

_parent 当前链接的上一层打开<a href="//baidu.com" target="_parent">a标签的href用于写一个链接,在前链接的上一层打开</a>

_self 在当前自己页面打开<a href="//baidu.com" target="_self">a标签的href用于写一个链接,在当前自己页面打开</a>

#程序员自己命名

2、iframe标签（内嵌窗口）

3、table 标签

  <table>
    <thead>
        <tr>
            <th></th>
            <th>红</th>
            <th>黄</th>
            <th>蓝</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>数学</th>
            <td>60</td>
            <td>60</td>
            <td>60</td
        </tr>
        <tr>
            <th>语文</th>
            <td>70</td>
            <td>70</td>
            <td>70</td
        </tr>
        <tr>
            <th>英语</th>
            <td>80</td>
            <td>80</td>
            <td>80</td
        </tr>
       
    </tbody>
 
    <tfoot>
        <tr>
            <th>总分</th>
            <td>200</td>
            <td>200</td>
            <td>200</td
        </tr>   
    </tfoot>
   </table>

相关标签 thead、tbody、tfoot、tr、td、th

  • 相关样式：

table-layout:用于布局表格单元格，行和列的算法{

auto的宽度取决于包含的内容

  <style>
    table{
      width:600px;
      table-layout: auto;
    }
  </style>

9.PNG

fixed由表格设的宽度来设定

  <style>
    table{
      width:600px;
      table-layout: fixed;
    }
    
  </style>

8.PNG }

border-collapse:单元格是否合并

<style>
    table{
      width:600px;
      table-layout: auto; 
      border-collapse:collapse;
    }
    td,th{
     border: 1px solid green;
    } 
    
  </style>

12.PNG border-spacing:之间的距离

  ```  
 <style>
table{
  width:600px;
  table-layout: auto;
  border-spacing: 0;
}
td,th{
 border: 1px solid green;
}
```

10.PNG

4、img 标签

<img src="121.png" alt="表情包" width="400px">

发出get 请求，获得一张图片

src获取图片路径，alt当图片加载失败，会出现alt里面的文字，width设置宽度

  • 事件：

成功事件onload/失败事件onerro

响应式：max-width:100%(固定)

form标签

<form action=" autocomplete="on" method="get/post" target=""></form> autocomplete：提示信息 method:将表单中的数据传送给服务器进行处理;post:提交数据到服务器;get:从服务器得到数据；target：在何处打开action；action:值为URL. 该属性规定当提交表单时向何处发送表单数据;

  • 事件：onsubmit

input标签

  • 作用：让用户输入内容

  • type:

  • button 按钮 (普通按钮 点击啥用没有) 可以放置文本或图像 <input type="button" value="普通的标签">

  • sumbit 按钮 按钮不含数据，作用就是用户交

  • checkout 定义复选框 <input type="checkout" value="我爱中国">

  • email邮件 可以使用getElementById()方法访问具有type =“ email”属性的输入元素

  • file 上传文件元素

  • hideen 隐藏 收集或发送信息，以利于被处理表单的程序所使用，用户不可见

  • number 数字 <input type="number" min="0.00" max="100.00" step="0.01" /> min="0" 最小值

min="100" 最大值

step="1"  点击右边上下按钮每次增加或减少的值

  • text 文本

  • password 密码 用来输入密码的单行文本框(文本框中的内容将被显示为*)

  • radio 单选 需要同一单选中的name相同

  • search 搜索框

  • tel 联系方式

  • 其它

name 名字

autofocus 自动将焦点设置到该文本框 指定页面加载时输入字段必须自动获得焦点

checked 默认勾选

disabled 标签失效 禁用元素

maxlength 最大长度

pattern 验证表单输入的内容

value 值

placeholder 户名框未输入内容时,默认显示的灰色文字

  • 事件：

onchage 当用户输入改变

onfocus 当用户把鼠标集中到它身上

onblur 当鼠标从里面出来

  • 验证器： required 必须要填 HTML5

  • 其他输入标签 select+option 下拉选择

textarea 文本域

label 表单元素定义标注

  • 注：一般不监听input的click事件

form里 input 要有name

form里 要放一个type=submit 才能触发sumbit事件

  • input(submit)与button(submit)的区别

input里面不能添加任何东西

button里面可以添加

avatar
文章
阅读
粉丝