1. video视频标签  
video视频标签 :  是HTML中用于在网页上嵌入视频的元素 . 
常用的视频标签属性 : 
-  src属性 :  指定视频文件的URL地址 . 
-  controls属性 :  用于显示视频播放控件 ( 如播放按钮 ,  进度条等 ) ,  使用户能够控制视频的播放 . 
-  width和height :  指定视频的宽度和高度 . 
-  autoplay :  自动播放视频 . 
-  loop :  循环播放视频 . 
-  poster :  指定视频封面图像的URL地址 .  当视频加载或播放出错时将显示该图像 . 
-  preload :  指定视频在页面加载时是否预加载 . 
-  muted :  静音播放视频 . 
注意点 :  
*  1.  chrome禁止了audio的autoplay属性 . 
     音频是静音状态 ,  autoplay属性才可以生效 .  可以播放 ,  不能干扰用户的听觉 . 
*  2.  proload属性与autoplay属性有冲突 ,  如果设置了autiplay那么proload就会失效 . 
video标签的基本用法示例 :  < video  src = "视频地址"  controls > < / video >  . 
  
<! DOCTYPE  html >  
< html  lang = " en" >  
< head>  
    < meta  charset = " UTF-8" >  
    < title>  media</ title>  
</ head>  
< body>  
< video  src = " video/movie.ogv"   controls > </ video>  
</ body>  
</ html>  
  
 
 1.1 自动播放视频  
设置autoplay属性自动播放后需要搭配muted属性静音 . 
  
<! DOCTYPE  html >  
< html  lang = " en" >  
< head>  
    < meta  charset = " UTF-8" >  
    < title>  media1</ title>  
</ head>  
< body>  
< video  src = " video/movie.ogv"   autoplay = " autoplay"   muted = " muted" > </ video>  
</ body>  
</ html>  
  
 
 1.2 poster视频封面  
使用 < video > 标签来嵌入视频时 ,  会经历加载的步骤 . 
  
<! DOCTYPE  html >  
< html  lang = " en" >  
< head>  
    < meta  charset = " UTF-8" >  
    < title>  media2</ title>  
</ head>  
< body>  
	< video  src = " video/movie.ogv"   controls = " controls"   poster = " image/xiongda.png"   width = " 407"   height = " 250" > </ video>  
</ body>  
</ html>  
  
 
 1.3 loop循环播放  
循环播放需要搭配自动播放 ,  自动播放又需要搭配禁音 . 
  
<! DOCTYPE  html >  
< html  lang = " en" >  
< head>  
    < meta  charset = " UTF-8" >  
    < title>  media3</ title>  
</ head>  
< body>  
< video  src = " video/movie.ogv"   muted = " muted"   autoplay = " autoplay"   loop = " loop" > </ video>  
</ body>  
</ html>  
  
 
 1.4 视频的宽度和高度  
设置其中一个属性另一个会自动等比例缩放 . 
  
<! DOCTYPE  html >  
< html  lang = " en" >  
< head>  
    < meta  charset = " UTF-8" >  
    < title>  media</ title>  
</ head>  
< body>  
< video  src = " video/movie.ogv"   height = " 1080px"   controls = " controls" > </ video>  
</ body>  
</ html>  
  
 
 1.5 视频格式  
不同浏览器厂商对于视频格式的支持确实不统一 ,  这可能导致某些视频在某些浏览器上无法兼容播放 . 
为了解决这个问题 .  使用HTML5的 < video > 标签是一种较好的选择 . 
< video > 标签 :  用于在网页上播放视频的标准元素 ,  它支持多种视频格式 ,  并且在现代浏览器中具有广泛的兼容性 . 
< video > 标签支持的三种常见视频格式 : 
*  1.  WebM ( . webm ) :  一种开放的视频格式 ,  通常用于使用VP8或VP9编码的Web视频 . 
*  2.  Ogg ( . ogg ) :  一种开放的多媒体容器格式 ,  通常用于包含Theora视频和Vorbis音频 . 
*  3.  MPEG  4 ( . mp4 ) :  一种常见的视频格式 ,  通常使用H . 264 编码 ,  同时支持AAC音频 . 
为了确保视频在各种浏览器中具有良好的兼容性 .  可以提供多个视频源 ,  并在 < video > 元素中使用 < source > 子元素来指定不同格式的视频文件 . 
浏览器将选择第一个支持的格式来播放视频 . 
示例代码 : 
< video  controls > 
  < source  src = "video.webm"  type = "video/webm" > 
  < source  src = "video.ogv"  type = "video/ogg" > 
  < source  src = "video.mp4"  type = "video/mp4" > 
  Your  browser  does  not  support  the  video  tag . 
