本文介绍了HTML的基本结构，包括根标签<html>、文档头部<head>和<body>标签。讲解了标题标签<h1>到<h6>、段落<p>、换行<br>、文字样式如<b>、<i>、<u>以及<div>和<span>等。还涉及到了图像<img>的使用，包括路径、属性设置。此外，讨论了表格、链接<a>、列表<ul>、<ol>和<dl>，以及表单<form>的元素，如<input>、<select>、<textarea>，并提到了<label>标签的作用和文件上传功能。
html的基本结构标签：
<html>//为根标签
<head>//文档头部
<title> //网页的标题
</title> //网页的标题
</head>//文档头部
<body>
页面主体标签
</body>
vs的用法
1：新建文件->保存为xxx.html
2：输入！号然后按住tab键一个html的骨架建立完毕。
3：<!DOCTYPE>文档类型声明，作用告诉浏览器使用哪种html版本来显示网页；
4：lang语言种类,告诉我们是什么语言网页，
5：字符集，以便于计算机可以识别和储存各种文字。
html常用标签
1：加了文字会变粗，字号会变大，会独占一行。随级数增加，特征会变小。
<h1>一级标签</h1>
<h2>一级标签</h2>
<h3>一级标签</h3>
<h4>一级标签</h4>
<h5>一级标签</h5>
<h6>一级标签</h6>
段落标签：< p>< /p>加了文字分成两个段落
换行标签：< /br>
文字标签:
| 加粗 | < strong>或者< b >< /b> |
|---|---|
| 倾斜 | < em>< /em> |
| 下划线 | < u>< /u>或者< ins>< /ins> |
5:是盒子用来装内容的，没有语义
< div>< /div>：一行只能放一个div；
< span>< /span>一行可以放多个
图像标签：
< img src=" 图片的路径名称"/>
图像标签其他属性：
|src|图片路径 |
|alt|替换文本，图片不能显示，就用文字替代|
| title | 提示文本，鼠标放在图片上面，显示文字 |
|width|图像宽度 |
|height|图像高度|
| border | 图像边框粗细 |
路径：
目录文件夹；就是普通的文件夹，用来放html文件或者图片…
根目录：打开目录文件夹第一层就是根目录；
在vs中文件中点击 -》打开文件夹-》打开目录文件夹（把案例作为目录文件夹)->后面新建文件就直接点案例旁边的一个新建符号就可以。
页面里面图片会特别多，我们通常会新建一个文件夹来放图片文件，这时候来找图片就要采用路径了。
路径：
绝对路径：
相对路径：以引用文件所在位置为参考，而建立的路径（图片相对于html页面位置）
1：同一级路径 图片和html文件在一个文件夹 < img src=“图片名称”/>
2：下一级路径 图片和html不在一个文件夹，而且图片是在html文件夹的里面一个文件夹里 < img src=" image/图片名称"/>这个用的多
链接标签：< a>
图片 文字 音频都可以加链接
表格标签：
表头标签可以加粗居中表头里面内容：把td改成th就可以
加边框：
align left,center,rigth 规定表格相对周围元素对其方式
border 1或“ ” 默认为没有边框
cellpadding 像素值 规定单元格与其内容之间空白
cellspacing 像素值 规定单元格之间空白
width 像素值或者百分比 规定宽度
<table align="center" border="1" cellpadding="20" cellspacing="3">
表格结构标签：
使用场景：因为表格可能很长，为了更好的表示表格含义，可以将表格分割为表格头部和表格主体部分：< thead>标签表示表格头部，< tbody>标签 表格的主体区域。
<body>
<table align="center" width="500">
<thead>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tbody>
</table>
</body>
合并单元格：
可以把多个单元格合并为一个：
| 跨行合并 | rowspan="合并单元格的个数“ |
|---|---|
| 跨列合并 | colspan="合并单元格的个数 ” |
跨行：最上测单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
1.先确定是跨行还是跨列
2.找到目标单元格，写上合并方式=合并的单元格数量，
3.删除多余单元格
列表标签
无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
相当于ul是一个大盒子，li是里面一个一个小盒子。
有序列表：
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</ol>
自定义列表：
<body>
<dl>
<dt>名词</dt>
<dd>名词1解释</dd>
<dd>名词二解释</dd>
</dl>
</body>
表单标签
input输入表单：
< input type=" ">
type属性值
name是表单元素名字，要求单选按钮和复选框要有相同name值
checked主要针对单选和复选框，作用一打开就可以默认选中某个元素
<body>
<!-- form用来定义一个标签 -->
<form action="">
<!-- text文本框 -->
<!-- value是默认的值这里在文本框会显示出来 -->
用户名：<input type="text" name="username" value="请输入用户名称"> <br>
<!-- password密码框 -->
密码: <input type="password"> <br>
<!-- radio单选按钮 -->
<!-- checked="checked" 规定input元素首次加载就应该被打勾选中 -->
<!-- name是表单元素名字，这里性别单选必须有相同的名字name 才可以实现多选一 -->
性别:男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"> <br>
<!-- checkbox多选框 -->
<!-- name是表单元素名字，这里多选必须有相同的名字name 才可以实现多选 -->
爱好:吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 打豆豆<input type="checkbox"
name="hobby"><br>
<!-- submit提交按钮 ，点了提交就会把表单域里面元素提交给后台-->
<input type="submit" value="免费提交"><br>
<!-- 重置按钮reset -->
<input type="reset" value="重置"><br>
<!-- button普通按钮 -->
<input type="button" value="获取短信验证码"><br>
<!-- file上传文件 -->
<input type="file">
</form>
</form>
</body>
label标签
放在元素上面点击可实现定位到其上面，增加用户体验
<body>
<form action="">
<input type="radio" name="sex" id="na"> <label for="an">男</label>
<input type="radio" name="sex" id="se"> <label for="se">女</label>
<!-- lable里面for属性必须和input里面的id属性一样 -->
</form>
</body>
select下拉表单元素
<body>
<form>
<select>
<option>选项</option>
<option>选项</option>
<option>选项</option>
...
</select>
</form>
</body>
textarea 文本域元素
col每行字符数，rows行数
2230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
