Web前端从开始到入门（5）

最新推荐文章于 2024-06-12 11:13:48 发布

SHniangJiu

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量70

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/SHniangJiu/article/details/128066745

版权

60.strong与b、em与i

strong和em都是表示强调的标签，表现形态为文本加粗和斜体。b和i标签同样也表示文本加粗和斜体。
区别：strong和em是具备语义化的，而b和i是不具备语义化的。

61.引用标签

blockquote：引用大段的段落解释
q：引用小段的短语解释
abbr：缩写或首字母缩略词
address：引用文档地址信息
cite：引用著作的标签

<p>
        <abbr title=""></abbr>
</p>

61.iframe嵌套页面

iframe元素会创建包含另外一个文档的内联框架（即行内框架）

frameborder：规定是否显示框架周围的边框
width：定义iframe宽度
heijht：定义iframe高度
scrolling：规定是否在iframe中使用滚动条
scr：规定在iframe中使用url
srcdoc：规定在iframe中显示的页面内容
应用场景：数据传输、共享代码、局部刷新、第三方介入等。

62.br与wbr标签

br标签表示换行操作，而wbr标签表示软换行操作

 <p>
        isuhfuiawhfwuifhuiahfuii suihfiu<wbr>hfwuihfui<wbr>hfviruh bhedfbnvfdbvkaeiuorawjkn
    </p>

63.pre标签与code标签

pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。

只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是吧文本变成等宽字体，但它暗示着这段文本是源程序代码。

64.map标签与area标签

给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形。

<img src="" alt="" usemap="#star">
    <map name="star">
        <area shape="rect" coords="123 123 321 321" href="#" alt="">矩形，coords左上角和右上角坐标
        <area shape="circ" coords="100 100 50" href="#" alt="">圆形，coords中心点坐标和半径
        <area shape="poly" coords="111 111 222 222 333 333 444 444 555 555" href="#" alt="">多边形，coords各点坐标
    </map>

65.embed与object标签

embed和object都能表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器。
object元素需要配合param元素一起完成。

<body>
    <embed src="./" type="">
    <object>
        <param name="movie" value="./">
    </object>
</body>

66.audio与video标签

audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件。

为了能够支持多个备选文件的兼容支持，可以配合source标签。

loop：循环
autoplay：自动播放

<body>
    <audio src="./" controls loop autoplay></audio>
    <video>
        <source src="./.mp4">
        <source src="./.ogv">
    </video>
    <div style="position: relative;height: 300px;overflow: hidden;">
        <video style="min-height: 100%;min-width: 100%;" loop>
            <source src="./mp4" type="video/mp4">
            <source src="./webm" type="video/webm">
        </video>
    </div>
</body>

67.文字注解与文字方法

ruby标签定义ruby注释（中文注音或字符），rt标签定义字符（中文注音或字符）的解释或发音

bdo标签可覆盖默认的文本方向

<style>
        span{direction: rtl;unicode-bidi: bidi-override;}
    </style>
</head>
<body>
    <ruby>
        寒<rt>han</rt>冬
    </ruby>
    <p>
        <bdo dir="rtl">创作中心</bdo>创作中心
    </p>
    <p>
        <span>创作中心</span>创作中心
    </p>
</body>

68.扩展link标签

添加网址标题栏前的小图标：

<link rel="icon" type="/image/x-icon" href="">

加快访问速度

<link rel="dns-prefetch" href="远程IP地址">

69.扩展meta标签

定义可描述的内容及辅助信息

 <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="renderer" content="webkit">

功能
渲染模式、刷新、缓存

<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="refresh" content="3" url="">
    <meta http-equiv="expires" content="">

70.HTML5新语义化标

最低0.47元/天解锁文章