前端网页页面制作主要是写html，接下来我从他的两个标题head和body标签进行学习
大致的样式：
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
一、head标签
head相关标签主要有：meta、 title、link、style、script
1.meta标签 - 提供网页相关配置
<meta charset="utf-8">
2.title标签 - 设置网页标题
<title>京东-欢迎登录</title>
3.link标签 - 导入外部文件：
1）rel属性： 确定外部文件的作用(stylesheet - 外部样式表; icon - 网页图标)
2) type属性： 文件类型 - “类型/文件后缀名” (image/png、image/jpeg、text/css)
3) href属性： 需要导入的具体的文件的路径
<link rel="icon" type="image/png" href="./img/hua.png">
二、body标签
1）、文本标签
1、标题标签: h1 ~ h6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2、段落标签: p
<p>对此，有网友表示</p>
<p>“明明可以直接抢的，还善良的赔了一千块钱”。</p>
3、行内标签：span
可以让多个文字标签的内容，显示在一行中
<span>2022-09-06 14:06</span>
<span>|</span>
<span>新浪财经官方账号</span>
4、文字特殊效果标签：b、strong、i、em
b、strong：行内标签，并且让文字加粗
i、em：行内标签，并且让文字倾斜
<b>新浪财经官方账号</b>
<strong>新浪财经官方账号</strong>
<i>新浪财经官方账号</i>
<em>新浪财经官方账号</em>
5、换行与空白
在html代码中直接按回车键是无法实现换行的功能的；按多个空格最后只会有一个空格有效。
换行
<br>
空一个像素
空一格空格
 
