从零开始的web前端学习-HTML

HTML 即超文本标记语言，超文本指链接，标记指带 <> 的文本

目录

1标签语法

  1. 标签成对出现，中间包裹内容
  2. <> 里面放英文字母（标签名）
  3. 结束标签比开始标签多 /
  4. 双标签：成对出现的标签
  5. 单标签：只有开始标签，没有结束标签，如换行标签、水平线标签等

strong 文字加粗标签示例如下图所示

<strong>标签语法示例</strong>

2html基本骨架-网页模板

<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    网页主体
  </body>
</html>

html：整个网页
head：网页头部，存放给浏览器看的代码，如CSS
body：网页主体，存放给用户看的代码，如图片、文字
title：网页标题

3标签间关系

<html>
  <head></head>
  <body></body>
</html>

html 与 head、body 为父子关系（嵌套关系）
head 与 body 为兄弟关系（并列关系）

4注释标签

<!-- 注释内容 -->

5标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等含名字的地方

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

显示特点：文字加粗、字号逐渐缩小、独占一行（换行）

6段落标签

一般用在新闻段落、文章段落、产品描述信息等地方

<p>段落</p>

显示特点：独占一行、段落间存在间隙

7换行标签（单标签）

<br>

8水平线标签（单标签）

<hr>

9文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等

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

strong、em、ins、del 标签自带强调含义，文本格式化标签不会换行

10图像标签（单标签）

作用：在网页中插入图片

<img src="图片的URL" alt="图片显示失败" title="图片信息说明">

src 用于指定图像的位置和名称，是图像标签的必须属性

图像标签属性
格式：属性名="属性值"，属性写在标签<>内，标签名后，标签名和属性间用空格隔开，属性不区分先后顺序

属性 作用 说明
alt 替换文本 图片无法显示的时候显示文字
title 提示文本 鼠标悬停在图片时显示文字
width 图片宽度 值为数字，无单位
height 图片高度 值为数字，无单位

注意：浏览器缩放图片会等比例同时缩放宽度和高度

11路径

相对路径（本地常用）：从当前文件位置出发查找目标文件
绝对路径（线上常用）：从盘符（Windows）或根目录（Mac）出发查找目标文件，也可以将图片的在线网址作为绝对路径

/ 表示进入某个文件夹，Windows 系统将 / 默认为
. 表示当前文件夹所在文件夹
.. 表示当前文件的上级文件夹

12超链接标签

作用：点击跳转至其他页面，既可以是线上网址，也可以是本地位置

<a href="网页的URL" target="_blank">跳转至某网页</a>

href 属性值是跳转地址，是超链接标签的必须属性，# 表示空链接
target="_blank" 指新开窗口实现跳跃，否则默认新页面覆盖原窗口

13音频标签

<audio src="音频的URL" controls loop></audio>

音频标签属性

属性 作用 特殊说明
src 音频URL 支持格式：MP3、Ogg、Wav
controls 显示音频控制面板
loop 循环播放
autoplay 自动播放 为提升用户体验，浏览器一般禁用自动播放功能

注意：HTML5 中，如果属性名和属性值相同，则可简写为一个单词

14视频标签

<video src="视频的URL" controls loop muted autoplay></video>

视频标签属性

属性 作用 特殊说明
src 视频URL 支持格式：MP4、WebM、Ogg
controls 显示视频控制面板
loop 循环播放
muted 静音播放
autoplay 自动播放 为提升用户体验，浏览器支持静音自动播放，需配合 muted 属性同时使用

15列表标签

作用：布局内容排列整齐的区域
分类：无序列表、有序列表、定义列表

无序列表：布局排列整齐的不需要规定顺序的区域

<ul>
  <li>第一项</li>
  <li>第二项</li>
</ul>

ul 嵌套 li，ul 是无序列表，li 是列表条目
注意：ul 标签中只能包裹 li，但 li 中可以包裹任何内容

有序列表：布局排列整齐的需要规定顺序的区域

<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>

ol 嵌套 li，ol 是有序列表，li 是列表条目
注意：ol 标签中只能包裹 li，但 li 中可以包裹任何内容

定义列表

<dl>
  <dt>列表标题</dt>
  <dd>列表描述</dd>
</dl>

dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述
注意：dl 标签中只能包裹 dt 和 dd，但 dt 和 dd 中可以包裹任何内容

