html字体大小:第一章:HTML基础-字体教程免费ppt模版下载-道格办公
投稿
  1. JustNews首页
  2. 字体教程
  3. 第一章:HTML基础

第一章:HTML基础

作者: 道格办公 • • 字体教程 • 浏览量 664

1.1 HTML的起源和发展

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

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

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

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

1.2 HTML元素和标记

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

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

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

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

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

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

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


1.3 HTML表单和输入控件

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

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


  1. <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 属性一起使用。

  1. <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 属性用于指定选项的值，当提交表单时，这个值将被发送到服务器。

  1. <textarea> 元素用于创建一个多行文本输入框。例如：
<form>
  <label for="comment">留言：</label>
  <textarea id="comment" name="comment" rows="5" cols="50"></textarea>
</form>


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

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

文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/Chapter%201%20HTML%20Basics.html

赞 (810)
打赏 支付宝扫一扫 支付宝扫一扫
Lomu 李麒 专栏作者
48 196
single-end

相关推荐