Day01-HTML
一、课程体系介绍
二、HTML语言认知
1、什么是HTML
HTML，是英文HyperText Markup Language的缩写。中文常译为超文本标记语言。
超文本：除了文本以外，还可以显示图片、超链接、音频、视频等。
标记：页面中的元素都是通过标签引入的
HTML、CSS、JavaScript称为前端三剑客。
- HTML：完成页面元素的标记
- CSS：页面美化
- JavaScript：页面交互
2、第一个HTML文件
1、HTML的文件后缀
在dos时代，文件的后缀只能是三位（8+3），所以在早期html的后缀是
.htm。随着Windows的推出，已经可以支持长达255位的文件名了。不过Windows依然兼容dos的后缀名。但是目前使用html我们通常都只用.html作为后缀。
2、第一个HTML
2.1、新建
新建一个名为index.txt的文本文件。修改其后缀为.html
2.2、编辑
编辑此html中的代码如下
<html>
<head>
<title>这里是标题</title>
</head>
<body>
这里是内容
</body>
</html>
2.3、查看效果
使用浏览器打开此html文件，查看效果：
3、HTML的特点
- HTML文件的后缀名为
.html或.htm（推荐使用.html） - HTML的文档结构分为两部分(head和body)
- HTML中的标签都是预先定义好的，程序可以直接使用
- HTML中的标签不区分大小写（推荐使用小写）
- HTML标签大都是双标签，也有个别单标记标签
- HTML是一个树形结构，跟标签为html
- HTML标签一定要正确嵌套
4、HTML编辑工具
4.1、常见的开发工具
常见的Java开发工具
- editplus
- eclipse
- idea
常见的HTML开发工具
- editplus
- sublime
- VS Code
- HBuilder
4.2、HBuilder的使用
HBuilder是一个绿色版的集成开发环境，解压即可使用。
4.2.1、创建项目
4.2.2、填写项目名称和存储路径
4.2.3、在项目中创建HTML文件
4.2.4、标签解析
上一步中，使用HBuilder创建的HTML文件中，有两个我们没有使用过的标签：
1、<!DOCTYPE html>
文档声明，不同版本的文档声明都不太一样，上述的声明是HTML5的文档声明
2、<meta charset="utf8">
定义网页的基本信息，例如编码格式、SEO搜索关键字等
三、HTML常见标签
- 标题标签h1-h6
- 分割线标签hr
- 字体标签font
- 加粗标签b strong
- 斜体标签i em
- 段落标签p
- 换行标签br
- 实体标签
- 注释
1、标题标签 h1~h6
特点：
- 语义不同，一个页面中只能有一个一级标签，可以有多个其他标题
- 级别越大，字号越大
案例代码：
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
效果：
说明：h标签内不仅可以是文字，还可以是品牌logo等图片信息
2、分割线标签 hr
特点：单标签，此标签会绘制一条线段
案例代码：
<hr width="80%" size="50px" color="red">
效果：
属性说明：
- width：分割线的宽度 可以使用百分比
- size：分割线的高度
- color：分割线的颜色
3、字体标签 font
特点：可以控制标签内字体的颜色和大小
案例：
<font size="7px" color="red">中公教育</font>
效果：
属性说明：
- size：字体大小（像素）
- color：字体颜色（具体颜色或十六进制的RGB）
4、字体加粗 b strong
特点：将标签内的字体加粗
案例代码：
<font>海内存<b>知己</b>，天涯若<strong>比邻</strong></font>
效果：
5、斜体 i em
特点：将标签内的字体倾斜
案例：
<font>会当<em>凌绝顶</em>，一览<b><i>众山小</i></b></font>
效果：
效果：
特点：
1、可以和其他标签，例如b进行嵌套
2、从效果上来说em和i没有任何区别，都是倾斜字体
3、如果页面要进行SEO，那么建议使用em标签，因为在SEO中可以标识文本强调
6、段落 p
特点：标签内的内容会独占一行
案例：
<p>
<font size="20px" color="#000000">千山鸟飞绝，</font>
<font size="20px" color="#000000">万径人踪灭。</font>
</p>
<p>
<font size="20px" color="#000000">孤舟蓑笠翁，</font>
<font size="20px" color="#000000">独钓寒江雪。</font>
</p>
效果：
7、换行 br
特点：单标签，出现此标签的位置会发生换行
案例代码：
<font size="20px" color="#000000">千山鸟飞绝，</font>
<font size="20px" color="#000000">万径人踪灭。</font>
<br>
<font size="20px" color="#000000">孤舟蓑笠翁，</font>
<font size="20px" color="#000000">独钓寒江雪。</font>
效果：
8、实体标签
HTML代码中，有些符号是有特殊含义的，例如< > ，那么如果想使用普通的< >就必须使用实体标签代替。
常见的实体标签：
- <：小于号
- >：大于号
- ©：版权符号
-  ：空格
案例代码：
我们在©优就业学习<h1>标题</h1>标签
效果：
9、注释
和Java一样，HTML中同样可以提供注释，注入内容不参与代码解析。
语法：
<!-- 注释内容 -->
HBuilder中注释快捷键：
ctrl + /
四、图片标签 img
前面我们说过，HTML是超文本标记语义，HTML中可以通过img标签展示图片内容。
语法：
<img src="" alt="" title="" width="" >
案例代码：
<img src="a1rt.jpg" width="300px" alt="404 NOT FOUND" title="我是旺仔" >
效果：
属性说明：
- src：一个本地图片或者网络图片的url
- width：图片的宽度，指定宽度后，图片的高度会自动等比计算
- alt：当图片找不到时，显示的内容
- title：鼠标悬停时显示的内容
建议：不要在src属性中使用绝对路径，开发过程中没有什么问题，但是项目上线时。往往是部署在linux服务器上的，使用绝对路径会导致图片的丢失。
五、列表标签
HTML中还支持定义列表标签，列表分为有序列表和无序列表
- 有序列表ol
- 无序列表ul
- 列表选项li
5.1、无序列表 ul
案例代码：
<p>我爱吃的水果</p>
<!-- 无序列表案例 -->
<ul type="circle">
<li>香蕉</li>
<li>苹果</li>
<li>菠萝</li>
</ul>
效果：
属性说明：
- type：无序列表的项目符号
- disc：实心圆（默认）
- circle：空心圆
- square：实心正方形
5.2、有序列表
代码：
<p>以下哪个选项不是Java的基本类型？</p>
<ol type="A">
<li>int</li>
<li>long</li>
<li>boolean</li>
<li>String</li>
</ol>
效果：
属性说明：
- type：有序列表的项目符号
- A：A B C D...
- I：I II ..
- 1：1 2 3 4...
5.3、总结
1、一般在开发过程中，更多的使用ul，因为项目符号我们可以通过其他标签嵌套的形式自定义。
2、快速创建列表：ul>li*数量
六、超链接标签
超链接是实现页面之间跳转的方式。
语法：
<a href="链接" target="页面打开方式">链接说明</a>
案例代码：
<a href="top.html" target="_blank">打开top页面</a>
<a href="http://blog.vantee.cn" target="_self">打开我的博客</a>
<a href="http://blog.vantee.cn"><img src="art.jpg" width="300px"></a>
属性解析：
- href：跳转的链接地址，可以是本地页面、本地图片、也可以是网络上的URL
- target：打开方式
- _self：在当前页面打开
- _blank：打开一个新窗口
注意：
1、超链接不止可以是实现项目内页面的跳转，也可以是站外资源。
2、不只是文本可以设置超链接，图片也可以。
七、表格标签
1、什么是表格标签
在网页开发中，我们经常会将数据进行表格展示，此时就要用到表格标签。在早期还会使用表格进行页面布局。
2、表格标签中的基本标签
表格的必备标签：
- table：定义表格
- tr：定义行
- td：定义单元格
- th：特殊的td，一般作为表头来使用，其内的文本会加粗。
3、案例演示
案例：利用表格标签实现上述图片中的表格
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table align="center" width="500px" height="8px" border="1px" cellspacing="0" cellpadding="5px">
<tr bgcolor="#4472C4">
<th><font size="3px" color="white">学号</font></th>
<th><font size="3px" color="white">姓名</font></th>
<th><font size="3px" color="white">年龄</font></th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr align="center">
<td>2</td>
<td>李四</td>
<td>20</td>
</tr>
<tr align="center">
<td>3</td>
<td>王五</td>
<td>19</td>
</tr>
<tr align="center">
<td>4</td>
<td>赵六</td>
<td>21</td>
</tr>
</table>
</body>
</html>
效果：
4、属性介绍
- table
- aligin：表格在页面中的对齐方式
- width：表格的宽度
- height：表格的高度
- border：表格边框的宽度
- cellspacing：单元格间距
- cellpadding：单元格内边距
- tr
- aligin：单元行中元素的对齐方式
- bgcolor：单元行的背景色
5、单元格合并
不是所有表格都是规整的，我们在开发中经常会遇到一些异性表格，这就需要进行单元格合并。
实现下述图片效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table align="center" width="500px" height="300px" border="1" cellspacing="0" cellpadding="1">
<tr align="center">
<th>作者</th>
<th>书名</th>
<th>价格</th>
</tr>
<tr align="center">
<td>刘慈欣</td>
<td>三体</td>
<td>56.8</td>
</tr>
<tr align="center">
<td>路遥</td>
<td>平凡的世界</td>
<td>32.8</td>
</tr>
<tr align="center">
<td bgcolor="yellow" rowspan="2">鲁迅</td>
<td>呐喊</td>
<td>19.9</td>
</tr>
<tr align="center">
<td>彷徨</td>
<td>18.8</td>
</tr>
<tr align="center">
<td bgcolor="yellow" colspan="2">总计</td>
<td>128.3</td>
</tr>
</table>
</body>
</html>
属性说明：
-
rowspan：跨行
-
colspan：跨列
这两个属性可以在th或td标签中使用，实现合并单元格的效果
八、表单标签
1、什么是表单标签
表单标签的作用：在页面中接受用户输入，当表单提交时，将用户输入的数据进行打包，传递给后台服务器，从而达到用户和服务器交互的目的。
2、表单容器 form
form标签是表单的容器，所有表单容器都必须在form中才能正确的提交。
语法：
<form action="url" method="提交类型">
</form>
属性：
- action：提交到服务器的地址
- method：提交形式，分为post和get两种（稍后会详细说明二者区别）
3、输入域 input
input输入域是表单标签，其必须在表单容器form中才能发挥其作用。
语法：
<input name="" value="" />
属性解析：
- id：属性的唯一标识，一般配合JavaScript使用
- name：元素内容提交到服务器时的名称，不唯一
- value：元素的具体值
- type：标签类型，默认为text文本框
- text：文本框
- password：密码框
- radio：单选按钮
- email：邮箱
- checkbox：复选框
- date：日期选择框
- file：文本域
- submit：提交按钮
- reset：重置按钮
- button：普通按钮
- maxlength：当作为文本框时，允许输入的最大长度
- readonly：是否允许被编辑，当设置为true时，value值仍然可以传递到服务器
- disable：设置元素是否被禁用，当禁用时，value的值不会被发送到服务器
- checked：当作为单选按钮时，默认的选中状态
案例：
<!--表单容器form-->
<form action="index.html" method="get">
<!--文本框-->
<p>用户名：<input id="uname" name="uname" type="text" value="abc" size="20" maxlength="4" readonly="readonly"/></p>
<!--密码框-->
<p>密码：<input name="pwd" type="password" value="000"/></p>
<!--单选按钮中name属性的值必须相同，这样才能互斥，传递的值是通过value属性-->
<p>性别：
<input name="sex" type="radio" value="男" checked="checked"/>男
<input name="sex" type="radio" value="女" />女
</p>
<!--复选框：可以多选-->
<p>爱好：
<input name="hobby" type="checkbox" value="唱歌"/>唱歌
<input name="hobby" type="checkbox" value="编程"/>编程
<input name="hobby" type="checkbox" value="爬山"/>爬上
<input name="hobby" type="checkbox" value="打篮球"/>打篮球
</p>
<!--邮箱类型email-->
<p>
邮箱：<input name="email" type="email" />
</p>
<!--文件域-->
<p>照片：<input name="pic" type="file"/></p>
<!--日期类型-->
<p>出生日期：<input name="birthday" type="date"/></p>
<!--隐藏域：不可见，一般用来实现前后台数据的传递-->
<p><input name="hid" type="hidden"/></p>
<!--提交按钮-->
<p>
<input name="sub" type="submit" value="提交"/>
<input name="ret" type="reset" value="重置" />
<input name="btn" type="button" value="确定" />
</p>
</form>
效果：
4、下拉框 select
下拉框是提供一些供用户选择，用户可以直接从列表中选择的标签
语法：
<select name="">
<option value="值">提示内容</option>
<option value="值">提示内容</option>
</select>
案例：
<p>学历：
<select name="degree">
<option value="" selected="true">===请选择===</option>
<option value="1">专科</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="5">博士</option>
</select>
</p>
效果：
属性说明：
select：
- name：作为提交到服务器时的name值
option：
-
option中一般不提供name值，它直接使用select的name值，
-
value：其value值作为select提交到服务器时的实际值
-
selected：用于指定默认选中的项
5、多行文本域 textarea
多行文本域也可以作为文本框，其可以用来接收多行多列的值
语法：
<textarea name="" rows="" cols="">
文本域值
</textarea>
案例：
<p>
<b>个人简介：</b>
<textarea name="info" rows="5" cols="50">
默认的值
</textarea>
</p>
效果：
属性说明：
- name：用于指定提交到服务器的名称
- rows：可以填写内容的行数
- cols：支持填写内容的列数
- readonly：是否为只读，只读状态下的数据会被服务器提交
- disabled：是否为禁用状态，禁用状态下的数据不会提交到后台
6、使用表格布局表单元素
在早期，html的布局都是通过table来实现的，但是现在随着CSS技术的推广，很少使用table进行布局了，但是我们后台人员还是需要掌握这门“基础技术”
7、get请求和post请求区别
1、传递值的方式不同
-
get提交地址栏会发生变化，将传递给服务器的数据通过地址栏拼接传递。
-
post请求的数据通过数据包的形式传递，不会出现在地址栏
2、传递大小不同
-
get请求传递的数据有大小限制，一般情况下不能超过2kb
-
post请求的数据理论上没有限制
3、安全性
- get请求提交方式相对于post不安全
九、框架标签
1、框架标签的应用场景
2、框架集合页 实现方式
框架集合标签：frameset用来对页面的整体布局进行划分
语法：
<frameset rows="50%,*" cols="20%,80%" >
</frameset>
属性说明：
rows：框架中分为几行
cols：框架中分为几列
行和列都使用百分比作为单位，共计100%，可以使用多个参数，合并为100%即可，最后一个参数可以使用作为通配符，的具体值为100%减去前面的所有百分比。
框架子标签：frame
此标签用于指定具体的页面
属性：
- 指定此框架的name值，可以配合a标签的href使用
- src：指定引入的页面
- noresize：禁止改变窗口大小
案例需求：
案例代码：
<frameset rows="20%,80%">
<frame src="top.html" >
<frameset cols="20%,*">
<frame src="top.html" >
<frame src="top.html" >
</frameset>
</frameset>