Part.1 概述 & 一些基础
Web
HTML
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，这种语言与此前的C，Java并不十分相同，它的用处主要停留在前端开发的层面上，不会像先前的两门那样那么复杂。
相应的，目前的浏览器支持的主流格式也以相应的语言后缀进行命名，即（）.html
Web标准
浏览器千千万，不同的浏览器对HTML的标记支持也不尽然相同，这就催生了一群大佬在一块商讨了一个标准出来，规定web的格式规范等等内容，即我们说的 W3C 万维网联盟
这个联盟制定了相应的标准，使得同样的HTML文件在大部分浏览器下能够正常，正确的显示。
当然，总有个例，在目前已经停用的IE6浏览器中，由于当年微软独树一帜地决定不遵循W3C的标准，因此导致当年写HTML时还要专门对IE6进行一定的适配工作，也是导致IE6名声很臭的原因之一。（后续微软没办法还是在后续的IE版本中进行了W3C的支持）
Web的组成部分
总而言之，前端的需求内容有三部分：
- HTML结构
- CSS表现
- JS（JavaScript）行为
HTML规定了网页的结构，但它局限于静态，不好看。
CSS可以对网页进行进一步的布局，配色，以及动画制作
Javascript则负责一些网页行为的实现，比如点按操作，动画播放，暂停等等。
第一个HTML文件
<!DOCTYPE html>
<!--
我的第一个网页
-->
<html lang = "en">
<head>
<title>My first HTML pages</title>
</head>
<body>
<center>
Hello,<br/>World.
</center>
</body>
</html>
<!--
html: 最外层标签
head: 头部标签
body: 主体标签
常规标记：类似上述的，有头有尾的
单标记（空标记）：<标记/>，可以没尾
这里的<br/>是换行的意思
-->上面的玩意大伙看一眼就成，下面会分块的进行基本概述
标签详述
文档声明与字符编码
<!DOCTYPE html>
<meta charset = "UTF-8">在html中，第一步要做的永远是先声明文档类型，即告诉你的浏览器你写的是个什么玩意，在2024年的今天，主流的文档类型是HTML5。
而后，可以选择性的写入你这个文档的编码类型，由于不同的字符编码规则不同，因此声明编码类型可以帮助浏览器了解应该按照哪种原则进行解码，解决一些兼容性问题。
需要保证你写的编码格式与你编写HTML程序时的编码类型相同。
文本的语义化
读一段文字，我们必然希望文字是有重点，有分隔的，而并非是杂糅成一团来进行呈现，这一过程就叫做 文本的语义化
这里，给出一些常用的语义化标签：
标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>额外说一嘴，一级标题的数量不建议过多，这是因为网页爬虫会将一级标题放到权重最大的位置，因此一级标题应该是你书写HTML时最简练，最精准的内容概括。
段落 / 换行 / 水平线
<p>段落文本内容</p>
<br/>
<hr/>这三者中，换行与水平线是两个空标记。
加粗 / 倾斜 / 各种线
<!-- 加粗 -->
<b>加粗的内容</b>
<strong>突出的文本</strong>
<!-- 倾斜 -->
<em>强调文本</em>
<i>斜体内容</i>
<!-- 删除线 -->
<s>删除线</s>
<del>删除线</del>
<!-- 下划线 -->
<u>下划线</u>
<!-- 上下标 -->
<sub>下标</sub>
<sup>上标</sup>为了便于爬虫处理，在处理时推荐使用
- strong
- em
- del
关于属性值的一些说明
我们可以看到HTML给了我们很大的操作空间，但同时也有问题，如果我们希望更改一条线的颜色，长度这一类的 属于其标记本身的属性 ，那这时， 标记的属性值 就显得尤为重要了。
我们回到两类标记上：
<!-- 双标记 -->
<标记 属性 = "属性值" 属性 = "属性值"></标记>
<!-- 单标记 -->
<标记 属性 = "属性值" />可以看到标记本身后方是可以附加属性的。
我们拿很常见的分割线 hr 来举例
<hr color = "green" width = "300" align = "right">
<hr noshade>通过第一个操作，我们可以达成：
- 线的颜色为绿色: color
- 线的长度为300px（像素）: width
- 线的位置在右侧: align
通过第二个操作，可以达成：
- 去除默认分割线的阴影效果
特殊符号
由于HTML本身是个标签语言，在我们需要用到标签内的字符是，这是就涉及到了特殊符号的问题
（其实这个玩意挺像C里面想要打反斜杠/时候的办法）
<!-- 左尖角 -->
<
<!-- 右尖角 -->
>
<!-- 空格 -->
//这玩意受到字体的影响，可能会导致一些问题
  //稍微好一些
