【前端】【HTML】入门基础知识

参考视频:【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili

一、基本结构

二、基本标签

<h1>:一级标题,通常用于页面的主标题,字体较大且醒目。

<h2>:二级标题,用于副标题或主要章节标题,字体稍小于 <h1>。

<h3>:三级标题,可用于子章节标题,以此类推,还有 <h4>、<h5>、<h6>。
<p>:用于定义一个段落,文本会自动换行,段落之间会有一定的间距。

<br>:用于强制换行,不产生新的段落。

<hr/>:用于在页面中插入一条水平分隔线,可用于分隔不同的内容区域。

<b/>:使文本加粗,用于强调。

<i>:使文本倾斜,常用于表示斜体文本,如书名、外来语等。

<u>:为文本添加下划线。

&nbsp;表示一个空格,常用于在文本中添加额外的空格。

&lt;表示 < 符号。

&gt;表示 > 符号。

&copy;版权所有

三、图片标签

四、链接标签

1、href:定义链接目标。

<a href="https://www.example.com">访问 Example</a>

2、target:定义链接的打开方式。

  • _blank: 在新窗口或新标签页中打开链接。
  • _self: 在当前窗口或标签页中打开链接(默认)。
  • _parent: 在父框架中打开链接。
  • _top: 在整个窗口中打开链接,取消任何框架。

<a href="https://www.example.com" target="_blank" rel="noopener">新窗口打开 </a>

3、rel:定义链接与目标页面的关系。

nofollow: 表示搜索引擎不应跟踪该链接,常用于外部链接。

noopener 和 noreferrer: 防止在新标签中打开链接时的安全问题,尤其是使用 target="_blank" 时。

  • noopener: 防止新的浏览上下文(页面)访问window.opener属性和open方法。
  • noreferrer: 不发送referer header(即不告诉目标网站你从哪里来的)。
  • noopener noreferrer: 同时使用noopener和noreferrer。

<a href="https://www.example.com" rel="noopener noreferrer">安全链接</a>

4、download:提示浏览器下载链接目标而不是导航到该目标。

如果指定了文件名,浏览器会提示下载并保存为指定文件名。

<a href="file.pdf" download="example.pdf">下载文件</a>

5、title:定义链接的额外信息,当鼠标悬停在链接上时显示的工具提示。

<a href="https://www.example.com" title="访问 Example 网站">访问 Example</a>

6、id:用于链接锚点,通常在同一页面中跳转到某个特定位置。

<!-- 链接到页面中的某个部分 -->

<a href="#section1">跳转到第1部分</a>

<div id="section1">这是第1部分</div>

10、style: 直接在元素上定义CSS样式

五、列表

1、无序列表

<ul>

<li>Coffee</li>

<li>Milk</li>
</ul>

2、 有序列表

3、自定义列表

dl:标签

dt:列表名称

dd:列表内容

六、表格标签

跨行、跨列:

七、音频视频

八、 网页结构

九、iframe内联标签

在一个网页里嵌套另一个网页

<iframe src="/" width="200" height="200">

十、表单

1、用form创建表单

2、radio单选框

3、checkbox多选框

4、按钮

5、下拉框

6、文本域

7、文件域

8、验证

9、滑块

10、搜索框

总结:input表示的:文本框、按钮、单选框、多选框、文件域、验证、滑块、搜索框

十一、 表单的应用

hidden 隐藏域

readonly只读

disabled禁用

十二、表单的验证

placeholder设置文本框默认值

required设置文本框不能为空

pattern正则表达式正则表达式 -- 语法 | 菜鸟教程

十二、总结

相关推荐
骑着蜗牛撵大象32711 小时前
多 Agent 分治协作:MapReduce 模式下的并行扇出与结果归并
前端
用户553182973211 小时前
Flutter iOS 热更新深入 Dart VM:读懂函数入口、解释执行与调用桥接
前端
前端snow12 小时前
为什么大厂要用Postgres + mogodb的框架?
前端
运维有小邓112 小时前
2026年主流AD域管理软件有哪些?
前端
Mickey同学12 小时前
提示词注入:AI 时代的「SQL 注入」
前端
deli00712 小时前
GROUP BY 先别想当然:我把 SQL 分组语义做成了沙盘,8 个实验 + 27 条自检全绿
前端
WayneX12 小时前
开源 Vue 3 组件库 Morya UI:把组件、文档、AI 工具链一起做进一个包
前端·vue.js·前端框架
用户157415681653412 小时前
页面白屏 + Invalid prop: type check failed for prop "options"?原来是 script setup 的 ref
前端
btcSteven12 小时前
给浏览器装了个「AI 操作员」:纯聊天帮你完成任何任务
前端
高晶12 小时前
一种小功率锂电池组充电器方案
前端·架构