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

十二、总结

相关推荐
Qrun5 分钟前
Windows11安装nvm管理node多版本
前端·vscode·react.js·ajax·npm·html5
中国lanwp6 分钟前
全局 npm config 与多环境配置
前端·npm·node.js
JELEE.1 小时前
Django登录注册完整代码(图片、邮箱验证、加密)
前端·javascript·后端·python·django·bootstrap·jquery
TeleostNaCl3 小时前
解决 Chrome 无法访问网页但无痕模式下可以访问该网页 的问题
前端·网络·chrome·windows·经验分享
前端大卫5 小时前
为什么 React 中的 key 不能用索引?
前端
你的人类朋友5 小时前
【Node】手动归还主线程控制权:解决 Node.js 阻塞的一个思路
前端·后端·node.js
小李小李不讲道理6 小时前
「Ant Design 组件库探索」五:Tabs组件
前端·react.js·ant design
毕设十刻6 小时前
基于Vue的学分预警系统98k51(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
mapbar_front7 小时前
在职场生存中如何做个不好惹的人
前端
牧杉-惊蛰7 小时前
纯flex布局来写瀑布流
前端·javascript·css