一、HTML介绍
HTML 全称：HyperText Mackeup Language 超文本标记语言
什么是超文本
比如网页的超链接、图片、音频、视频都成为超文本。
什么是标记
举个例子： 打开sublime，新建index.html，输入一下文字内容，用Chrome游览器打开。
什么是语言
很简单，假如我是个包工头，工地的工人来自全国各地，那么有河南人，另外还有外国人，工地还有一条狗
如果我要让他们干活，说：好好干活
对河南人说：‘好好干活’
对外国人说：“Do you work”
对狗说：’汪汪汪‘
一样的，我们现在有台计算机，现在在html文件中写内容，计算机上的浏览器会去解析你编写的代码，这些的内容，我们就称为语言。浏览器可以直接解析这种语言。
二、HTML结构
<!--document 文档：一个html 标记当前文档为html5的文档--><!--引擎是浏览器兼容性最根本的原因--><!DOCTYPE html><html lang="en">
<head> <!--这里面的标签是网页中看不见摸不着--> <!--修改统一字符集编码--> <meta charset="utf-8"> <title>01常用标签介绍</title> </head> <body> </body> </html>
文档声明
它不是html的标签，指明了该页面使用哪个HTML版本进行编译
HTML标签
每一个页面中的结构，都会有一个最外层的标签，它表示文档内容的开始。整个文档的根标签
html标签包含两部分：头部声明（<head>）和内容部分（<body>）
head标签
把一个网页比做一个人的话，那么head标签就是这个人的基本信息，虽然这个没有办法直接观察到，但这些内容确实存在，并且是在网页中必不可少的
head用于表示网页中的一个基础的信息（元信息）
body标签
把body标签比作一个人的话，那么body标签就是这个人的身体、肤色、痔疮，它里面的内容是看的见摸得着的。对于人的性格，意淫的想法，性取向等body是管不着的。那么body标签包含页面中所有的可见元素，比如网页中的文本的展示内容，漂亮美女，动听的音乐，炫酷的电影等都属于body所管。
总结：
1. html 快捷键
2. html tab键，快速生成html5的文档
5.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html4.01的文档声明头
6.
7. head 网页的头部标签，也是网页的根标签
8. body 网页的身体标签，网页中所有能看得见摸得着的内容，都在body中声明
9. 那么，这个机构是我们网页的最基本的配置，如果把网页比作盖一座房子，那么这些相关的配置，就是开始打基地
接下来继续学习bead和body中的相关标签，通过这些内容，将我们的网页搭建好。
二、head相关标签
head标签中的相关标签，是看不见，摸不着的，仅仅是对应用于网页的一些基础信息（元信息）
1 meta： 网页的元信息标签，主要针对网页的配置 2 title： 网页的标签 3 style：样式标签 4 link：链接css文件 5 herf属性 6 script：标本标签 7 src属性链接脚本文件
1 <!--document 文档：一个html 标记当前文档为html5的文档--> 2 <!--引擎是浏览器兼容性最根本的原因--> 3 <!doctype html> 4 <html lang="en"> 5 <!--双闭合--> 6 <head> 7 <!--这里的标签是网页中看不见摸不着--> 8 <!--单闭合--> 9 <!--设置统一字符集--> 10 <meta charset="UTF-8"> 11 <!--标记这个网页的标题内容--> 12 <title>01常用标签介绍</title> 13 <!--样式，修改网页内容--> 14 <style> 15 /*css语言注释格式*/ 16 /*获取到body所有内容*/ 17 body{ 18 background-color: pink; 19 } 20 </style> 21 <link rel="stylesheet" href="./css/index.css"> 22 <script> 23 // 网页弹出框 24 alert("hello fengzhu.gao"); 25 //console.log("hello world"); 26 </script> 27 <!--外链接一个js文件--> 28 <script src="js/index.js"></script> 29 </head> 30 <body> 31 阿伦艾弗森 32 </body> 33 </html> 三、body相关标签
标题标签：
1.标题标签 （类似word文档中，1级标题、2级标题......） h1~h6 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--标题标签--> <h1>科比布莱恩特</h1> <h2>科比布莱恩特</h2> <h3>科比布莱恩特</h3> <h4>科比布莱恩特</h4> <h5>科比布莱恩特</h5> <h6>科比布莱恩特</h6> </body> </html>
超链接标签
1 a: anchor 锚点 2 herf ：跳转的地址 3 target：_self 在当前页面中打开地址 4 _blank 在新的空白页中打开地址 5 title：鼠标悬浮时显示的标题 6 7 8 <!DOCTYPE html> 9 <html lang="en"> 10 <head> 11 <meta charset="UTF-8"> 12 <title>Title</title> 13 </head> 14 <body> 15 <!--a：anchor 锚点 默认在当前网页中打开--> 16 <a href="https://www.baidu.com" target="_blank" title="百度一下"> 17 <img src="./images/baidu.gif" alt=""> 18 <img src="./images/logo.png" alt=""> 19 </a> 20 </body> 21 </html>
img: scr属性：链接的图片地址<图片显示不出来时，重点排查> alt属性；图片加载失败时候显示的提示文本，为了用户体验 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--a：anchor 锚点 默认在当前网页中打开--> <a href="https://www.baidu.com" target="_blank" title="百度一下"> <img src="./images/baidu.gif" alt=""> <img src="./images/logo.png" alt="logo"> </a> </body> </html>
页面滚动 <返回顶部>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--这个位置增加一个锚点--> 9 <p id="top"></p> 10 <h1>网页滚动</h1> 11 <h1>网页滚动</h1> 12 <h1>网页滚动</h1> 13 <h1>网页滚动</h1> 14 <h1>网页滚动</h1> 15 <h1>网页滚动</h1> 16 <h1>网页滚动</h1> 17 <h1>网页滚动</h1> 18 <h1>网页滚动</h1> 19 <h1>网页滚动</h1> 20 <h1>网页滚动</h1> 21 <h1>网页滚动</h1> 22 <h1>网页滚动</h1> 23 <h1>网页滚动</h1> 24 <h1>网页滚动</h1> 25 <h1>网页滚动</h1> 26 <h1>网页滚动</h1> 27 <h1>网页滚动</h1> 28 <h1>网页滚动</h1> 29 <h1>网页滚动</h1> 30 <h1>网页滚动</h1> 31 <h1>网页滚动</h1> 32 <h1>网页滚动</h1> 33 <h1>网页滚动</h1> 34 <!--a标签指向锚点--> 35 <a href="#top">返回顶部</a> 36 </body> 37 </html>
p标签 <段落标签>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--空白折叠现象：有空格或者是折行都默认折成一个空白--> 9 <p> 10 中新网6月23日 ©<strong>湖北</strong> 11 </p> 12 <p> 13 委员会办公室官方微信消息 14 </p> 15 <p> 16 <!--斜体 i用的最多--> 17 <i>斯科特皮蓬</i> 18 <em>斯科特皮蓬</em> 19 20 </p> 21 <hr> 22 <p>alex</p> 23 <p>alex</p> 24 </body> 25 </html>
列表标签
列表标签(ul ol dl) ul和ol的子标签一定是li dl中有dt和dd
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*去掉ul前面的修饰*/ 8 ul{ 9 list-style: none; 10 } 11 a{ 12 /*去掉文本下划线*/ 13 text-decoration: none; 14 /*修改字体大小*/ 15 font-size: 14px; 16 /*修改字体颜色*/ 17 color: gray; 18 } 19 /*修改鼠标悬浮颜色*/ 20 a:hover{ 21 color: orangered; 22 } 23 </style> 24 </head> 25 <body> 26 <!--unordered list 无序列表--> 27 <ul type="square"> 28 <!--list item 列表项--> 29 <li> 30 <a href="">你喜欢看CBA吗</a> 31 </li> 32 <li> 33 <a href="">还是喜欢看NBA</a> 34 </li> 35 <li> 36 <a href="">当然是喜欢看NBA</a> 37 </li> 38 <li> 39 <a href="">我最喜欢洛杉矶湖人队</a> 40 </li> 41 </ul> 42 <!--emment 语法，快捷键--> 43 <!--有序列表--> 44 <ol type="A"> 45 <li>巴基斯坦总理称印总理莫迪向其致国庆贺电 中</li> 46 <li>特朗普突然承认戈兰高地为以色列领土，还想搞一波叙利..凤凰新闻</li> 47 <li>以色列遭火箭弹袭击致7人伤 以总理称将武力回</li> 48 <li>开车不识英文路牌 澳华人新移民酿致命车祸获刑中国新闻网</li> 49 <li>俄外交部发言人：西方正尽力让世界不知道克里米亚真实..凤凰新闻</li> 50 </ol> 51 <!--自定义标签--> 52 <dl> 53 <!--description title 定义标题--> 54 <dt>帮助中心</dt> 55 <!--defin description 定义内容--> 56 <dd>账户管理</dd> 57 <dd>购物指南</dd> 58 <dd>订单操作</dd> 59 </dl> 60 </body> 61 </html> 表格 table
tr 行 td 单元格定制的内容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--border 表格添加边框--> 9 <!--cellspacing 单元格边距--> 10 <!--width 设置表格和body一样宽--> 11 <table border="1" cellspacing="0" width="100%"> 12 <!--table row--> 13 <tr> 14 <!--table descriptin--> 15 <td>id</td> 16 <td>name</td> 17 <td>age</td> 18 </tr> 19 <tr> 20 <td>1</td> 21 <td>詹姆斯</td> 22 <td>35</td> 23 </tr> 24 <tr> 25 <td>2</td> 26 <td>欧文</td> 27 <td>25</td> 28 </tr> 29 <tr> 30 <td>3</td> 31 <td>库里</td> 32 <td>30</td> 33 </tr> 34 </table> 35 </body> 36 </html>
表单标签 form
前端要想和后端进行交互，无非离不开两种技术： form标签：自带和服务器交互的行为 ajax技术：与后端进行交互 浏览器对象XMLHttpRuquest 所有前端与后端交互都使用的这个对象action属性: 提交的服务器地址method属性：请求方式 get：从后端拿数据 post: 前端提交数据给后端，后端处理完再返回给前端input属性： type: text: 单行文本输入框 password：密码输入框 radio：单选框 产生互斥效果，加同样的name属性值 默认选中：checked checkbox： 多选框 默认选中: checked file： 上传文件 datetime-local：时间 name: 服务器端的key value: 服务器端的value id: 通常根label中的for属性值一样 placeholder 代替的文本select：有name option 有value，给select标签添加multiple,摁着crtl键进行多选textarea: 多行文本输入框 name value id cols 列数 rows 行数button 普通按钮
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 a{ 8 text-decoration: none; 9 } 10 a:hover{ 11 text-decoration: underline; 12 } 13 </style> 14 </head> 15 <body> 16 <!--http如果不写，默认提交本地--> 17 <!--method如果不写，默认是get--> 18 <form action="" method=""> 19 <!--表单控件--> 20 <!--单行文本输入框 input--> 21 <p> 22 <label for="username">用户名</label> 23 <input type="text" id="username" placeholder="请设置用户名" name="username"> 24 </p> 25 <p> 26 <label for="phone">手机号</label> 27 <input type="text" id="phone" placeholder="可用户登录和找回密码" name="phone" > 28 </p> 29 <p> 30 <label for="pwd">密 码</label> 31 <input type="password" id="pwd" placeholder="请设置登录密码" name="password"> 32 </p> 33 <p> 34 <h2>单选按钮</h2> 35 <!--给两个input按钮加同样的name属性，就能产生互斥效果--> 36 <!--默认选中 checked--> 37 <input type="radio" name="sex" value="0" checked>男 38 <input type="radio" name="sex" value="1">女 39 </p> 40 <p> 41 <h2>多选按钮,我的爱好</h2> 42 <input type="checkbox" name="smoking" value="">抽烟 43 <input type="checkbox" name="drinking" value="" checked>喝酒 44 <input type="checkbox" name="tangtou" value="">烫头 45 </p> 46 <p> 47 <!--multiple 下拉列表实现多选功能--> 48 <!--selected 默认选中--> 49 <select name="fav" id="" multiple> 50 <option value="a" selected>篮球</option> 51 <option value="b">游泳</option> 52 <option value="c">跑步</option> 53 <option value="d">羽毛球</option> 54 <option value="e">火锅</option> 55 <option value="f">NBA</option> 56 <option value="g">水花兄弟</option> 57 <option value="f">勇士</option> 58 </select> 59 </p> 60 <h3>个人描述</h3> 61 <p> 62 <!--多行文本输入框--> 63 <textarea name="" cols="30" rows="10" placeholder="请输入个人信息"></textarea> 64 </p> 65 <!--显示时间框--> 66 <input type="datetime-local"> 67 <!--上传文件--> 68 <input type="file"> 69 <p> 70 <input type="checkbox"> 71 <span id="note" style="font-size: 12px;">阅读并接受 <a href="#">《百度用户协议》</a>及 <a href="#">《百度隐私权保护声明》</a></span> 72 </p> 73 <p> 74 <!--提交按钮--> 75 <!--修改input属性的默认值,修改value就可以--> 76 <input type="submit" value="注册"> 77 </p> 78 </form> 79 <!--在表单之外就和表单没任何关系--> 80 <button>普通按钮</button> 81 <!--悬浮下划线--> 82 <a href="#">悬浮下划线</a> 83 </body> 84 </html> 标签分类：
块级标签：独占一行
h1～h6
p：段落标签，上下有间距
li：ul和ol的子标签
dt：dl中 description title
dd：dl中 defin description
table：表格
tr： table中的table row
form：表单标签
a ：anchor 锚点，超链接标签
img：图片标签
 ： 空格符号
em/i： 都是斜体标签。i 使用最多
strong：对文本加粗
td：table中的description
input
label