<!-- 当然，其实用CSS进行空格的书写才是更应当推广的方式，这里先权且这样放着 -->
<!-- 版权符 -->
©
<!-- 商标 -->
™
®div & span
这两个标签是没有具体意义的，但这二者对于一个HTML页面的分割，划分很有作用
div在直接使用时，会独占一行，作为一个区域的元素。
span在使用时，能实现内容多宽，就占用多宽的空间距离，常用于独立修饰文本。
<h3>I like <span style = "color:gray;">HTML</span></h3>
<!-- 我们实现了一个标题中对于一个单词的单独修饰 -->需要提一嘴的是，span单独写是没什么用的，span一般而言需要配合各类属性，样式来进行使用
列表
列表常用于对分类的事物进行罗列
在HTML中，列表有这么几类：
- 无序列表：前面没有标号
- 有序列表：前面有相应的行号
- 自定义列表：形式更加多样
(这玩意尝试写过markdown的看官应该会比较熟悉)
有序列表
有序列表的标签：
<ol>
<li>Part1</li>
<li>Part2</li>
<li>Part3</li>
</ol>
<!-- orderlist -->ol 标签里面只能包含 li 标签，而 li 标签里面就可以加一些花里胡哨的玩意了。
此外，ol标签本身也可以加一些属性：
- type属性：有序列表前方的标号从什么符号开始：
- “a” : 小写字母开始
- “A” : 大写字母开始
- “i” : 小写罗马数字开始
- “I” : 大写罗马数字开始
- “1” : 数字1开始
- start属性：有序列表从哪个位置开始计数，其取值只能是一个数字
无序列表
无序列表本身没有顺序之分，因此比有序列表相对简单一些
<ul>
<li>Part</li>
<li>Part</li>
<li>Part</li>
</ul>
<!-- unorderlist -->同样的，ul标签里面也只能放li标签，至于花里胡哨的玩意请放在li内搞
无序列表前面默认是一个黑色实心圆，其样式可以通过type属性来进行更改：
- “disc” : 黑色实心圆
- “circle” : 黑色空心圆
- “square” : 黑色实心正方形
- “none” : 隐藏，什么都不显示
自定义列表
<dl>
<dt>这里可以放图片</dt>
<dd>这里可以放文字</dd>
</dl>自定义列表通常整体进行复制，从而方便对每个自定义列表进行单独的样式编辑
一种缩写
当我们需要进行多个标签的书写时，可以通过Emmet缩写进行快捷写入
ol>li{Part}*3
<!-- 一个具有三个项的有序列表，每个项的内容都是Part -->
dl>dt{图片}+dd{文字}
<!-- 一个自定义列表 -->图片
图片在html中使用 img 标签进行插入
<img src = "图片的相对路径">需要说明的是，一般进行html的图片插入时，使用 相对路径 。（绝对路径在服务器中不起效果）
具体相对路径的写法，建议读者自行上网进行了解，这其中涉及到一些Linux的相关知识。
图片的属性
对于图片，主要有以下属性：
- src : 即图片的路径（通常为相对路径）
- title : 即鼠标悬停到图片上会显示什么信息
- alt : 图片如果加载不出来会显示的提示信息
- width : 宽度
- height : 高度
当我们需要让图片自动缩放时，可以只对宽度或高度中一个属性进行预设，可以达到自动缩放的效果。
超链接
超链接，目的在于在不同的html界面中进行跳转
其具体写法：
<a herf = "" title = "" target = "">超链接内容</a>这其中：
- 超链接内容 表示这个跳转链接的显示内容（就是哪个蓝底字的具体内容）
- herf 表示链接路径
- title 表示鼠标悬停上去后的显示信息
- target 表示在哪个位置打开文档
- “_self” : 默认值，在当前窗口打开新页面
- “_blank” : 在新窗口打开跳转页面
还需要说个事，就是超链接的内容可以是多种多样的，可以是文字，也可以是个图片（利用img标签），这样可以实现点击图片跳转的效果，思路要打开。
表格
这部分就顾名思义，就是咱们平常常见的表格了，其有 行 ， 列 等等属性。
在HTML中，表格的创建如下：
<table>
<tr>
<!-- tr表示行 -->
<td>
<!-- td表示单元格 -->
1
</td>
<td>
2
</td>
</tr>
</table>表格(table)的相关属性
表格总共有8个属性：
- 边框线：border = “1” ，后方这个数字是表格外边框的像素大小
- 宽度：width = “500”，同理（也可以写成width = “50%”，表示相对于父元素的百分比，直接写的话就是窗口）
- 高度：height = “500”，同理（同上，也可以通过百分比，但是高度的父元素（即body部分）是由内容决定的，因此不会达到直接占据页面一半这么高的效果）
- 位置：align = “left / center / right”，表示表格在横向占据的位置
- 背景颜色：bgcolor = “blue”
- 边框颜色：bordercolor = “red”
- 单元格之间的间距：cellspacing = “0”
- 单元格与内容之间的间距：cellpadding
表格行(tr)的相关属性
表格行总共有4个属性：
- 高度：height
- 颜色：color = “yellow”，在表格本身有颜色时，这一行会相应的覆盖掉之前的颜色
- 文字对齐相关：
- 水平对齐：align = “left / right / center”，同理
- 竖直对齐：valign = “top / middle / bottom”，同理
表格单元格(td)的相关属性
表格单元格总共有5个属性：
- 宽度：width，这里要注意，一个单元格设置了宽度，会影响一整列的宽度
- 高度：height，同理，一个单元格设置了高度，也会影响一整行的高度
- 颜色：bgcolor
- 文字对齐相关：
- 水平对齐：align
- 竖直对齐：valign
表格的合并列 & 合并行
表格合并列 / 行通常这样写：
- colspan = “2”，合并列，后方的值即合并后其占据的单元格数目
- rowspan = “3”，合并行，后方的值同理
这里要注意，在合并后，需要将被合并的单元格注释掉，否则会呈现出一种被合并的单元格被 挤出去 的感觉。
咱们要想了，咱这表格都整出来了，是不是该进行一点点自定义化，比如说能在里面输入各种各样的东西之类的？
表单
表单，其最重要的目的，就在于收集信息。
<from action = "">
用户信息：<input type = "text">
</form>这里咱们得一个个讲：
- form的属性：
- method = “get / post”
- action = “向何处发送数据”
- input内的属性：
- type = “text / password / submit / button / reset” 他们分别表示文本输入区，密码输入区，提交按钮，常规按钮，重置功能
- placeholder = “显示的简短提示信息”
- name 必须设置，表示提交给后端时能被识别到的名字
- value 常常与按钮一并使用，可以表示按钮上显示的内容
- outline 表示输入框外侧是否会存在一圈边框
我们需要明确，既然要收集信息，就必定有发射端与接收端，而接收端就在form的action属性内进行说明，而 get / post 目的在于提交过后不会对你提交的信息在网址框内进行明确显示。
在后面的工作中，我们常常使用 “input type = button” ，这意味着我们创建了一个完全可自定义的按钮，会在此后的JS行为中对其进行进一步的定义（如校验密码之类的操作可以在这个过程内完成）
这个坑开的十分的突然，其实主要是博主有了相应的需求，需要了解一下前端相关的知识，因此权且作为一个栏目放在博客中吧。
这篇博文就到这里~
