阅读 184

HTML常用标签(html常用标签及属性)

在预览自己写的页面时,为了减少BUG,不要用双击打开链接的方式开启页面,
用以下方式打开:

  1. 安装 http-server

    • 用命令行http-server -c-1. 通过ctrl+点击链接打开

    • 并在开启的地址后加上文件名

  2. 安装 parcel

    • 命令行 parcel 文件名打开

a标签

a标签的属性

1.href(hyper ref)的取值

  • 网址

    • https://google.com

    • http://google.com

    • //google.com (无协议网址),浏览页面时,需先在浏览器打开开发者工具->Network->preserve log 勾选,这种方法会自动选择适用http还是https,防止bug

  • 路径

    • 绝对路径 /a/b/c

    • 相对路径 a/b/c 用http开启服务,在哪里开启,哪里就是根目录

    • index.html和./index.html 在当前目录下找文件

  • 伪协议

    • 打电话给指定号码

    • 发送邮件给指定邮箱

    • 用途

    • javascript:代码;

    • mailto:邮箱

    • tel:手机号

    1. javascript:;空的伪协议,点击之后什么事都不会发生,不刷新也不会返回顶部

    2. 执行一段没有意义的JS代码

  • id

    • href=#xxx 跳转到指定标签

2.target的取值

  • 内置名字

    • PS.不是所有网页都支持iframe

    • _blank 新的页面打开

    • _self 默认值,当前页面打开

    • _top 当引用iframe(内嵌窗口)时,不在内嵌窗口打开,而是在最顶部窗口打开

    • _parent 当引用多个iframe时,点击链接会在该链接所在窗口的父级窗口打开

  • 程序员命名

    • <iframe src="" name="xxx"></iframe>

    • 对应上面的``target="xxx"`,便可点击上面链接时,在内嵌窗口打开

    • 一个页面同时有多个链接时,给这些标签同时添加属性target="xxx"

    • 点击这些链接时,都会在同一个窗口打开

    • window的命名

    • iframe的命名

3.其他

  • a的download

    • 作用:不是打开页面,而是下载页面

    • 问题: 不是所有浏览器都支持,尤其是手机浏览器可能不支持

  • rel=noopener

    • 作用: 防止BUG

a标签的作用

  • 跳转外部页面

  • 跳转内部锚点

  • 跳转到邮箱或电话等

table标签

相关标签

  • thead

    • th(table head)表头

    • tr(table row) 一行

  • tbody

    • tr

    • td(table data) 数据

  • tfoot

    • tr

    • td

以上三个标签的位置顺序可以随意,html会自动更改

简单示例

<table>         <thead>           <tr>              <th>英语</th>              <th>翻译</th>           </tr>         </thead>         <tbody>           <tr>             <td>frame</td>             <td>边框</td>           </tr>           <tr>             <td>canvas</td>             <td>画布</td>           </tr>           <tr>             <td>reference</td>             <td>引用</td>           </tr>         </tbody>         <tfoot>             <tr>                 <td>空</td>                 <td>空</td>               </tr>           </tfoot>       </table> 复制代码

实现如下效果

简单table.png

两个表头

<table>         <thead>             <tr>                 <th></th>                 <th>王小明</th>                 <th>小红</th>                 <th>小刚</th>             </tr>         </thead>         <tbody>             <tr>                 <th>数</th>                 <td>61</td>                 <td>91</td>                 <td>85</td>             </tr>             <tr>                 <th>语</th>                 <td>79</td>                 <td>82</td>                 <td>92</td>             </tr>             <tr>                 <th>英</th>                 <td>100</td>                 <td>97</td>                 <td>87</td>             </tr>         </tbody>         <tfoot>             <tr>                 <th>总分</th>                 <td>240</td>                 <td>270</td>                 <td>264</td>             </tr>         </tfoot>     </table> 复制代码

表头用<th>表示,数据用<td>表示 效果如下:

两表头.png

相关样式

  • table-layout

    • table-layout:auto 根据不同内容制定不同宽度

    • table-layout:fixed 所有内容宽度都尽量相等

  • border-collapse

    • 用来决定表格表框分开还是合并

  • border-spacing

    • 调整表格间隙

示例(table的常用样式)

 <style>         table{         width:600px;         table-layout: auto;         border-collapse: collapse;         border-spacing: 0;         }         td,th{           border:1px solid red         } </style> 复制代码

效果如图:

常用table样式.png

img标签

作用

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

属性

  • src  图片地址

  • alt  图片加载失败时,会显示出alt里添加的内容以备用

  • height 只写高度,宽度会自适应

  • width 只写宽度,高度会自适应

    • 如果两者都写图片尺寸可以自定义,但图片会变形,所以一般写其一即可

事件

  • onload JS监听加载成功

  • onerror JS监听加载失败

例子(测试时使用)

<img src="picture.jpg" alt=""> <script>   xxx.onload=function(){     console.log("加载成功")   };   xxx.onerror=function(){     console.log("加载失败")     xxx.src="Alternate-picture.jpg";   }; </script> 复制代码

可以在控制台查看加载成功还是失败,当失败时,会通过xxx.src="Alternate-picture.jpg";加载出一张备用图片

响应式

  • max-width:100% 自适应不同屏幕大小

* {       margin: 0;       padding: 0;       box-sizing: border-box;   }   img {       max-width: 100%;   } 复制代码

form标签

作用

发get或post请求,然后刷新页面

属性

  • action 控制请求哪个页面

  • method 控制请求方式用get还是POST

  • target 与a标签用法类似

  • autocomplete 自动填充

    • <input name="username" type="text">在input里加上username之后

    • <form action="/xxx" autocomplete="on">

    • 会根据用户之前填写过的内容给出提示

    • autocomplete="off" 则不会

Input的submit和button的submit区别

  • input 里面不能含其他标签

  • button 里面可以包含其他标签

<form action="/xxx" autocomplete="on"> <input name="username" type="text"> <input type="submit" value="这是input"> <button type="submit">     <strong>这是button</strong> </button> 复制代码

效果如图:

input-button.png

input标签

作用

让用户输入内容

常用属性

  • text 输入文本

  • color 选择颜色

  • password 输入密码

  • radio 单选

    • 二选一:给两个input相同的name,例:

<input type="radio" name="gender"> 男 <input type="radio" name="gender"> 女 复制代码

  • checkbox 复选

    • 也需给相同的name

<input type="checkbox" name="hobby" id="">琴 <input type="checkbox" name="hobby" id="">棋 <input type="checkbox" name="hobby" id="">书 <input type="checkbox" name="hobby" id="">画 复制代码

  • hidden 隐藏

    • 给JS自动填充一些id,字符串用的

  • file 上传文件

    • <input type="file"> 上传一个文件

    • <input type="file" multiple> 上传多个文件

事件

  • onchange 用户输入改变触发

  • onfocus 把鼠标集中在标签上面时触发

  • onblur 把鼠标从标签上移开时触发

验证器

  • HTML5新增功能

    • <input type="text" required>

    • 用户必须填写该栏内容,才能提交

其他标签

  • select+option 选择

<select name="week" id="">     <option value="">- 请选择 -</option>     <option value="1">星期一</option>     <option value="2">星期二</option>     <option value="3">星期三</option> </select> 复制代码

效果如图

选择.png

  • textarea 多行文本输入

    • 默认可拖动文本框大小,可用CSS固定大小

<textarea style="resize:none; width:50%; height:300px;"></textarea> 复制代码

注意事项

  • 一般不监听input的click事件

  • form里面的input要有name

  • form里面要放一个含有type=submit属性的标签,才能触发submit事件


作者:PrayWang
链接:https://juejin.cn/post/7028768726551887885


文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