学习Web开发的第一天，关于HTML那些事儿······-CSDN博客

本文链接：https://blog.csdn.net/qq_54691046/article/details/122992975

随着技术的不断更新，自2005年Web进入2.0时代后，网页的功能变得越来越丰富，内容不再只是静态页面，而且和用户交互也逐步增加，这对于开发人员的要求自然也就越来越高···

然而综上所述这些这篇文章并没有什么关系，作为一名普通的在校大学生，Web开发并不是我所修读的主要方向，俗话说技多不压身，所以最终还是打算跟随着CS142去一点点学习一下这方面的内容，并且通过博客简单记录学习过程，就当是学习笔记了。莴苣蒻~

那么接下来就进入正题。

第一天主要是了解一下静态网页布局，也就是对于"HTML"的认知学习：

HTML

HTML(HyperText Markup Language)，即超文本标记语言。主要是一种标签语言，相对于那些后端的编程语言来说比较简单，对于新手也比较友好，它同CSS都不需要配置环境或者编译器，即便是用最简单的记事本也可以进行编写。

1.基本语法和结构

(1)HTML基本语法：

1. Start with content to be displayed.

2. Annotate it with tags (HTML uses < > to denote tags).

即从你想要展示的内容开始，用闭合的标签(<tag></tag>)注释它：

eg: <tag>你想要展示的内容</tag>

(2)HTML基本结构

注：我们主要是在<body></body>标签中进行网页内容的输入，而在<head></head>中进行关联CSS和JS的文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--主要是在此处进行文本的输入-->
</body>
</html>

2.HTML常用标签(tags)

(1)格式：`<[tag] [attributes]>[content]</[tag]>`

(2)常用标签：

主要列举了大部分的对于内容进行布局的标签，一些对于内容显示样式的属性和标签我们都建议将其放置在外部的CSS文件中通过<head>中的<link>标签进行级联。

<p>: 段落
<br>: 换行（该标签可不闭合）
<h1>, <h2>, …:
<b>, <i>: 粗体，斜体
<pre>: 主要用于代码块
<img>: 图片
<a href="url">: 超链接
: 注释
<table>, <tr>, <td>: 表格
<ul>, <li>: 无顺序的列表 (unordered list)
<ol>, <li>: 有顺序的列表 (ordered list)
<div>: 将一些标签组合在一起，可以说是最常用的标签
<span>: 和 <div> 标签类似，不过 <div> 标签强制换行，<span> 标签不换行
<form>, <input>, …: 主要用于表单

#在 <head> 中也有一些常用的标签：

<title>: 显示网页标题
<link>: 引入外部 CSS 文件
<script>: 引入外部JS脚本文件
<meta>: 指定一些”元属性“，比如文件编码（utf-8等）

3.HTML 特殊字符编码

<，>，&，" 等在 HTML 中有特殊含义，如需直接显示需要进行编码。

常见编码：

< 对应 < (little)
> 对应 > (great)
& 对应 & (ampersand)
" 对应 " (quote)
  对应不间断空格 (non-breaking space)

在大多数情况下，任意两个词之间的空格数目并不重要，但也有例外（如<pre> 和 <textarea> 标签）。