前端三剑客 HTML+CSS+JavaScript ② HTML相关概念

这篇具有很好参考价值的文章主要介绍了前端三剑客 HTML+CSS+JavaScript ② HTML相关概念。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

他们这样形容我是暴雨浇不灭的火

—— 24.4.18

学习目标

理解

HTML的概念

HTML的分类

HTML的关系

HTML的语义化

应用

HTML骨架格式

sublime基本使用

一、HTML初识

HTML指的是超文本标记语言，是用来描述网页的一种语言

超文本：暂且理解为“超级的文本”，和普通文本相比，内容更加丰富

HTML不是一种编程语言，而是一种标记语言

标记：文本想要变成超文本，就需要用到各种标记符号

标记语言是一套标记标签

语言：每一个标记的写法、读音、使用规则，构成了标记语言

HTML发展历史：

作用：

网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了

所谓超文本，有两层含义：

①因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）

②不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）
<img src = "timg.jpg" />
html总结：

① html是超文本标记语言

② 我们学习html主要学习html标签

③ 我们用html标签描述网页元素，比如：图片标签、文字标签、链接标签等等

④ 标签有自己的语法规范，所有的html标签都是用 <> 表示的

二、HTML初体验

文本文件：

将属性后缀的.txt改为.html，点击打开

html文件

修改文本文件

三、HTML元素标签分类

标签

在HTML页面中，带有"<>"符号的元素被称为HTML标签，如上面提到的<html>、<head>、<body>都是HTML骨架结构标签

分类

1.常规元素（双标签）
<标签名> 内容 </标签名>
    比如：<body> 我是文字 </body>
该语法中，“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>”表示该标签的作用结束，一般“称为结束标签（end tag）”。

和开始标签相比，结束标签只是在前面加了一个关闭符“/”

我们以后接触的基本都是双标签

2.空元素（单标签）
<标签名 />
    比如 <br />
空元素用单标签表示，简单点说，就是里面不需要包含内容，只有一个开始标签不需要关闭，单标签的 / 可以省略

这种单标签非常少，我们多记忆就好

例：

四、HTML标签关系

主要针对于双标签的相互关系分为两种：务必熟悉！

嵌套关系/包含关系/父子关系
<head>
    <title> </title>
</head>
并列关系/兄弟关系
<head></head>
<body></body>
倡议：

如果两个标签是嵌套关系，子元素最好缩进一个tab的身位，如果是并列关系，最好上下对齐

总结：

html双标签，可以分为：一种是父子级包含关系的标签一种是兄弟级并列关系的标签

例题：

五、标签属性

1.用于给标签提供附加信息

2.可以写在：起始标签或单标签中，形式如下：

3.个别特殊的属性没有属性名只有属性的值
<input disabled>
一个标签只能写一次同种类型的种类属性名和属性值都不区分大小写

4.注意点：

①不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写）

②属性名、属性值不能乱写，都是W3C规定好

③属性名、属性值不区分大小写，但是推荐小写

④双引号，也可以写成单引号，甚至不写，但推荐写成双引号

⑤标签中不要出现同名属性，否则后写的会失效

六、HTML基本结构

浏览器的开发者框架

骨架格式

HTML有自己的语言语法骨架格式：要求无比非常流畅的默写下来
<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>
html骨架标签练习

1.创建一个01.html骨架标签的TXT文件

2.里面写入刚才的HTML骨架

3.把后缀名改为.HTML

4.右击浏览器打开
<html>
    <head>
        <title>第一个页面，一切都会好的</title>
    </head>
    <body>
		一切都会好的	
		我一直相信
    </body>
</html>
html骨架标签总结

团队约定大小写

HTML标签名、类名、标签属性和大部分属性值统一用小写

总结

1.在网页中，如何查看某段结构的具体代码？—— 点击鼠标右键，选择”检查“

2.【检查】和【查看网页源代码】的区别：

        【查看网页源代码】看到的是程序员编写的源代码

        【检查】看到的是经过浏览器”处理“后的源代码

备注：日常开发中，【检查】用的最多

3.网页的基本结构如下：

①想要呈现在网页中的内容写在body标签中

②head标签中的内容不会出现在网页中

③head标签中的title标签可以指定网页的标题

④图示：

        ⑤代码：
<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

七、安装VSCode

1.VSCode优点：

轻量便捷功能丰富免费使用插件优秀通吃各种语言

2.官网下载VSCode

VScode的官网链接，点击即可
推荐国内的镜像地址：

3.下载中文包

4.调整字体大小

设置——字体——字体大小

5.设置主题

6.安装图标主题：vscode-icons

7.使用VSCode快速打开网页

安装live-server

用vscode打开html文件

鼠标右键点击open with live server

文件夹打开：文件路径

vscode打开：服务器路径

用liveserver打开网页可以实时更新

设置自动保存设置保存时间间隔

当点击页面以外，则失去焦点，自动进行保存

当鼠标离开vscode时，进行自动保存

注意：

①liveserver必须用vscode打开文件夹才可以使用

②网页如果不标准则不会自动执行进行刷新文章来源地址https://www.toymoban.com/news/detail-856427.html