HTML常用标签

了吧诺布本

已于 2022-03-05 22:33:26 修改

阅读量196

点赞数

分类专栏：笔记文章标签： html

于 2022-02-27 14:16:02 首次发布

本文链接：https://blog.csdn.net/weixin_44422620/article/details/123163248

版权

笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

html 常用标签

a标签

a标签作用

跳转到外部页面
跳转到内部锚点
跳转到邮箱和电话

a的herf的取值

 <!-- a 属性 <a herf="" target="" ></a>
    href 超链接
    rel=noopener 防止一个bug
    -->
<!-- 在另一个页面打开链接 -->
 <a href="//baidu.com" target="_blank">超链接</a>
    <a href="a/b/c.html">C</a>
    <!-- 点击a标签就会执行javascript -->
    <a href="javascript:alert(1);">JavaScript伪协议</a>
    <!-- javascript:;  空的伪协议  点击a标签无事发生 -->
    <a href="javascript:;">空的伪协议</a>
    <!-- herf留空 点击a标签页面刷新 -->
    <a href="">刷新</a>
    <!-- 空链接 点击a标签（本页面打开）页面回到顶部 -->
    <a href="#">页面回到顶部</a>
    <!-- 点击a标签 返回到id="xxx"所在位置查看   -->
    <a href="#xxx">查看xxx</a>
    <!-- 点击a标签发邮件 -->
    <a href="mailto:1353008829@qq.com">发邮箱给Ting</a>
    <!-- 点击a标签打电话 -->
    <a href="tel:138xxxxxxxx">打电话</a>

a的target的取值

<!-- a 属性
    href 超链接
    target 选择哪一个窗口打开
     _blank 在空白页打开
     _self 默认值 在当前页面打开
     -top 在最顶层页面打开 有两个窗口能明显看出来效果
     -partent 在父级窗口打开
     target="xxx" 意思是如果有一个窗口叫xxx,则在xxx打开页面；如果没有，创建一个xxx窗口，页面都在xxx窗口打开
    rel=noopener 防止一个bug
    -->
    <a href="http://baidu.com" target="_blank">百度(在空白页打开)</a>
    <a href="http://baidu.com" target="_self">百度(在当前页面打开)</a>
    <a href="http://baidu.com" target="_top">百度(在最顶层页面打开)</a>
    <hr>
    <!-- 使用iframe后 可以让百度1在页面内xxx窗口打开 百度2在页面内yyy窗口打开 -->
    <a href="http://baidu.com" target="xxx">百度1</a>
    <a href="http://baidu.com" target="yyy">百度2</a>
    <hr>
    <iframe src="" name="xxx"></iframe>
    <hr>
    <iframe src="" name="yyy"></iframe>

table标签

table标签是一个块级标签，所有表格内容都要放在这个标签里面。
table标签内要包含 thead标签（表头）、tbody标签（表体）、tfoot标签（表尾）
这三个标签内可包含tr标签、th标签和td标签，tr标签表示表格的一行。th标签和td标签都用来定义表格的单元格，th标签是标题单元格，td标签是数据单元格。

<body>
    <table>
        <thead></thead>
        <tbody> </tbody>
        <tfoot>  </tfoot>
    </table>
</body>

table属性

 table {
            width: 600px;
            /* auto 表格及单元格的宽度取决于其包含的内容。*/
            table-layout: auto;
            /* fixed 表格和列的宽度通过表格的宽度来设置 */
            /* table-layout: fixed; */

            /* 控制表格间隙 */
            border-spacing: 0;
            /* 合并表格 */
            border-collapse: collapse;
            }

img标签

img标签用于插入图片。它是单独使用的，没有闭合标签,默认是一个行内元素，与前后的文字处在同一行。
img 属性 alt / height / width / src

alt属性
用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。

<img src="xxx.jpg" alt="示例图片">

height、width 属性
图片默认以原始大小插入网页，height和width 属性可以指定图片显示时的宽度和高度，单位是像素或百分比。注意，一旦设置了这两个属性，浏览器会在网页中预先留出这个大小的空间，不管图片有没有加载成功。不过，由于图片的显示大小可以用 CSS 设置，所以不建议使用这两个属性。一种特殊情况是，width属性和height属性只设置了一个，另一个没有设置。这时，浏览器会根据图片的原始大小，自动设置对应比例的图片宽度或高度。

<img src="xxx.jpg" width="400" height="300">

响应式图像

网页在不同尺寸的设备上，都能产生良好的显示效果，叫做“响应式设计”。响应式设计的网页图像，就是“响应式图像”
想做到响应式需要添加两点

设置图像最大宽度100%
添加以下meta:vp

 宽度是设备的宽度，默认缩放比例为1倍，最小缩放比例1倍.，最大缩放比例1倍,用户不准缩放
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">