< / video > 
示例中 ,  可以提供名为video . webm ,  video . ogv ,  video . mp4的视频文件 ,  分别对应WebM、Ogg和MPEG- 4 格式 . 
如果浏览器支持其中一种格式 ,  它将选择并播放相应的视频 . 
另外 ,  如果旧版本的浏览器不支持HTML5的 < video > 元素 ,  可以使用JavaScript库 ( 如html5media ) 来提供降级方案 ,  使其在这些浏览器上能够播放 
这些库通常会检测浏览器的功能并选择适当的解决方案 ,  例如使用Flash来播放视频 . 
  
<! DOCTYPE  html >  
< html  lang = " en" >  
< head>  
    < meta  charset = " UTF-8" >  
    < title>  media5</ title>  
</ head>  
< body>  
< video  controls = " controls" >  
    < source  src = " video/movie.mp4"   type = " video/mp4" >  
    < source  src = " video/movie.ogv"   type = " video/ogg" >  
    < source  src = " video/movie.webm"   type = " video/webm" >  
</ video>  
</ body>  
</ html>  
  
 2. audio音频标签  
< audio > 标签 :  用于在网页上播放音频的标准元素 . 
它提供了一种简单的方式来嵌入音频文件 ,  并允许用户控制音频的播放 ,  暂停 ,  音量等 . 
常用的音频标签属性 : 
*  1.  autoplay属性 :  该属性用于自动播放音频 .  当页面加载完成后 ,  音频会自动开始播放 .  
     然而 ,  需要注意的是 ,  具有此属性的自动播放功能在某些浏览器中可能会被禁用 ,  因为自动播放功能经常被滥用并被认为是打扰用户体验的元素 . 
*  2.  controls属性 :  该属性用于显示音频播放器的控制条组件 . 
     这些组件包括播放 ,  暂停按钮 ,  音量控制 ,  进度条等 ,  使用户可以控制音频的播放和暂停 ,  调整音量等 . 
*  3.  loop属性 :  该属性用于使音频文件自动循环播放 . 
     当音频播放结束时 ,  它将自动重新开始播放 ,  形成一个循环 . 
示例 : 
< audio  src = "audio.mp3"  controls  autoplay  loop > 
  Your  browser  does  not  support  the  audio  tag . 
< / audio > 
*  如果浏览器不支持 < audio > 标签或指定的音频格式 ,  将显示后备内容 'Your browser does not support the audio tag.'  . 
  
< audio > 标签支持的三种常见音频格式 : 
*  1.  Ogg ( . ogg ) :  一种开放的音频容器格式 ,  通常使用Vorbis音频编码 . 
     它提供了比较高的音频质量和压缩效率 ,  是一种常见的音频格式 . 
*  2.  MP3 ( . mp3 ) :  一种广泛使用的音频格式 ,  它使用了损耗压缩算法 ,  能够在保持相对较高音质的同时将音频文件大小减小 . 
*  3.  WAV ( . wav ) :  这是一种无损音频格式 ,  它以原始的脉冲编码调制 ( PCM ) 数据存储音频 . 
     WAV文件通常比较大 ,  因为它们没有经过压缩 . 
需要注意的是 ,  这些音频格式可以在大多数现代浏览器中正常工作 ,  但浏览器对音频格式的支持仍然可能存在差异 . 
因此 ,  为了提供更好的浏览器兼容性 ,  可以提供多个音频源 ,  并使用 < source > 元素为每个源文件指定不同的格式 . 
示例代码 : 
< audio  controls > 
  < source  src = "audio.ogg"  type = "audio/ogg" > 
  < source  src = "audio.mp3"  type = "audio/mpeg" > 
  < source  src = "audio.wav"  type = "audio/wav" > 
  Your  browser  does  not  support  the  audio  tag . 
< / audio > 
示例中 ,  提供了三个不同格式的音频文件 ,  分别是Ogg ,  MP3和WAV . 
如果浏览器支持其中一种格式 ,  它将选择并播放相应的音频文件 . 
如果浏览器不支持 < audio > 元素或指定的音频格式 ,  则会显示后备内容 . 
  
<! DOCTYPE  html >  
< html  lang = " en" >  
< head>  
    < meta  charset = " UTF-8" >  
    < title>  audio</ title>  
</ head>  
< body>  
< audio  src = " music/文艺复兴的浩宇.mp3"   controls = " controls" > </ audio>  
</ body>  
</ html>  
  
 
<! DOCTYPE  html >  
< html  lang = " en" >  
< head>  
    < meta  charset = " UTF-8" >  
    < title>  audio2</ title>  
