纯静态单页网站,搜索引擎是网站吗,网站怎么建站点,全景网站开发待遇注意#xff1a;手机#xff08;APP#xff09;打开#xff0c;内容显示更佳#xff0c;不会的私聊博主即可 想要拿代码或加入学习计划#xff08;** 博主会监督你并且教你写文章 **#xff09;的拉到最下面#xff08;PC端Web打开#xff09;加博主即可#xff0c;目…注意手机APP打开内容显示更佳不会的私聊博主即可 想要拿代码或加入学习计划** 博主会监督你并且教你写文章 **的拉到最下面PC端Web打开加博主即可目录也在最下面。 参加1_bit博主前端学习计划发文时再头部记得机上本专栏链接示例如下 我已加入 1_bit 博主的免费前端 站起来 学习计划专栏链接https://blog.csdn.net/a757291228/category_11609526.html
一、搞清楚HTML 的一些基本内容
小媛Bit哥你之前的 HTML 课程为什么断更了
1_bit那是因为觉得不够系统的去教学不能称为一门好的课程在此我就想重新弄一门零基础到就业的实战课。
小媛那这个课程就是准备从零到就业吗
1_bit是的这个系列一共分为几个阶段例如 HTML、CSS3、JS、Vue 将会分为几个阶段这样就比较系统的讲解完整个前端到就业的内容了。
小媛哇这么棒。
1_bit这是这个课程的一节课咱们将会普及一下概念与技术内容。例如你知道什么是HTML吗跟HTML5有什么关系
小媛不知道
1_bit那咱们就从头开始讲吧HTML是一个超文本编辑语言是用来编写网页内容的。
小媛那什么是超文本呢
1_bit说到超文本我们还需要了解一个概念那就是超链接。超链接指的是一个网页上的资源对象例如咱们在网页上经常看到一些资源索引链接指向别的网页这个就是超链接超链接是一个网页的一个部分多个网页的超链接结合在一起才能说是一个网站。例如只有一个页面也没有链接超链接指向其他的网页那么就只能说这个页面是一个网站。
小媛明白了原来这个超链接就是链接当前页面和其他页面的一个桥梁
1_bit是这样的。而超文本就是使用了超链接将不同地方的资源链接在一起的文本。例如咱们打开一个网站的页面例如百度搜索引擎咱们搜索一些内容打开后将会跳转到其他页面并且包括一些图片、视频、音频都是多个站点的资源内容这个就是超文本。参考百度百科
小媛原来是这么回事。
1_bit其实从本质上来说咱们打的这个 HTML 代码就是一个文本但是这个文本会链接很多不同地方或者相相同空间区域的内容所以我们称 HTML 是一个超文本编辑语言。
小媛明白了原来这个就是 HTML 编程语言呀。
1_bit你搞错了这个是超文本编辑语言还不能够成为编程语言这个要注意。
小媛嗷嗷明白了。
1_bit还有一点HTML5 是 HTML 的第五个大版本标准你可以可以统称为 HTML在这里所使用的 5 指的是版本内容。
小媛知道了。
二、HTML 的基本结构
2.1 软件使用
1_bit现在咱们开始学习 HTML 的基本内容吧。首先我们需要一个软件对 HTML 内容的进行编辑这个软件使用 VSCode下载安装即可并且可以更改为中文。
小媛收到。
1_bit接下来咱们可以点击按钮新建文件并且输入文件名。
小媛01.html 是文件名吗
1_bit 01 是文件名“.html” 是后缀名这个后缀名表示这个文件是 html 文件就像你用做 ppt 时对应文件的文件名后缀是 “.ppt”这个后缀就表示这个文件是 ppt 的文件或者说你做 word 文档时后缀名是 doc这表示这个是个文档文件不同的后缀名用于标记表示不同的文件内容。
小媛原来如此。
1_bit 接下来在编辑区域输入一个英文的感叹号按步骤点击对应选项将会出现一个基本的 html 结构。 小媛哇出现了。
2.2 结构代码详解
1_bit 这就是一个 HTML 代码的基础结构如果是第一次见的同学肯定不清楚整个代码结构内容我们可以观察发现咱们整个 HTML 代码例如出现了一个 head 就会出现一个 /head出现了一个 body 就会出现另外一个 /body这是因为 HTML 代码一般是“成对” 出现的。
小媛明白了。
1_bit 我们还可以观察到这些 HTML 代码直接有例如 head与 /head 之间是有内容的。 小媛这能说明什么吗
1_bit 这说明HTML代码一般是以一对“标记”来表示内容的。
小媛没听明白。
1_bit 那咱们现在来开始做个示例。在HTML中 h 标签称为标题标签例如咱们在看一些网页内容时会发现有些文本内容会变大加粗这个就是标题并且这些标题有大有小这就是标题。 小媛然后这个跟那个问题有什么关系吗
1_bit刚刚咱们说HTML代码一般是以一对“标记”来表示内容的那现在就看看是如何实现这个标题的。咱们在刚刚完成的HTML代码中输入以下内容其中h1/h1之间是对应的标题修饰的文本h12/h2之间也是对应标题修饰的文本咱们把这些内容放到body/body这个标签之间
h1这个是一个标题1/h1
h2这个是一个标题2/h21_bit咱们打开对应的网页文件发现整个页面如下 小媛咦这个时候竟然把文本内容显示出来了但是 h1/h1这种就没显示。
1_bit对的在网页显示这个内容时将会自动的对一些标签进行转换例如h1/h1之间是用于显示标题1这个大标题的就会把对应其中的文本给显示出来。我们在以上内容中将文本写在 h1/h1 之间就表示使用了 h1/h1 去“修饰”这一段文本那么这个时候浏览器先自己“看”了一遍这整个HTML代码内容看见你使用了h1/h1去修饰这个文本浏览器就明白了这个文本是用作标题的形式显示这时他就会以标题的形式进行显示“这个是一个标题1”这一段文本。
小媛明白了原来是这个意思。
1_bit然后在这里的 h2 所指的是标题2标题1最大所以在显示的时候标题2文本将会比标题1小。
小媛原来是这样的那还有其他3、4、5…这些等级的标题吗
1_bit有的在 HTML 中一共有 H1-H6 这 6 个标签这些标签对应的标题都有不同的大小例如如下代码所示。
h1这个是一个标题1/h1
h2这个是一个标题2/h2
h3这个是一个标题2/h3
h4这个是一个标题2/h4
h5这个是一个标题2/h5
h6这个是一个标题2/h6小媛我还有一个问题这个代码一定要写在body与/body之间吗
1_bit从符合标准的角度上来说是的我个人建议初学者还是按照标准来走。在 HTML 代码中不同的标签有着不同的含义例如你说的 body标签这个标签指整个 HTML 代码的主体你可以理解为整个网页内容部分。
小媛原来是这个意思那其他的标签有什么意思吗
1_bit咱们可以看看以下这张图咱们开始解释目前所出现的 head 内容。 小媛好勒
1_bit在上图中 html 标签表示该网页的 HTML 代码将会写在这一个标签内而head 标签部分表示当前网页的一些信息以及所需要加载的外部 js代码、外部css样式等。外部 js 和 css 暂时咱们还没有了解咱们可以从中查看 meta 标签。
1_bit在当前页面中head标签内出现了 meta 标签meta 标签表示当前页面的相关信息例如 meta charsetUTF-8表示当前页面使用编码格式为 utf-8其中 charset 就是表示当前页面的编码格式而 charset“UTF-8” 表示指定 编码格式为 UTF-8在 UTF-8 前后使用双引号是表示 UTF-8 是一个字符串。在HTML 中字符串都使用双引号、单引号表示例如你有一个超链接你点击这个文本跳转到这个超链接例如 www.baidu.com也需要使用双引号引起来。
小媛那为什么 charset 不需要双引号引起来呢
1_bit那是因为 charset 是HTML 中自带的一种“属性”则不需要使用双引号起来。
小媛那什么是编码格式呢
1_bit编码格式是计算机系统对语言认识的一种“字典”如果没有对应的编码格式对中文、英文、阿拉伯文进行解析那么计算机将不能够使用正确的方式进行显示并且中文、英文有对应的解析“字典”使用中文时就需要指定某一种解析方式而 UTF-8 则是对中文的解析方式。
小媛原来是这个意思呀。
1_bit对的并且我们可以发现 meta 标签并没有结束标签就是带/的单独标签这点需要注意。
1_bit接着我们继续查看 head 标签内的其他内容红色框选部分暂时不做了解因为现在咱们能力还未足够咱们查看 title 标签。 1_bittitle 标签是当前页面的标题。 1_bit更改 title 标签内容将会更改上图框选内容的值。
小媛我懂了是不是这样。 1_bit对的更改完毕后保存刷新网页将会更改其内容。
小媛完成了。 1_bit这节课就上到这下节课介绍其他的内容。
目录
【前端就业课 第一阶段】HTML5 零基础到实战九列表 【前端就业课 第一阶段】HTML5 零基础到实战八表单详解 【前端就业课 第一阶段】HTML5 零基础到实战七文字及图片样式 【前端就业课 第一阶段】HTML5 零基础到实战六表格详解 【前端就业课 第一阶段】HTML5 零基础到实战五基础元素 【前端就业课 第一阶段】HTML5 零基础到实战四伪类与伪元素 【前端就业课 第一阶段】HTML5 零基础到实战三一篇文CSS基础入门 【前端就业课 第一阶段】HTML5 零基础到实战二超链接 【前端就业课 第一阶段】HTML5 零基础到实战一基础代码结构详解
