HTML基础认知与标签

_花卷
VIP.3 渐入佳境
153 阅读6分钟

一、网页组成与五大浏览器

1、网页组成

文字、图片、音频、视频、超链接

  • 我们看到的网页背后的本质是：前端程序员的代码
  • 而代码又是通过浏览器转化（解析和渲染）成用户看到的网页

2、五大浏览器

常见的五大浏览器：谷歌浏览器（Chrome）、火狐浏览器（FireFox）、Safari浏览器、IE浏览器、欧朋浏览器（Opera）

浏览器出品的公司不同，内在的渲染引擎也不同：

浏览器内核备注
IETridentIE、360极速浏览器、百度浏览器、猎豹安全浏览器内核
FireFoxGecko火狐浏览器内核
SafariWebkit苹果浏览器内核
Chrome/OperaBlinkBlink其实是Webkit的一个分支
  • 渲染引擎不同，解析相同的代码时速度、性能、效果也不同
  • 谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户喜爱

二、Web标准

不同浏览器的渲染引擎不同，对于相同的代码解析的效果存在差异，导致同一页面浏览效果不同，用户体验差。

web标准： 让不同浏览器按照相同的标准显示结果，让展示效果统一

web标准中分成三个构成：

构成语言说明
结构HTML页面元素和内容
表现CSS网页元素的外观和位置等页面样式
行为JavaScript网页模型的定义与页面交互

web标准要求页面实现结构、表现、行为三层分离

三、HTML概念

HTML（Hyper Text Markup Language）中文译为：超文本标记语言

  • 专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

四、HTML骨架

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content=".....">
    <meta name="Keywords" content="......">
    <meta name="Description" content="......">
    <title>Document</title>
  </head>
  <body></body>
</html>

4-1、文档类型声明DTD

  • HTML文件第一行必须是DTD（Document Type Definition，文档类型声明）
  • 不写DTD会引发浏览器的一些兼容问题
  • 不同版本的HTML有不同的DTD写法（只需记住HTML5版本写法：即可）

4-2、html标签

  • html标签中，可通过lang属性标识网页的语言，如：
<html lang="en">...</html>

4-3、head标签

  • head标签是网页的配置，不要认为是网页的头部！

4-3-1、网页标题

  • 其中，title标签用来设置网页的标题，文字会显示在浏览器的标签栏上；title也是搜索引擎收录网站时显示的标题，为了吸引用户点击，合理设置title是有必要的

4-3-2、网页关键词和网页描述

合理设置网页的关键词和网页描述，也是SEO的重要手段

  • 网页关键词：
<meta name="Keywords" content="JAVA，JAVASCRIPT，HTML，CSS，PYTHON...">
  • 网页描述：
<meta name="Description" content="这里是网页简介，这里是网页简介，这里是网页简介...">

4-3-3、字符集

可通过meta标签的charset属性设置字符集

<meta charset="UTF-8" >
<meta charset="gb2312">
<meta charset="gbk">

除了可设置UTF-8外，还可设置gb2312(gbk)

字符集涵盖字符1个汉字的字节数适用场景
UTF-8涵盖全球所有国家、民族的文字和大量图形文字3制作有非汉字文字的网页
gb2312/gbk涵盖所有汉字字符（包括简体、繁体）和英语、少量韩语、日语和少量图形字符2制作只有汉语和英语的网页，由于1个汉字占2个字节，网页文件大小会明显减少

！注意：VSCode的Live Server插件不支持gb2312（gbk）字符集，只支持UTF-8字符集

4-4、body标签

  • body标签中书写网页的内容，包括网页的头部、主要内容、页脚等各个部分

五、HTML基础标签

1、排版标签

排版标签包含：标题标签、段落标签、换行标签、水平线标签：

2、文本格式化标签

需要让文字有加粗、下划线、倾斜、删除线效果时使用文本格式化标签：

  • 实际项目开发中选择标签的原则：标签语义化（即：根据语义选择正确的标签）
  • 所以，更推荐strong、ins、em、del，它们更具有语义化

3、媒体标签

媒体标签包含图片标签、路径标签、音频标签、视频标签

3-1、图片标签

  1. 场景：在网页中显示图片

  2. 代码： <img src="" alt="">

  3. 特点：

    • 单标签
    • img标签需要展示对应的效果，需要借助标签的属性进行设置

  4. 属性：

    • src： 目标图片的路径

    • alt： 替换文本，当图片加载失败时才显示alt的文本，当图片加载成功时不会显示alt的文本，同时当视力不方便的用户使用网页朗读器时也会朗读alt中的文本

    • title： 提示文本，当鼠标悬停时才显示的文本

    • weight和height： 宽度和高度（数字，不要加单位！ ）

      • 如果只设置了width/height，另一个会等比缩放（此时图片不会变形）
      • 如果同时设置了width和height，若设置不当（没有保证等比）会导致图片变形

3-2、音频标签

  1. 场景：在页面中插入音频

  2. 代码： <audio src="" controls>抱歉，您的浏览器不支持audio标签，请升级浏览器</audio>

  3. 特点：

    • 音频标签目前只支持三种格式：MP3、Wav、Ogg

  4. 常见属性：

    • src： 音频的路径
    • controls： 显示播放的控件
    • autoplay： 自动播放（部分浏览器不支持）
    • loop： 循环播放

3-3、视频标签

  1. 场景：在页面中插入视频

  2. 代码： <video src="" controls>抱歉，您的浏览器不支持video标签，请升级浏览器</video>

  3. 特点：

    • 音频标签目前只支持三种格式：MP4、WebM、Ogg

  4. 常见属性：

    • src： 视频的路径
    • controls： 显示视频控件
    • autoplay： 自动播放（*谷歌浏览器中需配合muted实现静音播放
    • loop： 循环播放

4、链接标签

4-1、链接标签的介绍

  1. 场景：点击之后，从一个页面跳转到另一个页面
  2. 代码： <a href="目标路径"></a>

在表示空链接时可写成：

  1. 特点：

    • 双标签，内部可以包裹内容
    • 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

  2. 显示特点：

    • a标签默认文字有下划线
    • a标签从未点击过，默认文字显示蓝色
    • a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）

  3. 属性：

    • href：目标网页路径

    • target：目标网页打开方式，有两个值：

      • _self：默认值，在当前窗口跳转，会覆盖原有网页
      • _blank：在新窗口跳转
avatar
文章
阅读
粉丝