HTML初级详细图解

最新推荐文章于 2024-12-16 16:52:23 发布

原创

最新推荐文章于 2024-12-16 16:52:23 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #大前端

本文详细介绍了HTML的基础知识，包括HTML、CSS、JavaScript的关系，单标签与双标签的区别，内联元素和块级元素的概念，以及HTML的全局属性如id、class。还讲解了VSCode的安装与使用，Web的概述，以及HTML的概念、规则和基础元素的用法，如标题、段落、换行、预格式化文本和按钮等。此外，文章还涵盖了超链接、图像标签和全局属性如style、id、class的应用。

重点内容：

1.html、css、js三者的关系

2.单标签和双标签的区别

单标签不能包裹文字和其它标签，双标签可以包裹文字和其它标签

3.内联元素和块级元素

内联元素也叫作行内元素，不自占一行，内容有多大撑多大，没有内容，就什么都没有。

块级元素，默认（没有单独设定宽度的时候）自占父元素的一行

文字的级别和内联元素的级别是一致的

4.br换行

br换行标签，不能做结构布局使用，建议用在文本换行，比如，两个段落

5.元素的全局属性

（1）id元素的唯一标识，不允许重复，不允许多个，不允许数字开头。如直接获取该元素，传输接收数据的元素

（2）class 类属性，重点，代表当前元素归类，不允许数字开头，常用于样式的设置,可以写多个类的值，中间用空格分卡，也可以和其它元素具有相同的类名

6.空连接

<a href="javascript:void(0);">void(0)返回undefined不做任何处理</a>

<a href="javascript:;">执行一条空语句</a>

二、vscode 的安装与使用

1. 软件下载

下载地址https://code.visualstudio.com/

2. 软件的使⽤

需要下载的插件

三、web 的概述

1. Internet 互联网

Internet 互联网是一种系统架构，通过允许世界各地的各种计算机网络互连。Internet 服务指的是为用户提供的互联网服务，包括 www。internet 提供的服务有：

1. 远程登录服务(Telnet)

2. 文件传输服务(FTP)

3. 电子邮件服务(E-Mail)

4. 网络新闻服务(Usenet)

5. 名址服务(Finger、Whois、X.500、Netfind)

6. 文档查询索引服务(Archie、WAIS)

7. 信息浏览服务(Gopher、WWW)

8. 其它信息服务(Talk、IRC、MUD)

2. web 万维网

“万维网”（World Wide Web）www，也就是我们现在所熟知的 Web。万维网用链接的方法能非常方便地从互联网上的一个站点访问另一个站点，从而主动地按需获取信息。万维网中每个站点都存放了许多文档（文件、多媒体文件、图片等），供互联网上的主机查阅。

3. 前端开发和 web

前端开发流程就是创建一个 web 页面或者一个 app 应用的过程，它涉及三种语言分别是 html、css、JavaScript。

三者的关系

网页前台分三个层次：内容层，样式层，行为层。

- 内容层用 HTML 表现

- 样式层用 CSS 规定

- 行为层用脚本 JavaScript 控制

四、HTML 概述

1. HTML 概念

（1）HTML 含义

HTML 的英文全称是 Hyper Text Markup Language，超文本标记语言。

HTML 是构建页面的标记，它用于承载网站的内容，如：文本、图片、音频、视频等。

（2）HTML和网页

HTML 的标签和纯文本按规则的组成成为一个“网页”。

对应的 html 代码：

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8" /> 
<title>这是⼀个⻚⾯</title> 
</head> 
<body>
    <h1>这是⼀个简单的⻚⾯</h1> 
    <p>⻚⾯中是⼀个游戏《使命召唤》</p> 
    <h2>宣传海报</h2> 
    <img src="../1.jpg" alt="使命召唤宣传海报" width="600" /> 
    <h2>宣传⽚</h2> 
    <video src=".使命召唤8-预告⽚.mp4"></video> 
</body> 
</html>

（3）HTML 的规则

- 文档结构规则

- 标签书写规则

- 属性书写规则

- 文件加载规则

- 标签嵌套规则

- HTML 注释规则

2.⽂档结构规则