20171030_任务一：零基础HTML编码

 

 

 

   看了《JavaScript语言精粹》和《精通CSS》，感觉还是需要大量的实践，开始做百度前端技术学院的题目。

  按照它推荐的顺序，从小薇学院开始，任务一是零基础HTML编码，要求按照其给的图片，做出类似的HTML页面。总体来说，前面还比较顺利，包括标题、段落、链接、换行、粗体的设置等等。但后面涉及表格、表单的部分就力不从心了。

  我的最终完成效果大概是下面这个样子：

  我找了一些学员的作品进行对比，发现问题大概如下：

  1、示例中显示的链接样式，但是我并不知道其链接到哪里，所以没有为href设置指向

  

  实际上可以将href指向字符“#”：

  2、字符间的空格我是直接输入的空格，实际上应该使用“ ”来分隔字符，&nbsp指的是不换行空格。

  3、应为图片设置alt属性。

  4、设置字体为粗体的话，涉及到区分<strong>和<b>两个属性。

  <b>元素表示相对于普通文本字体上的区别，但不表示任何特殊的强调或关联，通常以粗体显示。<strong>表示文本十分重要，一般用粗体显示。

  5、当排列多张图片时，应使用<dl>元素增强页面的结构性。

  <dl>元素（HTML描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据（键-值对列表）。<dd>（HTML文档分区元素）用来指明一个描述列表（<dl>）元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个<dt>元素。<dt>元素（HTML术语定义元素）用于在一个定义列表中声明一个术语。该元素仅能作为<dl>的子元素出现。通常在该元素后面会跟着<dd>元素，然而，多个连续出现的<dt>元素都将由出现在它们后面的第一个<dd>元素定义。

  6、设置表格的边框大小，单位为px：<table border="1">

  7、<tbody>标签：表示表格主体，用于组合HTML表格的主体内容。应该与thead和tfoot元素结合起来使用。thead元素用于对HTML表格中的表头内容进行分组，而tfoot元素用于对HTML表格中的表注（页脚）内容进行分组。但如果使用这三个元素的话，就必须全部使用，它们的出现次序是thead、tfoot、tbody。

  8、colspan属性规定单元格可横跨的列数：

  9、form元素表示文档中的一个区域，定义HTML表单，这个区域包含由交互控制元件，用来向web服务器提交信息。

  method属性规定在提交表单时所用的HTTP方法（GET或POST）。GET指默认方法，适合少量数据的提交，浏览器会设置容量限制。POST更安全，应为其在页面地址中被提交的数据是不可见的。

  action属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到web服务器上的网页。如果省略action属性，则action会被设置为当前页面。

 

  10、input元素中的value是指默认显示的文本。

  11、

  12、

  13、

  14、

footer标签定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等。

注意html中普通字符的输入方式可能不同。

  15、我的html文档中少了meta部分，但是加上后变成了乱码，还没有发现问题出在哪里。

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">中<meta>元素提供有关页面的元信息，位于文章的头部，不包含任何内容，没有结束标签。当服务器向浏览器发送文档时，会发送许多名称/值对，上面这句话就是向服务器发送了名称/值对：content-type:text/html，这将告诉浏览器准备接受一个HTML文档。charset=utf-8指的是编码方式为utf-8编码。