NEWS

新闻资讯

当前位置首页 > 新闻资讯 > 正文

HTML重要标签_前端学习

作者:菁瑞优智_小菁 时间:2021-07-06

1、div结构标签

web1.0时代,表格布局、html和样式、JavaScript混杂在一起的日子让网页制作非常痛苦,为了解决这些痛点,提出了CSS样式以及新的布局方式。

俗称DIV+CSS布局。

1.1、web1.0时代的弊端

1)、标签和样式混在一起,甚至有专门的无语义的样式标签,比如font / u / s / i 等等,造成代码臃肿,难以阅读。

2)、表格标签结构多,当页面比较大的时候,需要嵌套很多表格,嵌套层级深了之后影响浏览器对页面的渲染,因为浏览器需要把一个标签的开始标签和结束标签都渲染完毕之后,才能显示该标签内的内容,导致网速慢的时候,网页会有一段时间的空白。

3)、布局不够灵活,一旦设计制作好后,很难再修改页面的布局。因为单元格之间互相有牵扯。

4)、web1.0时代,在努力的发展规范html标签,1997年差不多成型,2000年稳定下来,才开始重视样式和布局等用户美观的东西。

表格的优点:

  • 简单容易上手。
  • 直观可见。
  • 单元格具有适应性。
  • 在单元格内,内容可以设置水平和垂直对齐
  • 适合二维数据的罗列。

表格布局的弊端:

  • table比其它html标记占更多的字节。(造成下载时间延迟,占用服务器更多流量资源)
  • table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间)
  • table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度,增加页面加载时间,增加http会话数)
  • 在某些浏览器中,table里的文字的拷贝会出现问题。(会让用户不悦)
  • table会影响其内部的某些布局属性的生效(比如里的元素的height:100%) (限制页面设计的自由性)
  • 一旦学了CSS的知识,你会发现使用table做页面布局会变得更麻烦。(先花时间学一些CSS知识,会省去你以后大量的时间)
  • ‘table对’对于页面布局来说,从语义上看是不正确的。(它描述的是表现,而不是内容)
  • table代码会让阅读者抓狂。(不但无法利用CSS,而且会不知所云,尤其在进行页面改版或内容抽取的时候)
  • table一旦设计完成就变成死的,很难通过CSS让它展现新的面貌。

1.2、div的特征

div 是 division 的简写。division 英[dɪˈvɪʒn] 意为分割、区域、分组。比方说,当你将一系列的链接组合在一起,就形成了文档的一个 division。

  • div是block块元素,默认在文档中从上往下依次堆叠。
  • 默认左边贴在外部容器(父容器)的左边。
  • 默认和外部容器(父容器)宽度保持100%,高度由内容撑高。
  • div之间没有间隔。
  • div标签没有语义,没有任何样式外观。
  • div就是一个用来存放内容的容器。

div的嵌套

<div id="wrap">
    <div id="header">
        头部
    </div>
    <div id="main">
        <div class="content">
            内容模块1
        </div>
        <div class="content">
            内容模块2
        </div>
        ……
    </div>
    <div id="footer">
        版权信息
    </div>
</div>

div布局的特点:

  • div标签简单,属性少,即使嵌套比较多,代码也比较精简,加速浏览器的渲染。
  • div只有两个常规属性,id和class,没有别的样式属性。
  • 让html结构干净,和样式彻底分离。(最重要)
  • 有利于搜索引擎的爬取,利用SEO优化。

1.3、web2.0时代的网站重构

