一、html css 以及js的关系
二、HTML 是什么？
HTML（htyper text markup language）：即超文本标记语言
超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言: 标记（标签）构成的语言.
网页==HTML文档，由浏览器解析，用来展示的
静态网页：静态的资源，如xxx.html
动态网页：html代码是由某种开发语言根据用户请求动态生成的
html文档树形结构图：
三、什么是标签
- 是由一对尖括号包裹的单词构成 例如: <html> 所有标签中的单词不可能以数字开头.
- 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
- 标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
- 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />
- 标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>
四、标签的属性
- 通常是以键值对形式出现的. 例如 name="sex"
- 属性只能出现在开始标签 或 自闭和标签中.
- 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="sex"
- 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly
五、<!DOCTYPE html>标签
由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为CompatibilityMode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standarsmode)，这就是二者最简单的区别。
W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。
window.top.document.compatMode： //BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。 //CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
该属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。这就是<!DOCTYPE html>的作用。
六、head标签
head标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到css样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给用户。
下面这些标签可用在 head 部分：
<title>、<meta>、<link>、<style>、 <script>、 <base>
<head> 标签在文档的开始处，紧跟在 <html> 后面，并处于 <body> 标签之前。文档的头部经常会包含一些 <meta> 标签，用来告诉浏览器关于文档的附加信息。
1.<meta>标签
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--页面标题--> <title>head标签</title> <!--设置页面的编码，防止乱码现象 利用meta标签， charset="utf-8" 这是属性，以键值对的形式给出 k=v a=b 告诉浏览器用utf-8来解析这个html文档 --> <meta charset="utf-8" /><!--简写--> <!--繁写形式：（了解）--> <!--<meta http-equiv="content-type" content="text/html;charset=utf-8" />--> <!--页面刷新效果--> <!--<meta http-equiv="refresh" content="3;https://www.baidu.com" />--> <!--页面作者--> <meta name="Augus" content="Augus;11200297@qq.com" /> <!--设置页面搜索的关键字--> <meta name="keywords" content="鸿鹄科技;软件开发;项目维护" /> <!--页面描述--> <meta name="description" content="鸿鹄科技详情页" /> </head> <body> </body> </html>
2.非<meta>标签
<title>oldboy</title>
<!--link标签引入外部资源-->
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script>
七、body标签
body 标签是定义文档的主体。body 元素包含文档的所有内容（如文本、超链接、图像、表格以及列表等）body是用在网页中的一种HTML标签，标签是用在网页中的一种HTML标签，表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容
1.文本标签
<!--标题标签--> <h1>Windows11正式发布</h1> <h2>Windows11正式发布</h2> <h3>Windows11正式发布</h3> <h4>Windows11正式发布</h4> <h5>Windows11正式发布</h5> <h6>Windows11正式发布</h6>
<!--分割线 width:设置宽度 align:设置位置 left center right --> <hr width="30%" align="left"> <hr width="300px" align="left"> <!--段落标签--> <p>™当 PC 在我们的生活中扮演着越来越重要的角色时，Windows 11 旨在让您更接近您所热爱的事物。</p> <p>Windows 一直是世界创新的舞台。它是全球企业的基石，助力众多蓬勃发展的初创公司变得家喻户晓。网络在 Windows 上诞生并繁衍生息。我们许多人在这里写下了第一封电子邮件，体验了第一款 PC 游戏，编写了第一行代码。Windows 是人们创造、连接、学习和成就不凡的地方，如今它是一个 10 亿多人所依赖的平台。</p> <p>我们肩负着为众人设计的责任，不能掉以轻心。在过去一年半的时间里，我们使用 PC 的方式发生了难以置信的改变，我们从将 PC 融入生活，转变成试图将整个生活融入 PC。我们不仅可以使用设备开会、学习和完成工作，也可以和朋友一起玩游戏、观看喜爱的节目，更有意义的是，我们可以用设备联系彼此。在这个过程中，我们发现我们重塑了办公室的社交，走廊里的聊天，锻炼健身，酒吧的欢乐时光以及节日庆祝等等，这些活动都变得数字化。</p> <!--加粗倾斜--> <b>加粗</b> <i>倾斜</i> <u>倾斜</u> <!--换行标签--> hello<br>world <!--中划线--> <del>暮霭程程楚天阔</del> <!--字体标签font color:字体颜色 size:从1-7，由小到大 --> <font color="#a52a2a" size="7" face="宋体">暮霭程程楚天阔</font>
2.实体字符
在 HTML 中，某些字符是预留的。 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
PS：实体名称对大小写敏感！
3.多媒体标签
<!--图片img src:指定加载图片 width：宽度 height:高度 title：设置鼠标悬停图片时提示信息 alt：图片加载失败提示语 --> <img src="../resource/1.jpg" width="788" height="893" title="Jack" alt="图片加载失败提示语"> <!--音视频 embed src:指定音频文件 height：设置嵌入内容的高度。 width：设置嵌入内容的宽度。 --> <embed src="../resource/鸡你太美.mp3"> <!--视频--> <embed src="https://haokan.baidu.com/v?pd=wisenatural&vid=10943979664505719238" width="1000px" height="500px">
4.超链接标签
<!--a标签 href：可以使一个网页，地址，页面 target: _self:在原来页面打开 _blank:在新的空白页打开 --> <a href="hello.html">这是一个超链接</a><br> <a href="http://www.baidu.com">百度一下</a><br> <a href="http://www.baidu.com" target="_blank">百度一下</a><br> <!-- 图片超链接 --> <a href="https://baike.baidu.com/item/%E4%B8%AD%E6%A3%AE%E6%98%8E%E8%8F%9C/3269070?fr=aladdin"><img src="./img/1.jpg"></a>
5.设置锚点
主要是给需要跳转的点设置name属性的值，然后执行a标签href属性中指定该值即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>锚点设置</title> </head> <body> <ul> <li><a href="#miao">去找用户管理</a></li> <li><a href="#wang">去找订单管理</a></li> <li><a href="#xing">去找商品详情</a></li> <li><a href="#ren">去找系统设置</a></li> </ul> <a name="miao"></a> <h1>用户管理</h1> <p>张三李四</p> <p>张三李四</p> <a name="wang"></a> <h1>订单管理</h1> <p>张三李四</p> <p>张三李四</p> <a name="xing"></a> <h1>商品详情</h1> <p>张三李四</p> <p>张三李四</p> <a name="ren"></a> <h1>系统设置</h1> <p>张三李四</p> <p>张三李四</p> </body> </html>
6.列表标签
<!--无序列表 type:可以设置列表前图标的样式 type="square" 如果想要更换图标样式，需要借助css技术： style="list-style:url(img/act.jpg) ;" --> <ul> <li>黄渤</li> <li>沈腾</li> <li>曹琴</li> <li>李明</li> </ul> <!--有序列表: type:可以设置列表的标号：1,a,A,i,I start:设置起始标号 --> <ol type="I"> <li>黄渤</li> <li>沈腾</li> <li>曹琴</li> <li>李明</li> </ol>
7.表格标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> </head> <body> <!-- table tr：代指行 th:表头单元格加粗自动居中 th:代指单元格 border：设置边框大小 cellspacing:设置单元格和边框之间的缝隙 align： left center right background:设置背景图片 rowspan：合并行 colspan:合并列 --> <table border="1px" cellspacing="0px" cellpadding="" background="../resource/1.jpg"> <tr> <th>姓名</th> <th>职位</th> <th>年龄</th> <th>技能</th> </tr> <tr> <td>紫衫龙王</td> <td rowspan="4">四大护教法王</td> <td>24</td> <td>珊瑚杖</td> </tr> <tr> <td>白眉鹰王</td> <td>39</td> <td>鹰爪功</td> </tr> <tr> <td>金毛狮王</td> <td>32</td> <td>七伤拳</td> </tr> <tr> <td>青翼蝠王</td> <td>35</td> <td>轻功</td> </tr> </table> </body> </html>
7.内嵌框架
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
添加内嵌框架的语法:
<iframe src=" URL "></iframe>
主页
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>主页</title> </head> <body> <iframe src="导航.html" width="200px" height="200px"></iframe> <!-- 下面的iframe指定了其name属性，name其他页面内容要显示的时候执行通过name属性选择即可 --> <iframe src="../img/1.jpg" width=300px" height="200px" name="myiframe"></iframe> </body> </html>
导航
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3>明教四大法王</h1> <ul> <li><a href="../img/紫衫龙王.jpg" target="myiframe">紫衫龙王</a></li> <li><a href="../img/白眉鹰王.jpg" target="myiframe">白眉鹰王</a></li> <li><a href="../img/金毛狮王.jpg" target="myiframe">金毛狮王</a></li> <li><a href="../img/青翼蝠王.jpg" target="myiframe">青翼蝠王</a></li> </ul> </body> </html>
8.框架集合
frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。里面如果只有一个框架用frame标签，如果多个框架用frameset标签，用cols 或 rows进行行，列的切割
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!--框架集合：和body是并列的概念，不要将框架集合放入body中--> <frameset rows="20%,*,30%"> <frame /> <frameset cols="30%,40%,*"> <frame /> <frame src="index.html"/> <frame /> </frameset> <frameset cols="50%,*"> <frame /> <frame /> </frameset> </frameset> </html>
9.form表单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="" method="get"> <!--表单元素--> <!--文本框: input标签使用很广泛，通过type属性的不同值，来表现不同的形态。 type="text" 文本框，里面文字可见 表单元素必须有一个属性：name 有了name才可以提交数据,才可以采集数据 然后提交的时候会以键值对的形式拼到一起。 value:就是文本框中的具体内容 键值对：name=value的形式 如果value提前写好，那么默认效果就是value中内容。 一般默认提示语：用placeholder属性，不会用value--》value只是文本框中的值。 readonly只读：只是不能修改，但是其他操作都可以，可以正常提交 disabled禁用：完全不用，不能正常提交 写法： readonly="readonly" readonly readonly = "true" --> <input type="text" name="uname" placeholder="请录入身份证信息"/> <input type="text" name="uname2" value="123123" readonly="true"/> <input type="text" name="uname3" value="456456" disabled="disabled"/> <!--密码框:效果录入信息不可见--> <input type="password" name="pwd" /> <!--单选按钮： 注意：一组单选按钮，必须通过name属性来控制，让它们在一个分组中，然后在一个分组里只能选择一个 正常状态下，提交数据为：gender=on ，后台不能区分你提交的数据 不同的选项的value值要控制为不同，这样后台接收就可以区分了 默认选中：checked="checked" --> 性别： <input type="radio" name="gender" value="1" checked="checked"/>男 <input type="radio" name="gender" value="0"/>女 <!--多选按钮: 必须通过name属性来控制，让它们在一个分组中，然后在一个分组里可以选择多个 不同的选项的value值要控制为不同，这样后台接收就可以区分了 多个选项提交的时候，键值对用&符号进行拼接：例如下： favlan=1&favlan=3 --> 你喜欢的语言： <input type="checkbox" name="favlan" value="1" checked="checked"/>java <input type="checkbox" name="favlan" value="2" checked="checked"/>python <input type="checkbox" name="favlan" value="3"/>php <input type="checkbox" name="favlan" value="4"/>c# <!--文件--> <input type="file" /> <!--隐藏域--> <input type="hidden" name="uname6" value="123123" /> <!--普通按钮：普通按钮没有什么效果，就是可以点击，以后学了js，可以加入事件--> <input type="button" value="普通按钮" /> <!--特殊按钮：重置按钮将页面恢复到初始状态--> <input type="reset" /> <!--特殊按钮：图片按钮--> <img src="img/java核心技术.jpg" /> <input type="image" src="img/java核心技术.jpg" /> <!--下拉列表 默认选中：selected="selected" 多选：multiple="multiple" --> 你喜欢的城市： <select name="city" multiple="multiple"> <option value="0">---请选择---</option> <option value="1">北京市</option> <option value="2" selected="selected">上海市</option> <option value="3">深圳市</option> <option value="4">南京市</option> <option value="5">苏州市</option> </select> <!--多行文本框 利用css样式来控制大小不可变：style="resize: none;" --> 自我介绍： <textarea style="resize: none;" rows="10" cols="30">请在这里填写信息。。</textarea> <br /> <!--label标签 一般会在想要获得焦点的标签上加入一个id属性，然后label中的for属性跟id配合使用。 --> <label for="uname">用户名：</label><input type="text" name="uername" id="uname"/> <!--特殊按钮：提交按钮：具备提交功能--> <input type="submit" /> </form> </body> </html>
百度搜索练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表单</title> </head> <body> <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" /> <form action="https://www.baidu.com/s" method="get"> <input type="text" name="wd" placeholder="请输入您想要搜索的内容"/> <input type="submit" name="" id="" value="百度一下" /> </form> </body> </html>
10、HTML 5 <input> 中type新增 属性
可以参照w3c：
https://www.w3school.com.cn/html5/att_input_type.asp
11、HTML 5 <input> 中type新增 属性
<!--HTML5新增属性： multiple：多选 placehoder:默认提示 autofocus:自动获取焦点 required:必填项 --> <input type="text" autofocus="autofocus"/> <input type="text" required="required" />