HTML初识别 | 青训营笔记

WCHO
120 阅读5分钟

HTML初识别

基础认知

基础概念

网页

一个网页由文字，图片，音频，视频，超链接等一个或多个部分组成。

网页背后本质是前端程序员写的代码通过浏览器转化（解析或渲染）成用户所看到的网页。

浏览器

浏览器是网页显示，运行的平台。常见的五大浏览器为：IE浏览器（现在为edge浏览器），火狐浏览器，谷歌浏览器和欧朋浏览器。

浏览器中专门对代码进行解析渲染的部分为渲染引擎，也称为浏览器内核。浏览器出品的公司不同，内在的渲染引擎也是不同的。

渲染引擎不同，解析相同代码的速度，性能，效果也是不同的

注：谷歌浏览器的渲染引擎速度快，性能高，效果好，所以更吸引用户的喜爱

web标准

由于不同浏览器的渲染引擎不同，对于相同的代码解析的效果会存在差异，可能会导致同一个网页在不同的浏览器打开效果不同。于是就诞生了web标准。

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

web标准由三个部分构成

  • HTML，组成网页的页面页面元素与内容

  • CSS，组成网页元素的外观与位置等页面样式（如：颜色，大小等）

  • JavaScript，实现网页模型的定义与页面交互

初识HTML

HTML概念

HTML（Hyper Text Markup Language）中文译为：超文本标记语言，专门用于网页开发的语言。HTML主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。

HTML页面固定结构

网页中的固定结构是要通过一些特定的HTML标签进行描述的，HTML骨架结构由一下标签组成：

  • html标签：网页的整体

  • head标签：网页的头部

  • body标签：网页的身体

  • title标签：网页的标题

VS code快捷键

保存文件：ctrl+s

快速查看网页效果：ait+b。注：必须安装open in browser插件！

快速生成标签：英文+tab

HTML语法规范

注释

格式：

<--!-->

注释的作用：为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码。浏览器执行代码时会忽略所有的注释。

VS code中注释的快捷键：ctrl+/

标签结构

  • 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名

  • 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。如：<p></p>，<strong></strong>

  • 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。如：<br>，<hr>

标签关系

HTML之间的关系可分为：

  • 父子关系（嵌套关系），如：

      <head>
      <title></title>
  </head>

  • 兄弟关系（斌列关系），如：

      <head></head>
  <body></body>

HTML标签学习

排版标签

标题标签

即h系列标签，一般在由新闻和文章的页面中，都离不开标题

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

特点：1~6级标题，重要程度依次递减，文字逐渐减小，文字都有加粗，变大，且都独占一行。

段落标签

即<p></p>标签，用于分段显示

特点：段落之间存在间隙，且独占一行

换行标签

即<br>，用于让文字强制换行显示

特点：单标签，可以让文字强制换行显示

水平线标签

即<hr>，用于分割不同主题内容的水平线

特点：单标签，在页面中显示一条水平线

文本格式化标签

  • b，strong：加粗

  • u，ins：下划线

  • i，em：倾斜

  • s，del：删除线

作用是突出重要性的强调语境

媒体标签

图片标签

<img src='' alt=''>，作用是在网页中显示图片

特点：单标签，且img标签需要借助标签的属性进行设置

src属性：属性值为目标图片的路径

alt属性：属性值为替换文本。注：当图片加载失败时才会显示alt文本

title属性：属性值为提示文本。当鼠标悬停在图片上市将会显示文本。title属性还可以用于其他标签

width和height属性：设置图片的长宽。若只设置两个中的一个，另一个将会按照原图比例进行缩放。如果两个都设置，若设置比例不当则会导致图片变形

路径介绍

页面需要找到图片，也是需要通过路径才能找到

路径可分为：

  • 绝对路径（了解）

  • 相对路径（常用）

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径，例如：

相对路径：从当前文件开始出发找目标文件的过程。相对路径可分为：

  • 同级目录：当前文件和目标文件在同一目录中

    • 方法：直接写目标文件的名字即可

    • 例如：<img src="目标图片.gif">或者<img src="./目标图片.gif">

  • 下级目录：目标文件在下级目录中

    • 方法：进入目标文件夹并选择目标文件

  • 上级目录：目标文件在上级目录中

    • 方法：先使用../到上一级目录，再选择目标文件

音频标签

即<audio src = "./music.mp3" controls></audio>。作用时在页面中插入音频

注：音频标签目前仅支持三种格式：mp3，wav，ogg

常见属性：

  • src：音频的路径

  • controls：显示播放的控件

  • autoplay：自动播放（部分浏览器不支持）

  • loop：循环播放

视频标签

即<video src="./video.mp4" controls></video>。作用是在页面中插入视频

常见属性有：

  • src：视频的路径

  • controls：显示播放的控件

  • autoplay：自动播放（谷歌浏览器需要配合muted实现静音播放）

  • loop：循环播放

注：视频标签目前仅支持三种格式：mp4，webm，ogg

链接标签

即<a href = "./目标网页.html">超链接</a>。作用是从一个页面跳转到另一个页面

特点：如需进去指定页面，需设定a标签的href属性。在开发初期若不知道需要设置什么href属性，可暂时先设置为#

常用属性：

  • href：用于设置跳转的网站，也就是目标网页的路径

  • target：用于设置目标网页的打开形式，可设置的值有：

    • _self：默认值，在当前窗口中跳转，即覆盖原网页

    • _blank：在窗口中跳转，保留原网页

avatar
文章
阅读
粉丝