HTML知识总结

---

前言

经过一段时间的学习，在课堂上的理论与期末综合实践的web前端相结合，尽管在综合实践里已经接触到了一些模板和样式，所谓好记性不如烂笔头，趁着对知识还较为熟念，在这里用markdown写下一份对html和css的总结，希望在总结和复习中学习到新的知识，以及对旧的知识能有更好的理解。

---

一、HTML的定义

HTML，是超文本标记语言的缩写，是将网页设计者的idea转化成浏览器看得懂的语言，也是目前网络上应用最广泛的语言。HTML也在不断的更新，最新版本已经出现了HTML5。在HTML5中出现了许多新特性，也遗弃了一些旧元素。我们写好html文件后，在浏览器中打开。主流的浏览器包括IE、Firefox、Chrome、Goole等。其中Chrome10以上浏览器和edge浏览器为佳。

二、认识HTML

1.HTML的结构

万丈高楼平地起，无论是多么复杂的页面都是从一个小框架搭起来的，我们先来看看HTML的最基本框架：

以上是HTML的基本框架。

2.HTML运用

熟悉了HTML框架以后，我们来认识一下HTML的标签。
HTML段落是通过<p>来定义;
HTML链接是通过 <a>来定义;
标签 <img>用来定义图像;
标签<alt>用于替用;
标签<br>表示换行;
标签<center>用于文本的居中;
标签<div>表示内容之间分隔;
标签<dl>用于定义列表;
标签<ol>用于排序列表;
标签<ul>表示不排序列表;
标签<h1-6>表示标题1到标题6，有大小之分;
标签<hr>用于在内容之间有一条水平线;
标签<pre>表示用户预定义格式;
标签<span>表示一个范围;
标签<td>表示表格中的内容;
标签<th>表示表格中的表头;
标签<tr>表示表格中的一行。
标签<!-- -->用于注释代码

3.HTML的一些知识点

空元素

一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如<br>, <hr>, <input>, <img>, <a>等等。我们称其为空元素。

元素的属性

元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。一个属性必须包含如下内容：
1、一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
2、属性名称，后面跟着一个 = 号。
3、一个属性值，由一对引号 “” 引起来。

标题

HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>。
在页面中，标题非常重要：
1、搜索引擎用标题来索引页面的内容。
2、用户也习惯以标题进行主要内容浏览，以决定是否查看该页面。

文本格式

我们需要知道的文本格式标签如下：

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

超链接

没有超链接就没有万维网（World Wide Web）。基本上，我们可以把任何东西加上超链接，不过常用的是文本、图片等。
超链接语法：

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

图片及文件路径

在页面中插入一张图片如下：

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

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

文件路径

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

表格

有时，页面的内容需要用表格来进行呈现。我们使用<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>

代码中，表示行, 表示行中的单元, 是表头的单元（将会加粗显示）

列表

我们也可以使用列表来呈现内容，分为无序列表和有序列表。
无序列表

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

无序列表使用|

• 标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。

<ul type="square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

有序列表

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

表单

当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（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>

总结

网页作为承载人们的乐趣的一大方式，以它便捷轻量，样式丰富的开发吸引了开发者和用户的注意。在日常的接触中我领略到了网页内容的千变万化，特效的光影流转，终于在学习了web应用基础后一步步揭开了网页神秘的面纱。一步步看见敲下的一行行代码变成酷炫的光影和动画，终于理解到了互联网论坛网友们所讨论的技术，意识到它的伟大之处。从而自己也投入到提供创意灵感的开发者当中。

对于非专业的开发者或者普通的个人开发者，HTML代码的易读性，易上手性为他们提供了很好的灵感展示平台，只要用心去写，用心建筑。一定能让自己的灵感绽放。随着科技越来越发达，社会信息越来越广泛，每个人都有了可以被看见的机会，每个人都有机会成为一名创作者，那么利用信息技术去展示自己的才华就变得尤为重要，降低技术门槛有利于让互联网文化多姿多彩，精彩纷呈。所以学习HTML不仅对于前端开发工程师，对于个人创作者也是非常有利的工具。

网页与我们的生活联系紧密，一定程度上，让学习网页开发变得容易理解，也有利于灵感的迸发。但是学习是没有止境的，总能想到新的点子与你过往的学习经验不匹配，这时候，打下基础就变得尤为重要，我相信，带着这些基础，我们未开的开发生活一定会开花结果。
（chj）