【前端】【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: 同时使用noopenernoreferrer。

<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正则表达式正则表达式 -- 语法 | 菜鸟教程

十二、总结

相关推荐
祈澈菇凉22 分钟前
如何结合使用thread-loader和cache-loader以获得最佳效果?
前端
垣宇25 分钟前
Vite 和 Webpack 的区别和选择
前端·webpack·node.js
java1234_小锋28 分钟前
一周学会Flask3 Python Web开发-客户端状态信息Cookie以及加密
前端·python·flask·flask3
化作繁星32 分钟前
如何在 React 中测试高阶组件?
前端·javascript·react.js
Au_ust38 分钟前
千峰React:函数组件使用(2)
前端·javascript·react.js
爱吃南瓜的北瓜1 小时前
npm install 卡在“sill idealTree buildDeps“
前端·npm·node.js
TTc_1 小时前
记录首次安装远古时代所需的运行环境成功npm install --save-dev node-sass
前端·npm·sass
翻滚吧键盘1 小时前
npm使用了代理,但是代理软件已经关闭导致创建失败
前端·npm·node.js
烂蜻蜓1 小时前
Uniapp 设计思路全分享
前端·css·vue.js·uni-app·html
GAMESLI-GIS1 小时前
【WebGL】fbo双pass案例
前端·javascript·webgl