前端三剑客 HTML+CSS+JavaScript ② HTML相关概念
时间：2024-04-22 07:05:23 来源：网络cs 作者：焦糖 栏目：ERP系统 阅读：
他们这样形容我 是暴雨浇不灭的火
—— 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.kjpai.cn/news/2024-04-22/161083.html，文章来源：网络cs，作者：焦糖，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
上一篇：一文搞懂Nginx(上)
下一篇：返回列表