HTML5核心知识全整理（含代码示例）

lykker
317 阅读5分钟

🚀HTML5核心知识全整理（含代码示例）

作为 Web 前端开发的基础，HTML5 是每一位前端开发者的必修课。本文整理了我学习 HTML5 的全部笔记内容，从基础结构、常见标签、表单、列表到 HTML5 新增语义标签，适合前端初学者系统学习。

一、HTML5 基本骨架

HTML5 文档的基本结构如下，`<!DOCTYPE html>` 声明必须放在文档的第一行： 
<!DOCTYPE html>
<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    页面内容显示在这里
  </body>
</html>

二、常用结构标签

1. <html> 标签

定义整个 HTML 文档的根节点。

2. <head> 标签

包含页面的元信息，例如字符集、页面描述、引入的样式表等。

3. <title> 标签

设置网页标题，显示在浏览器标签上，`<title>` 标签是 `<head>` 中唯一必需的标签，定义网页标题，显示在浏览器标签页中，同时也有助于 SEO（搜索引擎优化）。对 SEO 也非常重要。

4. <meta> 标签

<meta charset="UTF-8">
<meta name="keywords" content="HTML5, 教程, 学习">

5. <body> 标签

网页的可视内容区域，所有显示给用户的内容都写在这里。

三、文本内容标签

1. 标题标签


<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6>

2. 段落、换行、水平线


<p>这是一个段落</p>
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->

3. 文本格式标签

标签功能
<b>加粗
<i>斜体
<em>强调
<strong>语气更强的强调
<del>删除线
<span>通用行内容器

四、图片与链接

1. 插入图片


<img src="路径" alt="描述" width="300" height="200">

  • src: 图片地址

  • alt: 图片加载失败时的替代文字

  • width：规定图像的宽度（单位：px，常规的时候只规定图片的宽度不规定图片的高度）

  • height：规定图像的高度

  • title: 鼠标悬浮提示

图片的路径详解
绝对路径

绝对路径是电脑的盘符存储与访问的具体地址

<img src="D:\PCTMoveData\1.jpg">
相对路径

两者相对关系，两者在同一路径下可以直接访问。

  1. 子级关系：/
  2. 父级关系：../
  3. 同级关系：./（可以省略）

网络地址

<img src="具体的网络地址">

2. 创建超链接


<a href="https://www.baidu.com">访问百度</a>
<a href="#"</a> <!-- 当没有地址的时候写#占位 -->

五、列表标签

1. 有序列表


<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>

<ol> 的属性 type 拥有的选项

  1. 1 表示列表项目用数字标号 (1,2,3...)： 
    <ol type="1">
  <li>第一项</li>
  <li>第二项</li>
</ol>
  2. a 表示列表项目用小写字母标号 (a,b,c...)： 
    <ol type="a">
  <li>苹果</li>
  <li>香蕉</li>
</ol>
  3. A 表示列表项目用大写字母标号 (A,B,C...)： 
    <ol type="A">
  <li>HTML</li>
  <li>CSS</li>
</ol>
  4. i 表示列表项目用小写罗马数字标号 (i, ii, iii...)： 
    <ol type="i">
  <li>第一步</li>
  <li>第二步</li>
</ol>
  5. I 表示列表项目用大写罗马数字标号 (I, II, III...)： 
    <ol type="I">
  <li>步骤一</li>
  <li>步骤二</li>
</ol>

2. 无序列表


<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>

type 属性：

<ul> 的 type 拥有的选项：

  1. disc：默认实心圆 <ul type="disc"></ul>
  2. circle：空心圆
  3. square：小方块
  4. none：不显示

六、表格


<table border="1">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

合并单元格


<td colspan="2">横向合并</td>
<td rowspan="2">纵向合并</td>

七、表单

表单在Web网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能，所有的用户输入内容的地方都用表单来写，如登陆注册、搜索框。 

<form action="/submit" method="post">
  姓名：<input type="text" name="username">
  密码：<input type="password" name="password">
  <input type="submit" value="提交">
</form>
表单的三要素：
  • 表单标签 <form>
  • 表单字段（input, textarea, select）
  • 表单按钮（submit, reset）

八、块级元素 vs 行内元素

分类说明
块级元素独占一行，可设置宽高，如 <div>、<p>
行内元素不换行，如 <span>、<a>
行内块不换行但可设置宽高，如 <img>、<input>

九、HTML5 新增语义标签


<header>头部</header>
<nav>导航</nav>
<article>
  <section>章节</section>
</article>
<aside>侧边栏</aside>
<footer>页脚</footer>

✨小结

本文涵盖了 HTML5 的核心知识，结构清晰，内容完整，适合零基础入门或面试前复习使用。欢迎收藏、点赞和分享，让更多前端初学者一起进步！

avatar
文章
阅读
粉丝