当前位置：首页 > news >正文

前端学习2：学习时间3-4小时

news 2025/10/13 6:54:49

可以下载一个这个插件，可以在代码页快速打开网页，右键会出现open in default browser

HTML5简介

HTML5是用来描述网页的一种语言，被称为超文本标记语言，后缀.html

HTML是一种标记语言，标记语言是一套标记标签，标签是由尖括号包围的关键字，例如双标签：<html></html> 单标签：<img>

HTML 是所有网页的基础，与 CSS（层叠样式表，用于控制样式和布局） 和 JavaScript（用于实现交互功能） 一起构成了现代 Web 开发的三大核心技术。HTML5 是 HTML 的第五次重大修订版本

HTML文档基本结构：

1.DOCTYPE(document type)

<!DOCTYPE html>是H5的声明位于文档的最前面，处于标签之前。

作用：声明文档类型，告诉浏览器这是一个 HTML5 文档。
为什么重要：正确的 DOCTYPE 声明能让浏览器以标准模式渲染页面，避免进入怪异模式（以免不同浏览器会出现不同效果）。
写法固定：<!DOCTYPE html>（HTML5 的声明非常简单）

2.html标签

这是整个 HTML 文档的根元素（根标签），网页中所有其他内容都包含在这个标签内

<html lang="zh-CN">... </html> 表示该网页的主要语言是中文（简体），有助于搜索引擎和辅助技术（如屏幕阅读器）理解页面内容

3.head标签

网页的“头部”，不直接显示在页面内容中（是给开发者看的，不是给用户），但包含了网页的元信息（metadata）、配置和资源引用。

常见的 <head>内部标签有：

标签	作用
`<meta charset="UTF-8">`	设置字符编码为 UTF-8，确保中文等正常显示
`<meta name="viewport" ...>`	让网页在手机等设备上正常显示（响应式设计必需）
`<title>网页标题</title>`	定义浏览器标签页上显示的标题
`<link rel="stylesheet" href="style.css">`	引入外部 CSS 样式文件
`<script src="app.js"></script>`	引入 JavaScript 脚本（通常放在 body 底部更好）

4.title标签（在head中）

可以定义文档的标题
显示在浏览器窗口的标题栏或状态栏上
<title>标签是<head>标签中唯一必须包括的东西
<title>的增加有利于SEO优化（SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名要求

5.meta标签（在head中）

用来描述一个html网页文档属性，关键词等。例如：charset="utf-8"说明当前使用utf-8编码格式，常见的还有gbk.

6.body标签（与head标签同级）

网页的“主体部分”，所有你在浏览器中看到的内容（文字、图片、按钮、链接等）都写在这里。

常见 <body>中的标签有：

标签	作用
`<h1>`到 `<h6>`	标题，`<h1>`是最高级标题
`<p>`	段落文本
`<a href="...">链接</a>`	超链接
`<img src="..." alt="...">`	图片
`<div>`/ `<span>`	块级或行内容器，用于布局和样式
`<ul>`/ `<ol>`/ `<li>`	列表相关
`<form>`/ `<input>`/ `<button>`	表单控件

常用标签：

1.标题标签（Heading Tags）—— 语义化的重要标签

生成h1-h6快捷键:h$*6

属性align调整位置

2.段落与文本标签

标签	说明	示例
`<p>`	段落	`<p>这是一个段落。</p>`
`<br>`	换行（自闭合标签）	文本换到下一行
`<hr>`	水平分割线（自闭合）	`<hr>`
`<strong>`或 `<b>`	加粗（推荐 `<strong>`有语义：表示重要内容）	`<strong>重要文字</strong>`
`<em>`或 `<i>`	斜体（推荐 `<em>`表示强调）	`<em>强调的文字</em>`
`<span>`	行内容器，用于样式或脚本操作	`<span style="color:red;">红色文字</span>`

