【web前端开发】

最新推荐文章于 2024-09-17 11:42:54 发布

张益达1号

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量321

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_73747560/article/details/128043936

版权

web前端开发

1.strong与b,em,i

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

2.引用标签

blockquote:引用大段的段落解释
q:引用小段的短语解释
abber:缩写或首字母缩略词
cite:引用著作的标题

3.iframe嵌套页面

iframe元素会创建包含另外一个文档的内联框架（即行内框架）
在这里插入图片描述
应用场景：数据传输，共享代码，第三方介入

4.br与wbr

br标签表示换行操作，wbr表示软换行操作
如果担心单词太长换错位置，难么可以使用wbr元素来添加word bread opportunity(单词换行时机)

5.pre和code标签引入代码

<pre>元素可以定义预格式化的文本，被包围在pre元素中的文本通常会
会保留空格和换行符
<code>只应该在表示计算机源代码或者其他机器
可以阅读的文本内容上使用，虽然code标签只是吧文本
变成等宽字体，但它暗示着这段文本是源程序代码

<pre>
    <code>
        &lt; meta charset="UTF-8" &gt;
        &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </code>
</pre>

6.map与area标签

定义一个客户端图像映射，图像映射（image-map）指带有可点击区域的另一幅图像。area元素永远嵌套在map元素内部。area元素可以定义图像映射中的区域
area元素的href属性定义区域内的url，shape属性来定义区域的形状，coords属性定义热区的坐标
shape（形状）：rect–矩形，circ–圆形，poly–多边形
coords（坐标）
href（点击对应区域所跳转的链接）
usemap：锁定对应热区

7.embed和object标签

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

8.video与Audio标签

引入音频与视频的标签，属于HS的功能
图示代码可以帮助适应等级更低的浏览器
controls显示
loop重复
autoplay自动播放

9.文字注解与文字方向

在这里插入图片描述
方便浏览器进行解析
p标签从右向左开始
bod定义文字方向

<body>
    <ruby>
        66<rt>lin</rt>66
    </ruby>
  </body>

10.link标签扩展学习

icon
效果给网页添加小图标
dns-prefetch
提前对dsn解析，加速网站工作速度
在这里插入图片描述

11.meta标签学习

作用
wbekit 双内核渲染，让ie浏览器用更高级别进行渲染，规定时间刷新，规定时间缓存

12.HTML5新语义化标签

header：页眉
footer：页脚
main：主体
hgroup：标题组合
nav：导航
注：header，fooer，main在网页中只能出现一次
article：独立的内容
aside：辅助信息的内容
section：区域
figure：描述图像或视频
figcaption：描述图像或视频的标题部分
datalist：选项列表
details/summary：文档细节、文档标题
progress/meter：定义进度条/定义度量范围
time：定义日期或时间
mark：带有记号的文本
除了figcaption外都是块级元素

<header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
    <nav>
        <ul>
            <li>首页</li>
            <li>论坛</li>
            <li>关于</li>
        </ul>
    </nav>
    </header>
    <main>正文</main>
    <footer>45555566322</footer>