HTML入门及其概念简析
1.关于前端开发
前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，而前端中最核心的技术便是HTML、CSS以及Java Script。
（1）HTML
HTML的全称为超文本标记语言，是一种标记语言。是用来制作网页的语言。HTML是一个描述性的语言，简单易上手。
（2）CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML的计算机语言，用来静态修饰网页。
（3）Java Script
又叫“JS”，是一种脚本语言。
2.HTML的基本要点
1. HTML由标签组成。标签是用尖括号括起来的文本，它们告诉浏览器如何显示网页内容。
2. HTML文档必须以<!DOCTYPE html>作为开始。这告诉浏览器文档是使用HTML5标准编写的。
3. HTML文档由<head>和<body>两个部分组成。<head>通常包含文档的元数据，如标题、关键字和链接到外部css样式表等等。而<body>包含网页实际的内容。
4. HTML标签通常都是成对出现的，比如<p>和</p>，其中<p>是开始标签，</p>是结束标签。开始标签告诉浏览器开始一个新的段落，而结束标签告诉浏览器段落的结束位置。
5. 标签还可以有属性，用于进一步定义标签的行为或样式。例如，<img>标签用于插入图像，其中的src属性指定图像文件的URL。
6. CSS是一种用于控制网页外观的样式表语言，可以让网页更具吸引力。CSS样式可以内联到HTML标签中，也可以作为外部样式表链接到HTML文档中。
7. HTML还支持超链接，用于链接到其他网页或文档。超链接使用<a>标签，并通过href属性指定链接的URL。
3.HTML的语法规则
-
HTML标签由
<和>符号所包围，并且标签名称不区分大小写。 -
HTML文档由HTML标签构成，包含有头部(
head)和主体(body)两部分。 -
头部(
head)部分包含有文档的元数据，如标题(title)、作者(author)、关键字(keywords)等信息。 -
主体(
body)部分包含有文档的实际内容，例如文本、图片、链接等。 -
HTML标签可以嵌套，但是必须按照正确的层级关系嵌套，不能交叉嵌套。
-
HTML标签可以使用属性来定义标签的行为和属性，例如链接的地址(
href)、图像的路径(src)等。 -
属性值必须使用引号(
""或'')括起来，例如<img src="example.png">。 -
HTML注释的格式为
<!-- 注释内容 -->，其中注释内容不会在浏览器中显示出来。 -
HTML标签有自闭合标签和非自闭合标签两种，自闭合标签在标签内部用
/符号来表示，例如<br/>。
一个基本的HTML文档结构如下所示：
<!DOCTYPE html> <!-- 声明HTML版本 -->
<html> <!-- HTML文档的根元素 --><head> <!-- 文档头部，包含了文档的元数据 --><title>文档标题</title> <!-- 文档标题 --></head><body> <!-- 文档主体，包含了文档的实际内容 --><h1>标题</h1> <!-- 标题 --><p>段落</p> <!-- 段落 --><img src="example.png" alt="图片描述"/> <!-- 图片 --><a href="https://www.example.com">链接</a> <!-- 链接 --></body>
</html>
4.HTML标签
HTML标签可以用于定义文本、图像、音频、视频等内容，并且可以设置样式、链接、表格、表单等功能。
下面是一些常用的HTML标签：
-
<html>：定义网页文档的开始和结束 -
<head>：定义网页文档的头部，一般包含标题、样式表、脚本等元素 -
<body>：定义网页文档的主体部分，包含网页显示的内容 -
<h1>~<h6>：定义标题，其中<h1>为最高级别的标题，<h6>为最低级别的标题 -
<p>：定义段落，用于分隔文本内容 -
<a>：定义链接，可以用于跳转到另一个网页或者文档中的位置 -
<img>：定义图像，可以在网页中显示图片 -
<ul>和<ol>：定义无序列表和有序列表，用于展示一组数据或者信息 -
<table>：定义表格，用于展示大量数据 -
<form>和<input>：定义表单和表单元素，用于用户输入信息
ps.：在使用HTML标签时，需要注意语法和嵌套关系，以保证网页的正确性和可读性。
5.段落与文字
HTML中的段落标签和文字标签用于定义网页中的段落和文本。
（1）段落标签
HTML中的段落标签用于定义一个段落。常用的段落标签是<p>标签。<p>标签将文本包围在一个段落中，并通过添加一些默认的样式将其呈现为分段文本。
例如，下面的HTML代码定义了一个包含两个段落的简单网页：
<!DOCTYPE html>
<html>
<head><title>My Webpage</title>
</head>
<body><p>This is the first paragraph of my webpage.</p><p>This is the second paragraph of my webpage.</p>
</body>
</html>
输出：
This is the first paragraph of my webpage.
This is the second paragraph of my webpage.
（2）文字标签
HTML中的文字标签用于定义文本的样式、大小、颜色等属性。常见的文字标签包括<h1>到<h6>标签，用于定义标题级别，以及<strong>、<em>标签，用于强调文本。以下是常用文字标签的示例：
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<p>This is a paragraph of text.</p>
<strong>This text is strong.</strong>
<em>This text is emphasized.</em>
输出：
<h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3> <h4>Header 4</h4> <h5>Header 5</h5> <h6>Header 6</h6> <p>This is a paragraph of text.</p> <strong>This text is strong.</strong> <em>This text is emphasized.</em>
6.列表
- 有序列表（Ordered List）：使用<ol>标签定义，每个列表项使用<li>标签定义，并在<li>标签中包含希望显示的内容。列表项前面会自动添加数字或字母，并且可以通过CSS控制样式。
示例代码： <ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol>
- 无序列表（Unordered List）：使用<ul>标签定义，每个列表项使用<li>标签定义，并在<li>标签中包含希望显示的内容。列表项前面会自动添加符号（如圆点），并且可以通过CSS控制样式。
示例代码： <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
- 定义列表（Definition List）：使用<dl>标签定义，每个术语使用<dt>标签定义，每个定义使用<dd>标签定义。列表项前面没有符号或数字，可以通过CSS控制样式。
示例代码： <dl> <dt>术语1：</dt> <dd>定义1</dd> <dt>术语2：</dt> <dd>定义2</dd> </dl>
7.图像
在HTML中添加图像，需要使用<img>标签，像这样：
<img src="image.jpg" alt="图片描述">
其中，src属性指定了图像文件的路径和文件名，alt属性为图像提供了一种替代文本（当图像无法显示时，或者用户使用屏幕阅读器时，替代文本将作为图像的描述显示出来）。
可以在<img>标签的尾部直接关闭标签，像这样：
<img src="image.jpg" alt="图片描述" />
注意，图像文件必须位于Web服务器上，并且路径必须是相对于当前HTML文件的路径。例如，如果图像文件是位于与HTML文件相同的目录中，可以使用相对路径指定文件名。
另外，还可以使用CSS样式来设置图像的大小和位置。例如：
<img src="image.jpg" alt="图片描述" style="width: 50%; height: auto; margin: 10px;">
这个例子中，width属性设置图像宽度为父元素的50%，height属性自适应，margin属性设置外边距为10像素。
8.表格
HTML表格是将数据以表格式呈现的一种方式。它由行和列组成，可以呈现数据和图像。以下是一个简单的HTML表格代码示例：
<table><tr><th>姓名</th><th>年龄</th><th>城市</th></tr><tr><td>张三</td><td>25</td><td>北京</td></tr><tr><td>李四</td><td>30</td><td>上海</td></tr>
</table>
在这个示例中，<table>标签定义了一个表格，<tr>标签定义了一个行，<th>标签定义了表头单元格，<td>标签定义了数据单元格。在HTML中，表头单元格应该放在<thead>中，而数据单元格应该放在<tbody>中。
表格还可以使用colspan和rowspan属性来合并单元格。例如：
<table><tr><th>姓名</th><th>年龄</th><th colspan="2">地址</th></tr><tr><td>张三</td><td>25</td><td rowspan="2">北京市朝阳区</td><td>邮编：100000</td></tr><tr><td>李四</td><td>30</td><td>电话：010-12345678</td></tr>
</table>
在这个示例中，colspan属性将地址单元格合并为两列，rowspan属性将北京地址单元格合并为两行。
9.链接
HTML中的链接是通过使用标签来实现的。另一个文档或Web页面可以通过单击链接打开。链接可以是文本，图像或其他 HTML 元素。
下面是一个简单的链接示例：
<a href="https://www.example.com">点击这里访问示例网站</a>
在这个例子中，a标签表示一个链接，href属性指定链接的目标URL地址，链接文本是“点击这里访问示例网站”。当用户单击这个链接时，他们将被重定向到 https://www.example.com。
10.表单
HTML表单是用户输入数据的一种标准格式。它由一系列的输入字段组成，用户可以在这些字段中输入数据并提交给服务器进行处理。常见的输入字段包括文本框、单选框、复选框、下拉框、日期选择器等。
下面是一个简单的HTML表单：
<form><label>姓名：</label><input type="text" name="name"><label>性别：</label><input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女<label>爱好：</label><input type="checkbox" name="hobby" value="swimming">游泳<input type="checkbox" name="hobby" value="reading">阅读<input type="checkbox" name="hobby" value="traveling">旅游<label>城市：</label><select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option></select><input type="submit" value="提交">
</form>
在上面的表单中，我们使用了<form>标签来定义表单，包含多个输入字段。<label>标签用于为字段添加描述，<input>标签用于定义各种输入类型，比如文本框、单选框、复选框等。<select>标签用于定义下拉框，<option>标签用于定义下拉框中的选项。<input type="submit">用于定义提交按钮，用户可以点击它来提交表单。
这些都是学习HTML最基础的东西，进阶版等我学完依旧会分享自己的学习心得。后面也会出CSS和JS的相关知识。