HTML知识学习总结(入门)

最新推荐文章于 2025-04-14 22:26:17 发布

nextdoorloureed

最新推荐文章于 2025-04-14 22:26:17 发布

阅读量200

点赞数 1

文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_45845042/article/details/105369126

版权

本文全面介绍了HTML的基础知识，包括网页结构、基本标签、图像与超链接处理、列表与表格构建、音视频插入、页面结构分析及内联框架使用，特别强调了表单的设计与验证，适合初学者快速掌握。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML知识学习总结(入门)

1，网页基本结构

文档类型DOCTYPE：告诉浏览器，我们使用的规范（html5)
html ：总标签
head：头部标签
meta：描述性标签，用来描述网页的信息：如设置字符集，keywords，description
title：网页标题
body：网页主体

<!--文档类型DOCTYPE：告诉浏览器，我们使用的规范（html5)-->
<!DOCTYPE html>
<!--总标签-->
<html lang="en">
<!--头部标签-->
<head>
    <!--meta 描述性标签，用来描述网页的信息：如设置字符集，keywords，description-->
    <meta charset="UTF-8">
    <!--网页标题-->
    <title>我的第一个网页</title>
</head>
<!--网页主体-->
<body>
HELLO WORLD
</body>
</html>

2，网页基本标签

h1-h6:一级到六级标题标签
p：段落标签常常我们在需要分段大换行时候，对内容前加
内容后加
即可实现文章换段落。
br标签，换行标签，单独标签,相对于分段标签，更为紧凑
字体样式标签，粗体和斜体 strong em
hr 水平线标签
特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--网页标题标签-->
<h1>
    一级标题
</h1>
<h2>
    二级标题
</h2>
<h3>
    三级标题
</h3>
<h4>
    四级标题
</h4>
<h5>
    五级标题
</h5>
<h6>
    六级标题
</h6>
<!--直接写上的文字，会以一行显示，不会自动分行，直到宽度不够，才会分行-->
我是文字   我是文字我是文字我
是文字我是文字我是文字我是
文字我是文字我是文
字我是文字我是
文字我是文字
我是文字   我是文字我是文字我
是文字我是文字我是文字我是
文字我是文字我是文
字我是文字我是
文字我是文字
我是文字   我是文字我是文字我
是文字我是文字我是文字我是
文字我是文字我是文
字我是文字我是
文字我是文字
我是文字   我是文字我是文字我
是文字我是文字我是文字我是
文字我是文字我是文
字我是文字我是
文字我是文字

<!--P标签，分段标签-->
<p>我是文字   我是文字我是文字我</p>
<p>我是文字   我是文字我是文字我</p>
<p>我是文字   我是文字我是文字我</p>
<p>我是文字   我是文字我是文字我</p>
<p>我是文字   我是文字我是文字我</p>
<p>我是文字   我是文字我是文字我</p>
<p>我是文字   我是文字我是文字我</p>
<p>我是文字   我是文字我是文字我</p>

<!--br标签，换行标签，单独标签,相对于分段标签，更为紧凑-->
我是文字   我是文字我是文字我 <br>
是文字我是文字我是文字我是 <br>
文字我是文字我是文 <br>
字我是文字我是 <br>
文字我是文字 <br>
<!--hr 水平线标签-->
<hr>
text1
<hr>
text2
<hr>
text3
<br>
<!--字体样式标签，粗体和斜体-->
<strong>
    text
</strong>
<br>
<em>
    text
</em>
<!--特殊符号：&XXXX;-->
<br>
空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格
<br>
空格                 空格
<br>
<!--直接输入的多个空格，只会显示一个，除非使用，&nbsp;：代表空格的特殊字符
    常用特殊字符：
    &gt;   大于号
    &lt;   小于号
    &copy;  版权符
-->
&gt;   
<br>
&lt;
<br>
&copy;
<br>
</body>
</html>

网页显示效果：
在这里插入图片描述

3，图像标签 img

图像标签
- src:图片地址采用相对地址 …/表示上一级目录在idea中，可以直接推拽图片，生成img标签路径
- height：显示高度
- width：显示宽度
- alt: 图像的替代文字（当图片无法载入时，显示的替代文字）
- title**:鼠标悬停提示文字

<img src="../res/img/桌面壁纸.jpg" alt="桌面壁纸" title="鼠标悬停提示文字" height="800" width="1000"/>

<!--图片无法正常显示时-->
<img src="../res/img/桌面壁纸" alt="桌面壁纸" tilte="鼠标悬停提示文字" height="1407" width="2500"/>

4，超链接标签 a

