HTML基础和常用标签
“合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。”
文章目录
- 前言
- 文章有误敬请斧正 不胜感恩！
- 1. HTML的基本结构
- 解释：
- 2. 常见标签的介绍
- 2.1 标题和文本
- 2.2 链接和图片
- 2.3 列表
- 2.4 表格
- 2.5 表单
- 2.6 其他常用标签
- 3. HTML5新标签（语义化标签）
- 4. HTML注释
- 5.查阅文档
- 总结
前言
写在开始：
HTML是用来搭建网页的基础语言，就像是你在盖房子时用的砖块，每个砖块（标签）都有特定的功能，负责不同的结构。接下来，我用更通俗的方式介绍HTML基础和常见标签。
正文部分有很多我手写的笔记,希望大家理解,不要嫌弃我的字丑奥.
文章有误敬请斧正 不胜感恩！
以下是本篇文章正文内容，
1. HTML的基本结构
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>网页标题</title></head><body><h1>这是一个大标题</h1><p>这是一个段落。</p></body>
</html>
解释：
<!DOCTYPE html>：告诉浏览器，这是一个HTML5文件，不用管它的细节，就当成“说明书”。<html>：整个网页的最外层，就像你家房子的外墙。<head>：网页的“脑袋”，里面放一些网页的信息，比如标题、字符编码等。<body>：网页的“身体”，所有显示在屏幕上的内容，比如文字、图片，都放在这里。
2. 常见标签的介绍
2.1 标题和文本
-
<h1>-<h6>：标题标签，<h1>是最大的标题，<h6>是最小的标题。<h1>这是最大标题</h1> <h2>这是次一级标题</h2>用法很简单，按你需要的大小选择标签，
<h1>是主标题，<h2>-<h6>依次往下。 -
<p>：段落标签。所有文字内容都可以放在这个标签里。<p>这是一个段落。</p> -
<b>和<strong>：加粗文字。虽然看上去效果一样，但<strong>更多强调的是“重要性”。<b>这是加粗的文字</b> <strong>这也是加粗的文字，但强调了它的重要性。</strong> -
<i>和<em>：斜体文字。<em>也是强调的意思。<i>这是斜体文字</i> <em>这是强调的斜体文字</em>
2.2 链接和图片
-
<a>：超链接，用于添加链接。<a href="https://www.example.com">点击我去百度</a> -
<img>：图片标签，用于展示图片。<img src="image.jpg" alt="图片描述" width="200" height="100">src：图片的地址（相当于图片的“源”）。alt：当图片加载不出来时显示的文字。width和height：图片的宽度和高度。- 图像路径的解析:
2.3 列表
-
<ul>：无序列表，展示项目符号的列表。<ul><li>苹果</li><li>香蕉</li> </ul>ul是外面的包裹，li是里面每一项。
-
<ol>：有序列表，按顺序编号。<ol><li>第一项</li><li>第二项</li> </ol>
2.4 表格
-
<table>：用于创建表格。<table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>25</td></tr> </table>-
tr：表示表格的一行。 -
th：表头，表示标题单元格。 -
-
td：数据单元格，放每个表格内容的地方。
table效果:
-
-
2.5 表单
-
<form>：用户提交信息的表单，比如登录页面。<form action="/submit" method="POST"><label for="name">名字：</label><input type="text" id="name" name="name"><input type="submit" value="提交"> </form>action：表单提交到的地址。method：数据提交的方式，通常用POST。
2.6 其他常用标签
-
<div>：块级元素，用于包裹内容，可以用来布局页面。<div><p>这是一个包含段落的div块。</p> </div> -
<span>：内联元素，和div类似，但不换行，适合包裹少量内容。<span>这是内联元素。</span> -
<br>：换行标签，强制换行。(break)这是第一行。<br>这是第二行。 -
<hr>：水平线，表示一个分割。<hr>
3. HTML5新标签（语义化标签）
HTML5新增了一些更容易理解的标签，让网页更“语义化”，便于搜索引擎和开发者阅读。
<header>：定义页面的头部，比如导航条、LOGO等。<nav>：导航栏，放菜单或链接。<section>：页面的独立部分，通常用于分块内容。<article>：独立的文章或博客内容。<footer>：页面的底部内容。
4. HTML注释
注释是用来给代码加说明的，不会在页面上显示出来。
<!-- 这是一段注释 -->
快捷键:Ctrl+/
5.查阅文档
只推荐这仨
标签是记不完的,只有多用多查才能理解记忆.
1.w3school 在线教程
2.菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)
3.使用 canvas 来绘制图形 - Web API | MDN (mozilla.org)
总结
HTML是我们前端部分最基础也最为根本的部分,我们绝对不能轻视这一块的学习,
合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。
正是这个道理.
HTML就是通过这些标签组合在一起，搭建出一个完整的网页。
学会这些基础标签后，我们基本就能用它们搭建出简单的网页。
后续再深入了解CSS（样式）和JavaScript（交互）
让我们的网页更加富有特色才能更加富有竞争力,更美观,更能吸引别人的眼球,更能得到青睐.
