html基础语法

前言

本片笔记是学习pink老师的前端
整理笔记的目的不仅是记录知识，更是为了加深理解、方便复习。如有疏漏或错误，欢迎指正！
课程链接：
https://www.bilibili.com/video/BV1MvaVzUEuz/?spm_id_from=333.337.search-card.all.click

有语义强调与重要性标签

加粗： 加粗文字

倾斜: 倾斜文字

下划线： 下划线

删除线： 删除线

图像标签

1.src路径

2.alt加载失败显示文字

3.width宽度，height高度，宽度和高度修改其中一个就可以了，剩下的等比例缩放

图片格式：

  • .jpg
  • .webp
  • .avif
  • .gif
  • .png

title：图片标题

视频标签

  1. width - 设置视频播放器宽度（像素）

    • width=”400” 表示宽度为400像素
    • 高度会按视频比例自动调整

  2. controls - 显示播放控件

    • 显示播放/暂停、音量、进度条等控制按钮

  3. muted - 静音播放

    • 视频加载时默认静音
    • 某些浏览器要求静音才能自动播放

  4. loop - 循环播放

    • 视频播放结束后自动重新开始

  5. poster - 封面图片

    • 视频加载前或播放前显示的预览图
    • poster=”./media/yu7.jpg” 指定封面图片路径
      其他常用属性：
  • autoplay - 自动播放（建议配合muted使用）
  • height - 设置播放器高度
  • preload - 预加载策略（auto/metadata/none）
  • src - 视频文件路径

支持的格式：

  • MP4（推荐，兼容性最好）

  • WebM

  • Ogg

    推荐语法

1
2
<video width="400" controls muted loop poster="./media/yu7.jpg">
	<source src="./media/yu7.mp4" type="video/mp4">   <p> 您的浏览器不支持视频播放 </p> </video>

音频标签

HTML5的

推荐语法：

1
2
3
4
<audio controls>
    <source src="./media/ldh.mp3" type="audio/mp3">
    <p> 您的浏览器不支持音频播放 </p>
  </audio>

常用属性说明：

  1. controls - 显示播放控件

    • 显示播放/暂停、音量、进度条等控制按钮
    • 如果不设置，音频将不可见且无法控制

  2. autoplay - 自动播放

    • 页面加载后自动开始播放
    • 某些浏览器要求配合muted使用

  3. muted - 静音播放

    • 音频加载时默认静音
    • 有助于实现自动播放

  4. loop - 循环播放

    • 音频播放结束后自动重新开始

  5. preload - 预加载策略

    • auto - 预加载整个音频（默认）
    • metadata - 只预加载元数据（时长、尺寸等）
    • none - 不预加载

  6. src - 音频文件路径

    • 指定音频文件的URL
      支持的格式：
  • MP3（推荐，兼容性最好）
  • WAV
  • Ogg

超链接

1
<a href="./11-音视频标签.html">音视频</a>
1
<a href="https://www.deepseek.com/" title="deepseek" target="_blank">deepseek</a>

target 属性:

_blank 在新标签页/窗口打开

_self 在当前窗口打开（默认）

rel=”noopener noreferrer”

noopener 防止新页面操控原页面
noreferrer 隐藏来源 + 防操控

1
<a href="#">产品介绍</a>
1
<a href="./download.zip">下载软件</a>
1
<a href="mailto:123@qq.com">联系我们</a>

锚点链接

css样式实现过度滑动效果

1
2
3
4
5
<style>
    html {
      scroll-behavior: smooth;
    }
  </style>
  1. 设置锚点（目标位置）：
    1
    2
    <h2 id="section1">第一章</h2>
    <p>内容...</p>
  2. 创建锚点链接：
    1
    2
    3
    4
    5
    6
    <!-- 页面内跳转 -->
    <a href="#section1">跳转到第一章</a>

    <!-- 跳转到其他页面的锚点 -->
    <a href="./11-音视频标签.html#video">
    跳转到视频部分</a>
    注意事项：
  • 锚点名称必须唯一
  • 使用 # 符号表示锚点
  • href=”#” 表示返回页面顶部
  • 锚点链接会平滑滚动到目标位置（现代浏览器）
  • 可以配合CSS美化锚点链接样式

网页结构

1
2
3
4
5
6
7
8
<header>网页头部标签</header>
<nav>导航栏标签</nav>
<main>
  <aside>侧边栏标签</aside>
  <article>主要内容区域标签</article>
</main>
<footer>页面底部标签</footer>
<section>区块标签</section>


div和span标签

1
2
3
4
<div>我是div标签是块级元素</div>
<div>我是div标签是块级元素</div>
<span>我是span标签是行内元素</span>
<span>我是span标签是行内元素</span>

列表标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<h2>一.无序列表</h2>
  <ul>
    <li>佩奇</li>
    <li>猪爸爸</li>
    <li>猪妈妈</li>
    <li>乔治</li>
  </ul>

  <h2>二.有序列表（了解即可）</h2>
  <ol>
    <li>看视频</li>
    <li>写代码</li>
    <li>做笔记</li>
    <li>多复习</li>
  </ol>

  <h2>三.描述列表（自定义列表）</h2>
  <dl>
    <dt>家电</dt>
    <dd>电视</dd>
    <dd>洗衣机</dd>
    <dd>冰箱</dd>
  • 佩奇
  • 猪爸爸
  • 猪妈妈
  • 乔治
  1. 看视频
  2. 写代码
  3. 做笔记
  4. 多复习
