全网最细最全的HTML知识·2025.03.24

爱爬山的老虎

已于 2025-03-24 18:09:52 修改

阅读量346

点赞数 5

分类专栏：前端学习文章标签：前端程序人生 html html5

于 2025-03-23 21:26:14 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73001740/article/details/146461245

版权

前端学习专栏收录该内容

12 篇文章

订阅专栏

html基础知识

概念:

Hyper Text Markup Language(超文本标记语言)

形如<head>和</head>总是是成对出现的，前者是开放标签，后者是闭合标签
形如<meta charset="UTF-8">是自己出现的，这是自闭合标签
注释写法

块元素：

✅ 独占一整行（默认情况下，每个块级元素都会换行）
✅ 可以包含其他块级元素和行内元素
✅ 可以设置宽高（width、height）

行内元素：
✅ 不会独占一整行（多个行内元素会排在同一行）
✅ 只占据自身内容所需的空间
✅ 不能设置宽高（width、height 无效）
✅ 只能包含文本或其他行内元素（不能直接包含块级元素）

html你要实现的代码就写在两个body之间,后续我文中的代码都是在body里面的,下面代码也包含大量的<p></p>,这是把一个模块显示成一个段落,较为顺眼

<!--解析格式，现在浏览器都是解析html，所以没有也可以-->
<!DOCTYPE html>
<!--定义 HTML 文档的根元素，所有网页内容都应该包含在这个标签内-->
<html lang="en">
<!--html的头部-->
<head>
    <meta charset="UTF-8">
<!--网页的标题-->
    <title>初识前端</title>
</head>
<!--html的主体-->
<body>
<!--这是注释-->
hello world
</body>
</html>

运行结果：

最基础的标签：

<!--标题标签-->
<h1>这是一级标题标签</h1>
<h2>这是二级标题标签</h2>
<h3>这是三级标题标签</h3>
<h4>这是四级标题标签</h4>
<h5>这是五级标题标签</h5>
<h6>这是六级标题标签</h6>

<!--段落标签-->
<p>hello!!!?</p>
<p>i love you</p>
<p>real</p>

<!--换行标签-->
<br/>
hello!!!?<br/>
i love you<br/>
real<br/>

<!--水平标签-->
<hr/>

<!--加粗标签-->
<strong>i love you</strong>

<!--斜体标签-->
<em>i love you</em>

成果展示：

放置图像

代码：


<!--
放置图像：<img >
--src=""文件地址  ../返回当前html文档的上一层目录/........（指引到想要放置的文件地方）
--alt=""文件找不到，显示的文字
--title="" 鼠标悬停显示的文字
-->
<img src="../resource/001.png" alt="绝美" title="绝美风景" >

成果展示：

文件找的到：

文件找不到：

超链接：

代码：


<!--在idea中 a: 就能选择-->
<!--href 是超链接名 target是表示，点击之后在哪里跳转，默认是在本页跳转，_blank是跳转到新页面上去-->
<!--在<a>和</a>之间是超链接显示的形式如文本，图像等-->
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="002基本标签.html">我的基本标识界面</a>
<a href="002基本标签.html">
    <img src="../resource/001.png"></a>

效果：

列表：

代码：


<!--无序列表ul-->
<ul>
    <li>study</li>
    <li>学习</li>
    <li>go to school</li>
    <li>go home</li>
</ul>
<!--有序列表ol-->
<ol>
    <li>study</li>
    <li>学习</li>
    <li>go to school</li>
    <li>go home</li>
</ol>
<!--自定义列表-->
<dl>
    <dt>study</dt>
    <dd>go to school</dd>
    <dd>go home</dd>
</dl>

效果：

表格：

代码：


<!--table 表格 border 是显示线的，但是被废弃了-->
<!--tr是行-->
<!--td是列-->
<!--colspan向后合并列-->
<!--rowspan向下合并行-->
<table border="1">
  <tr>
    <td colspan="2">1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td rowspan="2">2.1</td>
    <td>2.2</td>
    <td>2.3</td>
    <td>2.4</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

