本人作为一个即将入坑全栈的不知名的小码农，准备记录下自己学习过程中遇到的问题，以及学习到的各种知识，希望能在记录的过程中加深印象，也方便日后的复习。主要用作经验分享与学习记录，文章如有不妥或错误之处，还请指出，谢谢大家。
一、HTML
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
1.1 基本结构
<!DOCTYPE>
<html lang="ZH-cn">
<head>
<meta charset="utf-8" >
<title>标题</title>
</head>
<body>
网页正文内容
</body>
</html>
1.2 标签元素划分
上图引用自原博客如有侵权联系删除，谢谢。
二、常见HTML标签对照表
| 标签 | 描述 |
|---|---|
| <! – xxx --> | <!- -这是一段注释- -> |
| <!DOCTYPE> | 声明该文件为HTML文件 |
| html | 此元素可告知浏览器其自身是一个 HTML 文档 |
| head | 头部元素的容器，可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等 |
| body | 文档主体，包括文本图像、表格和列表等等 |
| footer | 定义文档或节的页脚 |
| a | 定义超链接 |
| audio | 定义声音，比如音乐或其他音频流 |
| b | 粗体文本 |
| br | 换行(单标签) |
| button | 定义一个按钮 |
| canvas | 图形容器，用来放置图表和其他图像 |
| caption | 定义表格标题，需要跟在table标签之后 |
| div | 定义文档中的分区或节，盒模型容器 |
| form | 表单 |
| h1~h6 | 分别对应六级标题 |
| header | 义文档的页眉（介绍信息） |
| hr | 在 HTML 页面中创建一条水平线 |
| img | 向网页中嵌入一幅图像 |
| input | 用户输入信息 |
| label | 为 input 元素定义标注，标签 |
| li | 定义列表条目 |
| link | 定义文档与外部资源的关系 |
| nav | 定义导航链接的部分 |
| ol | 定义有序列表 |
| p | 定义段落 |
| script | 定义客户端脚本 |
| span | 被用来组合文档中的行内元素 |
| style | 用于为 HTML 文档定义样式信息 |
| table | 定义 HTML 表格 |
| tbody | 表格主体（正文） |
| th | 表格内的表头单元格 |
| td | 定义 HTML 表格中的标准单元格 |
| title | 定义文档的标题 |
| tr | 定义 HTML 表格中的行 |
| ul | 定义无序列表 |
三、HTML标签具体使用
1、<!DOCTYPE>
<！DOCTYPE> 声明必须是 HTML 文档的第一行，位于 html 标签之前。<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令
<!DOCTYPE html>
2、html、head、body
（2.1）html：
（html， /html） 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由 （head ，/head） 标签定义，而主体由（body，/body）标签定义。
（2.2）head：
下面这些标签可用在 head 部分：base、link、meta、script、style、title。title定义文档的标题，它是 head 部分中唯一必需的元素
（2.2.1）base：
base标签是HTML语言中的基准网址标记，它是一个单标签，位于网页头部文件的head标签内，一个页面最多只能使用一个base元素，用来提供一个指定的默认目标，也算是一种表达路径和连接网址的标记。比如由base制定了一个URL地址，接下来你所要调用的文件或图片等就无须再填写完整的地址，只需写上该文件名或图片名即可
（2.2.2）link：
是网页头部head中的元素，在html语言中，link标签是单独出现的，并且可以被多次使用，该元素的用途是与外部文件建立链接。
rel属性：定义当前文档与被链接文档之间的关系。
href属性：定义被链接文档的位置
type属性：指定所连接文档的MIME类型，css的MIME是type/css,一般使用
type=“text/css”
（2.2.3）meta：
meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
（2.2.4）script：
script标签用于定义客户端脚本，比如 JavaScript。script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
src属性：定义引用外部脚本的URI，这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。
type属性：定义script元素包含或src引用的脚本语言。属性的值为MIME类型; 支持的MIME类型包括text/javascript、text/ecmascript、application/javascript、 application/ecmascript。如果没有定义这个属性，脚本会被视作JavaScript
（2.2.5）title：
浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
（2.2.6）style：
在 style 中，规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css”。style 元素位于 head 部分中。
（2.3）body：
表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容！
<!DOCTYPE html>
<html>
<head>
<title>这是一个标题</title>、
<meta charset='utf-8' > /*声明编码*/
<base href="www.xxxxx.com/images/" target="_blank"> /*target标签用于定义访问该链接时打开新的浏览器窗口*/
<link rel="stylesheet" type="text/css" href="style.css"> /*引用外部的style.css样式文件*/
<style type="text/css">
h1 {color:red}
p {color:blue}
</style> /*css样式*/
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script> /*脚本执行*/
<!-- HTML4 and (x)HTML -->
<script type="text/javascript" src="javascript.js">
<!-- HTML5 -->
<script src="javascript.js"></script> /*引入外部js脚本文件*/
</head>
<body>
<a href="1.png"> /*使用base标签*/
<a href="www.xxxxx.com/images/1.png"> /*不使用base标签*/
</body>
</html>
3、a
使用标签 a来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。在标签 a 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
（1）一个未访问过的链接显示为蓝色字体并带有下划线。
（2）访问过的链接显示为紫色并带有下划线。
（3）点击链接时，链接显示为红色并带有下划线。
如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
在a标签里面有四种链接方式
（1）内部链接： 内部链接在同一级的文件夹上：加上文件名和后缀即可
（2）外部链接： 外部链接跳转到网址一定要加上：http://在加上网址名即可
（3）空连接： 空连接跳转到当前页面的顶端：在a标签里面的href里面加上#即可
（4）描点链接： a标签通name属性实现锚点的定位，再通过href属性指向具体锚
点。注意，这里name属性只是针对a标签，其他标签不可随意添加name属性，而且其余诸如表单之类的name属性的意义作用是不同的。所以a标签的锚点链接有局限性，如果想在其他元素中设置锚点，需要在其他标签中添加一层带有name属性的a标签。
/*图片链接*/
<a href="www.xxx.com">
<img src="./img.jpg" width="50" height="50">
</a>
<a href="www.xxxxx.com" target="_blank"></a>
<a href="javascript:void(0)" click="show()" /> /*点击a标签调用js函数show方法*/
<a href="text.html">内部链接</a>
<a href="http://www.biadu.com">外部链接</a>
<a href="#">空链接</a>
<a href="#miao">描点链接</a>
<a id="miao">上述描点链接的目标</a>
<a href="#miao">描点链接</a>
<a name="miao">上述描点链接的目标</a>
4、footer
在html5开发使用footer标签时，把当作普通div标签对待即可，只不过一般用于网站底部布局。一般情况下一篇网页只有一个底部区，所以使用最好只使用一次footer即可。需要注意：footer是html5新增的，在IE8及以下IE浏览器不兼容，谨慎使用。
<footer class="color-F00">
©Copyright 2020 xxx科技公司版权所有 | xxICP备xxxxxxxx号-xx
</footer>
5、button
（1）button 标签定义一个按钮。它的作用是在网页中显示一个类似按钮的内容，它可以点击，拥有一定的效果。在 button 元素内部，您可以放置内容，比如文本或图像。（2）input标签也可以使用来定义按钮，但是它是一个空标签（没有元素内容），不能放置元素内容，所以它的功能没有button标签强大
（3）button标签功能虽然强大，但是在html表单中建议使用input标签来创建按钮，因为对于button标签在html表单中，不同的浏览器可能提交不同的按钮值。
（4）button标签的基础常见属性
autofocus： 按钮获得焦点，值为：autofocus；
disabled： 禁用该按钮，值为：disabled；
form： 关联一个或多个表单，值为：表单的id属性值；
name： 按钮的名称，值为：自定义；
type： 按钮的类型，只可以是：button、reset、submit；
value： 按钮的初始值，值为：自定义；
<button type="button">普通按钮</button>
<button type="button" onclick="alert('hello, world')">pick me!</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
6、canvas
在html中，canvas标签是使用来规定一个图形容器（画布），然后通过脚本（ JavaScript等）来绘制图形，比如：绘制路径、盒、圆、字符以及添加图像等，canvas标签默认没有边框和内容，如果不使用脚本来绘制图形，它本身是没有任何效果的，所以它必须和脚本配合使用来绘制图形<canvas id="Canvas_1" width="300px" height="200px">
绘制好的图形
</canvas>
7、div
div元素，是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。width 表示div的宽
height 表示div的高
padding 表示div的内边距
margin 表示div的外边距
margin: 0 auto; //div居中
border 表示div的表框
border-color 边框的颜色
border-top-color 上边框颜色
border-right-color 右边框颜色
border-bottom-color 下边框颜色
border-left-color 左边框颜色
border-color: 上 右 下 左
border-width 边框宽度
border-style 边框风格 dashed(虚线) dotted(点线) solid(实线) double(双线)
8、form、input、label、textarea、select
（8.1）form：
form标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。
form属性
（1）accept： 服务器接收到的文件的类型（html5版本也不支持）；
（2）accept-charset： 服务器可处理的表单数据字符集；
（3）action： 当提交表单时向何处发送表单数据；
（4）enctype： 在向服务器发送表单数据之前如何对其进行编码，method="post"时可以使用，值可以是：multipart/form-data、text/plain等；
（5）method： 用于发送表单数据的HTTP方法，值可以是：get、post；Method的值为get时，是通过URL传内容与参数,这个时候我们通过网址URL能看见自己填写内容提交处理
Method的值为post时，是通过类似缓存传填写内容与参数，而URL是不能看到form表单填写内容提交内容。
（6）name： 规定表单的名称，在xhtml中也废弃，使用id来代替；
（7）target： 在何处打开action属性中的地址，值可以是：_blank、_self、_parent、_top；
（8.2）input：
input标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
（8.2.1）name属性
name属性用于规定input元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过javascript引用表单数据。注意只有设置了name属性的表单元素才能在提交表单时传递它们的值。
（8.2.2）checked属性
checked属性规定在页面加载时应该被预先选定的input元素，也可以在页面加载后，通过javascript进行设置注意；checked属性只能与type="radio"或type="checkbox"的input元素配合使用
（8.2.3）disabled属性
disabled属性规定应该禁用input元素。被禁用的字段是不能修改的，也不可以使用tab按键切换到该字段，但可以选中或拷贝其文本disabled属性无法与type="hidden"的input元素一起使用
（8.2.4）maxlength属性
maxlength属性规定输入字段的最大长度，以字符个数计，该属性只能与type="text"或type="password"的input元素配合使用
（8.2.5）size属性
size属性对于type="text"或"password"的input元素是可见的字符数；而对于其他类型，是以像素为单位的输入字段宽度
（8.2.6）value属性
value属性为input元素设定值。对于不同的输入类型，value属性的用法也不同：
type=“button”、“reset”、"submit"用于定义按钮上的显示的文本
type=“text”、“password”、"hidden"用于定义输入字段的初始值
type=“checkbox”、“radio”、"image"用于定义与输入相关联的值
注意1：type="checkbox"或"radio"必须设置value属性
注意2：value属性无法与type="file"的input元素一起使用
（8.2.7）placeholder属性
placeholder属性提供占位符文字，描述输入域所期待的值。占位符会在输入域为空时显示出现，在输入域获得焦点时消失
placeholder属性适用于以下类型的input元素:text、search、url、tel、email、password
（8.2.8）required属性
required属性规定必须在提交之前填写输入域(不能为空)
required属性适用于以下类型的input元素：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file
（8.2.9）type属性
（1）type=“text”：创建单行文本输入框
<input type="text" size="20" maxlength="20" value="文本输入框">
（2）type=“password”：创建密码输入框
<input type="password" size="30" maxlength="20" value="">
（3）type=“radio”：单选按钮
/* 所有的radio应具有相同的name属性值 */
/* value值，表示每个选项的值 */
<label><input name="sport" type="radio" value="basketball" />篮球 </label>
<label><input name="sport" type="radio" value="fooball" />足球 </label>
<label><input name="sport" type="radio" value="" checked />排球 </label> /* checked属性表示默认选中 */
（4）type=“checkbox”：复选框
/* 所有的checkbox应具有相同的name属性值 */
/* value值，表示每个选项的值 */
/* checked属性表示默认选中 */
北京<input type="checkbox" value="beijing" checked name="city">
上海<input type="checkbox" value="shanghai" checked name="city">
深圳<input type="checkbox" value="shenzhen" name="city">
香港<input type="checkbox" value="hongkong" name="city">
澳门<input type="checkbox" value="aomen" name="city">
（5）type=“button”：普通按钮
input元素的类型为普通按钮，在value属性中输入的值为按钮上显示的文本，name代表该按钮的名称，onclick表示处理程序
<input type="button" value="确认" name="bt" onClick="">
（6）type=“submit”：提交按钮
提交按钮不需要设置onclick参数，在单击提交按钮时可以向服务器发送表单数据，数据会发送到表单的action属性中指定的页面，value属性中的值为按钮上显示的文字。
<input type="submit" value="提交" name="sm" />
（7）type=“reset”：重置按钮
重置按钮的作用是点击之后表单会刷新回到默认状态，在value属性中输入的值为按钮上显示的文本；
<input type="reset" value="重置" name="reset"/>
（8）type=“hidden”：隐藏域
隐藏域在页面上不显示，用来存储与传递表单的值，当用户提交表单时，隐藏域的内容会一起提交给处理程序。
<input type="hidden" name="hidden" value="需要向服务器提交的值">
（9）type=“file”：文件域
文件域用于从本地硬盘中上传文件并提交。
<input type="file" name="file" value="选择文件" />
（10）HTML5新增input type属性
（10.1）type=“url”： 输入URL字段
（10.2）type=“tel”： 用来输入电话号码
（10.3）type=“search”： 搜索字符串
（10.4）type=“email”： 改控件用来输入"email"地址，若用户输入非email格式，那么再支持HTML5的浏览器中提交改表单时，会提示为不是合法格式。
（10.5）type=“number”： 数字字段
用于输入数字的字段，其中min允许的最小值，max为允许的最大值，value规定默认值，还有step可规定合法数字间隔。
<input type="number" name="number" min="2" max="8" value="3" />
（10.6）type=“date”：日期控件
可以用来选择或输入日期，包括（年/月/日），不包括时间：其中设定min属性控制开始日期，max属性控制结束日期。如果使用type=“time” 则用来输入时间，不包括日期。
<input type="date" min="2019-05-09" max="2020-05-09" />
（10.7）type=“month” 年月控件
<input type="month" value="2019-05" />
上述部分借鉴自原文章地址的内容，如有侵权，请联系删除，谢谢。
（8.3）label标签：
label标签通常和input标签一起使用，label标签为input元素定义标注（标记）。label标签的作用是为鼠标用户改进了可用性，当用户点击label标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；
即，当用户没有选中选定框，只是点击了文字也可以完成选择功能。
<label><input type="checkbox" name="fav" value="LOL">英雄联盟</label>
<label><input type="checkbox" name="fav" value="wangzhe">王者荣耀</label>
<label><input type="checkbox" name="fav" value="QQ">QQ飞车</label>
Label标签内for属性的值为自定义，一般与想实现点击会触发控件对象的ID对应相同。
<input name="sex" id="man" type="radio" value="" />
<label for="man">男</label>
<input name="sex" id="woman" type="radio" value="" />
<label for="woman">女</label>
/*for属性应该与input中id对应，当点击“女”的时候，会自动选中绑定的woman radio*/
（8.4）textarea标签：
在html中，textarea标签是用来定义一个多行的文本输入控件，在文本输入域中可以输入任意长度的文本
<textarea rows="8" cols="40">
我是一个文本框，可以输入任意长度的文本！！！
</textarea>
（8.4.1）基本属性
cols：文本区域内可见的列数（值：number）。
disabled：禁用文本区域（值：disabled）。
form：定义文本区域所属的一个或多个表单（值：form_id）。
maxlength：文本区域允许的最大字符数（值：number）。
name：文本区域的名称（值：text）。
placeholder：一个简短的提示，描述文本区域期望的输入值（值：text）。
required：文本区域是必需的/必填的（值：required）。
rows number：文本区域内可见的行数（值：number）。
（8.5）select标签：
在html中，select标签是使用来定义下拉列表的，通常在网页中用来实现下拉菜单。select标签定义的下拉列表中的各个选项由option标签来定义
<select name="sel">
<option value="gaungzhou">广州</option>
<option value="shenzhen">深圳</option>
<option value="shandong">山东</option>
<option value="beijing">北京</option>
</select>
常见属性：
（8.5.1）selected
selected预选中，注意：如果不设置selected属性的话，那么选项框中的第一项会默认被选中。
/*size：size大于1，下拉框会呈现滚动条，一次显示size条数目*/
/*multiple 多选*/
<select name="sel" size="3" multiple>
<option value="1">广州</option>
<option value="2">深圳</option>
<option selected value="3">山东</option>
<option value="4">北京</option>
</select>
（8.5.2）optgroup
下拉框分组功能，用optgroup标签包着option标签，optgroup label属性为组名
<select name="city" size="5" multiple="multiple">
<optgroup label="广东省">
<option value="1">广州</option>
<option value="2">深圳</option>
</optgroup>
<optgroup label="浙江省">
<option value="1">杭州</option>
<option value="2">温州</option>
</optgroup>
</select>
9、img
在html中，img标签是使用来在网页中嵌入一幅图像。从技术上讲，图像并不是插入到网页中，而是链接到网页中，img标签的作用是为被引用的图像创建占位符。img标签在网页中很常用，比如，引入一个logo图片、按钮背景图片、工具图标等等。（9.1）alt属性是使用来规定图像的替代文本，当图像不显示时，将显示该属性值内容。搜索引擎会读取该属性值内容作为图像表示的意思，所以搜索引擎优化中需注意该属性
（9.2）src属性和alt属性是标签必须属性，虽然，alt属性不写也不会出错，但是建议必须写上。如果不写，搜索引擎是看不懂图像是什么意思的。还有就是如果图片不能显示了，那么会出现空白，读者也不知道这是什么意思
<img src="yellowDuck.png" alt="小黄鸭" width="200px" height="200px">
10、nav
在html中，nav标签是html5版本中新增的标签，是使用来定义导航链接的部分。 nav标签中的内容默认没有显示效果，只表示该区域是导航链接部分；nav标签只起语义的作用，没有实际的显示效果； nav标签中的内容通常是一个列表<nav>
<a href="#">首页</a>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">新闻</a>
</nav>
10、span
span标签是内联元素，不像块级元素（如：div标签、p标签等）哪样有换行的效果；如果不对span元素应用样式，使用span标签没有任何的显示效果；span标签可以设置id或class属性，这样不仅能增加语义，还能更方便的对span元素应用样式；<p>在内容中我希望<span style="color:blue;">这部分字体蓝色</span>的做法</p>
12、table
简单表格由table元素以及一个或多个tr（行标签）、th（表头单元格标签）、td（普通单元格标签）组成
<table border=1>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>
复杂的表格还包括caption（表格标题）、col(定义列)、colgroup(对表格中的列进行组合)、thead（组合表头的内容）tbody(组合表格的主题内容)、tfoot(组合表格的脚注内容)
<table width="400" border="1">
<caption>表格的标题</caption>
<col align="left"/>
<col align="left"/>
<col align="left" />
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>脚注1</td>
<td>脚注2</td>
<td>脚注2</td>
</tr>
</tfoot>
</table>
常见属性
1.width: 规定表格的宽度
2.height: 规定表格的高度
3.align属性： 规定表格相对周围元素的对齐方式
4.border属性： 规定表格边框的宽度，border属性会为每个单元格应 用边框，并用边框围绕表格，border属性值改变，只会改变表格外边框，表格内部的边框不会改变
5.cellspacing属性： 规定单元格之间的间距
cellspacing设为0时,表格间没有间距,表格边框将紧挨着显示,若要使表格边框合并,则需使用CSS的border-collapse:collapse
6.cellpadding属性： 规定单元格边界与单元格内容之间的间距,默认为0
13、ul 、ol、 li
这里html ul li无序列表布局与ol li有序列表布局语法与结构相同，不同是默认无初始化CSS样式情况下一个是有序号列表（1、2、3、4 ；I、II、III这类有序序号），一个为没有序号的列表。无论是有序ol li列表还是无序的ul li列表，在日常时候都需要重新设置CSS样式使用布局<ul>
<li></li>
<li></li>
<li></li>
</ul>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
