前端新手入门——HTML篇

原创已于 2025-12-16 16:00:21 修改 · 472 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #javascript #css #vue

于 2025-11-27 00:06:51 首次发布

前端学习专栏收录该内容

2 篇文章

订阅专栏

目前只有HTML篇后续会继续更新剩下的内容，可以关注一下博主后续更新可以及时推送

学习前的准备（推荐工具）

VS Code+谷歌浏览器（电脑自带的Edge浏览器）

一、快捷方式

!+enter(快速生成骨架）

CTRL+/（注释快捷键）

Alt+Z可以折行

<body>
   这里放HTML代码
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 注释 -->
</body>
</html>

二、标题标签（h1~h6）

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

三、段落标签（p）

<p>这是一个段落或是这是个句子的标签</p>

四、换行与水平线标签(br、hr)

换行
<br>
换行了
<hr>水平线

五、文本格式化标签

标签	文字效果
strong、b	加粗
em、i	倾斜
ins、u	下划线
del、s	删除线

    <strong>加粗</strong>  <b>加粗</b>
    <br>
    <em>倾斜</em>          <i>倾斜</i>
    <br>
    <ins>下划线</ins>      <u>下划线</u>
    <br>
    <del>删除线</del>      <s>删除线</s>
    <br>
    <strong><em><ins><del>多重效果</del></ins></em></strong>

六、图像标签（img）

属性	说明（效果）
src	该图像URL路径地址（必填）
alt	无法显示的图像就会替换显示文字
title	鼠标悬停在图像时显示文字
width	给图片设置的宽
height	给图片设置的高

<img src="./1.jpg" alt="这是图片">
<img src="./1.jpg" title="这是一个1的图片">
<img src="./1.jpg" width="100" >
<img src="./1.jpg" height="100">
<img src="./1.jpg" alt="这是图片" title="这是一个1的图片" width="100" height="100">

七、音频（audio）

属性	说明（效果）
src	该音频的URL路径地址（必填）
controls	音频面板
loop	循环播放
autoplay	自动播放

注：属性名与属性值相同一样，可以直接简写为controls

完整写法：controls="controls"

<audio src="./买辣椒也用券-起风了(旧版).mp3" controls></audio>
<audio src="./买辣椒也用券-起风了(旧版).mp3" controls loop></audio>
<audio src="./买辣椒也用券-起风了(旧版).mp3" controls loop autoplay></audio>

八、视频（video）

属性	说明（效果）
src	该视频的URL路径地址（必填）
controls	视频面板
loop	循环播放
muted	静音播放
autoplay	自动播放（必须配合muted才能使用）

<video src="./买辣椒也用券-起风了(旧版).mp4" controls loop muted autoplay></video>

九、超链接（a）

href：要跳转的地址，不知道跳转地址时设置为#的空链接

target="_blank" 新窗口下打开页面

<a href="https://www.baidu.com/">跳转到百度</a>
<br>
<a href="#">还不知道地址为空链接</a>
<br>
<a href="https://www.baidu.com/" target="_blank">在新窗口打开百度</a>

十、列表

1、无序列表（ul >li）

  <ul>
    <li>AAAAA</li>
    <li>BBBBB</li>
    <li>CCCCC</li>
    <li>DDDDD</li>
    <li>EEEEE</li>
  </ul>

2、有序列表（ol >li）

  <ol>
    <li>AAAAA</li>
    <li>BBBBB</li>
    <li>CCCCC</li>
    <li>DDDDD</li>
    <li>EEEEE</li>
  </ol>

3、定义列表（dl >dt与dd）

dl	定义列表（中间不要写内容，只能包dt与dd在这两个里面写内容）
dt	定义列表的标题
dd	定义列表的描述

  <dl>
    <dt>这是列表标题一</dt>
    <dd>这是列表标题一下的描述1</dd>
    <dd>这是列表标题一下的描述2</dd>
  </dl>

  <dl>
    <dt>这是列表标题二</dt>
    <dd>这是列表标题二下的描述1</dd>
    <dd>这是列表标题二下的描述2</dd>
  </dl>

十一、表格

border 为表格添加边框线。

table	定义为表格
tr	定义为表格中的行
th	该行下为表头单元格，有加粗效果
td	该行下为内容单元格

 <table border="1">
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
 </table>

1、单元格合并

跨行合并	添加属性 rowspan，值为想要合并的数量
跨列合并	添加属性 colspan，值为想要合并的数量

 <table border="1">
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
    <tr>
      <td rowspan="2">1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
  
      <td colspan="2">2</td>
      
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
 </table>

十二、表单

元素	作用
from	用于创建表单
`action`	表单数据提交的URL地址
`method`	数据提交的方法（如post等）

<form action="/">
  文本框：<input type="text">
  <br>
  密码框：<input type="password">
  <br>
  单选框：<input type="radio">
  <br>
  多选框：<input type="checkbox">
  <br>
  单文件上传：<input type="file">
  <br>
  多文件上传：<input type="file" multiple>
  <br>
  

  <input type="radio" id="man" name="A">
  <label for="man">男</label>
  <input type="radio" id="gender" name="A">
  <label for="gender">女</label>
  <br><br>
  <select>
    <option>111</option>
    <option>222</option>
    <option>333</option>
    <option>444</option>
    <option selected>555</option>
  </select>
  <br><br>
  <textarea>请留言、请评论</textarea>
  <br><br>
  按钮：
  <input type="button" value="普通按钮"></input>
  <input type="submit" value="提交按钮"></input>
  <input type="reset"></input>
</form>

1、type属性（input标签）

属性值	作用（效果）
text	文本框（单行文本）
password	密码框
placeholder	占位提示文本
radio	单选框，如果要默认选中可以加checked
checkbox	多选框，如果要默认选中可以加checked
file	默认是单文件上传，加multiple实现多文件上传
button	普通按钮
submit	提交按钮
reset	重置按钮

value:定义按钮上的显示文本

<form action="/">
  文本框：<input type="text">
  <br>
  密码框：<input type="password">
  <br>
  单选框：<input type="radio">
  <br>
  多选框：<input type="checkbox">
  <br>
  单文件上传：<input type="file">
  <br>
  多文件上传：<input type="file" multiple>
  <br>
  按钮：
  <input type="button" value="普通按钮"></input>
  <input type="submit" value="提交按钮"></input>
  <input type="reset"></input>
</form>

1.1 label标签

作用：增大表单控件的点击范围

<input type="radio" id="man" name="A">
<label for="man">男</label>
<input type="radio" id="gender" name="A">
<label for="gender">女</label>

单选功能的实现:

加一个name属性，，并且值要相同

单选框：
  男：<input type="radio" name="A">
  女：<input type="radio" name="A">

2、下拉菜单（select > option）

加selected可以设置为默认显示项

  <select>
    <option>111</option>
    <option>222</option>
    <option>333</option>
    <option>444</option>
    <option selected>555</option>
  </select>

3、多行文本/文本域(textarea)

<textarea>请留言、请评论</textarea>

十三、无语义（盒子）标签：div与span(画盒子）

大盒子： <div>这是 div 标签</div>
小盒子：<span>这是 span 标签</span>