web前段学习第五部分

超级闪电侠fff

已于 2023-03-27 23:36:21 修改

阅读量209

点赞数

文章标签：前端学习 css

于 2022-11-25 23:22:03 首次发布

本文链接：https://blog.csdn.net/S788977SS/article/details/128037597

版权

web前段学习第五部分

b标签和i标签

strong与b,em与i区别：
1.表现型态都是文本加粗与文本斜体
2.区别strong和em具备语义化，而b与i不具备语义化（只有表现型态，无任何意义，在做网站开发时对一段文本进行强调时用strong或em）
3.b和i的应用场景：上述四种均是内联元素，可简化选择器的操作

引用标签

blockquote:引用大段的段落解释
q：引用小段的短语解释
abbr:缩写或首字母缩略词

   <p>
        <abbr title="">WHO</abbr>成立于1948年
    </p>

在这里插入图片描述
其中title后加WHO的全称

address：引用文档地址信息
cite：引用著作的标题

iframe嵌套页面

iframe元素会创建包括另外一个文档的内联框架（行内框架）
常见属性：
在这里插入图片描述

<body>
 <iframe src="https://www.taobao.com" frameborder="1" scrolling="1" ></iframe>
</body>

在这里插入图片描述

加

  <style>
        iframe{width:100%;height: 100%;}
    </style>

可让页面全屏显示,而加srcdoc在src前面则不会显示src引入的内容
应用：数据传输，共享代码，局部刷新，第三方介入等

br与wbr

br表示换行操作，而wbr标签表示软换行操作
提示：如果单词太长。或担心浏览器会在错误的位置换行，那么你可以使用wbr元素来添加Work Break Opportunity(单词换行时期）

 <p>gdhbuy oasfh8 byfuyfby wbnyau bsf8u sybg<wbr>guh<wbr>yhufnq8y</p>

当频幕缩小时 sybgguhyhufnq8y分别从yhufnq8y处和guh处换行

pre与code

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

map与area

定义一个客户端图像映射。图像映射（image-map)指代由可点击区域的图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
area元素的href属性定义区域的URL，shape定义区域形状，coords定义热区坐标

embed与object

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

<object> 
   <param name="" value="./img/flash.swf">
</object>

audio与video

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

<audio src="./important/"controls loop autoplay></audio>
<video src="./pod/" controls></video>

loop让音频放完回到开头，autoplay让音频自动播放。
为了能够支持多个备选文件的兼容支持，可支持配合source标签

 <video>
    <source src="./img/1"></source>
   <source src="./img/2"></source>
 </video>

如果1不支持就播放2

文字注解与文字方向

ruby标签定义ruby注释（中文注音或字符），rt标签定义字符（中文注音或字符）的解释或发音。二者一般配合使用

<ruby>
    寒<rt>han</rt>
</ruby>

在这里插入图片描述
bdo标签可覆盖默认的文本方向

<p>今年冬季<bdo dir="rtl">温度</bdo></p>

在这里插入图片描述
dir="ltr"表示从左到右即left to right,rtl同理

扩展link标签

加在head部分，三种用法

<link rel="stylesheet" type="text/css" href="theme.css>

<link rel="icon" type="/image/x-icon" href="https://www.mobiletrain.org/favicon.ico">

favicon和rel="icon"格式固定
添加网址标题栏的小图标

<link rel="dns-prefetch"href="//static.360buying.com>

将所要用到的资源提前做了dns的解析那么，那么访问整个网站的资源时descra加快速度

meta标签扩展学习

meta添加辅助信息
<meta name="description"content=“大连美团网精选美食…”>(访问网页时对网页的一个描述，用户看不到。但可以将信息传给计算机或浏览器，用于搜索引擎优化）
<meta name=“keywords” content="大连美食’'>（添加关键字有利于搜索引擎搜索）
< meta name=“renderer” content=“webkit” >(渲染双内核浏览器，选择webkit版本）
< meta http-equiv="X-UA-Compatible"content=“ie=edge”>(主要针对ie浏览器，以更高版本渲染）
< meta http-equiv=“refresh” content=“2” >(设置刷新时间）
< meta http=equiv="expires"content="wed,20 jun 2019 22:33:00 GMT >(在规定时间网页会缓存）

HTML5新语义化标签

header 页眉
footer 页脚
main 主体
hgroup 标题组合
nav 导航

<header>
    <hgroup>
        <h1></h1>
        <h2></h2>
    </hgroup>
    <nav>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </nav>
 </header>
 <main></main>
 <footer></footer>

article 独立的内容
aside 辅助信息的内容
section 区域
figure 描述图像或视频
figcaption 描述图像或视频的标题部分

<figure>
<img src=" '' alt=" ''>
<figcaption></figcaption>
</figure>

datalist 选项列表
details/summary 文档细节/文档标题
progress/meter 定义进度条（内容加载到何处）/定义度量范围（手机电量显示，可定义一个最小和最大值，当value的值超过最大值显示黄色，位于期间显示绿色）
time 定义日期或时间使其语义化
mark 带有颜色标记的文本

<input type="text" list="elem">
<datalist id="elems">
<option value="a"></option>
<option value="as"></option>
<option value="ac"></option>
</datalist>

<gropress min="0" max="10" value="4"></gropress>

value表示当前的状态，

<meter min="0" max="10" value="4" low="12" hight="67 "></meter>

超级闪电侠fff

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前段学习第五部分

meta http-equiv="X-UA-Compatible"content=“ie=edge”>(主要针对ie浏览器，以更高版本渲染）2.区别strong和em具备语义化，而b与i不具备语义化（只有表现型态，无任何意义，在做网站开发时对一段文本进行强调时用strong或em）组合使用，pre元素可定义预格式化的文本，被包围在pre元素中的文本通常会保留空格和换行（其中的符号需要转译为)ruby标签定义ruby注释（中文注音或字符），rt标签定义字符（中文注音或字符）的解释或发音。
复制链接

扫一扫