b标签与i标签

strong和b、em和i

  • strong和em都是表示强调的标签，表现形态为文本加粗和斜体。i标签也表现为文本加粗和斜体
    即strong和b、em和i都表现为文本加粗和斜体
  • 区别在于，strong和em是具备语义化的，而b和i是不具备语义化的（对一段文字进行强调尽量用strong和em）
  • b，i的作用：简化选择器的操作，减少span的使用，以及区分加粗的不同部分

引用标签

  • blockquote：引用大段的段落解释
  • q：引用小段的文字解释
  • abbr：缩写或首字母缩略词（在title中可加入全称，鼠标移入显示title）
  • address：引用文档地址信息
  • cite：引用著作的标题

iframe嵌套页面

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

属性

含义

frameborder

规定是否显示框架周围的边框

width

定义iframe的宽度

height

定义iframe的高度

scrolling

规定是否在iframe中显示滚动条<scrolling="no">不显示滚动条

src

规定在iframe中引入的URL

srcdoc

规定在iframe中显示的页面内容（比src更优先识别）

通过style设置样式可与原页面大小100%相同

  • 应用场景：数据传输、共享代码、局部刷新、第三方介入（广告）等

br与wbr

  • 是单标签
  • br标签表示换行操作（硬换行），而wbr标签表示软换行操作。
  • 提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用wbr元素来添加Word Break Opportunity（单词换行时机）
  • 硬换行在容器足够宽的情况下依旧强制换行，软换行可以对长单词进行拆分换行

pre与code

  • pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符
  • 只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是把文本变成等宽字体，但它暗示着这段文本时源程序代码（适用于在网页中程序代码的显示效果）（或使用markdown语法进行输出```）

map与area

（特殊图形加链接）

  • 定义一个客户端图像映射。图像映射（image-map）指代有可点击区域的一副图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
  • area元素的href属性定义区域的URl，shape属性来定义区域的形状，coords属性定义热区的坐标。
  • 给特殊图形添加链接，area能添加热区的形状：矩形、圆形、多边形
  • <img src="图片地址或网址" alt="" usemap="自定义"> <map name="自定义"> <area shape="rect"(设置一个矩形) coords="205 83 386 175"（对矩形进行坐标化）（矩形只用写左上角坐标和右下角坐标）（圆形则中心点与坐标，多边形看实际情况） href="跳转的链接" alt=""> </map>

embed与object

（已经不常用）

  • embed与object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同浏览器而已。
  • 给flash和一些插件进行渲染操作的标签
  • object元素需要配合param元素一起完成
  • <embed src=" " type=" ">
  • <object> <param name=" " value="flash插件 "> </object>

audio与video

引入音频是视频的标签，属于H5的新功能

  • audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件。
  • 为了能支持多个备选文件的兼容支持，可配合source标签。
  • 常规
    <audio src="mp3文件" controls|显示控件| loop|循环播放| autoplay|自动播放|></audio> <vidio src="mp4文件" controls></vidio>
  • 对不兼容现象做出的保险：一个source不行就换下一个
    <vidio> <source>视频文件</source> <source>视频文件</source> <source>视频文件</source> </vidio>
  • 若不想要视频进行等比缩放，则设置min-height：100%与min-width：100%

文字注解与文字方向

ruby与rt（皆为双标签）

  • ruby标签定义ruby注释（中文注音或字符），rt标签定义字符（中文注音或字符）的解释或发音
  • bdo标签可覆盖默认的文本方向
  • <bdo dir="ltr">文字</bdo>顺序显示
  • <bdo dir="rtl">文字</bdo>逆序显示
  • 用css中的span标签一样可以做到
  • span{direction:rtl;unicode-bidi:bidi-override;}

扩展link标签

  • 引入外部文件
    <link rel= "stylesheet" type= "text/css" href= "theme.css">
  • 添加网址标题栏前的小图标
    <link rel=”icon" type= "/image/x-icon" href="http://www.mobiletrain.org/favicon.ico" >
  • dns解析
    <link rel=”dns- prefetch" href= "//static.360buyimg.com">

meta标签扩展学习

meta添加一些辅助信息（用户看不见，开发人员看）

  • <meta name=”description" content= "大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活，下载美团官方APP ,吃喝玩乐1折起。” >
  • < meta name=“keywords” content=”大连美食，大连酒店，大连团购" >
  • < meta name=”renderer" content=”webkit" >

功能性的

  • <meta http- equiv= “X-UA-Compatible” content- “ie=edge” >(针对ie浏览器渲染)
  • < meta http-equiv= “refresh” content= “3” url=“”>（三秒后进行跳转或刷新）
  • < meta http-equiv=”expires" content= “Wed, 20 Jun 2019 22:33:00 GMT”>

HTML5新语义化标签

  • header：页眉
  • footer：页脚
  • main：主体
  • bgroup：标题组合
  • nav：导航
    注：header、footer、main在一个网页中只能出现一次
    例如：
<header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
    
    <nav>
        <ul>
            <li>首页</li>
            <li>论坛</li>
            <li>关于</li>
        </ul>
    </nav>
    <main></main>
    <footer></footer>
</header>
  • article：独立的内容
  • aside：辅助信息的内容
  • section：区域
  • figure：描述图像或者视频
  • figcaption：描述图像或视频的标题部分
  • datalist：选项列表
  • details/summary：文档细节/文档标题
  • progress/meter：定义进度条/定义度量范围
  • time：定义日期或时间
  • mark：带有记号的文本