</ head>  
< body>  
    < audio  controls = " controls"   loop = " loop" >  
        < source  src = " music/文艺复兴的浩宇.mp3"   type = " audio/mp3" >  
        < source  src = " music/文艺复兴的浩宇.ogg"   type = " audio/ogg" >  
        < source  src = " music/文艺复兴的浩宇.wav"   type = " audio/wav" >  
    </ audio>  
</ body>  
</ html>  
  
 3. details可折叠内容块  
details标签 :  用于为文档中的内容提供更多的细节和补充信息 .  它通常用于展示文档的摘录 ,  补充说明或隐藏的内容 . 
使用details标签 ,  可以创建一个可折叠的内容块 ,  用户可以点击标题以展开或收起内容 . 
这样的交互可以有效地组织和展示大段的文本内容 ,  使用户可以选择性地查看信息 ,  节省页面空间 . 
details标签通常包含以下一个子标签summary ,  用于定义标题或概要文本 ,  显示在可折叠内容块的顶部 . 
在浏览器中 ,  将显示一个默认为折叠状态的内容块 ,  点击 "点击展开" 标题将展开内容 . 
用户可以根据需要展开或收起内容 ,  以获取所需的详细信息 . 
  
<! DOCTYPE  html >  
< html  lang = " en" >  
< head>  
    < meta  charset = " UTF-8" >  
    < title>  summary</ title>  
</ head>  
< body>  
< details>  
    < summary>  点击展开</ summary>  
    < p>  这是一段详细的描述.</ p>  
    < p>  更多内容可以在这里展示.</ p>  
</ details>  
</ body>  
</ html>  
  
 
 4. marquee滚动条  
< marquee > 标签 :  用于在网页中创建滚动内容的标签 ,  尽管它不是W3C官方的标准 ,  但多数浏览器 ( 包括某些现代浏览器 ) 仍支持它 . 
常用的属性及其用法 : 
*  1.  direction属性 :  用于指定滚动的方向 .  可以通过以下值进行设置 : 
     -  up :  从下往上滚动 . 
     -  down:从上往下滚动 . 
     -  left:从右往左滚动 ( 默认值 ) . 
     -  right:从左往右滚动 . 
*  2.  behavior属性 :  用于设置滚动的行为方式 .  可取的值包括 : 
     -  scroll :  单方向循环滚动 . 
     -  slide :  只滚动一次靠边停止 . 
     -  alternate :  来回滚动 . 
*  3.  bgcolor属性 :  用于设置滚动条的颜色 .  可以使用CSS颜色值或颜色名称 . 
*  4.  scrollamount属性 :  用于设置滚动的速度 .  数值越大 ,  滚动速度越快 . 
*  5.  loop属性 :  用于设置滚动的次数 .  表示滚动内容循环的次数 ,  默认情况下是无限滚动 . 
以下是一个示例,展示了如何使用 ` < marquee > ` 标签设置滚动条的属性: 
需要注意的是 ,  尽管某些浏览器仍然支持 < marquee > 标签 ,  
但在现代的Web开发中 ,   更推荐使用CSS和JavaScript来实现自定义的滚动效果 ,  以提供更好的可访问性和更好的跨浏览器兼容性 . 
  
<! DOCTYPE  html >  
< html  lang = " en" >  
< head>  
    < meta  charset = " UTF-8" >  
    < title>  marquee</ title>  
</ head>  
< body>  
< marquee  behavior = " alternate" >  来回滚动</ marquee>  
< marquee  behavior = " slide" >  滚动一次</ marquee>  
< marquee  behavior = " scroll" >  一直滚动</ marquee>  
< hr>  
< marquee  direction = " up" >  向上滚动</ marquee>  
< marquee  direction = " down" >  向下滚动</ marquee>  
< marquee  direction = " right" >  向右滚动</ marquee>  
< marquee  direction = " left" >  向左滚动</ marquee>  
< hr>  
< marquee  scrollamount = " 1" >  滚得慢</ marquee>  
< marquee  scrollamount = " 100" >  滚得快</ marquee>  
< hr>  
< marquee  bgcolor = " red" >  我有颜色</ marquee>  
< hr>  
< marquee  scrollamount = " 30" >  
    < img  src = " image/ghost.png"   alt = " 图片"   height = " 100px" >  
</ marquee>  
</ body>  
</ html>  
  
 5. 实体字符  
在HTML中 ,  某些字符具有特殊含义 ,  无法被直接显示在浏览器中 . 
如果要在浏览器中展示这些字符 ,  需要使用字符实体或转义字符来代替 . 
  
