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

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

一、基本结构

二、基本标签 

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

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

<h3>：三级标题，可用于子章节标题，以此类推，还有 <h4>、<h5>、<h6>。

<p>：用于定义一个段落，文本会自动换行，段落之间会有一定的间距。

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

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

<b/>：使文本加粗，用于强调。

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

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

<!-- 这是注释内容 -->

 表示一个空格，常用于在文本中添加额外的空格。

<表示 < 符号。

>表示 > 符号。

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

十二、总结