<html><head><title>我的第一个网页</title></head><body>欢迎来到自由日记！<h1 align="center">一级标题</h1><h2 align="left">二级标题</h2><h3 align="right">三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><p>这是一个段落</p><p>这是一个段落<br>换行</p><hr color="red" size="10" width="500px"><hr color="blue" size="10" width="500px" align="left"><hr color="green" size="10" width="500px" align="right"></body>
</html>

3.媒体与资源类标签

标签	用途	示例
`<img>`	插入图片（自闭合标签）	`<img src="image.jpg" alt="描述文字">`
`<audio>`	嵌入音频	`<audio controls><source src="sound.mp3"></audio>`
`<video>`	嵌入视频	`<video controls><source src="video.mp4"></video>`
`<iframe>`	嵌入另一个网页（如地图、视频）	`<iframe src="https://www.example.com"></iframe>`

将下载的资源放在代码相同路径下（相对路径）了解一下（绝对路径，相对路径，网络路径）

相对路径：
子级关系：/
父级关系：../
同级关系：./(可省略）

<html><head><title>我的第一个网页</title></head><body><img src="1.png" alt="当无法显示该图片时，会显示该文字" width="800px" title="鼠标放置上显示的文字"></body>
</html>

4.链接与导航类标签

标签	用途	示例
`<a>`	超链接（锚点）	`<a href="https://www.example.com">访问网站</a>`
`href="#"`	页面内锚点或空链接	`<a href="#top">回到顶部</a>`
`<nav>`	导航栏容器（语义化标签）	`<nav><a href="/">首页</a></nav>`

<html><head><title>我的第一个网页</title></head><body><a href="https://www.baidu.com" target="_blank">百度</a><a href="https://v.qq.com/" target="_blank">腾讯视频</a><a href="https://www.baidu.com" target="_blank"><img src="1.png" alt="当无法显示该图片时，会显示该文字" width="800px" title="点击该图片跳转网址"></a></body>
</html>

5.列表类标签

标签	用途	示例
`<ul>`	无序列表（项目符号）	`<ul><li>项目1</li><li>项目2</li></ul>`
`<ol>`	有序列表（数字排序）	`<ol><li>第一步</li><li>第二步</li></ol>`
`<li>`	列表项（用在 `<ul>`或 `<ol>`中）	`<li>列表内容</li>`

有序列表

<html><head><title>我的第一个网页</title></head><body><ol><li>苹果</li><li>香蕉</li><li>橘子</li><li>梨</li><li>葡萄</li><li>西瓜</li><li>桃子</li></ol><ol type="A"><li>苹果</li><li>香蕉</li><li>橘子</li><li>梨</li><li>葡萄</li><li>西瓜</li><li>桃子</li></ol><ol type="a"><li>苹果</li><li>香蕉</li><li>橘子</li><li>梨</li><li>葡萄</li><li>西瓜</li><li>桃子</li></ol><ol type="I"><li>苹果</li><li>香蕉</li><li>橘子</li><li>梨</li><li>葡萄</li><li>西瓜</li><li>桃子</li></ol><ol type="i"><li>水果</li><li>蔬菜<ol type="1"><li>白菜</li><li>菠菜</li><li>油菜</li><li>生菜</li><li>小白菜</li></ol></li><li>肉类</li><li>海鲜</li><li>葡萄</li><li>饮料</li><li>零食</li></ol></body>
</html>

无序列表（常用在导航）

快速生成ul+li的布局：ul>li*3(数字看自己）

6.表格类标签

快速生成表格结构：table>tr*2>td*2{文字}

`<table>`	表格	`<table><tr><td>单元格</td></tr></table>`
`<tr>`	表格行	`<tr>...</tr>`
`<td>`	表格单元格	`<td>内容</td>`
`<th>`	表头单元格	`<th>姓名</th>`

<html><head><title>我的第一个网页</title></head><body><table border="1" width="1000px" height="100px"><tr align="center"><td>姓名</td><td>年龄</td><td>性别</td><td>籍贯</td><td>联系电话</td><td>邮箱</td><td>地址</td><td>备注</td>	</tr><tr align="center"><td>张三</td><td>20</td><td>男</td><td>北京</td><td>13800138000</td><td>zhangsan@163.com</td><td>北京海淀区</td><td>备注</td></tr></table></body></body>
</html>

单元格合并

水平合并：保留左，删除右colspan

垂直合并：保留上，删除下rowspan

<html><head><title>我的第一个网页</title></head><body><P align="center">合并单元格6和7:colspan</P><p align="center">合并单元格15和20:rowspan</p><table border="1"><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td><td>单元格5</td></tr><tr><td colspan="2">单元格6</td><td>单元格8</td><td>单元格9</td><td>单元格10</td></tr><tr><td>单元格11</td><td>单元格12</td><td>单元格13</td><td>单元格14</td><td rowspan="2">单元格15</td></tr><td>单元格16</td><td>单元格17</td><td>单元格18</td></tr><tr><td>单元格21</td><td>单元格22</td><td>单元格23</td><td>单元格24</td><td>单元格25</td></tr><tr><td>单元格26</td><td>单元格27</td><td>单元格28</td><td>单元格29</td><td>单元格30</td></tr></table></body></body>
</html>

7.表单类标签

表单用于收集用户输入，比如登录、搜索、注册等。

标签	用途	示例
`<form>`	表单容器	`<form action="/submit" method="POST">...</form>`
`<input>`	输入框（有多种类型）	`<input type="text" placeholder="请输入姓名">`
`<textarea>`	多行文本输入框	`<textarea rows="4" cols="50"></textarea>`
`<button>`	按钮	`<button type="submit">提交</button>`
`<select>`+ `<option>`	下拉选择框	`<select><option>选项1</option></select>`
`<label>`	为表单控件定义标签（提升可用性）	`<label for="name">姓名：</label><input id="name" type="text">`

表单元素：表单容器，表单域，表单按钮

文本域：type="text"

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form>用户名 <input type="text"><input type="submit"></form>
</body></html>

密码框：type="password"

提交按钮：type="submit"

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form>用户名：<input type="text">密码：<input type="password"><input type="submit"><input type="submit" value="登录"</form>
</body></html>

8.布局与分组类标签（语义化）

这些标签用于组织和结构化页面内容，让代码更具可读性和 SEO 友好性。

标签	用途	示例
`<div>`	块级容器，用于布局或样式化分组	`<div class="header">...</div>`
`<span>`	行内容器，用于文本内分组或样式	`<span>高亮</span>`
`<header>`	页面或区块的页眉	`<header><h1>网站标题</h1></header>`
`<footer>`	页面或区块的页脚	`<footer>版权信息</footer>`
`<section>`	一个主题性内容区块	`<section><h2>章节标题</h2>...</section>`
`<article>`	独立的内容块（如一篇博客文章）	`<article>...</article>`
`<aside>`	侧边栏或附加内容	`<aside>相关链接</aside>`

✅ 这些都属于 HTML5 语义化标签，能提升代码可读性、SEO 和可访问性。

块元素和行内元素

特性	块级元素（Block）上下摆放	行内元素（Inline）（内联元素）左右摆放	行内块元素（Inline-block）
是否独占一行	✅ 是（自下向上垂直排列）	❌ 否	❌ 否
能否设置宽高	✅ 可以	❌ 默认不行	✅ 可以
能否设置 margin/padding	✅ 可以（四周都有效）	✅ 水平有效，垂直可能不占空间	✅ 可以（四周都有效）
宽度默认值	父容器的 100%	由内容决定	由内容决定
常见标签	`<div>`, `<p>`, `<h1>`, `<section>`	`<span>`, `<a>`, `<strong>`, `<img>`（特殊）	`<img>`, `<input>`, 通过 CSS 设置的元素
用途	布局、结构	文本内容修饰、链接等	既要在一行，又要控制大小的元素
包含关系	一般块级元素可以包含行内元素和其他块级元素	一般内联元素包含内联元素不包含块级元素