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


二、基本标签
<h1>
:一级标题,通常用于页面的主标题,字体较大且醒目。
<h2>
:二级标题,用于副标题或主要章节标题,字体稍小于<h1>
。
<h3>
:三级标题,可用于子章节标题,以此类推,还有<h4>
、<h5>
、<h6>
。
<p>
:用于定义一个段落,文本会自动换行,段落之间会有一定的间距。
<br>
:用于强制换行,不产生新的段落。
<hr/>
:用于在页面中插入一条水平分隔线,可用于分隔不同的内容区域。
<b/>
:使文本加粗,用于强调。
<i>
:使文本倾斜,常用于表示斜体文本,如书名、外来语等。
<u>
:为文本添加下划线。
表示一个空格,常用于在文本中添加额外的空格。
<
表示<
符号。>表示
>
符号。©;版权所有
三、图片标签
四、链接标签
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正则表达式正则表达式 -- 语法 | 菜鸟教程
十二、总结