实体字符           含义 
------------------------- 
& nbsp ;            空格  
& lt ;              <  小于 
& gt ;              >  大于 
& amp ;             &  和号 
& quot ;            "  引号 
& apos ;            '  撇号 
& yen ;             ¥  人民币 
& euro ;            €  欧元 
& cope ;            ©  版权               
& reg ;             ®  注册商标 
& trade ;           ™  商标 
& times ;           ×  乘号 
& divide ;          ÷  除号 
注意点 :  大小写敏感 . 
  
<! DOCTYPE  html >  
< html  lang = " en" >  
< head>  
    < meta  charset = " UTF-8" >  
    < title>  characters</ title>  
</ head>  
< body>  
< p>  
    空    格
</ p>  
< p>  
    < a> 标签
</ p>  
< p>  
    & 和号
</ p>  
< p>  
    " 引号
</ p>  
< p>  
    ' 撇号
</ p>  
< p>  
    ¥ 人名币
</ p>  
< p>  
    € 欧元
</ p>  
< p>  
    © 版权
</ p>  
< p>  
    ® 注册商标
</ p>  
< p>  
    ™ 商标
</ p>  
< p>  
    × 乘号
</ p>  
< p>  
    ÷ 除号
</ p>  
</ body>  
</ html>  
  
 
 6. 废弃标签  
HTML的标签通常被设计为具有语义 ,  并用于表示文档中的结构和内容 . 
然而 ,  早期的HTML标准中确实存在一些标签 ,  它们的目的是为了样式化文本或实现特定的显示效果 ,  而不是传达具体的语义 , 
随着HTML的发展和标准化 ,  为了更好地符合语义化的原则 ,  一些标签被淘汰或不再推荐使用 . 
以下是一些早期标签及其作用 :  < br > ,  < hr > ,  < font > ,  < b > ,  < u > ,  < i > ,  < s > 等标签 . 
需要强调的是 ,  在现代的Web开发中 ,  尽量避免使用这些被淘汰的标签 . 
CSS提供了更灵活和可维护的样式控制方式 . 
此外 ,  使用应该更关注语义化 ,  可访问性和可扩展性 ,  以确保网页的正确解析 ,  表达和可读性 . 
  
HTML5引入了一些具有语义的标签 ,  来替代一些被淘汰的标签 ,  并更好地表达文档的结构和内容 . 
以下是一些新增的HTML5语义标签及其作用 : 
-  < strong > 标签用于定义重要强调的文字 . 
  它与 < b > 标签类似 ,  都可以用于加粗文本 ,  但 < strong > 标签具有更强的语义含义 ,  表示文本的重要性或紧迫性 . 
-  < ins > 标签用于定义插入的文字 .  
  它可以给文本添加下划线 ,  但也更强调插入内容的语义 . 
-  < em > 标签用于定义强调的文字 . 
  与 < i > 标签类似 ,  都可以用于使文本以斜体显示 ,  但 < em > 标签表示文本的强调重点 ,  增加了语义 . 
-  < del > 标签用于定义被删除的文字 . 
  它可以给文本添加删除线 ,  表示该文本已被删除或不再有效 . 
通过使用这些语义标签 ,  开发人员可以更准确地描述文档中的内容 ,  并提供更好的语义信息 ,  使得文档更易于理解和解析 . 
需要注意的是 ,  这些语义标签并不仅仅是样式上的替代品 ,  它们还赋予了文本更准确的含义 ,  
并为搜索引擎 , 屏幕阅读器等提供了更好的理解和可访问性 . 
因此 ,  在适当的情况下 ,  应该优先使用这些语义标签 ,  而不仅仅依赖于样式化标签来达到特定的外观效果 . 
  
<! DOCTYPE  html >  
< html  lang = " en" >  
< head>  
    < meta  charset = " UTF-8" >  
    < title>  font_style</ title>  
</ head>  
< body>  
< p>  
    < strong>  aaa</ strong>  
</ p>  
< p>  
    < ins>  bbb</ ins>  
</ p>  
< p> < em>  ccc</ em> </ p>  
< p>  
    < del>  ddd</ del>  
</ p>  
</ body>  
</ html>  
  
 
<! DOCTYPE  html >  
< html  lang = " en" >  
< head>  
    < meta  charset = " UTF-8" >  
    < title>  font_style2</ title>  
    < style  type = " text/css" > 
        .one  { 
            font-weight :  bold; 
        } 
        .two  { 
            text-decoration :  underline; 
        } 
        .three  { 
            font-style :  italic; 
        } 
        .four  { 
            text-decoration :  line-through; 
        } 
     </ style>  
</ head>  
< body>  
< p  class = " one" >  aaa</ p>  
< P  class = " two" >  bbb</ P>  
< p  class = " three" >  ccc</ p>  
< p  class = " four" >  ddd</ p>  
</ body>  
</ html>