HTML入门教学
本文以最通俗易懂的方式讲解并教你入门html！
网页html相当于房子的骨架，而[[CSS]]相当于房子的装修。
1 Html
1.1 简介
是一种网页标记语言，决定了网页中有哪些文字，图片，按钮等
Html是用标签呈现网页内容，即 <div> </div>这种标签。
而页面又分为头部和身体，头部用户看不到，而身体可以看到。
<head></head>
<body></body>
使用vs code建立一个页面
使用！加Tab键即可快速建立一个基础页面。
1.2 基础标签
标签相关知识
标签可以嵌套，这样可以设计出复杂的标签。
1.2.1 h标题
<h1></h1>
<h2></h2>
<h3></h3>
从上到下依次字体减小
1.2.2 p段落
<p></p>
用来显示文字段落
每一对p都代表了一个独立的段落，这就是说，每一个p都会换一行。
1.2.3 a href链接
<a href=" ">这是一个链接</a>
额外生成新标签：
<a href="#" target="_blank">脸谱交互</a>
使用target="_blank"可以使得新的网页单独以标签形式出现。
1.2.4 img图像
<img src=" " alt=" " width=" " height = " " />
可以设置图片的路径，宽度和高度。
alt用来描述图片，在图片没能正常显示的时候出现。
- 图片路径也可以在css中设置
图片路径问题：在html中也和css中一样，可以在路径前面加上./
1.2.5 br换行
<br/>
可以完成换行操作，包括对文本的换行。
1.2.6 hr分割符
<hr/>
可以向网页中添加分隔符
1.2.7 strong加粗
<strong></strong>
同
<b></b>
1.2.8 em斜体
<em></em>
同
<i></i>
1.2.9 ol ul li清单
<ol></ol><li></li>
<ul></ul>
<li>是放置在<ol>和<ul>中的，每一个<li>就是一个标签。类似于与序列表和有序列表。其中<ul>是无序列表
- 清单常用于设计网页的导航栏
1.2.10 引用
<blockquote cite="www.baidu.com">“ 这是一个引用示例 ”</blockquote>
cite属性可以标识引用的来源网址
1.2.11 mate 标签
作用：给浏览器和搜索引擎提供“隐藏信息”，不会显示在页面上
mate标签举例：
<meta charset="UTF-8"> 设置网页编码
<meta name="description" content="这是一个学习HTML的网站"> 定义网页描述1.2.12 label标签
用来关联表单控件，比如说我点击文字也可以选中单选框，或者聚焦输入框
<label><input type="checkbox"> 我同意协议
</label><label for="username">用户名：</label>
<input type="text" id="username">运行结果如下：
1.2.13 ifream标签
用来在网页中嵌入另一个页面，如果画中画一样。
作用：嵌入地图，视频或者第三方内容。
<iframe src="https://www.youtube.com/embed/视频ID"></iframe>
1.2.14 script标签中的同步异步加载
defer和async都是用来控制脚本加载和执行行为的属性，主要影响网页的加载速度和执行顺序。它们的核心区别可以用“什么时候执行脚本”来理解。
对比总结
| 属性 | 加载方式 | 执行时机 | 顺序保证 | 适用场景 |
|---|---|---|---|---|
| 无 | 同步（阻塞） | 立即执行，阻塞HTML解析 | ❌ | 传统写法（不推荐） |
async | 异步（不阻塞） | 下载完就执行，时机不确定 | ❌ | 独立脚本（如广告、统计） |
defer | 异步（不阻塞） | HTML解析完，按顺序执行 | ✅ | 依赖DOM或需要顺序的脚本 |
1.3 区块布局
使用行内元素和区块元素进行布局
1.3.1 区块元素
每一个内容都会独占一整行
如
<div></div>
1.3.2 行内元素
不会独占一整行，会出现在一行
<span></span>
1.4 表格
1.4.1 基础语法
使用table标签创建，可以设计边框宽度。
由行tr，表头th和单元格td来组成。
-
表格就是网页里的“Excel”，用来整齐展示数据，比如成绩单、商品价格表。
-
由**行（
<tr>）和单元格（<td>）**组成，表头用<th>加粗显示。
| 姓名 | 年龄 |
|---|---|
| 张三 | 25 |
1.4.2 表格美化
举个例子吧
<style>table {width: 100%; /* 表格撑满容器 */border-collapse: collapse; /* 合并边框（重要！） */font-family: Arial; /* 换字体 */}th, td {padding: 12px; /* 单元格内边距 */text-align: center; /* 文字居中 */border: 1px solid #ddd; /* 浅灰色边框 */}th {background-color: #f2f2f2; /* 表头浅灰背景 */font-weight: bold; /* 加粗 */}
</style>
1.5 表单控件
1.5.1 外壳 <form>
-
包裹所有表单内容的"盒子"
-
决定数据提交到哪（
action属性） -
决定怎么提交（
method属性，GET或POST）
1.5.2 输入框们
-
单行文本框
<input type="text">- 输名字、账号 -
密码框
<input type="password">- 输密码（显示***） -
数字框
<input type="number">- 只能输数字 -
邮箱框
<input type="email">- 检查邮箱格式 -
大文本框
<textarea>- 写留言、评论
电子邮件在HTML中创建电子邮件链接非常简单，使用 <a> 标签配合 mailto: 协议即可
<a href="mailto:example@email.com">给我发邮件</a>
1.5.3 选择类
-
单选按钮
<input type="radio">- 性别选择（只能选一个） -
复选框
<input type="checkbox">- 兴趣爱好（可多选） -
下拉菜单
<select>+<option>- 选择省份/城市
1.5.4 按钮
-
提交按钮
<input type="submit">- 点击发送数据 -
普通按钮
<button>- 自定义功能 -
重置按钮
<input type="reset">- 清空表单
1.5.5 其他实用功能
-
隐藏字段
<input type="hidden">- 悄悄传数据（用户看不见） -
文件上传
<input type="file">- 上传图片/文件 -
日期选择
<input type="date">- 选生日日期
2 html5
2.1 网页结构标签
2.1.1 页首
<header></header>
用来放置网站的logo和一些页首内容
2.1.2 导览列
<nav></nav>
用来放置网页的导览列或主选单
2.1.3 主要内容
<main></main>
包含网页的主要内容
2.1.4 页尾
<footer>
通常用来标注网站的版权声明等附加咨询
2.1.5 分类
<section></section>
可以将不同结构进行分类。
- 可以对网站的布局的清晰度有十分的优化
3 Html补充内容
3.1 html和css和js关系
Html相当于房子的骨架，而Css相当于外观和装潢
- 他们是干什么的？
HTML页面结构和内容CSS页面样式和布局JS交互和功能
3.2 vs code 插件
前端插件：
![[前端开发（html+css+js）.png]]
live server用于实时预览
这个插件是让你在修改html的时候同步修改与之对应的另一个标签
3.3 html
是通过标签来定义哪些是标题，哪些是内容，哪些是文本、图像、链接等等。
3.3.1 html标签
包括字体样式，列表和表格
表格标签
3.3.2 html属性
id和class 为css标签选择器
其中id是唯一的
而class是一类
3.4 块标签和行内标签
3.4.1 div标签和span标签
div和span一个是块级标签，span是行内标签和其他挤在一行。
3.5 html表单
3.5.1 label标签的for属性作用：
主要就用到了input标签还有label标签来显示信息
4 八股文
要想通过面试和笔试，看一下题目和八股文必不可少。
[[前端八股文]]