web前端学习笔记1

news2024/9/23 9:32:16

前端学习笔记

1. 走进HTML

1.1 什么是HTML

超文本标记语言(英语：HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

HTML文档的后缀名
- .html
- .htm
以上两种后缀名没有区别，都可以使用
HTML案例1：以下是 demo1-我的第一个网页.html 文档的内容

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>html教程</title>
  </head>
  <body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
  </body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<meta> 元素包含了文档的元（meta）数据，如 <meta charset=“utf-8”> 定义网页编码格式为 utf-8。
< title> 元素描述了文档的标题
< body>元素包含了可见的页面内容
<h1> 元素是 HTML 页面的标题
<p> 元素是 HTML 页面的段落标签

1.2 HTML的发展史

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

1.3 W3C标准

W3C标准是由 万国网络联盟（World Wide Web Consortium，简称W3C）制定和推广的一系列网络技术标准。这些标准旨在确保网页在不同设备、平台和浏览器之间的无障碍访问和互操作性，同时提供一致的用户体验。

W3C标准包括但不限于以下技术:

HTML（HyperText Markup Language）是用于创建网页的标准标记语言。
CSS（Cascading Style Sheets）用于控制网页的样式，如文本、颜色和布局。
XML（Extensible Markup Language）是一种可扩展的标记语言，用于定义数据结构。
DOM（Document Object Model）是网页的结构化表示，它定义了网页内容的层次和交互方式。
JavaScript 是一种用于控制网页行为的脚本语言，用于创建动态和交互式的网页应用。

W3C官网地址：

http://www.w3.org/
http://www.chinaw3c.org/
HTML案例2： demo2-清平乐诗词.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>清平乐·年年雪里</title>
  </head>
  <body>
    <h1>清平乐·年年雪里</h1>
    <em>朝代: 宋朝</em> &nbsp;&nbsp;作者: <strong>李清照</strong><br />
    <hr />
    原文:
    <p>
      年年雪里，常插梅花醉，<br />
      挼尽梅花无好意，赢得满衣清泪！<br />
      今年海角天涯，萧萧两鬓生华。<br />
      看取晚来风势，故应难看梅花。
    </p>
  </body>
</html>

效果图如下：

1.4 网页编辑工具

可以使用专业的 HTML 编辑器来编辑 HTML，菜鸟教程为大家推荐几款常用的编辑器：

VS Code：https://code.visualstudio.com/
Sublime Text：http://www.sublimetext.com/
WebStorm：https://www.jetbrains.com/zh-cn/webstorm/
HbuilderX: https://www.dcloud.io/hbuilderx.html
记事本Note Pad 或 Note Pad++ 都是大神使用的

你可以从以上软件的官网中下载对应的软件，按步骤安装即可。

1.4.1 VS Code创建HTML文件

接下来我们将为大家演示如何使用 VS Code 工具来创建 HTML 文件：

打开vscode工具

安装简体中文插件：Chinese (Simplified) (简体中文)

安装使用服务器启动页面：Live Server

安装插件：open in browser

新建工作目录：web/day01, 在day01中添加三个文件夹css、img、 js, 使用vscode打开day01目录

在资源管理器中，点击右上角 ‘’新建文件‘’ 或点击鼠标右键选择 “新建文件”，输入文件名以 .html 进行结尾。
在文件输入 ! 后选中回车，就自动生成html文档模板对于的文件
修改title标签中的内容和body标签中的内容，然后启动页面，
使用浏览器打开demo1.html

启动网页：在demo1.html文档中，点击右键选择: Open with Live Server

1.5 网页基本信息

1.5.1 HTML网页基本结构

网页主要是使用 标签(tag) 组合嵌套而成的一个文档结构，本质上是一个文本类型的文档，只不过后缀名使用的是**.html** 结尾，表示是网页文档，可以使用文档编辑器进行编辑，可以使用浏览器进行打开运行。

标签又分为开始标签和结束标签，标签有标签名称，属性列表等组成。

标签与标签之间可以进行嵌套使用，如：<div><span>文字</span></div>
下面是一个网页的基本结构组成

<!-- 1. DOCTYPE是文档声明 -->
<!DOCTYPE html>
<!-- 2. html是文档的根目录 -->
<html lang="en">
  <!-- 3. head是文档的头部 -->
  <head>
    <!-- 3-1. metat标签设置或规定了文档字符集、视口等特征行为 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 3-2. title标签是网页显示时标题显示的内容 -->
    <title>我的第一个html文档</title>
  </head>
  <!-- 4. body页面的主体部分，我们开发时写标签的地方，也是网页显示的内容区域 -->
  <body>
    hello world!
  </body>
</html>