HTML学习总结

HTML学习总结

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

HTML简介

HTML是超文本标记语言（HyperText Markup Language）的缩写。
超文本（hypertext）是指连接单个网站内或多个网站间的网页的链接。
HTML不是一门编程语言，而是一种用于定义结构的标记语言。它定义了网页的内容以及结构，但本身也存在一些缺陷，一般与CSS和JavaScript结合使用。

开发工具

选用Vscode。

HTML元素

HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如 ，

• -: 声明文档类型。出于历史原因需要，现在可有可无。
• : 元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
• : 元素。 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
• : 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
• : 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)
• : 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
• : 元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

标题

共提供了6级标题，从大到小为

~

。
作用：

1. 搜索引擎用标题来索引页面的内容
2. 用户也习惯以标题进行主要内容浏览，以决定是否查看该页面

超链接a

超链接语法

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

说明

• href即为要跳转去的地址 URL（Uniform Resorce Locator)
• target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
• 超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的

图片及文件路径img

图片示例

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

说明

• src属性为要显示图片文件的位置 URL，即图片文件的路径
• alt属性当获取图片出现问题时显示的文字（占位符）
• 可为图片指定高宽度，但不建议（可能导致图片变形）

文件路径

为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。

表格 Table

-`  <table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>

效果图

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94

列表 List

列表来呈现内容，分为无序列表和有序列表。
无序列表
无序列表使用<ul>标签，默认使用实心圆点作为每项的标志。
有序列表
有序列表使用<ol>标签，默认使用数字作为每项的标志。

表单 Form

当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。
请输入如下代码进行学习：

<form>
  <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
  年龄：<br>
  <!-- 数字输入框，注意 min 和 value 属性-->
  <input type="number" name="age" min="18" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别：<br>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其它<br>
  <!-- 下拉列表，注意 selected 属性 -->
  党派：<br>
  <select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select><br>
  <!-- 多选框 -->
  您有哪些交通工具：<br>
  <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
  <!-- 日期选择器 -->
  您的工作日期：<br>
  <input type="date"><br>
  <!-- 文件选择器 -->
  上传您的照片:<br>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域，注意 rows 和 cols 属性 -->
  您的建议：<br>
  <textarea name="message" rows="5" cols="30">
    The cat was playing in the garden.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>

效果图

总结

本以为和python这类的编程语言的学习类似，学了之后才发现html学习相对简单，也和编程类的语言不同，上手比较同意，逻辑更符合人的思维方式，便于学习，并且简单的几行代码就能让界面变得生动有趣，更能吸引我学习。