家电
电视
洗衣机
冰箱

表格标签

1
2
3
4
5
6
7
<table>
   <tr> <!-- 行 -->
     <td>姓名</td> <!-- 列 -->
     <td>年龄</td>
     <td>成绩</td>
   </tr>
</table>
姓名 年龄 成绩
张三 18 100
李四 20 90
王五 22 80
姓名 年龄 成绩
张三 18 100
李四 20 90
王五 22 80

表格结构标签

  • - 表头区域

  • 包含表格的标题行

  • 通常包含 单元格

  • 浏览器可能将其显示在表格顶部

  • - 表体区域

  • 包含表格的主要数据行

  • 可以有多个tbody（用于分组）

  • 默认会自动创建

  • - 表尾区域

  • 包含表格的汇总或脚注信息

  • 浏览器可能将其显示在表格底部

  • 即使放在tbody后面，也会显示在表格底部

    姓名 年龄 成绩
    张三 18 100
    李四 20 90
    王五 22 80
    合计

合并单元格

姓名 年龄 性别 爱好 居住地
张三 18 男 足球 北京
李四 20 女 篮球 深圳
王五 22 男 篮球
日期
  • colspan跨列合并
  • rowspan跨行合并
  • rowspan=”2”跨两行，再删除多余单元格
1
2
3
4
5
6
7
8
9
10
11
12
13
<tr>
     <td>李四</td>
     <td>20</td>
     <td>女</td>
     <td>篮球</td>
     <td rowspan="2">深圳</td>
   </tr>
   <tr>
     <td>王五</td>
     <td>22</td>
     <td>男</td>
     <td>篮球</td>
</tr>

特殊字符

1
2
3
4
5
6
7
8
9
10
11
&nbsp; 空格
&lt; 小于号
&gt; 大于号
&copy; 版权符号
&reg; 注册商标
&yen; 人民币符号
&cent; 分
&pound; 英镑符号
&euro; 欧元符号
&amp; 与符号
&quot; 双引号

表单

表单容器

1
2
3
<form action="提交地址" method="提交方式">
  <!-- 表单控件 -->
</form>

表单控件

input表单控件

type属性值 说明
text 单行文本框
password 密码框
radio 单选框
checkbox 复选框
file 文件域
  • name - 控件名称（提交数据的键名）
  • placeholder 提示信息
  • autocomplete 控制浏览器是否自动填充该输入框
  • accesskey “ “ 设置快捷键 Alt+ “ “
  • maxlength - 最大字符长度
  • required 必填项

multiple - 允许文件上传时选择多个文件

  • 允许下拉列表选择多个选项
  • 允许邮箱输入框输入多个邮箱地址

accept属性说明：

  • 限制用户可以选择的文件类型
  • 可以指定文件扩展名或MIME类型

语法

1
2
3
4
5
<input type="checkbox" name="hobby" value="0" checked> 足球
<input type="radio" name="gender" value="1">男
<input type="password" placeholder="请输入密码" name="pwd" maxlength="6">
<input type="text" placeholder="请输入账号" name="username" accesskey="s" autocomplete="off">
<input type="file" name="file" multiple accept=".exe,.jpg">

文件上传

  • 必须配合 enctype=”multipart/form-data” 使用
  • 必须使用 method=”post”

select表单

语法：

1
<select> 配合 <option> 使用：
1
2
3
4
5
<select name="city">
  <option value="bj">北京</option>
  <option value="sh">上海</option>
  <option value="gz">广州</option>
</select>
1
<select>属性
  • name 表单提交时的字段名
  • id 元素的唯一标识
  • multiple 允许多选
  • size 显示的选项数量（默认为 1）
  • required 必填项
  • disabled 禁用状态
1
<option> 属性
  • value 提交的值（不写则默认为标签内容）
  • selected 默认选中
  • disabled 禁用该选项

textarea文本域

  • name 表单提交时的字段名（必需）
  • rows 显示的行数 cols 显示的列数（字符宽度）
  • placeholder 占位提示文本
  • maxlength 最大字符数限制
  • readonly 只读模式
  • disabled 禁用状态
  • required 必填项
1
<textarea name="msg" cols="30" rows="10" placeholder="请输入留言"></textarea>

button 表单

提交按钮（默认）
1
<button type="submit">提交</button>
重置按钮
1
<button type="reset">重置</button>
普通按钮
1
<button type="button">点击我</button>
禁用按钮
1
<button disabled>注册</button>
带图标和样式的按钮
1
2
3
4
<button type="submit" 
class="btn-primary">
  <span>📧</span> 发送邮件
</button>
关联指定表单
1
如果 <button type="submit"> 在 <form> 标签内部，不需要加 form 属性就会自动提交该表单
1
2
3
4
5
6
7
<form id="myForm">
  <input type="text" 
  name="username">
</form>

<button type="submit" form="myForm">
提交</button>

前端之路才刚刚开始，感谢 pink 老师的用心教学