href:超链接的地址
target:打开的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
<!--超链接标签
href :超链接的地址
target：打开的方式
-->
<!--在新页面打开超链接-->
<a href="https://baidu.com" target="_blank">超链接1</a>
<!--在当前页面打开超链接-->
<a href="https://baidu.com" target="_self">超链接2</a>

</body>
</html>

锚链接:利用a标签实现页面上下的跳动

<!--利用a标签设置一个锚-->
<a name="top">顶部</a>
<p><br><br><br><br><br><br><br><br><br></p>
<p><br><br><br><br><br><br><br><br><br></p>
<p><br><br><br><br><br><br><br><br><br></p>
<p><br><br><br><br><br><br><br><br><br></p>
<p><br><br><br><br><br><br><br><br><br></p>
<p><br><br><br><br><br><br><br><br><br></p>
<p><br><br><br><br><br><br><br><br><br></p>
<p><br><br><br><br><br><br><br><br><br></p>
<!--利用a标签：回到顶部-->
<a href="#top">回到顶部</a>

功能性标签

<!--功能性标签
mailto 邮件标签
-->
<a href="mailto:2809881362@qq.com">邮件</a>

5，行内元素与块元素

块元素：无论内容多少，该元素独占一行（p，h1-h6…)
行内元素：
- 内容撑开宽度，左右都是行内元素的可以排在一行
- 例如：a strong em

6，列表标签

类型：

无序列表
有序列表
自定义列表

ol:有序列表

li:列表元素

ul:无序列表

dl:自定义列表

dt:自定义列表标题

dd:自定义列表元素

<!--有序列表-->
<ol>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
    <li>l4</li>
</ol>
<!--无序列表-->
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
    <li>l4</li>
</ul>

<!--自定义列表-->
<dl>
    <dt>
        列表名称1
    </dt>
     <dd>1</dd>
     <dd>2</dd>
     <dd>3</dd>
     <dd>4</dd>
    <dt>
        列表名称2
    </dt>
    <dd>1</dd>
    <dd>2</dd>
    <dd>3</dd>
    <dd>4</dd>
</dl>

7，表格标签

table:表格标签

tr:行标签
td:列表签
border:边框
colspan：跨列
rowspan：跨行

<body>
<!--表格
table:表格标签
tr:行标签
td:列表签
border:边框
colspan：跨列
rowspan：跨行
-->
<table border="1px">
    <tr>
        <td colspan="8">课程表</td>
    </tr>
    <tr>
        <td></td>
        <td>周一</td>
        <td>周二</td>
        <td>周三</td>
        <td>周四</td>
        <td>周五</td>
        <td>周六</td>
        <td>周七</td>
    </tr>
    <tr>
        <td rowspan="4">上午</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td rowspan="4">下午</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

8，音视频标签

video:视频标签

audio:音频标签

src:资源目录

autoplay:自动播放

controls:可以控制视频的播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频与音频</title>
</head>
<body>
<!--可控制的自动播放音频-->
<audio src="../res/music/music1.mp3" controls autoplay></audio>
<video src="../res/music/video.mp4" controls autoplay></video>
</body>
</html>

9，页面结构分析

网页页面内容大致可以分为以下几个部分

<!--标记头部区域的内容-->
<header></header>
<!--标记脚部区域的内容-->
<footer></footer>
<!--Web页面的一块独立区域-->
<section></section>
<!--独立的文章内容-->
<article></article>
<!--相关内容或应用（常用于侧边栏）-->
<aside></aside>
<!--导航类的辅助内容-->
<nav></nav>

10，iframe内联框架

作用：在一个网页中内联另一个网页

<!--在浏览器中内联B站视频，此处可以通过b站视频下的分享连接获得-->
<iframe src="//player.bilibili.com/player.html?aid=837715197&bvid=BV1vg4y187Zz&cid=174271596&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

<!--利用iframe内联一个百度-->
<iframe src="https://baidu.com" frameborder="0" height="1000" width="1000"></iframe>

<!--利用a标签,将超链接目标显示在以定义名字的iframe框架中-->
<iframe src="" name ="baidu" frameborder="0" width="1000" height="1000"></iframe>
<a href="http://baidu.com" target="baidu">打开百度</a>

11，表单

11.1表单form

<form action="  " method="  "></form>

**action:**表示表单提交为地址，可以是一个网站，也可以是一个请求输入地址
method:表单提交的方式（get，post）

11.2文本框

<input type="text" name="username" maxlength="16" minlength="6">

name:文本框的名字
maxlength:最大输入长度
minlength:最短输入长度

11.3密码框

<input type="password" name="username" maxlength="16" minlength="6">

11.4单选框

<input type="radio" name="sex" value="boy" checked>男
<input type="radio" name="sex" value="girl">女

