1.前端三门技术

学习Web前端技术需要掌握三门基本技术：HTML，CSS，JavaScript：

HTML：HTML是网页内容的载体。内容就是网页制作者放在页面上想要用户浏览的信息，可以包含文件、图片、视频等
CSS：CSS样式是表现，就像网页的外衣比字体、颜色变化等
JavaScript：JavaScript用来实现网页上的特效效果。比如鼠标滑过弹出下拉菜单、鼠标滑过北京颜色改变等

使用工具：HBuilder

首先来写一个简单的HTML代码：

<html>
	<body>
		<h1>My First Heading</h1>
		<p>My first paragraph</p>
	</body>
</html>

在这里插入图片描述
通过如上可以发现，HTML是网页内容的具体载体。接下来我们写一个CSS代码：

<html>
	<head>
		<meta charset="utf-8">
		<style type = "text/css">
			body {color:red}
			h1 {color:#00ff00}
			p.ex {color:rgb(0,0,225)}
		</style>
	</head>
	<body>
		<h1>My First Heading</h1>
		<p>My First Paragraph.在body选择器中定义了本页面的默认文本颜色。</p>
		<p class = "ex">该段落定义了class = "ex"，使得段落中的文本是蓝色的。</p>
	</body>
</html>

在这里插入图片描述
第一个JavaScript代码如下：

<html>
	<body>
		
		<script type = "text/javascript">
			document.write("Hello my first JavaScript code!")
		</script>
		
	</body>
</html>

在这里插入图片描述

2.HTML标签

2.1.HTML简介

2.1.1.HTML简介

HTML是由于创建网页的语言。我们通过使用HTML标记标签创建HTML文档来创建网页。HTML代表超文本标记语言，它具有标记标签的集合。
HTML标签是由尖括号括起来的词，如<html>、<body>，标签通常成对出现，例如<html>和</html>。
一对中的第一个标签是开始标签，第二个是结束标签，我们也可以称之为起始标签和闭合标签。

2.1.2.HTML元素

I like <code>web</code> and CSS.

起始标签是<code>，结束标签是</code>。标签之间是元素内容，即web，标签和内容一起形成代码元素。

元素告诉浏览器您的内容。元素的效果应用于元素内容，每个HTML标签都有不同的特定的含义
元素名称不区分大小写。HTML标签不区分大小写，浏览器会识别<code>和<CODE>，甚至能识别<CoDe>，<H1>和<h1>是一样的，但是建议小写
HTML定义了在HTML文档中实现各种角色的不同类型元素。

2.1.3.HTML文件结构

一个HTML文件是有自己的固定结构的

<html>
	<head>...</head>
	<body>...</body>
</html>

代码讲解：

<html></html>成为根标签，所有的网页标签都在<html></html>中
<head></head>标签由于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来

2.1.4.HTML注释

HTML注释：代码注释不仅能方便程序员回忆代码用途明晰思路，也可以让其他人快速读懂你的代码，方便合作开发，语法如下：

<!--注释内容-->

2.1.5.HTML语义化

语义化：通俗的说就是明白每个标签的用途（在什么情况下使用这个标签合适），你如网页的文章标题就得用标题标签。
语义化的作用：

更容易被搜索引擎收录
更容易让屏幕阅读器读出内容

2.1.6.HTML文档类型

\<!DOCTYPE>

作用：帮助浏览器正确地显示页面

Web世界存在许多不同的文档，只要了解文档类型，浏览器才能正确地显示文档。HTML也有许多不同的版本，只有明白页面中使用的确切的HTML版本，浏览器才能完全正确地显示出HTML页面，这就是<!DOCTYPE>的用处。它不是HTML标签，而是为浏览器提供一种信息。注意：

必须放在HTML文档的第一行
声明不是HTML标签

常用声明如下：

HTML 5：

<!DOCTYPE html>

HTML 4.01：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML乱码解决：当页面出现乱码时，在在<head></head>标签之间添加:“\<meta charset="utf-8">”

前端——HTML