这是我参与「第四届青训营 」笔记创作活动的的第1天

一、本堂课重点内容

• 简单介绍了什么是前端

• 介绍了HTML以及HTML的一些常用的标签

二、详细知识点介绍

1 前端

前端基础的技术为HTML（内容）、CSS（样式）和JS（行为）

2 HTML的简单标签

排版标签

• 标题标签

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

从h1~h6逐渐减小，文字都有加粗

• 段落标签<p></p>独占一行

• 换行标签<br>

• 水平线标签<hr>

• 文本格式化标签

<b></b>加粗

<u></u>下划线

<i></i>倾斜

<s></s>删除线

列表标签

• 无序列表

<ul></ul>表示对无序列表的整体，用于包裹li标签

<li></li>表示无序列表的每一项，用于包含每一行的内容

• 有序列表

<ol></ol>表示有序列表的整体，用于包裹li标签

<li></li>表示有序列表的每一项，用于包含每一行的内容

• 自定义列表

<dl></dl>表示有序列表的整体，用于包裹dt/dd标签

<dt></dt>表示自定义列表的主题

<dt></dt>表示自定义列表的针对主题的每一项内容

多媒体标签

• 链接标签

<a href=""></a>可以从一个页面跳转到另一页面

• 图片标签

<img src="" alt="替换文本" title="提示文本">

图片加载不出来时才会显示替换文本，鼠标悬停时会显示提示文本

• 音频标签

<audio src="" controls></audio>

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放
loop	循环播放

• 视频标签

<video src="" controls></video>

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放
loop	循环播放

表格标签

<table></table>表格整体，用于包裹tr标签

<tr></tr>表格每行，用于包裹td

<th></th>表格的表头

<td></td>表格单元格，用于包裹内容

• 表格的结构标签

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

• 合并单元格

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并（垂直合并）
colspan	合并单元格的个数	跨列合并（水平合并）

表单标签

• input系列标签

name：为文本框命名，用于提交表单，后台接收数据用。

value：为文本输入框设置默认值。

type：通过定义不同的type类型，input的功能有所不同。

placeholder：占位符，未输入时默认显示的文字

type	说明
text	文本框，用于输入单行文本
password	密码框，用于输入密码
radio	单选框，checked属性用于显示选中状态
checkbox	多选框，checked属性用于显示选中状态
file	文件选择，用于上传文件
submit	提交按钮，用于提交
reset	重置按钮，用于重置
button	普通按钮，默认无功能
range	显示为滑动条，用于输入一定范围内的值
number	数字
date	选取日期和时间

• button按钮标签

type	说明
submit	提交按钮，提交数据给后端服务器
reset	重置按钮，恢复表单默认值
button	普通按钮，默认无功能

• select下拉菜单标签

<select></select>下拉菜单的整体

<option></option>下拉菜单的每一项，selected为默认选中

• textarea文本域标签

<textarea name="" id="" cols="" rows="">

cols规定文本域的宽度，rows规定文本域的行数

• label标签

<label id=""></label>常用于绑定内容与表单标签的关系

• 其他语义化标签

盒子： <div></div>

网页头部：<header></header>

底部信息：<footer></footer>

导航：<nav></nav>

文章：<article></article>

侧边栏：<aside></aside>

三、实践练习例子

表格

表单

四、课后个人总结

HTML的标签有很多，只有自己去动手打代码才能更好知道标签如何运用。