从零开始学前端之HTML（不包含css以及js）
npc码农 2024-10-12 17:03:05 阅读 55
注意：教程并非官方文档，有一定缺陷（后续可能会重写更新），在此之前建议配合官方或者权威教程官网使用（推荐以下这些网站）
HTML 布局 (w3school.com.cn)
HTML Tutorial (w3schools.com)
HTML 教程 | 菜鸟教程 (runoob.com)
引言
在当前的前端开发领域，虽然各种 UI 框架如 Bootstrap、Vue.js 和 React 可以帮助我们快速构建美观的界面，但这些框架在某些情况下可能无法满足高度定制化的需求。为了实现精细的界面设计和独特的用户体验，掌握 HTML、CSS 和 JavaScript 仍然至关重要。
HTML 是网页内容的骨架，CSS 负责网页的视觉样式和布局，而 JavaScript 则赋予网页交互性。即使使用了高级框架，了解这些基础技术能帮助你在框架的基础上进行深度定制，打造出独具特色的界面和组件。同时，深入学习 HTML、CSS 和 JavaScript 也有助于你理解前端技术的实现原理，从而在面对复杂的开发需求时游刃有余。
因此，掌握 HTML、CSS 和 JavaScript 是任何前端开发者不可或缺的技能，它们不仅为你提供了制作精美界面的能力，还能帮助你更好地理解和利用各种前端框架。
一、HTML的简介、起源与发展（了解一下就行）
HTML（超文本标记语言，HyperText Markup Language）的诞生是互联网发展的一个重要里程碑。它的出现标志着万维网（World Wide Web）的诞生，使得信息可以以一种结构化和可链接的方式在互联网上呈现和访问。
起源
20世纪80年代，伴随计算机网络的兴起，科研人员开始寻求一种方法来共享信息，当时的互联网主要用于学术和军事，但没有一种标准的方法来展示和连接不同类型的文档在1989年，英国计算机科学家蒂姆·伯纳斯-李（Tim Berners-Lee）在欧洲核子研究中心（CERN）工作时，提出了一个系统，旨在通过互联网共享和连接信息。他的想法是创建一个全球信息系统，允许用户通过“超链接”轻松地访问和导航不同的文档1990 年，蒂姆·伯纳斯-李编写了第一个 Web 浏览器和第一个 Web 服务器，作为他全球信息系统的基础。为了标记和结构化文档，他发明了一种标记语言，这就是 HTML 的原型。1991 年，蒂姆·伯纳斯-李发布了 HTML 的第一个版本，它包含了少量的标签，用于定义文档的结构，如标题、段落、列表和超链接。HTML 允许文档包含嵌入的超链接，从而使用户能够轻松地在不同的文档之间导航。
发展
HTML 标准化: 随着互联网的发展，HTML 的使用越来越广泛，各种浏览器开始支持不同版本的 HTML。为了确保互操作性，万维网联盟（W3C）在 1994 年成立，负责 HTML 的标准化。W3C 先后发布了多个版本的 HTML 标准，逐步扩展了 HTML 的功能，并改进了其结构。
HTML 发展:
HTML 2.0 (1995 年): 第一个标准化的 HTML 版本，包含了基本的标签和功能。HTML 4.0 (1997 年): 引入了更丰富的标签、表单和样式表（CSS）支持，使得网页内容更具表现力和可控性。XHTML (2000 年): 基于 XML 的 HTML 版本，强调语法的严格性。HTML5 (2014 年): 最现代化的 HTML 版本，添加了对多媒体、图形、离线存储等现代 Web 应用需求的支持，使得 Web 应用开发更为强大和灵活。
二、HTML教程
注意：HTML主要是一种标记语言，核心功能是用来描述和结构化Web内容，所以通常没有逻辑操作
1、基础语法
元素标签
HTML 文档的基本组成部分是元素（元素标签）。每个元素通常由一个开始标签、一个结束标签和它们之间的内容组成。
<code><p>Hello World</p>
属性
元素可以包含属性，用于提供关于该元素的附加信息。属性总是以名称-值对的形式存在，通常放在开始标签中。
<a href="https://www.baidu.com/">百度一下</a>code>
自闭合标签
有些 HTML 元素是自闭合的，简单说就是它们没有结束标签。自闭合标签在 HTML5 中通常使用开始标签并在结束时加上 /，但在现代 HTML 中，这种斜杠是可选的。
<br/>
嵌套结构
HTML 标签可以嵌套在其他标签内，以形成文档的层次结构。正确的嵌套对 HTML 文档的可读性和结构性非常重要
<div>
<h1>一级标题</h1>
<p>这是一个p标签</p>
</div>
文本内容
HTML 元素可以包含文本内容，这些内容会在网页上显示给用户。文本内容可以是任何字符或字符串。
<p>这是一个p标签</p>
注释
HTML 支持注释，它们不会被浏览器渲染出来，但可以用来在代码中添加说明或备注。
<!-- 这是一个提示，下方的标签是p标签 -->
<p>正文内容正文内容正文内容正文内容正文内容</p>
实体
HTML 使用字符实体来表示特殊字符，这些字符在 HTML 中有特殊意义或不能直接输入。
&entity_name;
<p>Use < and > to display less than and greater than signs.</p>
HTML 文档结构
文档类型声明（Doctype） 作用: <!DOCTYPE html> 是 HTML5 中的文档类型声明，它告诉浏览器使用 HTML5 标准来解析文档，确保浏览器以标准模式渲染页面。
HTML文档的基本结构：
文档结构的根元素<html>：
作用: <html> 元素是 HTML 文档的根元素，它包含了整个页面的内容。
详细说明：
<html>标签必须是文档的最外层标签
它可以包含两个主要部分：<head> 和 <body>。
包含元数据<head>：
作用: <head> 部分包含有关文档的元数据和外部资源的链接，如样式表和脚本。
常见标签
<meta>：用于定义文档的元数据，如字符集，视口设备<title>：设置页面的标题，这个标题会显示在浏览器标签栏或窗口标题中<link>：用于连接外部样式表<script>：用于链接外部JavaScript文件或嵌入JavaScript代码，在做嵌入时可以与head标签同级
页面主体内容<body>
作用: <body> 部分包含页面的可见内容，如文本、图像、链接和其他元素。
2、常用元素标签
结构标签:
<div>块级元素，用于容纳其他元素并分组（很重要的标签）
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<div style="background-color: aqua;">code>
<p>
张三
</p>
</div>
</body>
</html>
<span>行内元素，用于包装文本以应用样式。
<p>这是一个 <span style="color: red;">红色</span> 的文本。</p>code>
<header>头部区域，通常包含导航和标志。
<header>
<h1>网站标题</h1>
<nav>
<a href="#home">首页</a>code>
<a href="#about">关于我们</a>code>
</nav>
</header>
<footer>页脚区域，通常包含版权信息和联系信息。
<footer>
<p>© 2024 公司名. 版权所有.</p>
</footer>
<section>章节元素，用于将内容分成逻辑部分。
<section>
<h2>章节标题</h2>
<p>这是章节内容。</p>
</section>
<article>文章元素，用于表示独立的内容部分。
<article>
<h2>文章标题</h2>
<p>这是文章内容。</p>
</article>
<nav>导航元素，用于定义导航链接。
<nav>
<a href="#home">首页</a>code>
<a href="#services">服务</a>code>
<a href="#contact">联系我们</a>code>
</nav>
<aside>：侧边栏内容，通常包含与主要内容相关的次要信息。
<aside>
<h2>侧边栏标题</h2>
<p>这是侧边栏内容。</p>
</aside>
<main>：文档的主要内容区域，用于标识文档主体部分。
<main>
<h1>主要内容</h1>
<p>这是文档的主要内容部分。</p>
</main>
文本标签:
<h1>至<h6>（标题）标题元素，从 <h1>到<h6>表示不同级别的标题。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>（段落）段落元素，用于显示一段文本。
<p>这是一个段落。</p>
<a>（链接）超链接元素，用于创建链接到其他页面或资源。
<a href="https://www.example.com">访问示例网站</a>code>
<strong>（加粗）用于强调文本
<p>这是一段 <strong>加粗</strong> 的文本。</p>
<em>（斜体）用于强调文本
<p>这是一段 <em>斜体</em> 的文本。</p>
<br>：换行符，用于在文本中插入换行。
<p>这是第一行。<br>这是第二行。</p>
<blockquote>：引用块元素，用于引用长段落内容。
<blockquote>
<p>这是一个引用块的示例。</p>
</blockquote>
<code>：代码元素，用于标记代码片段。
<code>console.log('Hello, world!');</code>
列表标签:
<ul>（无序列表）无序列表，用于创建项目符号列表。
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<ol>（有序列表）有序列表，用于创建编号列表。
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<li>（列表项）列表项，用于定义列表中的每个项。
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<dl>（定义列表）：定义列表，用于描述术语及其定义。
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>
<dt>（定义术语）：用于在定义列表中表示术语。
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
</dl>
<dd>（定义描述）：用于在定义列表中表示术语的描述。
<dl>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>
表格标签:
<table>表格元素，用于创建表格布局。
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>
<tr>（行）用于定义表格中的一行。
<tr>
<td>张三</td>
<td>25</td>
</tr>
<td>（单元格）用于定义表格中的一个单元格。
<tr>
<td>张三</td>
<td>25</td>
</tr>
<th>（表头）用于定义表头单元格，通常为粗体显示。
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<thead>：表头部分，用于对表格头部进行分组。
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</tbody>
</table>
<tbody>：表格主体部分，用于对表格主体内容进行分组。
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</tbody>
</table>
<tfoot>：表格尾部部分，用于对表格尾部内容进行分组。
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">表格尾部</td>code>
</tr>
</tfoot>
</table>
表单标签:
<form>表单元素，用于创建用户输入表单。
<form action="/submit" method="post">code>
<label for="name">姓名：</label>code>
<input type="text" id="name" name="name">code>
<button type="submit">提交</button>code>
</form>
<input>输入控件，用于创建各种输入字段。
<input type="text" id="name" name="name">code>
<label>标签元素，用于绑定表单控件，使其与对应的表单字段关联。
<label for="name">姓名：</label>code>
<input type="text" id="name" name="name">code>
<textarea>多行文本输入，用于输入长文本内容。
<label for="message">消息：</label>code>
<textarea id="message" name="message"></textarea>code>
<button>按钮元素，用于创建按钮。
<button type="submit">提交</button>code>
<select>下拉选择框，用于创建一个带有多个选项的下拉列表。
<label for="department">部门：</label>code>
<select id="department" name="department">code>
<option value="hr">人力资源</option>code>
<option value="it">信息技术</option>code>
<option value="sales">销售</option>code>
</select>
<option>：选择项元素，用于定义下拉选择框中的选项。
<option value="hr">人力资源</option>code>
<fieldset>：字段集，用于将表单内的元素分组。
<fieldset>
<legend>个人信息</legend>
<label for="name">姓名：</label>code>
<input type="text" id="name" name="name">code>
</fieldset>
<legend>：字段集的标题，通常与 <fieldset> 配合使用。
<fieldset>
<legend>个人信息</legend>
<label for="name">姓名：</label>code>
<input type="text" id="name" name="name">code>
</fieldset>
多媒体标签:
<img>图像元素，用于显示图片。
<img src="https://www.example.com/image.jpg" alt="示例图片">code>
<audio>视频元素，用于嵌入视频内容。
<audio controls>
<source src="audio.mp3" type="audio/mp3">code>
您的浏览器不支持音频元素。
</audio>
<video>音频元素，用于嵌入音频内容。
<video controls width="320" height="240">code>
<source src="video.mp4" type="video/mp4">code>
您的浏览器不支持视频元素。
</video>
<iframe>内联框架，用于在页面中嵌入另一个 HTML 页面。
<iframe src="https://www.example.com" width="600" height="400"></iframe>code>
<embed>：嵌入外部内容，用于嵌入外部资源（如PDF、Flash等）
<embed src="file.pdf" width="600" height="400">code>
<object>：对象元素，用于嵌入多种外部资源
<object data="file.pdf" type="application/pdf" width="600" height="400">code>
备用内容：您的浏览器不支持对象标签。
</object>
<param>：参数元素，用于为 <object> 标签提供参数
<object data="movie.swf" type="application/x-shockwave-flash" width="400" height="300">code>
<param name="autoplay" value="true">code>
备用内容：您的浏览器不支持对象标签。
</object>
脚本和样式标签：
<script>：脚本元素，用于嵌入或引用JavaScript代码
<script>
console.log('Hello, world!');
</script>
<noscript>：非脚本内容，用于在浏览器不支持或禁用JavaScript时显示的内容
<noscript>
您的浏览器不支持JavaScript，或JavaScript已被禁用。
</noscript>
<style>：样式元素，用于嵌入CSS代码
<style>
body {
background-color: lightblue;
}
</style>
<link>：链接元素，用于引用外部CSS文件
<link rel="stylesheet" href="styles.css">code>
元数据标签：
<meta>：元数据元素，用于提供页面的元数据
<meta charset="UTF-8">code>
<meta name="description" content="示例网页">code>
<meta name="keywords" content="HTML, CSS, JavaScript">code>
<meta name="author" content="作者姓名">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>：标题元素，用于指定页面的标题
<title>示例网页</title>
<base>：基础URL，用于设置页面上所有相对URL的基准URL
<base href="https://www.example.com/">code>
3、语义化 HTML
语义化标签: 理解语义化 HTML 的重要性，学会使用语义化标签使页面内容更加结构化和易于理解。语义化标签不仅有助于 SEO（搜索引擎优化），还提高了代码的可读性和维护性。常见的语义化标签包括：
<header>：定义文档的头部，通常包含导航菜单或引言。<nav>：定义导航链接的区域。<article>：定义独立的内容块，如博客文章或新闻条目。<aside>：定义侧边栏或附属内容，通常与主内容无直接关系。<footer>：定义文档的底部，通常包含版权声明、联系信息等。
可访问性（Accessibility）: 掌握如何编写可访问性好的 HTML，提高页面对残障用户的友好度，如使用 alt 属性为图片添加描述、使用 ARIA 标签等。
使用 alt 属性为图片提供描述性文本，确保屏幕阅读器用户能够理解图片内容。使用 ARIA（Accessible Rich Internet Applications）标签增强页面的可访问性，如 aria-label、aria-labelledby 和 aria-describedby，这些标签可以帮助描述界面元素的功能和状态。
4、表单与用户输入
表单控件: 了解如何创建和使用各种表单控件（如文本框、单选按钮、复选框、下拉列表等）。
文本框 (<input type="text">code>)：用于输入单行文本。单选按钮 (<input type="radio">code>)：用于选择一个选项。复选框 (<input type="checkbox">code>)：用于选择多个选项。下拉列表 (<select>): 提供多个选择项的下拉菜单。
表单验证: 学习基础的 HTML 表单验证，如使用 required、minlength、pattern 等属性来验证用户输入，HTML 表单验证功能来确保用户输入的有效性：
required：确保字段必须填写。minlength 和 maxlength：设置输入文本的最小和最大长度。pattern：使用正则表达式模式验证输入的格式。
5、媒体和嵌入内容
图像和多媒体: 学习如何在网页中嵌入图像、音频、视频等多媒体内容，以及如何使用 <iframe> 嵌入其他网页或地图。以增强页面的视觉和功能：
使用 <img> 标签嵌入图像。使用 <audio> 和 <video> 标签嵌入音频和视频内容。使用 <iframe> 嵌入其他网页、地图或其他外部内容。
响应式图片: 了解如何使用 srcset 和 picture 元素来实现响应式图片，适应不同设备和分辨率。
使用响应式技术确保图片在不同设备和分辨率下显示良好：
使用 srcset 属性为不同屏幕分辨率提供不同尺寸的图片。使用 <picture> 元素，根据设备特性选择合适的图片格式和尺寸。
6、链接和导航
超链接: 学习如何使用 <a> 标签创建内部链接、外部链接、锚点链接，以及如何控制链接在新标签页中打开。
内部链接：链接到同一网站的不同页面。外部链接：链接到其他网站的页面。锚点链接：链接到页面中的特定位置。使用 target="_blank"code> 属性在新标签页中打开链接。
导航栏: 学会使用列表和链接创建网站的导航栏，使用列表和链接创建有效的导航栏：
使用 <ul> 和 <li> 标签创建无序列表，用于构建导航菜单。使用 CSS 样式化导航栏，使其符合网站设计。
7、HTML 与 CSS、JavaScript 的结合
CSS: 掌握如何使用 <style> 标签或 <link> 标签将 CSS 引入 HTML 文档，控制页面的外观和布局。
<style> 标签用于在文档内部定义样式。<link> 标签用于引用外部 CSS 文件，推荐用于组织和管理较大样式表。
JavaScript: 学习如何通过 <script> 标签引入 JavaScript，增强页面的交互性和动态效果。
<script> 标签可以放置在文档的 <head> 或 <body> 中。了解如何将 JavaScript 代码分离到外部文件中，并通过 src 属性引入。
8、实践(图书馆系统简化版本)
注意：这个教程只会使用到html所以界面美观和互动能力将大打折扣
1、创建一个存放项目的文件夹（这里命名为library）并使用vscode打开
2、在library下创建一个登录页面的html文件
3、登录页面(login)
用户名输入框密码输入框登录按钮注册按钮忘记密码快捷登录第三方登录
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<div>
<div>
<label for="username">用户名:</label>code>
<input type="text">code>
</div>
<div>
<label for="password">密码:</label>code>
<input type="password">code>
</div>
<div>
<button><a href="main.html">登录</a></button>code>
<button>注册</button>
</div>
<div>
<a href="">忘记密码</a>code>
</div>
<div>
<button>第三方登录</button>
</div>
</div>
</body>
</html>
4、主页面(Main)
书籍分类搜索框，搜索按钮读者指南图书封面及简介售价个人头像及用户名
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<!-- 这部分是顶部菜单栏 -->
<header>
<!-- 读者指南 -->
<div>
<a href="ReadersGuide.html"><p>读者指南</p></a>code>
</div>
<!-- 下拉筛选书籍 -->
<div>
<select name="" id="">code>
<option value="">历史</option>code>
<option value="">教育</option>code>
<option value="">人文</option>code>
<option value="">技工</option>code>
</select>
</div>
<!-- 搜索框搜索书籍 -->
<div>
<input type="text">code>
<button>搜索</button>
</div>
<!-- 用户头像及用户名 -->
<div>
<img src="" alt="">code>
<p>用户名</p>
</div>
</header>
<!-- 这部分是图书成列部分 -->
<main>
<section>
<a href="BookDetails.html">code>
<div>
<img src="" alt="">code>
<div>
<p>《书名》</p>
<P>简介</P>
<p>售价</p>
</div>
</div>
</a>
</section>
</main>
</body>
</html>
5、书籍页面(ReadersGuide)
书籍图片介绍书籍文字介绍（作者，简介，出版社，出版时间）
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<div>
<img src="" alt="">code>
<div>
<h2>书名</h2>
<hr>
<div>
<label for="">简介：</label>code>
<textarea>简介内容</textarea>
</div>
</div>
</div>
</body>
</html>
6、用户界面（User）
用户头像用户名个性签名收藏
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<header>
<div>
<img src="" alt="">code>
<div>
<p>用户名</p>
<br>
<p>个性签名</p>
</div>
</div>
</header>
<hr>
<main>
<ul>
<li>书架</li>
<li>历史</li>
<li>个人信息</li>
</ul>
</main>
</body>
</html>
7、读者指南（ReadersGuide）
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<div>
<!-- 视频指南 -->
<video src=""></video>code>
</div>
<div>
<!-- 文本指南 -->
<textarea name="" id="">文本指南</textarea>code>
</div>
</body>
</html>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。