HTML的常用标签

136 阅读2分钟

a标签

HTML<a>元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

<body>
  <div>
      <h1>我是a标签</h1>
      <a href="//baidu.com">点击访问百度</a>
      <a href="/a/a.html">链接a.html</a>
      <a href="javascript:alert(1)" ;>点击我有惊喜</a>
      <a href="mailto:renshisan@qq.com">发邮件给荏狸十三</a>
      <a href="https://google.com" target="_top">google</a>
      <div>
          <iframe src="/a/a.html" frameborder="0"></iframe>
      </div>
  </div>
</body>

属性

href //超级链接,链接到一个地址
target //新窗口打开超级链接。

Img标签

HTML的 lmg标签主要是插入一张图片。作用是发出一股get请求,展示一张图片。

<div>
      <img id=xxx width="200" src="qianduan.png" alt="前端图片">
      <script>
          xxx.onload = function () {
              console.log("图片加载成功");
          }
          xxx.onerror = function () {
              console.log("图片加载失败");
              xxx.src = "/404.png";
          };
      </script>
</div>

属性:

alt//裂图或者图片加载失败则会显示alt里面的文字内容。
height //高度。
width //宽度,所有的图片最大化100%有利于手机之间的预览。
src //图片加载失败的时候进行挽救,当判断到图片加载失败的时候则运行“src”语句调用404替换图片。
Onload //加载成功则调用Onload的代码
Onerror //加载失败则调用Onerror的代码

table标签属性

HTML的 table元素表示表格数据 — 即通过二维数据表表示的信息。表格标签,table标签里面只能有三个标签,是一个块级容器标签。所有的表格内容都要放在这个标签里面。

 <div>
       <h1>对比参数</h1>
       <table>
           <thead>
               <th></th>
               <th>美女A</th>
               <th>美女B</th>
               <th>美女C</th>
           </thead>
           <tbody>
               <tr>
                   <th>数学</th>
                   <td>100</td>
                   <td>45</td>
                   <td>60</td>
               </tr>
               <tr>
                   <th>语文</th>
                   <td>100</td>
                   <td>60</td>
                   <td>80</td>
               </tr>
               <tr>
                   <th>英语</th>
                   <td>99</td>
                   <td>100</td>
                   <td>30</td>
               </tr>
           </tbody>
           <tfoot>
               <tr>
                   <th>总分</th>
                   <td>200</td>
                   <td>200</td>
                   <td>200</td>
               </tr>
           </tfoot>
   	</table>
   </div>
</body>

对比参数

荏狸十三 肉球 周一
数学 100 45 60
语文 100 60 80
英语 99 100 30
总分 200 200 200
table //
thead //表格头部,表示一组定义表格的列头的行。
tbody //内容主体封装了一组表行(``````元素),表示它们包含表的主体(``````)。
tfoot //表格尾部,定义了一组表格中各列的汇总行。
tr //表示tbody里面的一行th //表示表格的头部。
td //表格的内容。

样式

border-spacing: 0px; //表示表格间距为0,调整表格的间隙。

table-layout: auto; //auto表示会自动计算每一排的列和行的间距。

border-collapse: collapse; //让表格合并。