2）、图片和超链接
1、图片标签：img
1)src属性：图片地址（本地图片地址、网络图片地址）
2)alt属性：图片加载失败的时候的提示信息
3)title属性：图片标题（标题是在鼠标悬停在图片上的时候才会显示出来）
a、本地图片
<img src="img/hua.png" alt="为加载成功" title="花"><br>
b、网络图片
<img src="https://img2.baidu.com/it/u=400325797,2350881277&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=704" alt="图片加载失败" title="花">
2、超链接
1）标签内容： 超链接可点击可以看到的部分
2)href属性： 跳转目标地址
3)targe属性：转换方式（默认是_self,直接在当前窗口中打开新的页面；_blank，会在新的窗口中打开新的页面）
a、文字超链接
<a href="https://www.baidu.com" target="_blank">百度首页</a>
点文字就可以转网页了
b、图片超链接
<a href="https://www.baidu.com">
<img src="img/hua.png" alt="">
</a>
点击图片就可以转网页了
c、打开本地网页
href的值为本地的html文件地址
<a href="03文本相关标签.html">文本相关标签</a>
d、本页面跳转
href的值为目标标签对应的id选择器
<h1 id="h1">我是标题1</h1>
<a href="#h2">标题2</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="h2">我是标题2</h2>
<a href="#h1">标题1</a>
3）、列表标签
1.无序列表: ul、li
ul 标签 - 代表整个列表(容器)
li 标签 - 列表中的元素
<ul>
<li>Python数据分析</li>
<li>Java服务器开发</li>
<li>前端开发</li>
<li>UI\UE设计</li>
<li>物联网</li>
</ul>
2.有序列表：ol、li
ol标签 - 代表整个列表(容器)
li标签 - 列表中的元素
<ol>
<li>将牛肉煮成7分熟(放料酒、盐、姜、花椒)</li>
<li>切片</li>
<li>油炸</li>
<li>放调料</li>
</ol>
4）、input标签：输入
1、 input标签
input标签的功能和type属性值有关：
a、text(默认) - 普通文本输入框
b、password - 密码输入框
value - 表示输入框内容(初始占位字体)
placeholder - 输入框占位符(空白的时候所写占位字体)
maxlength - 最大输入长度
<input type="text" value="小明" placeholder="请输入用户名" maxlength="5" id="user">
2、radio - 单选按钮
name - 对内容进行分类。（多个单选按钮的name属性值一致的时候才可能做到多个选项中只能选一个）
checked - 将checked属性值设置为"checked"，让对应的按钮处于选中状态(只要添加checked属性)(即一开始选择的按钮)
<input type="radio" name="married" id="m1"><label for="m1">已婚</label>
<input type="radio" name="married" id="m2"><label for="m2">未婚</label>
<input type="radio" name="married" checked="checked" id="m3"><label for="m3">保密</label>
3、 checkbox - 复选按钮
name - 多个相同事物对应选项需要设置成相同的name属性
checked - 将checked属性值设置为"checked"，让对应的按钮处于选中状态(只要添加checked属性)(即一开始选择的按钮)
<input type="checkbox" name="interest" checked id="i1"><label for="i1">跑步</label>
<input type="checkbox" name="interest" checked id="i2"><label for="i2">篮球</label>
<input type="checkbox" name="interest" id="i3"><label for="i3">看电影</label>
<input type="checkbox" name="interest" id="i4"><label for="i4">游泳</label>
4、label标签
label标签和通过for属性来和id属性值为指定值的input标签进行绑定，
绑定成功，点击label标签后，点击效果会直接作用于与它关键的input标签上
<label for="user">用户名:</label>
<input type="text" value="小明" placeholder="请输入用户名" maxlength="5" id="user">
例如这个代码中作用为点击用户名也能在框中输入.
5、button - 普通按钮(只能实现文字按钮的功能)
value - 按钮上的文字内容
<input type="button" value="确定">
<input type="button" value="取消">
<button>确定</button>
<button style="background-color: rgba(0, 0, 0, 0);border: none;" >
<img src="./img/相机.png" alt="">
</button>
<button>
<img src="./img/相机.png" alt="">
<p style="padding: 0; margin: 0;">相机</p>
</button>
<button onclick="function()">确定</button>
点击确定，启用function功能
6、 reset - 重置
重置按钮可以将指定范围内的所有的标签(表单相关标签)的状态还原到初始状态
指定范围内 - 和重置按钮在同一个form标签中所有的标签
<form action="">
<input type="text">
<input type="checkbox">
<input type="reset" value="还原">
</form>
5）、多文本域和下拉菜单
1、 textarea - 多行文本域（多行输入框）
1）标签内容 - 输入框内容
2placeholder属性 - 输入提示信息(初始值)
3)maxlength - 最多输入的字符个数
4)rows - 可见的行数
5)cols - 每一行的列数(不精确，但是它的值可以影响输入框默认长度)
<textarea placeholder="请输入你的建议..." maxlength="200" rows="3" cols="40">你好！</textarea>
2. 下拉菜单(下拉列表): select、option
select标签 - 代表整个下拉列表(容器)
option标签 - 列表中的选项
<select>
<option value="四川省">四川省</option>
<option value="广东省">广东省</option>
<option value="广西省">广西省</option>
<option value="辽宁省">辽宁省</option>
</select>
3、下拉菜单中选项分组: optgroup
<select id="c1">
<optgroup label="四川省">
<option value="成都">成都市</option>
<option value="绵阳">绵阳市</option>
<option value="德阳">德阳市</option>
<option value="乐山">乐山市</option>
<option value="达州">达州市</option>
</optgroup>
<optgroup label="辽宁省">
<option value="沈阳市">沈阳市</option>
<option value="铁岭市">铁岭市</option>
<option value="大连市">大连市</option>
<option value="盘锦市">盘锦市</option>
</optgroup>
</select>
6）、表格标签
1、 表格相关标签：table、tr、td
1)table标签 - 表示表格整体
2)tr标签 - 表示一行
3)td标签 - 单元格
2.table标签相关属性
1)border属性 - 表格外边框宽度
2)cellspacing属性 - 设置单元格和单元格之间的间隙
3)width属性 - 设置整个表格的宽度
4)height属性 - 设置整个表格的高度
5)bgcolor属性 - 设置整个表格的背景颜色(颜色值直接给颜色对应的英文单词)
6)align属性 - 设置整个表格在其父标签中对齐方式（left、right、center）
3.tr标签相关属性
1)height属性 - 设置指定行的高度
2)bgcolor属性 - 设置指定行中所有单元格的背景颜色
3)align属性 - 设置指定行中所有单元格内容的对齐方式
4.td标签相关属性
1)width属性 - 设置指定单元格所在的列的宽度
2)bgcolor属性 - 设置指定单元格的背景颜色
3)align属性 - 设置指定单元格内容的对齐方式
<table border="1" cellspacing="0" width="800" height="200" bgcolor="LightSkyBlue" align="center">
<tr height="40" bgcolor="LightPink" align="center">
<td width="150">张三</td>
<td bgcolor="GreenYellow">110</td>
<td align="right">小明</td>
</tr>
5、单元格合并
单元格合并:单元格合并操作主要是设置td的rowspan和colspan两个属性值
rowspan - 行合并
colspan - 列合并
下面以这一个表格的建立表现单元格合并.
在那之前要先认识表格的定位，即认识哪一格是第一行，第二行等，其实主要看他上面那条横线是第几条横线
以上图为例，分析结果为下图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" width="800" height="400">
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
运行结果如下：
