HTML基础知识笔记-01

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

本文就介绍了HTML的基础相关知识点。

---

一、HTML是什么？

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

二、使用步骤

1.注释的快捷键

在VScode中：ctrl+/

2.段落标签

在新闻和文章的页面中，用于分段显示。
代码如下（示例）：

<p>一段文字</p>

---

3.换行标签

换行：<br>

4.水平线标签

水平线：<hr>

5.文本格式化标签

标签	说明	标签	说明
b	加粗	strong	加粗
u	下划线	ins	下划线
i	倾斜	em	倾斜
s	删除线	del	删除线

6.图片标签

在网页中显示图片。
代码如下（示例）：

<img src="" alt="" title="">

alt属性：为替换文本，当图片加载失败时，显示alt的文本
title属性：为提示文本，当鼠标悬停时，才显示的文本，title属性不仅可以用于图片标签，也可以用于其他的标签。
width属性和height属性：宽度和高度，如果只设置其中一个，另一个没设置的会自动等比例缩放。
align=“” 排列图片，演示如何在文字中排列图像。（middle居中，top居上）

7.相对路径

（1）相对路径-同级目录

方法一：

<img src="目标图片.gif">

方法二：

<img src="./目标图片.gif">

PS:（着重用它）

（2）相对路径-下级目录

<img src="images/目标图片.gif">

（3）相对路径-下级目录

a.先出当前文件夹，到上一级目录：…/
b.直接写目标文件

8.音频标签

<audio src="./music.mp3" controls></audio>

常见属性：

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器需要加个静音，muted）
loop	循环播放

9.链接标签

<a href=" https://www.baidu.com/" target="_blank">百度一下</a>

target属性：
_self 默认值，在当前窗口跳转（覆盖原网页）
_blank 在新的窗口中跳转（保留原网页）

10.列表标签

（1）无序列表

无序列表：由ul和li组成
ul:表示无序列表的整体，用于包裹li标签
li:用于包含每一行的内容

（2）有序列表

ol:表示有序列表的整体，用于包裹li标签
li:用于包含每一行的内容

（3）自定义列表

dl:表示自定义列表的整体，用于包裹dt/dd标签
dt:表示自定义列表的针对主题的每一项内容
dd:内容

11.表格标签

（1）基本标签

属性	说明
table	表格整体，用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，用于包裹内容

（2）相关属性

属性	说明
border	边框宽度
width	表格宽度
height	表格高度

注意：实际开发时对于样式用css设置

（3）表格标题和表头单元格标签

属性	说明
caption	表格大标题，表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表示单元格，表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示。·th标签写在tr标签内，（用于替换td标签）

注意：·caption标签写在table标签内部

<table>  
<caption> 成绩单 </caption> 
<th> 姓名</th>
<th> 成绩</th>
</table>

（4）表格的结构标签

属性	说明
thead	表格头部
tbody	表格主体
tfoot	表格底部

注意：表格结构标签内部用于包裹tr标签

（5）合并单元格

1.明确合并哪几个单元格。
2.上下合并—只保留最上的，删除其他。左右合并—只保留最左的，删除其他。
3.单元格设置：

属性	说明
·rowspan	合并单元格的个数，跨行合并，将多行的单元格垂直合并
·colspan	合并单元格的个数,跨列合并，将多列的单元格水平合并

12.表单标签

标签名：input
type属性值：

标签名	type属性值	说明
input	text	文本框，用于输入单行文本，比如：用户名
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于之后上传的文件（如果想多上传，用multiple）
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，之后配合js添加功能

（1） text属性值：placeholder :占位符，提示用户输入内容的文本

<form>
      用户名： <input type="text" placeholder="手机号/qq邮箱" />
</form>

（2）password 属性值：

<form>
     密码：<input type="password" />
</form>

（3）radio属性值：
a. name : 分组，有相同name属性值的单选框为一组，一组中只有一个被选中
b. checked:默认选中

<form>
     性别：
     <input type="radio" name="gender" />男 
      <input type="radio" name="gender"  checked/>女 
</form>

注意：
·name属性对于单选框有分组功能
·有相同name属性值的单选框为一组，一组中只有一个被选中
（4）checkbox 属性值

<form>
 <input type="checkbox" checked />游泳 
 <input type="checkbox" />唱歌
 <input type="checkbox" />打球
</form>

（5）file属性值

<form>
   上传文件：<input type="file" multiple />
</form>

（6）submit 、reset 、 button 属性值

<form>
   <button type="submit">提交</button>
   <button type="reset">重置</button>
   <button type="submit">用户登录</button>
</form>

注意：
·如果需要实现这几个按钮功能，需要配合form标签使用
· form使用方法：用form标签把表单标签一起包裹

13.button按钮标签

标签名	type属性值	说明
button	submit	提交按钮，点击之后提交数据给后端服务器
button	reset	重置按钮，点击之后恢复原来默认值
button	button	普通按钮，默认无功能，之后配合js添加功能

注意：
·谷歌浏览器中button默认是提交按钮
·button是双标签，更便于包裹其他内容：文字，图片等。

14.textarea文本域标签

常见属性：
·cols:规定了文本域内可见宽度
·rows:规定了文本域内可见行数

<form>
  详细地址：<textarea cols="30" rows="10" placeholder="请输入...">
            </textarea>
</form>

15.select下拉菜单标签

标签组成：
·select标签：下拉菜单的整体
·option标签：下拉菜单的每一项
常见属性：selectd：下拉菜单的默认选中

<form>
   地址：
      <select>
        <option value="henansheng">河南省</option>
        <option value="henansheng">安徽省</option>
        <option value="henansheng" selected>河北省</option>
      </select>
      <select>
        <option value="">驻马店市</option>
        <option value="">郑州市</option>
        <option value="">邯郸市</option>
      </select>
</form>

16.lable标签

方法一：
1.使用lable标签把内容（如：文本）包裹起来
2.在表单标签上添加id属性
3.在lable标签的id属性中设置对应的id属性值
方法二（着重使用）：
1.直接使用lable标签把内容（如：文本）和表单标签一起包裹起来
2.需要把lable标签的for属性删除即可

<form>
 <!-- 点击文字就能选中 -->
   性别：
      <label> <input type="radio" name="gender" />男 </label>
      <label> <input type="radio" name="gender" />女 </label>
</form>

17.语义化标签

(1)没有语义的布局标签div和span
·div标签：一行只显示一个（独占一行）
·span标签：一行可以显示多个

总结

以上就是HTML的基础知识点的内容。