前端系统学习篇之HTML

最新推荐文章于 2023-03-31 16:37:28 发布

原创最新推荐文章于 2023-03-31 16:37:28 发布 · 263 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

JavaScript 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了前端开发的基础知识，包括HTML5、CSS3和JavaScript的核心概念。强调了HTML作为网页骨架的作用，以及CSS和JavaScript在表现和行为交互上的分工。此外，还讲解了HTML实体、元数据的设置，如charset、meta标签，以及HTML的语义化和块级元素与行内元素的区别。通过学习，旨在帮助读者达到初级前端开发工程师的水平。

前言

该分类目的是系统学习前端知识做的笔记，HTML5+CSS3+JavaScript+Jquery+vue+前端工程化等等，使自己成为一个全栈工程师，学完水平能达初级前端开发工程师以上。

HTML简介

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言。
HTML 不是一种编程语言，而是一种标记语言，浏览器通过解析标签表现出相应的效果。
标记语言是一套标记标签。
HTML 使用标记标签来描述网页

一个网页包含骨架+表现+行为，HTML就是起了一个骨架作用，CSS使用样式来起表现作用，JavaScript起行为交互作用。

学习HTML就是要学习HTML的各类标签及其语义，应当忽略标签带来的样式不同，只关注语义，样式统一交给CSS来处理。

辅助文档地址：https://www.w3school.com.cn/html/html_jianjie.asp

一个HTML文档的基本结构

<!-- 文档声明，声明当前网页的文档 -->
<!doctype html>
<!-- html根标签（根元素），网页中所有的内容都要写在根标签里面 -->
<html>
	<!-- head是网页的头部，head的内容不会在网页中直接出现，主要用来帮助浏览器或者搜索引擎来解析网页 -->
	<head>
		<!-- meta标签用于设置网页的元数据，下面的设置时设置网页的字符集为utf-8 -->
		<meta charset="utf-8">
		<!-- title标签会显示在网页的标题栏，并且搜索引擎主要根据title中的内容来判断网页的主内容-->
		<title>HTML学习</title>
	</head>
	<!-- body标签是html的子元素，表示网页的主体内容，网页中所有的可见内容都应该写在body标签里面 -->
	<body>
		<h1>HTML学习大标题<h1>
	</body>
</html>

实体

在网页中编写多个空格都会被浏览器解析为只有一个空格，或者数学的大于小于号，这些特殊的字符不能直接书写，如果我们要书写这些字符，就需要用到html中的实体（转义字符）。
在这里插入图片描述

实体的语法：以"&“开头，”;"结尾，中间是实体的名称。
&实体的名称;
比如空格是  
在这里插入图片描述

meta元数据简介

使用head标签的meta子标签来设置网页的元数据，这些数据不是给用户看的，而是协助浏览器或者搜索引擎进行解析。
举例子：

charset ,用于设置网页的字符集，避免字符乱码。
name，content，类型与map的key value，用法是<meta name=“keywords” content=“学习HTML”> 设置该网页的关键字，用于搜索引擎进行搜索，比如京东的。

搜索购物，会出现京东，是因为主页上设置了关键字购物。
3 .http-equiv ，常见用法是<meta http-equiv=“refresh” content=“5;https://www.baidu.com”>
浏览器会解析该元数据，导致，该网页会在5秒后重定向到 https://www.baidu.com。

语义化

html标记语言是用于编写网页的结构，所以在编写html网页时，应该关注标签的语义，而不是样式，样式要用css来控制。
h1-h6标签是表示从一级标题到6级标题，重要性从高到低，他在浏览器中默认的样式是从h1-h6逐步减少，但是我们不应该为了小字体而使用h6，为了大字体而使用h1，而应该要根据标题的重要程度（语义）来使用，具体字体的大小要用css来控制。

块元素与行内元素简介

块元素（block）：独自一行，在网页中，一般用块元素来进行布局。
行内元素（in-line）：不会独自一行，在行内，行内元素主要用于包裹文字。
一般情况下会在块元素中使用行内元素，而不会在行内元素中使用块元素。P元素不能放任何块元素。
比如div就是块元素，span就是行内元素。
在这里插入图片描述

因为div是块元素，所以div前面的自成一行，后面自成一行，所以变成了3行，span是行内元素，所以不会独自一行，跟前后的组成一行。