网站重构的核心观点:

  • HTML结构、CSS样式、JavaScript行为的彻底分离
  • HTML关注网页结构的语义化(在web1.0时代就完成了,稳定了十来年时间没有变过,直到2014年HTML5的出现)
  • CSS关注网页的外观样式
  • JavaScript关注网页和用户的交互行为
  • 2、图像

    图片作为html的一部分,想要被搜索引擎抓取,应该用img标签。如果仅仅是装饰作用,不需要被抓取,应该使用背景图片。

    <img src="url" alt="代替文本" title="鼠标经过的标题">
    • src 路径
    • alt 代替文本
    • title 标题,没有优化权重
    • width 图片一定不能变形
    • height
    • 背景图片必须用css才能添加。

      注意事项:

      • img是一个行内标签,并且是一个单标签(自关闭)
      • 多种图片格式都认识(jpg,bmp,png,gif,jpeg,webp)
      • 当我们修改图片的宽度时,高度会等比例进行缩放(反之亦然)

      3、超链接

      <a href="url" target="_blank" title="超链接标题">被点击的文字或者图片</a>

      3.1 常用属性

      • href
      • target
      • title

      3.2 绝对路径

      统一资源定位器URL

      绝对路径以协议(http://、https://)或者以“/”作为前缀:

      http协议(一般网络路径):<a href='https://www.jenreal.cn'>菁瑞优智</a>

      基于网站根路径(/):<a href='/index.html'>首页</a>

      3.3 相对路径

      定义:以文件本身所在的目录为参照路径进行定位。

      `./` 当前目录,可以省略不写。

      <a href="03.html">02.html</a>

      `目录名/` 当前目录的下级目录

      <a href='images/01.jpg'>图片1</a>

      `../` 当前目录的上级目录

      <a href='../index.html'>返回首页</a>

      3.4 物理路径

      本地磁盘地址

      <a href='E:\'>E盘</a>

      3.5 锚点链接

      <a href="#锚点名称">被点击的文字</a>
      <p id="锚点名称">
          段落内容
      </p>

      4、列表

      ul和li是配套的,不能乱入别的标签,极其重要的一个组织结构和内容的标签

      4.1 无序列表

      - ul(unordered list )、li(list item)

      - type属性

      • disc
      • circle
      • square

      4.2 有序列表

      - ol、li

      - type属性

      • a
      • A
      • 1
      • i
      • I

      4.3 定义列表

      • dl、dt、dd
      • 用于专业术语的定义和解释
      • 演变成一些服务条例的解释
      • 天猫底部导航
      • 小米官网底部导航

      4.4 嵌套列表

      - 下拉菜单

      <ul>
          <li><a href="#">列表1</a>
              <ul>
                  <li><a href="#">嵌套列表</a></li>
                  <li><a href="#">嵌套列表</a></li>
              </ul>
          </li>
      </ul>

      5、多媒体

      Web中多媒体是必不可少的一部分,而在HTML5以前,浏览器本身是对音频和视频不提供支持的,而播放音频和视频就必须使用各种工具和插件,如最早时期的Windows Media Player,和Web中最为流行的Flash Player。HTML5中多媒体播放功能的出现,让用户**无需安装任何工具和插件**就能在网页播放音频和视频。

      标签:描述

      [audio]:定义音频内容

      [video]:定义视频(video 或者 movie)

      [source]:定义多媒体资源 video 和 audio

      [embed]:定义嵌入的内容,比如插件。

      [track]:为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。

      5.1audio音频

      - audio是用来播放音频文件

      <audio controls>
          <source src="horse.ogg" type="audio/ogg">
          <source src="horse.mp3" type="audio/mpeg">
          您的浏览器不支持 audio 元素。
      </audio>

      IE9及现代浏览器都支持,IE8及以下不支持

      audio元素支持的3种文件格式:MP3、Wav、Ogg。

      浏览器 : MP3 : Wav : Ogg

      Internet Explorer: YES : NO : NO

      Chrome: YES : YES : YES

      Firefox: YES : YES : YES

      Safari: YES : YES : NO

      Opera: YES : YES : YES

      **提示:**这 3 种音频的 MIME-type 分别是:

      音频格式:MINE-type

      MP3: audio/mpeg

      Ogg: audio/ogg

      Wav: audio/wav

      HTML5: 中的新属性。

      属性 : 值 : 描述

      [autoplay]: autoplay : 如果出现该属性,则音频在就绪后马上播放。

      [controls]: controls : 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。

      [loop]: loop : 如果出现该属性,则每当音频结束时重新开始播放。

      [muted]: muted : 如果出现该属性,则音频输出为静音。

      [preload]: auto metadata none : 规定当网页加载时,音频是否默认被加载以及如何被加载。

      [src]: *URL* : 规定音频文件的 URL。

      5.2 video视频

      - video标签可以将视频内容嵌入到HTML文档中

      <video width="320" height="240" controls>
          <source src="movie.mp4" type="video/mp4">
          <source src="movie.ogg" type="video/ogg">
          您的浏览器不支持 video 标签。
      </video>

      IE9及现代浏览器都支持,IE8及以下不支持

      video签定义视频,比如电影片段或其他视频流。

      目前,video 元素支持三种视频格式:MP4、WebM、Ogg。

      浏览器 : MP4 : WebM : Ogg

      Internet Explorer: YES : NO : NO

      Chrome: YES : YES : YES

      Firefox: YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始 : YES : YES

      Safari: YES : NO : NO

      Opera: YES 从 Opera 25 版本开始 : YES : YES

      - MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

      - WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

      - Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

      音频格式的 MIME 类型

      格式: MIME-type

      MP4: video/mp4

      WebM: video/webm

      Ogg: video/ogg

      HTML5 中的新属性:

      属性:值 : 描述

      [autoplay]: autoplay : 如果出现该属性,则视频在就绪后马上播放。

      [controls]: controls : 如果出现该属性,则向用户显示控件,比如播放按钮。

      [height]: *pixels* : 设置视频播放器的高度。

      [loop]: loop : 如果出现该属性,则当媒介文件完成播放后再次开始播放。

      [muted]: muted : 如果出现该属性,视频的音频输出为静音。

      [poster]: *URL* : 规定视频正在下载时显示的图像,直到用户点击播放按钮。

      [preload]: auto metadata none : 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。

      [src]: *URL* : 要播放的视频的 URL。

      [width]: *pixels* : 设置视频播放器的宽度。