HTML5简单总结

八戒，佩奇在这

已于 2022-11-03 23:36:48 修改

阅读量146

点赞数 1

分类专栏：前端文章标签： html 前端 html5

于 2022-11-03 23:31:42 首次发布

本文链接：https://blog.csdn.net/m0_46152474/article/details/127680471

版权

本文是对HTML5的简要总结，涵盖了基本结构、网页标签、图像、超链接（包括锚链接和功能性链接）、列表类型、表格、媒体元素、网页布局、内联框架iframe以及表单和表单应用，如表单验证等。

摘要由CSDN通过智能技术生成

HTML5简单总结

1.HTML5的基本结构

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

DOCTYPE:(文档类型)告诉浏览器，我们要使用什么规范
head 标签是网页的头部
meta 描述性标签，描述网站的一些信息
title 网页标题
body 代表网页的主体

2.网页的基本标签

标题标签段落标签换行标签水平线标签注释特殊符号

<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!-- 段落标签 -->
<p>这 是 一            个段落</p>
<p>这 是 一            个段落</p>

<!-- 水平线标签-->
<hr/>

<!-- 换行标签 -->
这 是 一               个换行 <br/>
这 是 一               个换行 <br/>

<!-- 粗体，斜体 -->
<h1>字体样式</h1>

粗体：  <strong> 我是：HTML </strong>
<br/>
斜体：  <em> 我是：HTML </em>

<br/>
<!-- 特殊符号 -->

空   格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

<br/>
大于：&gt;&nbsp;&nbsp;&nbsp;小于：&lt;&nbsp;&nbsp;&nbsp;&copy;版权所有
<!--特殊符号调用和记忆：
格式：&  ；
&g  或  &+  看最后是什么特殊符号
某个字符找百度
-->

3.图像标签

img

<!--  image学习
src:图片地址(必填)
    相对地址(推荐使用)，绝对地址
    ../   --上一级目录
alt:图片未加载出来的名字(必填)
    比如：图片地址错误
-->
<img src="../resources/image/Typora.png" alt="加载失败了" title="悬停文字"width="128"height="128">

4.超链接

4.1锚链接（常用）

<a id="top">顶部</a>
<!--  a标签
herf:要跳转的页面(必填)
target: 表示窗口在哪里打开
    _blank在新标签打开
    _self在自己的网页打开
-->
<br/>
<a href="http://www.baidu.com"target="_self">点击我跳转到百度</a><br/>
<br/>
<a href="http://www.baidu.com">
    <img src="../resources/image/Typora.png" alt="加载失败了"