第一章:HTML基础

myzbx 2024-12-01 18:22 25 浏览

1.1 HTML的起源和发展

HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。它的起源可以追溯到1989年，当时一位名叫蒂姆·伯纳斯-李的物理学家在CERN（欧洲核子研究中心）工作时，他想寻找一种更好的方式来共享研究论文和其他信息。他开发了一种名为ENQUIRE的项目，可以通过超链接把相关的文档连接在一起。之后，他决定开发一种更具普遍性的系统，这就是HTML的起源。

HTML的发展历程可以分为以下几个阶段：

HTML 1.0（1991年发布）：这是HTML的最初版本，只包含很少的标记，如<h1>、<p>、<br>等。它不能包含图像、表格等高级元素。
HTML 2.0（1995年发布）：这个版本增加了表格、图像等高级元素，也引入了一些新的标记，如<img>、<table>等。
HTML 3.2（1997年发布）：这个版本增加了表单元素和CSS样式表。
HTML 4.01（1999年发布）：这个版本增加了一些新的元素和属性，如<iframe>、<label>等。也引入了一些新的特性，如框架、样式表和脚本。
XHTML 1.0（2000年发布）：这个版本是HTML的一种XML变体，用更严谨、严格的方式规定了标记的使用。它也包括了一些新的标记和属性。
HTML5（2014年发布）：这个版本是HTML的最新版本，增加了一些新的元素和属性，如<canvas>、<audio>、<video>等。它还增加了更多的语义标记，使网页内容更易于理解和访问。

HTML已成为创建网页的标准语言之一，随着技术的不断进步和应用场景的不断扩大，HTML也在不断发展和演变。

1.2 HTML元素和标记

HTML元素是在网页中创建结构的基本单位，它由开始标记和结束标记组成，并包含了中间的内容。HTML元素可以包含其他元素和标记，以此来构建复杂的网页结构。

HTML标记是一些特殊的代码，用于将文本转换成浏览器中呈现的网页内容。它们起到指示浏览器应该如何显示页面内容的作用。

以下是一些常见的HTML标记：

<html> 标签表示 HTML 文档的根元素；
<head> 标签包含了文档的头部信息，如文档的标题、样式表等；
<title> 标签用于定义文档的标题，它会显示在浏览器的标题栏上；
<body> 标签包含了文档的主要内容部分；
<h1> 到 <h6> 标签表示标题，其中 h1 是最高级别的标题；
<p> 标签表示一个段落；
<img> 标签用于插入一个图片；
<a> 标签表示一个链接；
<ul> 和 <li> 标签用于创建无序列表；
<ol> 和 <li> 标签用于创建有序列表；
<table>、<tr>、<td> 表示表格和表格的行列。

在每一个标签中，还可以添加一些属性来定义标记的特性，例如：

class 和 id 属性可以用于设置样式或指定元素的唯一标识符；
href 属性可以用于指定链接的目标地址；
src 属性可以用于指定图片或其他媒体文件的地址；
style 属性可以用于设置元素的样式，例如字体大小、颜色等。

需要注意的是，在编写 HTML 代码时应遵守一定的语法规则，例如标签应该正确嵌套，属性值应该用双引号引起来等，这些都是为了保证页面的正确性和展示效果。

1.3 HTML表单和输入控件

HTML表单是一个用于收集用户信息的交互性模块，它由一组表单元素和相应的表单控件组成。以下是一些常见的HTML表单元素和输入控件：

<form> 元素用于创建一个表单，在其中包含各种输入控件。例如：

<form>
  <!-- 输入控件 -->
</form>

<input> 元素是用于创建一个输入控件的基本元素。它有多个不同的类型，如文本输入框、密码输入框、单选按钮、复选框、文件上传框等。例如：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">密码：</label>
  <input type="password" id="password" name="password"><br>

  <input type="submit" value="登录">
</form>

在这个例子中，我们创建了一个包含两个文本输入框和一个提交按钮的表单。第一个输入框是用于输入用户名的，第二个是密码输入框。type 属性指定了这两个输入框的类型，其中 type="text" 表示是文本输入框，type="password" 表示是密码输入框。name 属性用于指定此输入框的名称，后续在后台可以根据这个名称获取输入框中的值。id 属性用于指定此输入框的唯一标识符，通常与 for 属性一起使用。

<select> 元素是用于创建一个下拉列表的元素，它包含多个 <option> 元素，表示每一个选项。例如：

<form>
  <label for="fruit-select">选择一个水果：</label>
  <select name="fruit" id="fruit-select">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
  </select>
</form>

在这个例子中，我们创建了一个下拉列表用于选择水果。name 属性用于指定此下拉列表的名称，可以在后台根据此名称获取选择的值。每一个 <option> 元素包含了选项的文本和值。value 属性用于指定选项的值，当提交表单时，这个值将被发送到服务器。

<textarea> 元素用于创建一个多行文本输入框。例如：

<form>
  <label for="comment">留言：</label>
  <textarea id="comment" name="comment" rows="5" cols="50"></textarea>
</form>

在这个例子中，我们创建了一个多行文本输入框。rows 属性用于指定文本框的行数，cols 属性用于指定文本框的列数。这些属性只是用于设置文本框的尺寸，它不会限制用户输入的文字数量。

HTML表单和输入控件提供了一种方便的方式来收集用户的信息和数据。它们不仅可以用于注册页面和登录页面，还可以用于不同类型的数据收集和展示。

HTML 基础教程

上一篇：html基础必备，前端小白一看就会
下一篇：CSS网页布局基础教程

第一章:HTML基础

1.1 HTML的起源和发展

1.2 HTML元素和标记

1.3 HTML表单和输入控件

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

这么牛逼的cursor功能，赶紧用起来

8.7k star，一款超炫酷的动态可视化大屏项目

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」