目录
一、HTML
1、什么是HTML
HTML是用来描述网页的一种语言。
HTML叫做超文本标记语言（HyperText Mark-up Language）
HTML不是编程语言，而是一种标记语言
标记语言就是一套标记标签
HTML使用标记标签来描述网页2、网页由谁来解析
由浏览器来解析
（1）IE
（2）firefox火狐浏览器。很依赖fLash插件，纯中文
（3）safari、webkit---苹果的浏览器
（4）chrome 谷歌浏览器，(推荐)业界的标杆，一开始使用的是【webkit】内核，和苹果的内核一样，后来自主研发了新的内核【 blink】
（5）Opera浏览器，手机端，内核用的【blink】
（6）UC, 360，QQ，搜狗，遨游，百度，2345……3、HTML的标签
HTML标记标签通常称为HTML tag
HTML标签由成对出现的尖括号包围的关键词，比如< body>
HTMI标签通常是成对出现的，有例外，比如<b></b>
标签对中第一个标签是开始标签，第一标签是结束标签结束标签是由【/】结束的
开始和结束标签也被称为开放标签和闭合标签
4、HTML的标签的一些基础标签
相关知识参考连接：
https://blog.csdn.net/qq_46500711/article/details/122202823
https://blog.csdn.net/qq_41953182/article/details/108308581
<!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> <b>粗体文本</b> <code>计算机代码 </code> <em>强调文本 </em> <i>斜体文本</i> <kbd >键盘输入</kbd> <pre > 池塘边的榕树下， 知了在声声叫着夏天。 </pre> <small> 更小的文本 </small> <strong>重要的文本</strong> <del>删除线</del> log<sub>5</sub> 2<sup>3</sup> = 8 <font .color=" green">我是font (淘汰了)</font> </body> </html>
5、什么是网页
HTML文档描述的就是网页
HTML文档包含HTML的标签和纯文本
HTML文档就被称为网页
web浏览器的作用是读取HTML文档，并以网页的形式显示出它们
浏览器不会显示HTML标签，而是使用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> <h1>我的第一个标题</h1> <p>我的第一个段落</p> 我是一个普通文本 </body> </html>
6、HTML的头部
head元素包含了所有的头部信息元素。script，link，以及各种meta，titfe，base
（1）title
定义了浏览器工具栏的标题，当网页被收藏到收藏夹，显示的默认标题；显示在搜索引擎结果页面的标题。
（2）base
描述了基本的链接地址/链接目录，作为HTML文档中所有链接的目标地址，base 元素适用页面中于指定的默认地址或者所有链接的目标地址。 在 HTML 文档中 <base> 每出现一次，Base 对象就会被创建。
比如我们指定默认地址是百度，点击“哈哈哈”就会调转到百度页面
<!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"> <base href="http://www.baidu.com" target="_blank"> <title>Document</title> </head> <body> <a href="">哈哈哈</a> </body> </html>
（3）link
引用css层叠样式表
（4）style
定义css层叠样式表
（5）script
既可以定义script脚本，也可以引用script文件。不建议写在head里, 写在body的最下方。
（6）meta--元数据
指定网页的描述，关键词，文件的最后修改时间，作者。可以定义搜索引擎的关键词。
元数据 （ Metadata ），又称 中介数据 、 中继数据 ，为描述 数据 的数据（data about data），主要是描述数据 属性 （property）的 信息 ，用来支持如指示存储位置、 历史 数据、 资源 查找、文件记录等功能。7、链接
<!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> <!-- 超级链接 --> 普通的链接：<a href="http://www.baidu.com" target="_self">百度一下</a><br> 图像链接：<a href="http://www.baidu.com"><img width="150" src="img\晚霞.jpg" alt="这是晚霞片" title="晚霞"></a><br> 邮件链接：<a href="mailto:123456@qq.com">站长信箱</a><br> 锚记链接： <a id="tips">提示部分</a> <a href="#tips">跳到提示部分</a> </body> </html>
锚记链接知识点参考链接：
https://zhuanlan.zhihu.com/p/181653422
8、图片
<!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> <img src="img\晚霞.jpg" width="300" title="" alt="" align="bottom" border="1">后面的文本 </body> </html>
9、块级元素/行级元素
<div>文档中的块级元素</div> <span>文档中的行级元素</span>（1）块级元素
特点：
1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
2.元素的高度、宽度、行高和顶底边距都是可以设置的。
3.元素的宽度如果不设置的话，默认为父元素的宽度。
4.自占一行，自带换行功能
5.常见的块级元素：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>……
（2）行级元素
特点：
1.可以和其他元素处于一行，不用必须另起一行，自己没有换行功能，
2.元素的高度、宽度及顶部和底部边距不可设置。
3.元素的宽度就是它包含的文字、图片的宽度，不可改变。
4.常见的行级元素：
<a>, <span>,< del>,< sub>, <sup>, <em>,<b>,< strong>. . . .
参考链接：https://www.cnblogs.com/phoenix-Chen/p/5262650.html
10、无序列表/有序列表/自定义列表
<!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> 无序列表： <ul type="disc"> <li>项目1</li> <li>项目2</li> </ul> 有序列表： <ol type="I"><!--I罗马数字--> <li>项目1</li> <li>项目2</li> <li>项目3</li> <li>项目4</li> <li>项目5</li> </ol> 自定义列表: <dl> <dt>项目1</dt> <dd>描述项目1</dd> <dt>项目2</dt> <dd>描述项目2</dd> </dl> </body> </html>
11、表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
参考链接：https://www.w3school.com.cn/html/html_tables.asp
<!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> <table border="1" cellpadding="10" cellspacing="0" width="400"> <thead> <tr> <th>学号</th> <th>姓名</th> <th>联系方式</th> <th>毕业院校</th> <th>国籍</th> </tr> </thead> <tbody> <tr> <td>1001</td> <td>罗永浩</td> <td>13635412586</td> <td>延边第二中学</td> <td rowspan="4">中国</td> </tr> <tr> <td>1002</td> <td>罗翔</td> <td>13125693254</td> <td>北京大学</td> </tr> <tr> <td>1003</td> <td>樊登</td> <td>13326956541</td> <td>西安交通大学</td> </tr> <tr> <td>1004</td> <td>雷军</td> <td>15619851265</td> <td>武汉大学</td> </tr> </tbody> <tfoot> <tr> <td colspan="5"> 备注：他们都是有钱人。 </td> </tr> </tfoot> </table> </body> </html>
12、表单标签---form
action：数据的提交后台地址
method：数据的提交方式
get：默认值，会把所有要提交的数据拼接在地址栏，不安全
post：封装一个请求体，把数据提交给后台，不会拼接在地址栏，安全readonly和disabled区别：
readonly可以提交到后台的，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="" method="post"> <p> 账号：<input type="text"> </p> <p> 密码：<input type="password"> </p> <p> 性别： <input type="radio" name="gender" value="男" id="man"> <label for="man">男</label> <input type="radio" name="gender" checked value="女" id="women"> <label for="women">女</label> </p> <p> 地址： <select> <option value="">请选择省</option> <option value="">吉林省</option> <option value="">北京市</option> </select> <select> <option value="">请选择市</option> <option value="">长春市</option> <option value="">北京市</option> </select> <select> <option value="">请选择区</option> <option value="">南关区</option> <option value="">西城区</option> </select> </p> <p> 爱好： <input type="checkbox" checked>读书 <input type="checkbox">游泳 <input type="checkbox" checked>跑步 </p> <p> <textarea cols="30" rows="10"></textarea> </p> <p> 邮箱：<input type="email"> </p> <p> 薪水：<input type="number"> </p> <p> 头像：<input type="file"> </p> <p> 颜色：<input type="color"> </p> <p> 电话：<input type="tel"> </p> <p> 隐藏：<input type="hidden"> </p> <p> <!-- <input type="submit"> <input type="reset"> <input type="button" value="自定义按钮"> --> <button type="submit">注册</button> <button type="reset">重写</button> <button type="button">自定义</button> <!-- 我们项目的要求： 如果有form，用input 如果没有form，用button --> </p> </form> </body> </html>
相关知识参考连接：
https://www.runoob.com/html/html-forms.html
13、框架标签---iframe
（1）HTML框架是指用HTML语言编写的文档，通过使用文档，你可以在同一个浏览器窗口中显示不止一个页面。
（2）框架结构标签（<frameset>）定义如何将窗口分割为框架，每个 frameset 定义了一系列行或列，【rows/columns】 的值规定了每行或每列占据屏幕的面积。
（3）假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
为不支持框架的浏览器添加 <noframes> 标签。
重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。
<!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> <iframe src="https://www.sina.com.cn" height="600" width="400" frameborder="0"></iframe> <iframe src="https://www.sohu.com" height="600" width="400" frameborder="0"></iframe> </body> </html>
14、实体（转义字符）
转义字符串（Escape Sequence）也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：第一个原因是像“<”和“>”这类符号已经用来表示HTML标签，因此就不能直 接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转 义字符串时，要严格遵守字母大小写的规则。第二个原因是，有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。
相关知识点参考链接：https://www.cnblogs.com/yasmi/articles/4884396.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> 实体Entity（转义字符） <br> 李白乘舟将欲行，<br> 忽闻岸上踏歌声，<br> 桃花潭水深千尺， <br>不及汪伦送我情。 <br> 空格 <br> & and符号 <br> < 小于号 <br> > 大于号 <br> © 版权号 </body> </html>15、html4和html5
1999年HTML4.01里程碑版本，在HTML4. 01中的几个标签已经被废弃，这些元素在HTML5里有的被删除了，有的被重新定义。HTML5在2012年形成稳定的版本。
H5新增：画布，多媒体，重力感应，地图，websocket。HTML5 浏览器兼容性 IE9之前几乎不支持H5
多媒体应用：
<!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> <!-- 定义音频内容 --> <audio src="123.mp3" autoplay controls></audio> <!-- 定义视频内容 --> <video src="123.mp4" autoplay controls></video> </body> </html>
16、【HTML/CSS】创建日期和时间表单控件
参考链接：https://blog.csdn.net/qq_43466457/article/details/100186541
属性值 说明 date 选择日，月，年 month 选择月，年 week 选择周，年 time 选择时间（时，分） datetime 输入时间后，会验证是否是时间格式 datetime-local 选择时间，日期，月，年（本地时间）