效果：

音视频：

代码：


<!--
没有control 就只能自己右键去新开页面播放，有control可以在当前页面可以进行播放
autoplay是打开自动播放，但是由于现在浏览器禁止自动播放（特别是带声音的）
muted是没有声音播放
-->
<video src="../resource/video/frank.mp4" controls autoplay muted></video>
<!--同理音频是一样的-->

iframe内联框架嵌套

代码：

<!--iframe在界面内嵌一个界面，name是使后面能在这个内嵌界面里进行操作，宽（width）*高（height）-->
<iframe src="002基本标签.html" name="点我" width="800" height="800" ></iframe>
<!--使视频在内嵌界面播放-->
<a href="007媒体使用.html" target="点我">点击我看小视频</a>

效果：

点击前

点击后：

表单

代码

<h1>注册</h1>
<!--form是表单的框架，action把数据提交到哪里，method是用哪种方式-->
<form action="001初识前端.html" method="post">
<!--input是样式 text是正常文本，password是密码，小圆点的格式，submit提交按钮，reset重新输入-->
    <p> user: <input type="text" name="username"></p>
    <p> password:<input type="password" name="password"></p>

    <p>
        <input type="submit" value="提交">
        <input type="reset" value="刷新">
    </p>
</form>

效果：

点击提交

reset之后

单选框和多选框:

代码:


<!--要显式的表明文本，value是表单提交时，提交的值-->
<!--确保两个单选框使用同一个name，要不然会发现能同时选两个-->
<p> 性别 ：
  <input type="radio" value="男" name="性别" >男
  <input type="radio" value="女" name="性别" >女
</p>
<!--与单选框一样的，只是把radio变成checkbox-->
<p>
  <input type="checkbox" name="爱好" value="吃饭">吃饭
  <input type="checkbox" name="爱好" value="睡觉">睡觉
  <input type="checkbox" name="爱好" value="读书">读书
  <input type="checkbox" name="爱好" value="看报">看报
</p>

效果:

按钮:

代码:

<!--表明类型是按钮（图像）alt是当图片无法显示，就会显示alt中的字符串-->
  <input type="button" value="快来点我">
  <input type="image" src="../resource/image/001.png" alt="点击按钮">

效果:

下拉框

代码:

<!--大的结构是select，然后是下拉框选项option-->
<p><select>物品：
    <option value="水杯">水杯</option>
    <option value="电脑">电脑</option>
    <option value="平板">平板</option>
    <option value="手机">手机</option>
</select></p>

效果:

文本域

代码:

<!--关键词textarea 也可以设置宽高，但是是可变的关键词是cols和rows，直接添加就行-->
<p>反馈：
    <textarea name="反馈问题" ></textarea>
</p>

效果:

文件域

代码:

也是input的特殊样式

<p><input type="file" name="提交文件"></p>

效果:

点击按钮,直接弹出文件框,选择你需要的文件

验证:

数字验证:

代码:

<!--input里的number类型，可以设置最大和最小值-->
数量：
  <input type="number" name="数量" max="100" min="0">

效果:

注意要是想显示这个,是向上提交才会显示的,而向上提交,请放在form框架下

完整代码:

<form action="001初识前端.html" method="get">
  <!--input里的number类型，可以设置最大和最小值-->
  <p>数量：
    <input type="number" name="数量" max="100" min="0">
  </p>
  <input type="submit" value="提交">
</form>

URL验证:

代码:

<input type="url" name="网址" >

效果:

滑块:

代码:

    <input type="range" name="滑块" >

效果:

隐藏只读禁用:

隐藏 hidden 不能输入,不会显示

只读 readonly 不让输入,但是会显示

禁用disabled 不让使用

代码:

user: <input type="text" name="username" readonly>
 password:<input type="password" name="password" hidden>
 <input type="submit" value="提交" disabled>

效果:

简单验证:

placeholder:在输入框里显示提示词

required:不能为空

代码:

 <p> user: <input type="text" name="username" placeholder="用户名"></p>
    <p> password:<input type="password" name="password" required></p>