HTML知识体系搭建（一）

最新推荐文章于 2024-03-16 16:59:41 发布

甜度刚好

最新推荐文章于 2024-03-16 16:59:41 发布

阅读量569

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_55964437/article/details/125041895

版权

文章目录

一、网页

二、常用浏览器

三、web标准

四、HTML 语法规范

五、基本结构标签

六、常用开发工具

前言(英语角)

在本篇文章中将出现以下单词，在开始学习前，您可以熟悉一下：

英文	中文
doctype	文档类型
lang	语言
head	头部，顶部
meta	变化，变换
charset	字符集
content	满足，居中，内容
name	名字
title	标题
body	身体，躯干
open	打开

一、网页

网站是相关网页的集合；

网页是构成网站的基本元素，以“.html”或".htm"后缀结尾的文件,通过浏览器呈现出来。简称HTML文件。

HTML是超文本标记语言，由各种标签组成。

超文本标记语言：可以加入图片、动画、多媒体（超越了文本限制）//可以从一个文件跳转到另一个文件（超级链接文本）
返回目录

二、常用浏览器

1.常用浏览器

IE浏览器、火狐浏览器、谷歌浏览器、Safar浏览器和opera浏览器。

查看浏览器市场份额：http://tongji.baidu.com/data/browser

2.浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器	内核
IE	Trident
firefox	Gecko
Safari	Webkit
chrome/Opera	Blink

返回目录

三、web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。

为什么需要Web标准？（浏览器不同，它们显示页面或者排版就有些许差异。）
Web标准的构成

主要包括结构（HTML）、表现（CSS）和行为（JS）三个方面。

web标准提出的最佳体验方案：结构、样式、行为相分离。
返回目录

四、HTML 语法规范

基本语法概述
《1》.关键词由< > 包装。 <html>
《2》.基本成对出现。 <html>(开始标签) </html>(结束标签)
《3》.有部分为单标签。<br/>(换行标签)
标签关系（包含【父子关系】、并列【兄弟关系】）
返回目录

五、基本结构标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

标签名	标签
HTML标签（根标签）最大的标签	`<html></html>`
文档的头部	`<head></head>`
文档标题（网页标题）	`<title></title>`
文档主体（元素包含文档的所有内容）	`<body></body>`

head标签中我们必须设置title标签
返回目录

六、常用开发工具

VSCode的使用

双击打开软件。
新建文件（Ctrl + N）。
保存（Ctrl + S），注意移动要保存为.html文件。
Ctrl + 加号键/减号键可以实现视图的缩放。
生成页面骨架结构。
输入！按下 Tab 键
利用插件在浏览器中预览网页：单击鼠标右键，在弹出窗口中点击"Open In Default Browser"。

推荐安装的插件：Chinese \ Open in Browser \ css peek \ Auto Rename Tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

我们来看看文档类型声明标签

标签	含义
`<!DOCTYPE html>`	表示当前页面使用HTML5版本显示（必须位于开头）
`<html lang="en">`	用来定义当前文档显示的语言（en 英语；zh-CN 中文）
`<meta charset="UTF-8">`	用来定义当前文档显示的字符集

返回目录

以上就是我们今天学习的全部内容，希望大家学习愉快！后续我将继续发送笔记。感谢大家的支持！！

甜度刚好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML知识体系搭建（一）

文章目录一、网页二、常用浏览器三、web标准四、HTML 语法规范五、基本结构标签六、常用开发工具前言(英语角)在本篇文章中将出现以下单词，在开始学习前，您可以熟悉一下：一、网页网站是相关网页的集合；网页是构成网站的基本元素，以“.html”或".htm"后缀结尾的文件,通过浏览器呈现出来。简称HTML文件。HTML是超文本标记语言，由各种标签组成。超文本标记语言：可以加入图片、动画、多媒体（超越了文本限制）//可以从一个文件跳转到另一个文件（超级链接文本）返回目录二、常
复制链接

扫一扫