16表格标签

作用：展示数据

<table border="1">
  <tr>
    <th>表头一</th>
    <th>表头二</th>
  </tr>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

table 嵌套 tr，tr 嵌套 td 或者 th

标签名 说明
table 表格
tr 行
th 表头单元格
td 内容单元格

注意：网页默认表格没有边框线，可使用 border 属性添加边框线

17表格结构标签-针对浏览器

作用：用表格结构标签将内容划分区域，令表格结构、语义更加清晰

标签名 含义 特殊说明
thead 表格头部 表格头部内容
tbody 表格主体 主要内容区域
tfoot 表格底部 汇总信息区域 
<table border="1">
  <thead>
    <tr>
      <th>表头一</th>
      <th>表头二</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
    </tr>
  </tbody>
</table>

注意：tfoot 汇总不一定存在

18合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息

分类：

  1. 行合并，保留最上单元格，添加属性 rowspan
  2. 列合并，保留最左单元格，添加属性 colspan

注意：不能跨结构合并，如 tbody 不能与 tfoot 合并

步骤：

  1. 明确合并的目标
  2. 保留最左或最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
  3. 删除其他单元格
<!-- 行合并 -->
<table border="1">
  <thead>
    <tr>
      <th>表头一</th>
      <th>表头二</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">第一行第一列</td>
      <td>第一行第二列</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>第二行第二列</td>
    </tr>
  </tbody>
</table>

<!-- 列合并 -->
<table border="1">
  <thead>
    <tr>
      <th>表头一</th>
      <th>表头二</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">第一行第一列</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
    </tr>
  </tbody>
</table>

19表单-input标签（单标签）

作用：收集用户信息

使用场景：登录界面、注册界面、搜索区域

input 标签中 type 属性值不同，则功能不同

<input type="">
type属性值 说明
text 文本框，用于输入单行文本
password 密码框
radio 单选框
checkbox 多选框
file 上传文件，默认情况仅允许单文件上传

input 标签 placeholder 属性：占位文本，提示信息，用在文本框或密码框

<input type="text" placeholder="提示信息">

input 标签 radio 属性配合属性

属性名 作用 特殊说明
name 控件名称 控件分组，实现单选功能
checked 默认选中 也可以配合 checkbox 属性使用 
性别：
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女

input 标签 multiple 属性：实现多文件上传功能，配合 file 属性使用

<input type="file" multiple>

20表单-下拉菜单标签

<select>
  <option>第一项</option>
  <option selected>第二项</option>
</select>

select 嵌套 option，select 是下拉菜单整体，option 是下拉菜单的每一项，selected 属性代表默认选中（无则默认选中第一项）

21表单-文本域标签

作用：多行输入文本

<textarea>提示文字</textarea>

注意：默认可缩小放大文本域

22表单-label标签

作用：对某个标签进行说明

可用来增大表单控件的点击范围
语法一：label 标签仅包裹内容，不包裹表单控件，设置 label 标签的 for 属性值和表单控件的 id 属性值相同

<input type="radio" id="man">
<label for="man">男</label>

语法二：使用 label 标签直接包裹文字和表单控件，无需 for、id 属性

<label><input type="radio">女</label>

注意：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等皆可利用 label 标签增大点击范围

23表单-按钮标签

<button type="">按钮</button>
type属性值 说明
submit 提交按钮，点击后可提交数据至后台（默认）
reset 重置按钮，点击后将表单控件恢复默认
button 普通按钮，默认无功能，一般配合JavaScript使用

24form标签

表单相关标签需要被 form 标签包裹，否则无法实现对应功能
form 标签中 action 属性代表发送数据的地址

25无语义布局标签

作用：布局网页，如划分网页区域、摆放内容等

div 标签：默认独占一行，“大盒子”

<div>div 标签演示</div>

span 标签：默认不换行，“小盒子”

<span>span 标签演示</span>

26字符实体

作用：在网页中显示预留字符

显示结果 描述 实体名称
空格 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
注意：浏览器对于多个空格仅作一个空格处理
posted @   /O_o\  阅读(2)  评论(0)  编辑  收藏  举报
相关博文：
·  从零开始的web前端学习-CSS
·  从零开始的web前端学习-JavaScript
·  html学习
·  HTML基础语法
·  html学习记录
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
点击右上角即可分享
微信分享提示