name:表示单选组名
value:单选框的值
checked:表示被选中

11.5复选框

学科擅长:
<input type="checkbox" value="chinese" name ="subject">语文
<input type="checkbox" value="math" name ="subject">数学
<input type="checkbox" value="english" name ="subject">英语
<input type="checkbox" value="science" name ="subject">科学

name:表示复选组名（最好一致，方便后期处理）
value:复选框的值

11.6下拉框

 <p>
        年级:
        <select name="grade">
            <option value="first">初一</option>
            <option value="second">初二</option>
            <option value="third">初三</option>
        </select>
 </p>

11.7文本域

<p>
        <textarea cols="50" rows="10">

        </textarea>
</p>

cols:列数

rows:行数

11.8文件域

<p>
        <input type="file" name="upload">
</p>

11.9按钮

自定义按钮
图片按钮
提交按钮
表单重置按钮

    <p>
    <input type="button" name="btn1" value="上传" >
    </p>
    <p>
    <input type="image" src ="../res/img/桌面壁纸.jpg" name="img_btn1" value="img_upload"        height="200" width="200">
    </p>
    <p>
    <!--提交按钮-->
        <input type="submit">
    <!--表单重置按钮-->
        <input type="reset">
    </p>

11.10 标签

用于增强鼠标的可用性：点击Lable标签只能跳到id所对应的组件

<label for="s">搜索</label>
<input type="search" name="search" id =s>

11.11功能性组件

数值型

年龄:<input type="number" num="year" max="120" min="0" step="1" value="15">

邮箱验证型（最基本的验证）

邮箱:<input type="email" name ="email" >

URL验证型

URL:<input type="url" name ="url" >

滑块

滑块:<input type="range" name="range" min="0" max="100">

11.12 隐藏

hidden :隐藏组件，但不影响值得传递

<input type="text" name="username" maxlength="16" minlength="6" hidden>

11.13 只读

readonly:组件的值只能看，不能改

<input type="text" name="username" maxlength="16" minlength="6" readonly>

11.14 禁用

disabled:组件不可用（不是隐藏，会被显示出来）

<input type="text" name="username" maxlength="16" minlength="6" disabled>

11.15表单的初级验证

placeholder :提示性信息

<input type="text" name="username" maxlength="16" minlength="6" placeholder="请输入用户名">

required:要求非空

<input type="text" name="username" maxlength="16" minlength="6" required>

patten:正则表达式匹配

<input type="text" name="username" maxlength="16" minlength="6" placeholder="请输入中文用户名" pattern="^[\u4e00-\u9fa5]{0,}$">

常用的正则表达式

https://blog.youkuaiyun.com/ZYC88888/article/details/98479629

11.16表单练习源码

<h1>用户注册</h1>
<form action="1.网页基本结构.html">
    <p>
        用户名:
        <input type="text" name="username" maxlength="16" minlength="6" placeholder="请输入中文用户名" pattern="^[\u4e00-\u9fa5]{0,}$">
    </p>
    <p>
        密码：
        <input type="password" name="username" maxlength="16" minlength="6">
    </p>
    <p>
        性别:
        <input type="radio" name="sex" value="boy">男
        <input type="radio" name="sex" value="girl">女
    </p>
    <p>
        年龄:
        <input type="number" num="year" max="120" min="0" step="1" value="15">
    </p>
    <p>
        学科擅长:
        <input type="checkbox" value="chinese" name="subject" >语文
        <input type="checkbox" value="math" name="subject">数学
        <input type="checkbox" value="english" name="subject">英语
        <input type="checkbox" value="science" name="subject">科学
    </p>
    <p>
        年级:
        <select name="grade">
            <option value="first">初一</option>
            <option value="second">初二</option>
            <option value="third">初三</option>
        </select>
    </p>
    个人简介 <br>
    <p>
        <textarea cols="50" rows="10" name="textarea">

        </textarea>
    </p>
    <p>
        <input type="file" name="upload">
    </p>
    <p>
        <input type="button" name="btn1" value="上传">
    </p>
    <p>
        <input type="image" src="../res/img/桌面壁纸.jpg" name="img_btn1" value="img_upload" height="200" width="200">
    </p>
    <p>
        邮箱:<input type="email" name ="email" >
    </p>
    <p>
        URL:<input type="url" name ="url" >
    </p>
    <p>
        滑块: <input type="range" name="range" min="0" max="100">
    </p>
    <p>
        <label for="ss">搜索</label>
        <input type="search" name="search" id =s>
    </p>
    <p>
        <!--提交按钮-->
        <input type="submit">
        <!--表单重置按钮-->
        <input type="reset">
    </p>
</form>

在这里插入图片描述