文章目录
【一】介绍
HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的，像京东，12306等网站有很多网页
HTML(HyperText Markup Language)：超文本标记语言：
**超文本：**超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
如上图看到的页面，我们除了能看到一些文字，同时也有大量的图片展示；有些网页也有视频，音频等。这种展示效果
超越了文本展示的限制。
**标记语言：**由标签构成的语言
之前学习的XML就是标记语言，由一个一个的标签组成，HTML 也是由标签组成 。我们在浏览器页面右键可以查看页面
的源代码
这些标签不像XML那样可以自定义，HTML中的标签都是预定义好的，运行在浏览器上并由浏览器解析，然后展示出对应的效果。例如我们想在浏览器上展示出图片就需要使用预定义的 img 标签；想展示可以点击的链接的效果就可以使用预定义的a 标签等。
HTML 预定义了很多标签，由于我们是Java工程师、是做后端开发，所以不会每个都学习，页面开发是有专门的前端工程来开发。那为什么我们还要学习呢？在公司中或多或少大家也会涉及到前端开发。
简单的给大家聊一下开发流程：以后我们是通过Java程序从数据库中查询出来数据，然后交给页面进行展示，这样用户就能通过在浏览器通过页面看到数据
W3C标准：
W3C是万维网联盟，这个组成是用来定义标准的。他们规定了一个网页是由三部分组成，分别是：
结构：对应的是 HTML 语言
表现：对应的是 CSS 语言
行为：对应的是 JavaScript 语言
HTML定义页面的整体结构；CSS是用来美化页面，让页面看起来更加美观；JavaScript可以使网页动起来，比如轮播图也就是多张图片自动的进行切换等效果
【二】快速入门
（1）新建文本文件，后缀名改为 .html
页面文件的后缀名是 .html，所以需要该后缀名
（2）编写 HTML 结构标签
HTML 是由一个一个的标签组成的，但是它也用于表示结构的标签
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
（3）html标签是根标签，下面有 head 标签和 body 标签这两个子标签。而 head 标签的 title 子标签是用来定义页面标题名称的，它定义的内容会展示在浏览器的标题位置，如下图红框标记
body 标签的内容会被展示在内容区中，如下图绿框标记
（4）font 标签就可以使用，该标签有一个 color 属性可以设置字体颜色，如： 就是将文字设置成了红颜色。那么我们只需要将需要变成红色的文字放在标签体部分就可以了，如下：
<html>
<head>
<title>html 快速入门</title>
</head>
<body>
<font color="red">乾坤未定，你我皆是黑马~</font>
</body>
</html>
总结：
（1）HTML 文件以.htm或.html为扩展名
（2）HTML 结构标签:
（3）HTML 标签不区分大小写
如上案例中的 font 写成 Font 也是一样可以展示出对应的效果的。
（4）HTML 标签属性值 单双引皆可
如上案例中的color属性值使用双引号也是可以的。
（5）HTML 语法松散
比如 font 标签不加结束标签也是可以展示出效果的。但是建议同学们在写的时候还是不要这样做，严格按照要求去写。
【三】基础标签
【1】基础标签
【2】创建模块
在 Idea 中创建模块，而我们现在不需要写java代码，所以 src 目录就可以删除掉。在模块下创建一个html文件夹，该
我们今天的所以的页面文件所部放在该文件夹下。模块目录如下
【3】标题标签
标题标签中 h1最大，h6最小
<!---html 标识--->
<!DOCTYPE html>
<html lang="en">
<head>
<!---页面的字符集--->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1> 我是标题 h1 </h1>
<h2>我是标题 h2 </h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4 </h4>
<h5> 我是标题 h5</h5>
<h6>我是标题 h7</h6>
</body>
</html>
【4】 hr标签
hr 标签在浏览器中呈现出 横线 的效果。
【5】字体标签
（1）font：字体标签
（2）face 属性：用来设置字体。如 “楷体”、"宋体"等
（3）color 属性：设置文字颜色。颜色有三种表示方式
(1)英文单词：red,pink,blue…
这种方式表示的颜色特别有限，所以一般不用。
(2)rgb(值1,值2,值3)：值的取值范围：0~255
此种方式也就是三原色（红绿蓝）设置方式。 例如： rgb(255,0,0)。
这种书写起来比较麻烦，一般不用。
(3)#值1值2值3：值的范围：00~FF
这种方式是rgb方式的简化写法，以后基本都用此方式。
值1表示红色的范围，值2表示绿色的范围，值3表示蓝色范围。例如： #ff0000
（4）size 属性：设置文字大小
注意：
font 标签已经不建议使用了，以后如果要改变文字字体，大小，颜色可以使用 CSS 进行设置。
【6】换行标签
标签
【7】段落标签
【8】 加粗、斜体、下划线标签 ：加粗标签 ：斜体标签 ：下划线标签，在文字的下方有一条横线 【9】 居中标签
【四】 图片、音频、视频标签
【】img：定义图片
src：规定显示图像的 URL（统一资源定位符）
height：定义图像的高度
width：定义图像的宽度
【】audio：定义音频。支持的音频格式：MP3、WAV、OGG
src：规定音频的 URL
controls：显示播放控件
【】video：定义视频。支持的音频格式：MP4, WebM、OGG
src：规定视频的 URL
controls：显示播放控件
<img src="a.jpg" width="200" height="400">
<audio src="b.mp3" controls></audio>
<video src="c.mp4" controls width="500" height="300"></video>
尺寸单位：
height属性和width属性有两种设置方式：
（1）像素：单位是px
（2）百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）
资源路径：
图片，音频，视频标签都有src属性，而src是用来指定对应的图片，音频，视频文件的路径。此处的图片，音频，视频就称
为资源。资源路径有如下两种设置方式：
绝对路径：完整路径
这里的绝对路径是网络中的绝对路径。 格式为： 协议://ip地址:端口号/资源名称
相对路径：相对位置关系
找页面和其他资源的相对路径
./ 表示当前路径
…/ 表示上一级路径
…/…/ 表示上两级路径
【五】超链接标签
当我们点击这些超链接时会跳转到其他的页面或者资源。而超链接使用的是 a 标签。
定义超链接，用于连接到另一个资源
a 标签属性：
（1）href：指定访问资源的URL
（2）target：指定打开资源的方式
_self：默认值，在当前页面打开
_blank：在空白页面打开
代码：
<a href="https://www.baidu.com/" target="_blank">点我有惊喜噢！</a>
【六】列表标签
HTML 中列表分为
（1）有序列表
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
页面效果中是有标号对每一项进行标记的。
有序列表中的 type 属性用来指定标记的标号的类型（数字、字母、罗马数字等）
（2）无序列表
页面效果中没有标号对每一项进行标记，而是使用 点 进行标记。
无序列表中的 type 属性用来指定标记的形状
代码：
<ol type="A">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
【七】表格标签
【1】table ：定义表格
（1）border：规定表格边框的宽度
（2）width ：规定表格的宽度
（3）cellspacing：规定单元格之间的空白
【2】tr ：定义行
align：定义表格行的内容对齐方式
【3】td ：定义单元格
（1）rowspan:规定单元格可横跨的行数
（2）colspan:规定单元格可横跨的列数
【4】th：定义表头单元格
代码：
<table border="1" cellspacing="0"width="500">
<tr align="center">
<th>序号</th>
<th>品牌log</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>010</td>
<td><img src="../img/三只松鼠.png" width="60" height="50"></td>
<td>三只松鼠</td>
<td>三只松鼠</td>
</tr>
<tr align="center">
<td>009</td>
<td><img src="../img/优衣库.png" width="60" height="50"></td>
<td>优衣库</td>
<td>优衣库</td>
</tr>
<tr align="center">
<td>008</td>
<td><img src="../img/小米.png" width="60" height="50"></td>
<td>小米</td>
<td>小米科技有限公司</td>
</tr>
</table>
<br>
<hr>
<br>
<table border="1" cellspacing="0"width="500">
<tr align="center">
<th colspan="2">品牌log</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>010</td>
<td><img src="../img/三只松鼠.png" width="60" height="50"></td>
<td>三只松鼠</td>
<td>三只松鼠</td>
</tr>
<tr align="center">
<td rowspan="2">009</td>
<td><img src="../img/优衣库.png" width="60" height="50"></td>
<td>优衣库</td>
<td>优衣库</td>
</tr>
<tr align="center">
<td><img src="../img/小米.png" width="60" height="50"></td>
<td>小米</td>
<td>小米科技有限公司</td>
</tr>
</table>
结果：
【八】布局标签
<div> 定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页
<span> 用于组合行内元素
这两个标签，一般都是和css结合到一块使用来实现页面的布局。
div 标签 在浏览器上会有换行的效果，而 span 标签在浏览器上没有换行效果。
代码：
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
结果：
【九】表单标签
表单：在网页中主要负责数据采集功能，使用标签定义表单
表单项(元素)：不同类型的 input 元素、下拉列表、文本域等
<form> 定义表单
<input> 定义表单项，通过type属性控制输入形式
<label> 为表单项定义标注
<select> 定义下拉列表
<option> 定义下拉列表的列表项
<textarea> 定义文本域
form标签属性
【1】action：规定当提交表单时向何处发送表单数据，该属性值就是URL
以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 # ，表示提交到当前页面来看效果。
【2】method ：规定用于发送表单数据的方式
method取值有如下两种：
（1）get：默认值。如果不设置method属性则默认就是该值
请求参数会拼接在URL后边
url的长度有限制 4KB
（2）post：
浏览器会将数据放到http请求消息体中
请求参数无限制的
代码：
<body>
<!----
from:
action:指定表单数据提交的URL
*表单项数据要想提交，则必须指定其name属性
method:指定表单提交的方式
1.get:默认值
*请求参数会拼接在URL后边
*url的长度有限制 4KB
2.post:
*请求参数会在http请求协议的请求体中
*请求参数无限制的
----->
<from action="#"method="get">
<input type="text" name="username">
<input type="submit">
</from>
</body>
结果：
【十】表单项标签
表单项标签有很多，不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个：
【1】input：表单项，通过type属性控制输入形式
input 标签有个 type 属性。 type 属性的取值不同，展示的效果也不一样
【2】select：定义下拉列表， 定义列表项
【3】textarea：文本域
代码：
<from action="#" method="post">
<input type="hidden" name="id" value="123">
<label for="username">用户名:</label>
<input type="text" name="username" id="username"><br>
<label for="password">密码：</label>
<input type="password" name="password" id="password"><br>
性别：
<input type="radio" name="gender" value="1" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="0" id="female"><label for="female">女</label>
<br>
爱好：
<input type="checkbox" name="hobby" value="1">旅游
<input type="checkbox" name="hobby" value="2">电影
<input type="checkbox" name="hobby" value="3">游戏
<br>
头像：
<input type="file">
<br>
城市：
<select name="city">
<option>北京</option>
<option value="shanghai">上海</option>
<option>广州</option>
</select>
<br>
个人描述：
<textarea cols="20" rows="5" name="desc"></textarea>
<br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
<input type="button" value="一个按钮">
</from>
结果：
【十一】CSS简介
CSS 是一门语言，用于控制网页表现。
CSS也有一个专业的名字：Cascading Style Sheet（层叠样式表）。
style 标签中定义的就是css代码。该代码描述了将 div 标签的内容的字体颜色设置为 红色。
【十二】CSS导入方式
css 导入方式其实就是 css 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式：
（1）内联样式：在标签内部使用style属性，属性值是css属性键值对
<div style="color: red">Hello CSS~</div>
给方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复
用性太差。
（2）内部样式：定义
<style type="text/css">
div{
color:red;
}
<style>
（3）外部样式：定义link标签，引用外部的css文件
<link rel="stylesheet" href="demo.css">
代码：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
color: red;
}
</style>
<link rel="stylesheet" href="../css1/demo.css">
</head>
<body>
<div style="color: red">Hello CSS~</div>
<span>Hello Word~</span>
<p>Hello 网页~</p>
</body>
css代码：
p{
color: red;
}
结果：
【十三】css选择器&属性
概念： 选择器是选取需设置样式的元素(标签)
div{
color:red;
}
分类：
1.元素选择器
元素名称{color:red;} div{color:red;}
2.id选择器
#id性值{color:red;} #name{color:red;} <div id="name">hello css2</div>
3.类选择器
.class{color:red} .cls{color:red;} <div class="cls">hello css3<div>
代码：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: red;
}
#name{
color: blue;
}
.class{
color:pink;
}
</style>
</head>
<body>
<div>div1</div>
<div id="name">div2</div>
<div class="cls">div3</div>
<span class="cls">span</span>
</body>
结果：
参考：黑马程序员、3Wschool
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
