前言：
使用VS Code进行一系列的实操，跟着学习，一起进步。这章大部分代码注释都在代码段里边，需要点开查阅。作者希望和大家一起探讨，不断吸取经验，感谢鼓励。之后还会有有关CSS、JavaScript、JQuery等的更新，欢迎关注收藏订阅。
学习内容：
1.HTML语言概述
2.基本HTML标签
3.表格设置
4.表单设置
一、 HTMl语言概述
<!DOCTYPE html>
<!-- 根标签，表示自己是一个HTML文档 -->
<html lang="en">
<head>
<!-- 头部信息编辑处 -->
<meta charset="UTF-8">
<!-- 当前文档的字符集是采用utf-8的字符，
也就是我们常说英文字符集;
uft-8 是Unicode的其中一个使用方式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 页面标题，网页的名字 -->
</head>
<body>
<!-- HTML主体标签，用于显示HTML文档所要显示的内容 -->
</body>
</html>二、 基本HTML标签
1.标题标签：h1-h6六个标签，有三种对齐方式，左对齐：left通常默认左对齐；右对齐：right；
居中：center。
<body>
<h3>默认左对齐</h3>
<h3 align="left">左对齐</h3>
<h3 align="right">右对齐</h3>
<h3 align="center">居中</h3>
</body>
2.
<p>标签：文本文档的基本形式输出，同样可以设置三种对齐方式，可以根据浏览器页面自动换行
<hr>水平线，将段落之间用水平线隔开。 <br>强制换行
<body>
<!-- 可以使用color设置文本颜色，font-size设置字体大小(px) -->
<p align="center" >这是第一个p标签居中样式</p>
<hr color="red" width="200px" size="20px">
<!-- 水平线分开上下段落,width设置宽度，size设置水平线高度 -->
<p>这是第二个p标签，<br>从此处换行</p>
</body>
3.<div></div>块标签，将一些文档放在一起。列表标签：有序列表ol和无序列表ul。
<body>
<div>这是一个块
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!-- 使用快捷ol>li{&}*3 -->
<!-- ol>li{列表前的文字(如上面列表)+&(占位，依次增加)}*3(一共的列表数目) -->
<ul>
<li type="disc">图片1,样式为实心圆</li>
<li type="circle">图片2，样式为空心圆</li>
<li type="square">图片3，样式为方块</li>
</ul>
<!-- 同样可以使用快捷ul>li{&}*3 -->
</div>
</body>
4.img图像
<img src="D:\Vs Code\Vs Code练习\img\5.jpg" alt="">
<!--绝对路径，文件在电脑上的具体位置 -->
<img src="./img/1.jpg" alt="">
<!-- ./img子级关系 用./查找，在同一文件下的不同位置-->
<img src="../img/2.jpg" alt="">
<!-- ../父级关系 可以往上层继续使用多次../ -->
<img src="https://pic3.zhimg.com/v2-c4a43d5ae17408c37680a0fc8db61c4b_r.jpg?source=1940ef5c" alt="">
<!-- 网络地址 网络上某些图片的url地址 -->5.超链接<a></a>。点击后跳转到相应的网站
<body>
<a href=""></a>
<!-- 超文本链接标签 用href描述链接的地址-->
<a href="https://www.jd.com">京东</a>
<!-- 可以是某网站的url地址 后跟文本信息，单击时跳转 -->
<a href="https://www.163.com">
<img src="../img/2.jpg" alt="" width="100px" title="网易">
<!-- 点击处也可以是一个图片、一段文字，一个符号等 -->
</a>
<!-- 通过点击图片跳转 -->
<a href="https://www.taobao.com">。。</a>
<!-- 通过点击一些符号跳转 -->
</body>
三、表格设置
创建表格使用<table>标签，表格既是一种可视化交流模式，又是一种组织整理数据的手段。人们在通讯交流、科学研究以及数据分析活动当中广泛采用着形形色色的表格。
<body>
<!-- 进行下边的实列操作可以介绍 -->
<p>合并单元格6和7:colspan</p>
<p>合并单元格15和20:rowspan</p>
<p>水平合并，保存左边，删除右边</p>
<p>垂直合并，保存上边，删除下边</p>
<!-- 快速创建表格的方法：
这里的列子是：table>tr*5>td*5，五行五列的
tr后边乘以所需的行数，td后边乘以所需的列数-->
<table border="1" width="400" height="400">
<!-- border设置的是表格边线的宽度(border=0表示无边框)，
width设置的是表格的宽度，height设置的是表格的高度 -->
<caption>这是五行五列的表格</caption>
<!-- caption：这里可以填写表格的名字 -->
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td colspan="2">单元格6单元格7</td>
<!-- colspan将列合并，水平方向上的单元格合并 -->
<td>单元格8</td>
<td>单元格9</td>
<td>单元格10</td>
</tr>
<tr>
<td>单元格11</td>
<td>单元格12</td>
<td rowspan="3">单元格13 18 23</td>
<!-- rowspan将行合并，垂直方向上的单元格合并 -->
<td>单元格14</td>
<td rowspan="2">单元格15单元格20</td>
</tr>
<tr>
<td colspan="2" rowspan="2">单元格16 17 21 22</td>
<!-- 同时合并水平和垂直方向上的单元格 -->
<td>单元格19</td>
</tr>
<tr>
<td>单元格24</td>
<td>单元格25</td>
</tr>
</table>
</body>
表头一般在第一行，可以将<td>标签换成<th>标签，<th>标签的作用是将其文本加粗居中
四、表单设置
表单在网页中主要负责数据采集功能，分为表单标签、表单域和表单按钮。
1.表单基本定义及文本框和密码框：
<body>
<form action="https://www.baidu.com" method="get">
<!-- action里边写的是服务器地址，代表提交后在哪里处理，
method是提交表单的方法 -->
<!-- 表单域 -->
用户名: <input type="text">
密 码: <input type="password">
<input type="submit" value="登录">
<!-- 提交按钮 input是标签名 type属性为submit
value值为按钮上的文字显示（如提交 默认为提交） -->
<input type="reset" value="重置按钮">
<!-- 重置按钮 type属性为reset value值默认为重置 -->
</form>
</body>
2.多行文本框
<textarea rows="显示的行数" cols="每行的字符数" name="元素名">
初始文本信息(可以不写) </textarea>
3.单选按钮与复选框
单选按钮type属性使用radio，复选框type属性使用checkbox。
<body>
<!-- 以列子说明 -->
<form action="https://www.baidu.com" method="get ">
男: <input type="radio" name="sex" value="man">
女: <input type="radio" name="sex" value="woman">
<!-- 单选文本按钮 name属性必须一致(因为这是在单选按钮组中)
value值为服务器获取的处理值 -->
<br>
<!-- 换行展示，效果更直观整齐 -->
选择喜欢的水果:
<br>
苹果:<input type="checkbox" name="1[]" value="apple">
香蕉:<input type="checkbox" name="1[]" value="banana">
梨子:<input type="checkbox" name="1[]" value="pear">
<!-- 复选框按钮，name属性可以不同，因为它是多选项 -->
<br>
<input type="submit">
<!-- 提交按钮 -->
</form>
</body>
4.表单元素分组与下拉列表和列表框
当表单里包含较多元素时，通过<fieldset>实现信息的分组，嵌套在<form>里面。
<body>
<form action="https://www.baidu.com">
<!-- 提交到百度处理 -->
<fieldset align="center">
<!-- legend设置分组的标题 设置在显示中间 -->
<legend>这是第一个分组表单 </legend>
<!-- 本表单的文本设置，对控件的定义等 -->
<p>你好</p>
请输入信息： <input type="text">
提交：<input type="submit">
重置：<input type="reset">
</fieldset>
<fieldset align="center">
<!-- 显示在中间 -->
<legend>这是第二个分组表单</legend>
<!-- 下拉列表 必须点开下拉才能显示全部信息-->
<select name="1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<!-- 使用快捷select>option*3(所需的列表项数量)
创建三个下拉列表选项 填入基本信息 -->
<input type="submit">
</fieldset>
<fieldset align="center">
<!-- 显示在中间 -->
<legend>这是第三个分组表单</legend>
<select name="2" size="4">
<!-- 列表框 直接显示所有信息出来
size表示的是显示数量，是下拉的变形-->
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<input type="submit">
</select>
</fieldset>
</form>
</body>
》》》》》》》》》》》》》》》》》》》》》
谢谢你在百忙之中观看，小鱼在这里致以诚挚的问候。若代码有误，还望指出，您的指出是我前进的动力，希望您多多支持！今天的学习就到此为止吧，咱们下期再见。
753
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
