web前端
您现在所在的位置:首页>企业动态>web前端

web前端自学教程笔记:HTML重要标签_前端学习

编辑:学到牛牛IT培训    发布日期: 2021-12-28 11:43:32  

1、div结构标签

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

俗称DIV+C++SS布局。

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%) (限制页面设计的自由性)

一旦学了C++SS的知识,你会发现使用table做页面布局会变得更麻烦。(先花时间学一些CSS知识,会省去你以后大量的时间)

‘table对’对于页面布局来说,从语义上看是不正确的。(它描述的是表现,而不是内容)

table代码会让阅读者抓狂。(不但无法利用CSS,而且会不知所云,尤其在进行页面改版或内容抽取的时候)

table一旦设计完成就变成死的,很难通过CSS让它展现新的面貌。

1.2、div的特征

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

div是block块元素,默认在文档中从上往下依次堆叠。

默认左边贴在外部容器(父容器)的左边。

默认和外部容器(父容器)宽度保持100%,高度由内容撑高。

div之间没有间隔。

div标签没有语义,没有任何样式外观。

div就是一个用来存放内容的容器。

div的嵌套

Markup

<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样式、java">JavaScript行为的彻底分离

HTML关注网页结构的语义化(在web1.0时代就完成了,稳定了十来年时间没有变过,直到2014年HTML5的出现)

CSS关注网页的外观样式

java">JavaScript关注网页和用户的交互行为

2、图像

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

Markup

<img src="url" alt="代替文本" title="鼠标经过的标题">

src 路径

alt 代替文本

title 标题,没有优化权重

width 图片一定不能变形

height

背景图片必须用css才能添加。

注意事项:

img是一个行内标签,并且是一个单标签(自关闭)

多种图片格式都认识(jpg,bmp,png,gif,jpeg,webp)

当我们修改图片的宽度时,高度会等比例进行缩放(反之亦然)

3、超链接

Markup

<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 相对路径

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

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

Markup

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

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

Markup

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

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

Markup

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

3.4 物理路径

本地磁盘地址

Markup

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

3.5 锚点链接

Markup

<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 嵌套列表

- 下拉菜单

Markup

<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是用来播放音频文件

Markup

<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文档中

Markup

<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* : 设置视频播放器的宽度。


免费试学
课程好不好,不如实地听一听

封闭学习

2

1

联系我们

电话:028-61775817

邮箱:1572396657@qq.com

地址:成都高新西区西芯大道4号

  • 学到牛牛在线咨询

    扫一扫,免费咨询

  • 学到牛牛公众号

    微信公众号

学一流技术,找高薪工作

7-24小时服务热线:

028-61775817

版权声明 网站地图

蜀ICP备2021001672号

课程问题轻松问