静态网页-HTML
引用百度百科 HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言；即除了文字之外还可以有视频、音频等内容 常说的浏览器中的视觉效果，不需要与用户进行交互（浏览器对用户操作的操作做出的回应）动作，例如
HTML介绍
HTML概念
引用百度百科
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言；即除了文字之外还可以有视频、音频等内容
静态页面概念
常说的浏览器中的视觉效果，不需要与用户进行交互（浏览器对用户操作的操作做出的回应）动作，例如：用户点击登录，弹出登录框、订单点击支付会弹出支付框、搜索手表出现手表的列表等
浏览器内核（了解）
浏览器内核原名叫渲染引擎，用于根据指定的标准解析网页结构，将结构的文本、图片、链接、音频、视频等内容渲染到页面中。
| 浏览器名称 | 渲染引擎 |
|---|---|
| Chrome/Safari | WebKit |
| Firfox | Gecko |
| IE | Trident |
| Opera | Presto(最新的是Blink) |
本章课程中推荐使用Chrome或Firfox浏览器，减少兼容性问题的处理（Java课程中暂不考虑兼容性）
网页结构
通过F12或在页面中右键-审查元素等方式查看页面的HTML构建结构
<html>
<!--head中指定网页标题及要用到的样式、js或其他需要进行引入的内容-->
<head>
<!-- charset用于设置网页的统一字符编码 -->
<meta charset='utf-8'/>
<!-- 网页的标题（名称） -->
<title>第一个网页</title>
</head>
<body>
<!--body中写的都是要在网页中展示的内容-->
hello html!!
</body>
</html>
网页结构想要在浏览器上打开并被浏览器解析，需要文件的后缀为.html或.html
开发工具
| 工具名称 | 工具logo | 下载地址 |
|---|---|---|
| Sublime Text |  |
http://www.sublimetext.com/3 |
| HBuilder |  |
https://www.dcloud.io/hbuilderx.html |
| VS code |  |
https://code.visualstudio.com/Download |
| WebStorm |  |
https://www.jetbrains.com/webstorm/download/ |
本课堂使用的是Hbuilder X，因为在学习前端的网页框架的时候需要使用本地服务器，但是还没有学到JavaWeb课程，而HbuilderX自带了服务器
HTML常用标签
前端页面中只有指定的标签才能被浏览器的内核解析，对于未知或自定义的标签浏览器会当成常规的文本识别
基础标签
标题标签
标题标签默认具有加粗效果，最小字体是16像素，最大是42像素
this is a normal text!
<!-- 注意点：在网页中默认字体大小最小为16px/1em，1em=16px -->
<!-- 标题标签 -->
<h1>一级标题标签，有加粗效果，字体比较大</h1>
<h2>二级标题标签，有加粗效果，字体比一级的小</h2>
<h3>三级标题标签，有加粗效果，字体比二级的再小点</h3>
<h4>四级标题标签，有加粗效果，字体比三级的再小点</h4>
<h5>五级标题标签，有加粗效果，字体比四级的再小点</h5>
<h6>六级标题标签，有加粗效果，字体比五级的再小点</h6>
<h7>没有该标签，但是浏览器依然可以解析，因为其符合标签的格式。所以不会报错，只是没有任何的效果</h7>
段落标签
段落标签包裹的内容代表是一个段落，但是呢，该段落没有任何的形式上的效果和语文中段落不一样，它仅仅只是有这么一个段落的含义而已
<p>
我是一个段落，但是没有任何的特点，只具备段落的含义而已
</p>
列表标签
将内容以列表的形式按从上往下进行排列，开发需要自定义样式，此处只针对标签演示学习
<!-- 无序列表，没有顺序，ul只是语义上表示其是一个列表标签，但是里面是没有内容的，内容要通过li标签来书写-->
<ul type="disc">
<li>马克杯</li>
<li>笔记本</li>
<li>麦克风</li>
</ul>
<!-- 有序列表，带有顺序，type指定排序类型，start指定开始的位置 -->
<h5>热搜排行榜</h5>
<ol type="A" start="3">
<li>新冠疫情</li>
<li>外交部发言回击</li>
<li>中国台湾出现5.8级地震</li>
</ol>
<!-- 自定义列表 dt相当于标题 dd相当于是描述 -->
<dl>
<dt>新冠疫情</dt>
<dd>1、成都出现新冠疫情</dd>
<dd>2、出现疫情后所有相关人员已经进行了隔离及检测</dd>
<dt>中国台湾</dt>
<dd>1、台湾是中国的宝岛</dd>
<dd>2、想台独想了很多年，也只能想想</dd>
</dl>
图片标签
用于引入图片在网页中进行显示，开发常用，重点注意其相对路径的使用方式
<!--
src：用于指定图片所在的路径
相对路径：图片相对于HTML文件所在的位置
./表示在当前目录下
../表示返回上一级目录
绝对路径：指的是图片在电脑上的存储路径（包含到了盘符路径）
alt：用于作为图片加载失败时的文字提示
title：当鼠标在图片上悬浮时显示的提示（title属性是所有的标签都具备的一个属性）
width：设置图片的宽度
height：设置图片的高度
-->
<img src="./asset/image.jpg" alt="加载中..." title="大鱼海棠" width="100px" height="100px">
超链接标签
超链接就是网页中常用的用于页面跳转的标签，还可以用于锚点，例如：网页中常见的返回顶部效果
超链接跳转
<!--
href：指定要跳转的网页链接
target：指定新窗口的打开方式
_blank：代表打开一个新窗口
_top：在当前窗口中打开
-->
<a href="http://www.baidu.com" target="_top" title="http://www.baidu.com">点击访问百度</a>
<hr>
<!-- 以图片作为跳转的方式 -->
<a href="http://www.baidu.com"><img src="./asset/image.jpg" alt=""></a>
<hr>
<!-- 当在设置超链接时，此时还不确定要跳转的链接地址，使用#作为占位符，代表当前页面 -->
<a href="#">跳转到指定服务器地址</a>
锚点
锚点的使用需要满足两个点：一是要有跳转的标记点，二是可以进行跳转
常见举例
1.网页中常见的返回顶部功能
2.火影中四代火影的瞬雷术
<!-- 头 -->
<a id="top" href="#buttom">跳到尾部</a>
<p>wq我是头</p>
<p>中间省略一千行</p>
<p>wq我是尾</p>
<!-- 尾 -->
<a id="buttom" href="#top">跳到首页</a>
<!--页面A中指定位置-->
<!-- 做个标记 -->
<a id="position"></a>
<!--页面B中进行跳转-->
<a href="index.html#position">回到超链接-跳转的页面</a>
table表格
表格语法
和办公软件Excel表格是类似的，都有行（tr）和列（td），行及列都可以进行合并操作
<!-- 简易的简历表 -->
<table border="1px" rules="all" cellspacing="0" align="center" width="50%">
<tr>
<td width="20%">姓名</td>
<td width="20%"></td>
<td width="20%">专业</td>
<td width="20%"></td>
<!-- rowspan表示跨行操作，值也包含了本身所在的行 -->
<td width="20%" rowspan="2"></td>
</tr>
<tr>
<td>出生日期</td>
<td></td>
<td>联系方式</td>
<td></td>
</tr>
<tr>
<td>籍贯</td>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="5" align="center">工作经历</td>
</tr>
<tr>
<td colspan="5" height="100px"></td>
</tr>
<tr>
<td colspan="5" align="center">教育经历</td>
</tr>
<tr>
<td>起止时间</td>
<td colspan="2">学校名称</td>
<td colspan="2">证明人</td>
</tr>
<tr>
<td height="40px"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td height="40px"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="5" height="120px">备注</td>
</tr>
</table>
表格通常会有对应的头部信息、具体的内容信息、还有一些底部的备注，此时就需要考虑一个问题
如果不同区域中的位置因为跨行或跨列被占据了，那么整个表格都会发生错乱；为了避免出现跨行或跨列超出区域的问题，提供了区域划分的标签：thead、tbody、tfooter，内容默认都在tbody中
<!-- 表格中默认会将所有的内容都放在一个tbody中 -->
<table border="1px" cellpadding="0" cellspacing="0" align="center" width="50%">
<thead>
<tr>
<th rowspan="2">编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>福欧文</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>福欧文</td>
<td>男</td>
</tr>
</table>
表格优缺点
优点
1.布局简单（因为就是纯表格的区域划分）
2.样式统一（只要确认好第一行的样式，后面的都会跟着变）
缺点
维护的时候超级麻烦（表格中有跨行和跨列的操作，一旦需要添加或者删除某一行或某一列的时候，相关联的所有的合并操作都需要重来）
表格应用场景
布局简单，变动的可能性比较小的情况下考虑使用表格
例如：登录、注册页，百度新闻的热搜新闻词模块
form表单
表单中的基础标签
表单通常用于让用户能够进行输入操作使用的，例如常见的登录、搜索、注册、图片上传等等
表单是让用户进行信息输入的，将输入的数据提交到服务器上，服务器再根据提交的数据进行分析验证反馈结果
action：指定服务器地址
method：指定表单数据的提交方式
get：默认的提交方式，get方式提交的数据会在地址栏中显示出来，很不安全，所能提交的数据量比较小，效率高
post：效率低，安全，携带大量的数据，不会在地址栏中显示
开发的过程中post方式使用的较多，考虑安全问题
注意：表单中的数据想要提交，一定要有name属性存在
表单中所有的内容都是通过以下三个标签组成的：
input、textarea、select
<form action="#" method="">
<label for="username">用户名：</label>
<input type="rdt" id="username" name="uname" placeholder="请输入手机号或邮箱" ><br>
<label for="pwd">密 码：</label>
<input type="password" id="pwd" name="password" ><br>
<!-- 复选框本身就是可以进行多项选择，每个key都对应一个value，是可以重复存在的 -->
兴趣爱好：<input type="checkbox" name="hobbies" value="playCode" checked="checked"/>敲代码
<input type="checkbox" name="hobbies" value="playGames">打游戏<br>
<!-- name值要求必须要相同 单选及复选框都具有一个checked属性-默认选中-->
性别：<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女" />女<br>
文件上传：<input type="file" name="file"><br>
<!-- 该标签不在页面中显示，用于提交一些标识或默认值的，这些值是不需要用户知道的，例如：qq、wechat登录的唯一标识 -->
<input type="hidden" name="flag" value="qq">
<input type="submit" value="登录">
<!-- 重置是将表单中输入的数据全部清空，不需要重新加载页面资源，刷新是需要重新加载资源的 -->
<input type="reset" value="重置">
</form>
表单中的扩展标签
<form action="">
<!-- select代表下拉框，具体的内容要通过option标签来实现 -->
<select name="pros" id="">
<option value="beijing">北京市</option>
<option value="henan">河南省</option>
<option value="zhejiang">浙江省</option>
</select>
<select name="citys" id="">
<option value="nanyang">南阳市</option>
<option value="shangqiu">商丘市</option>
<option value="zhengzhou">郑州市</option>
</select>
<hr>
<!-- 多行文本域的大小默认是可以自由扩展的，宽高的自由扩展会影响页面的排版
禁用方式(样式)：
1、指定最大宽高及最小宽高 style='max-width: 200px;min-width: 200px;max-height: 200px;min-height: 200px;'
2、禁止重置大小style="resize: none;"
-->
详细地址：<textarea style="resize: none;"></textarea><br>
<input type="submit" value="登录">
</form>
iframe标签
后台管理的前台门户通常都是以单页面为主实现的，此时需要进行页面内容的嵌套，iframe标签可以在一个页面中嵌套其他页面的内容
<!-- 引入其他页面
frameborder：控制是否显示边框线 1显示 0不显示
scrolling：控制是否显示滚动条 yes显示 no不显示 auto根据页面大小浏览器自动控制
-->
<iframe src="a80fdda4ec71f375e55a24dc74abc13d" width="100%" height="800px" frameborder="0" scrolling="auto"></iframe>
<a href="2bc3abaf164a37304799f0ea6062697b" target="myiframe">教职员工</a>
<a href="c5cfdeb000777d070fbb9b82127f8741" target="myiframe">在校学生</a>
<a href="8c2ab0afb920d54e263cb5275f34a90f" target="myiframe">毕业校友</a>
<iframe frameborder="0" scrolling="auto" src="2bc3abaf164a37304799f0ea6062697b" name="myiframe" width="1000px" height="600px"></iframe>
标签划分及嵌套规则
标签划分
从行业的官方规范来讲，对标签的划分分两种
块元素：单独占整行（自带换行符），可以设置宽高属性的
行元素：可以在同一行显示，设置宽高不生效
目前行业中的程序员喜欢的划分，分三种
块元素：单独占整行（自带换行符），可以设置宽高属性的
行元素：可以在同一行显示，设置宽高不生效
行内块元素：既可以设置宽高，也可以在同一行显示（img-本身自带了宽高属性，display属性控制）
嵌套规则
a.行元素之间可以互相嵌套，行元素中不能嵌套块元素（html中是可以的，但是理论上来讲是不允许的）
b.块元素中可以嵌套任意的行元素，块元素之间也可以互相嵌套，但是有两种标签需要注意
p标签中是不允许嵌套其他任意的块元素
h系列的标签是不能互相嵌套（因为每个h标签都有默认的字体大小）
<span>价格：<strong style="color: red;">998</strong>元</span>
<hr>
<p>
<a href="http://news.baidu.com">百度新闻</a>
<a href="http://www.baidu.com">百度首页</a>
</p>
<hr>
<div>
<p>在div中嵌套任意的块元素是很常见的</p>
</div>
<p>
<div>在p标签中嵌套任意的块元素都会发生页面结构的变化</div>
</p>
<h3>
<h2>在一个小的字体中嵌套了一个大的字体</h2>
</h3>
div和span
<!-- span -->
<!-- 有内容就显示，没有内容就不显示 -->
<span></span>
<span>我是span</span>
<span>我是小面包</span>
<form action="" method="">
用户名：<input type="text" name="" /><span id="uid"></span><br>
密码：<input type="text" name="" /><span id="pid"></span><br>
<input type="submit"/>
</form>
<hr>
<!-- div
有内容就显示，没有内容就不显示
-->
<div>
<a href="http://news.baidu.com" target="_blank" class="mnav c-font-normal c-color-t">新闻</a>
<a href="https://www.hao123.com" target="_blank" class="mnav c-font-normal c-color-t">hao123</a>
</div>
其他标签
加入背景音乐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<embed src="mp3/只要平凡.mp3" hidden="true" ></embed>
</head>
<body>
<marquee direction="right">只要一燕.mp3</marquee>
</body>
<!-- 加入mp3 -->
<audio controls="controls">
<source src="mp3/只要平凡.mp3" type="audio/mp3"></source>
</audio>
加入视频
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video width="800px" height="300px" controls="controls">
<source src="./mp4/甘南游.MP4" type="audio/mp4"></source>
</video>
</body>
</html>
特殊字符
<!--
空格：
大于号： >
小于号： <
版本符： ©
人民币： ¥
-->
本章小结
1.网页基本结构的组成需要了解，方便后期JavaScript中对DOM结构进行操作
2.图片标签的相对路径使用及超链接的跳转使用要熟练
3.表单的action及method属性要掌握，input标签注意其name属性一定要存在
4.标签的嵌套规则没有明确的要求，只是根据其特征从理论上进行划分从而规范开发
本章作业
结合表单及表格实现一个登录页、注册页