罗不丢
罗不丢

HTML入门

HTML入门

  • 前言
  • HTML的基本结构
    • 头结构的常见的一些配置
  • 常用标签
    • 网页内容里的标题标签
    • 超链接
    • 图像
    • 表格
    • 表单
      • 这里对HTML的type属性做一部分解释
  • HTML的事件
      • 常见触发事件
      • 焦点的概念
  • 总结

在这里插入图片描述

前言

HTML（HyperText Markup Language）也叫作超文本标记语言，这个超文本意思就是除了文本以外，它还能表示图像，链接，等等信息。

从某种角度来看，它甚至称不上代码，而且极其简单，基本都只是记忆性内容，所以很容易被还在学后端的新手（没错，就是我自己）所忽视。但是当真正开始写前端代码时，却又无从下手，写这篇博客是给笔者自己提个醒，不要对前端太敷衍。

HTML的基本结构

  1. HTML文档通常包括声明，用于指定文档的HTML版本。
  2. 文档的主体内容包含在标签内。
  3. 标签用于包含文档的元信息，如标题、字符集设置、链接到外部资源等。
  4. 标签包含网页的可见内容，如文本、图像、链接等。

这里以Vscode为编辑器来对html文件进行操作，顺便说一下HTML常用注释是而不是//

在这里插入图片描述

DOCTYPE html>
<html>
<head>
	<title>网页标题title>
head>
<body>
	<p>网页内容p>
body>
html>

运行结果
HTML入门_第1张图片

这是最简单的结构示例。
：这是HTML5的文档类型声明，告诉浏览器当前文档是使用HTML5编写的。HTML4的声明很复杂且已过时，不用去研究。

：这对标签包含了文档的元信息，如标题、字符集设置、链接到外部资源等。

：这里面是定义网页标题的，也就是图片中左栏的中的标题（多数浏览器这个是在上方的，但我比较喜欢竖栏）。

常见标签页标题长这样：在这里插入图片描述

：这里面是定义网页内容的,也就是运行结果图片中白色的部分，这也是呈现给用户内容最多的地方。

：除了HTML版本声明外，其他的内容都要被它包裹进来。

头结构的常见的一些配置

标签：配置页面元数据，如网页的关键字、描述、编码方式等。例如：


<meta charset="UTF-8">

<meta name="keywords" content="HTML, web, development">

<meta name="description" content="This is a sample webpage.">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

标签：引用外部资源，如CSS文件、JavaScript文件、图标等。

<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">

第一个标签，rel属性为icon，表示设置网页的图标，type属性为image/png，表示设置图标的类型为PNG格式，href属性为favicon.png，表示图标的URL。

第二个标签，rel属性为preconnect，表示预连接到指定的URL，href属性为https://fonts.gstatic.com，表示要预连接到Google Fonts服务，以加速加载外部字体。

第三个标签，rel属性为stylesheet，表示引入CSS样式表，href属性为Google Fonts服务的URL，其中family参数表示要使用的字体系列，后面的数字表示字体的粗细程度，display属性为swap，表示浏览器优先加载此字体，以防止Flash of Unstyled Content (FOUC)现象