文章目录[隐藏]
前言
本部分的内容主要是对html入门的一个介绍。在这里需要强调一件事情，许多前端的初学者容易犯的错误就是希望将html的所有标签都要学习到位，这在学习前端是很错误的一种想法，在html中你通常只需要学习一些常用的标签即可，其他标签需要用到时候再去查文档即可！
更多精彩内容会在凌云博客更新：http://www.a754.com(专业小白学习教程网)
刚做不久，后面会慢慢更新小白教程，希望大家多多支持！
下面是前端的学习路线：
HTML→CSS→javascript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→node.js
一、HTML
0.系统结构
B/S架构：Browser/Serve (浏览器/服务器的交互形式)
Browser支持的语言：HTML CSS JavaScript
Serve是服务器，其支持的语言：C C++ Java python
优点：升级方便，只用升级服务器端代码即可。维护成本低。企业内部解决方案。
缺点：速度慢（初始化的所有数据都来自服务器端）、体验不好。
C/S架构：Client/Serve（客户端/服务器端的交互形式）
缺点：升级麻烦、维护成本高。
优点：速度快、体验好。
兼容问题？世界5大主流浏览器。
1.简介
HTML全称“Hyper Text Markup Language（超文本标记语言）”，是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。
超文本：流媒体、图片、声音、视频.....
HTML由 W3C（世界万维网联盟）制定规范。
<标签符>内容</标签符><标签符>内容</标签符><标签符>内容</标签符>
那么学习HTML时究竟要学些什么呢？用一句简单的话来说，就是学习各种标签，来搭建网页的“骨架”。在HTML中，标签有很多种，如文字标签、图片标签、表单标签等你不需要花费太多精力去记忆其中的内容，只需要多敲代码。总而言之，学习HTML就是学习各种各样的标签，然后针对你想显示什么东西，再对应地使用正确的标签，非常简单。HTML不区分大小写。
2.结构
<!DOCTYPE html> <!--文档声明,加上表示HTML5语法--><html><head></head> <!--页头--><body></body> <!--页身--></html><!DOCTYPE html> <!--文档声明,加上表示HTML5语法--> <html> <head> </head> <!--页头--> <body> </body> <!--页身--> </html><!DOCTYPE html> <!--文档声明,加上表示HTML5语法--> <html> <head> </head> <!--页头--> <body> </body> <!--页身--> </html>
在vscode中基本结构可以用‘！+回车’ 来快速生成
3.head标签
事实上，只有一些特殊的标签才能放在head标签内，其他大部分标签都是放在body标签内的，在HTML中，一般来说，只有5个标签能放在head标签内。
- title标签
- meta标签
- link标签
- style标签
- script标签
3.1 title
定义网页的标题
<html> <head> <title>XXX的个人网页</title> </head> </html><html> <head> <title>XXX的个人网页</title> </head> </html><html> <head> <title>XXX的个人网页</title> </head> </html>
3.2 meta
meta标签一般用于定义页面的特殊信息，例如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的
name，content，http-equiv是meta便签的属性
！如果网页出现中文乱码，可能是你没有定义编码！
<html><head><meta name="keyword" content = "这是个人网站" /><meta name="descripition" content = "这里记录我的学习情况" /><meta name="author" content = "Jimmy" /><!--定义编码，在html5中可以直接简写为<meta charset="utf-8" />--><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!--6s后自动跳转到指定网站--><meta http-equiv="refresh" content="6;url=http://www.baidu.com"/></head></html><html> <head> <meta name="keyword" content = "这是个人网站" /> <meta name="descripition" content = "这里记录我的学习情况" /> <meta name="author" content = "Jimmy" /> <!--定义编码，在html5中可以直接简写为<meta charset="utf-8" />--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--6s后自动跳转到指定网站--> <meta http-equiv="refresh" content="6;url=http://www.baidu.com"/> </head> </html><html> <head> <meta name="keyword" content = "这是个人网站" /> <meta name="descripition" content = "这里记录我的学习情况" /> <meta name="author" content = "Jimmy" /> <!--定义编码，在html5中可以直接简写为<meta charset="utf-8" />--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--6s后自动跳转到指定网站--> <meta http-equiv="refresh" content="6;url=http://www.baidu.com"/> </head> </html>
3.3 link
link标签用于引入外部样式文件（CSS文件），这属于CSS部分的内容，这里不需要深究
<html><head><link type = "text/css" rel="stylesheet" herf="css/index.css"/></head></html><html> <head> <link type = "text/css" rel="stylesheet" herf="css/index.css"/> </head> </html><html> <head> <link type = "text/css" rel="stylesheet" herf="css/index.css"/> </head> </html>
3.4 style
<html><head><style type="text/css">/*这里写CSS样式*/</style></head></html><html> <head> <style type="text/css"> /*这里写CSS样式*/ </style> </head> </html><html> <head> <style type="text/css"> /*这里写CSS样式*/ </style> </head> </html>
3.5script
script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件
<html><head><script>/*这里写javascript代码*/</script></head></html><html> <head> <script> /*这里写javascript代码*/ </script> </head> </html><html> <head> <script> /*这里写javascript代码*/ </script> </head> </html>
4.body标签
在HTML中，head标签表示页面的“头部”，而body标签表示页面的“身体”，在静态页面中主要由文本、图片、超链接、音频和视频组成。这里注意静态页面和动态页面的区别在于：是否与服务器进行数据交互
4.1 标题标签
<html><head><meta charset="utf-8"/><title>h标签</title></head><body><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6></body></html><html> <head> <meta charset="utf-8"/> <title>h标签</title> </head> <body> <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6> </body> </html><html> <head> <meta charset="utf-8"/> <title>h标签</title> </head> <body> <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6> </body> </html>
4.2 段落标签
段落标签p会自动换行，并且段落与段落之间有一定的间距.
<p>段落内容</p><p>段落内容</p><p>段落内容</p>
如果想在P标签内换行，可以使用br标签
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>换行标签</title></head><body><h3>静夜思</h3><p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p></body></html><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>换行标签</title> </head> <body> <h3>静夜思</h3> <p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>换行标签</title> </head> <body> <h3>静夜思</h3> <p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p> </body> </html>
预留格式pre,在代码中是什么格式，呈现在网页上就是什么格式
<!DOCTYPE html><html><head><meta charset='utf-8'/><title>预留格式</title></head><body><pre>床前明月光，疑是地上霜。举头望明月，低头思故乡。</pre></body></html><!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>预留格式</title> </head> <body> <pre> 床前明月光，疑是地上霜。 举头望明月，低头思故乡。 </pre> </body> </html><!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>预留格式</title> </head> <body> <pre> 床前明月光，疑是地上霜。 举头望明月，低头思故乡。 </pre> </body> </html>
4.3 文本标签
- 粗体标签：strong、b
- 斜体标签：i、em、cite
- 上标标签：sup
- 下标标签：sub
- 中划线标签：s
- 下划线标签：u
- 大字号标签：big
- 小字号标签：small
- 字体标签：font
这里你不用全部记忆，需要用的时候去查询文档即可，只需简单记住有哪些功能。注意：这些标签是可以嵌套在p标签内
4.4 水平线标签
<hr /> <!--实现效果如下--><hr /> <!--实现效果如下--><hr /> <!--实现效果如下-->
*4.5 div标签
在HTML中，我们可以使用“div标签”来划分HTML结构，从而配合CSS来整体控制某一块的样式。div和span的作用就是布局，可以称为“图层”作用是为了保证页面可以灵活的布局。
<html><head><meta charest="utf-8"/><title>div标签的学习</title></head><body><div><h2>输入内容</h2><p>输入内容</p></div><div><h2>输入内容</h2><p>输入内容</p></div></body></html><html> <head> <meta charest="utf-8"/> <title>div标签的学习</title> </head> <body> <div> <h2>输入内容</h2> <p>输入内容</p> </div> <div> <h2>输入内容</h2> <p>输入内容</p> </div> </body> </html><html> <head> <meta charest="utf-8"/> <title>div标签的学习</title> </head> <body> <div> <h2>输入内容</h2> <p>输入内容</p> </div> <div> <h2>输入内容</h2> <p>输入内容</p> </div> </body> </html>
4.6 自闭合标签（独目标记）
我们接触的大部分标签都是成对出现的，都有一个“开始符号”和一个“结束符号”。但是有些标签是没有结束符号的，比如：
<meta/> <!--定义网页信息--><link/> <!--引入“外部CSS文件”--><br/> <!--换行标签--><hr/> <!--水平线标签--><img/> <!--图片标签--><input/> <!--表单标签--><meta/> <!--定义网页信息--> <link/> <!--引入“外部CSS文件”--> <br/> <!--换行标签--> <hr/> <!--水平线标签--> <img/> <!--图片标签--> <input/> <!--表单标签--><meta/> <!--定义网页信息--> <link/> <!--引入“外部CSS文件”--> <br/> <!--换行标签--> <hr/> <!--水平线标签--> <img/> <!--图片标签--> <input/> <!--表单标签-->
*4.7 块元素和行内元素
在HTML中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。
常见块元素表：
| 块元素 | 说明 |
|---|---|
| h1~h6 | 标题元素 |
| p | 段落元素 |
| div | div元素 |
| hr | 水平线 |
| Ol-li | 有序列表 |
| Ul-li | 无序列表 |
常见行元素：
| 行内元素 | 说明 |
|---|---|
| strong | 粗体元素 |
| em | 斜体元素 |
| a | 超链接 |
| span | 常用行内元素，结合CSS定义样式 |
4.8 实体符号
当在网页上呈现的符号与HTML代码冲突时，可以采用实体符号，实体符号的特点是：以&开始，以；结束。
比如空格为
<html><head><title>实体符号</title></head><body>b<a>c<!-- 上述内容表示b<a>c--></body></html><html> <head> <title>实体符号</title> </head> <body> b<a>c <!-- 上述内容表示b<a>c--> </body> </html><html> <head> <title>实体符号</title> </head> <body> b<a>c <!-- 上述内容表示b<a>c--> </body> </html>
*4.9 表格
table表示表格，tr代表行，td代表一行中的一个小格子,rowspan表示占几行（也可以称作合并单元格）,colspan表示占几列（合并单元格）。th和td一样也是一个小格子，只是多了加粗居中，可以认为是head。
table也可以分为3部分，thead，tbody，tfoot。并不是必须的，但是有益于后期js代码编写以及维护
<html><head><title>table</title></head><body><table border="1px" width="30%" height ="100px"><!--头部--><thead><tr align = "center"><td colspan="2">a</td></tr></thead><tr><td>c</td><td rowspan="2">d</td></tr><tr><td>e</td></tr></table></body></html><html> <head> <title>table</title> </head> <body> <table border="1px" width="30%" height ="100px"> <!--头部--> <thead> <tr align = "center"> <td colspan="2">a</td> </tr> </thead> <tr> <td>c</td> <td rowspan="2">d</td> </tr> <tr> <td>e</td> </tr> </table> </body> </html><html> <head> <title>table</title> </head> <body> <table border="1px" width="30%" height ="100px"> <!--头部--> <thead> <tr align = "center"> <td colspan="2">a</td> </tr> </thead> <tr> <td>c</td> <td rowspan="2">d</td> </tr> <tr> <td>e</td> </tr> </table> </body> </html>
4.10 背景色和背景图片&图片
设置图片高宽时，只设置宽度，图片高度会随之改变。同时设置高宽，会让图片失真。
<body bgcolor = "red" background="img/123.png"><img src = "img/22.png" width = "100px" title="鼠标悬停，这是图片" alt = "图片加载失败"/></body><body bgcolor = "red" background="img/123.png"> <img src = "img/22.png" width = "100px" title="鼠标悬停，这是图片" alt = "图片加载失败"/> </body><body bgcolor = "red" background="img/123.png"> <img src = "img/22.png" width = "100px" title="鼠标悬停，这是图片" alt = "图片加载失败"/> </body>
*4.11 超链接
通过超链接可以从浏览器向服务器发送请求。
request、response
<a href="http://www.google.com" target="_self">谷歌</a><!--target:_blank(新窗口) _self(当前窗口) _top(顶级窗口) _parent(父窗口)--><a href="http://www.google.com" target="_self">谷歌</a> <!--target:_blank(新窗口) _self(当前窗口) _top(顶级窗口) _parent(父窗口)--><a href="http://www.google.com" target="_self">谷歌</a> <!--target:_blank(新窗口) _self(当前窗口) _top(顶级窗口) _parent(父窗口)-->
*4.12 表单
最重要的应用就是接收用户信息。第一个代码片段是普通的表单，第二个代码片段是将表单嵌套在表格中。其中需要注意的是所有内容一定要包含在form中，这样才会提交的action地址。在input中必须写上name才会被提交。
提交格式：action?name=value&name=value&name=value......(注意form的提交方法有两种，一种是post请求，一种是get请求，两者的区别是post请求不会在地址栏上显示表单信息，而get会显示)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>form</title></head><body><form action="服务器地址" method="post">name:<input type="text" name="username" /><br />password:<input type="password" name="userpwd" /><br /><!-- type=“submit”时具有提交表单的能力--><input type="submit" value="submit"/></form></body></html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>form</title> </head> <body> <form action="服务器地址" method="post"> name:<input type="text" name="username" /> <br /> password:<input type="password" name="userpwd" /> <br /> <!-- type=“submit”时具有提交表单的能力--> <input type="submit" value="submit"/> </form> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>form</title> </head> <body> <form action="服务器地址" method="post"> name:<input type="text" name="username" /> <br /> password:<input type="password" name="userpwd" /> <br /> <!-- type=“submit”时具有提交表单的能力--> <input type="submit" value="submit"/> </form> </body> </html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><form action="https://198.1.1.1" method="post"><table><tr><td>name:</td><td><input type="text" name="username" /></td></tr><tr><td>password:</td><td><input type="password" name="userpwd" /></td></tr><tr><td colspan="2"><input type="submit" value="login" /><input type="reset" value="reset" /></td></tr></table></form></body></html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form action="https://198.1.1.1" method="post"> <table> <tr> <td>name:</td> <td><input type="text" name="username" /></td> </tr> <tr> <td>password:</td> <td><input type="password" name="userpwd" /></td> </tr> <tr> <td colspan="2"> <input type="submit" value="login" /> <input type="reset" value="reset" /> </td> </tr> </table> </form> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form action="https://198.1.1.1" method="post"> <table> <tr> <td>name:</td> <td><input type="text" name="username" /></td> </tr> <tr> <td>password:</td> <td><input type="password" name="userpwd" /></td> </tr> <tr> <td colspan="2"> <input type="submit" value="login" /> <input type="reset" value="reset" /> </td> </tr> </table> </form> </body> </html>
4.13 上传文件
将input的type属性改为file即可上传文件。type属性为hidden表示不会在页面上显示，其value值会随表单的提交而传给服务器（主要用于一些不想让用户看见的信息的提交）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!--this is used for push file --><input type="file" /><form action="192.168.1.1" method="get"><!--不会在页面上显示，会直接提交给服务器--><input type="hidden" name="usrid" value="111" />usercode <input type="text" name="usercode" id="" /><input type="submit" value="提交" /></form></body></html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <!--this is used for push file --> <input type="file" /> <form action="192.168.1.1" method="get"> <!--不会在页面上显示，会直接提交给服务器--> <input type="hidden" name="usrid" value="111" /> usercode <input type="text" name="usercode" id="" /> <input type="submit" value="提交" /> </form> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <!--this is used for push file --> <input type="file" /> <form action="192.168.1.1" method="get"> <!--不会在页面上显示，会直接提交给服务器--> <input type="hidden" name="usrid" value="111" /> usercode <input type="text" name="usercode" id="" /> <input type="submit" value="提交" /> </form> </body> </html>
4.14 表单扩展
input标签中的readonly和disabled。用户都无法修改，但是能看到，注意disabled的数据是无法提交的。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><form action="192.168.1.0" method="post"><!--readonly和disabled用户都不能修改，但是能看到，注意disabled的数据是无法提交的-->用户代码<input type="text" name="usercode" value="111" readonly /><br />用户姓名<input type="text" name="username" value="jimmy" disabled /><br /><input type="submit" value="提交数据" /></form></body></html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form action="192.168.1.0" method="post"> <!--readonly和disabled用户都不能修改，但是能看到，注意disabled的数据是 无法提交的--> 用户代码<input type="text" name="usercode" value="111" readonly /> <br /> 用户姓名<input type="text" name="username" value="jimmy" disabled /> <br /> <input type="submit" value="提交数据" /> </form> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form action="192.168.1.0" method="post"> <!--readonly和disabled用户都不能修改，但是能看到，注意disabled的数据是 无法提交的--> 用户代码<input type="text" name="usercode" value="111" readonly /> <br /> 用户姓名<input type="text" name="username" value="jimmy" disabled /> <br /> <input type="submit" value="提交数据" /> </form> </body> </html>
没有回复内容