零基础HTML编码学习笔记

任务目的

• 了解HTML的定义、概念、发展简史
• 掌握常用HTML标签的含义、用法
• 能够基于设计稿来合理规划HTML文档结构
• 理解语义化，合理地使用HTML标签来构建页面

任务描述：完成一个HTML页面代码编写（不写CSS，不需要关注样式，只关注文档结构）

任务注意事项

• 只需要完成HTML代码编写，不需要写CSS
• 示例图仅为参考，不需要完全实现一致，其中的图片、文案均可自行设定
• 尽可能多地尝试更多的HTML标签

 

总结

一、涉及HTML标签

1、<header>标签(Header Element)：是一个装载介绍性内容或一组导航链接的容器。

2、<nav>标签：定义一组导航链接。

3、<main>标签：页面主体内容，该内容在页面中是唯一的，且不包含页面中的重复内容，比如：侧边栏、导航链接、版权信息、网站logo和搜索框。

4、<aside>标签：定义一些与周围内容相关的其他内容。

5、<footer>标签：定义页面的脚部，可以为：作者信息、版权信息、联系信息、网站地图、返回页面顶部的链接、相关文件。一个页面中可有多个<footer>标签。

6、<article>标签：定义一段独立、自成体系的内容，它本身有完整的含义，可以独立于页面其他内容存在。

7、<hgroup>标签：是<h1>-<h6>标签的集合，用来定义多层级标题。

8、<ul>标签：无序列表（unordered list）。<li>标签定义无序列表的列表项。

9、<ol>标签：有序列表（ordered list）。<li>标签定义有序列表的列表项。

10、<dl>标签：描述性列表（description list）或定义列表。与<dt>标签（defines terms/names，定义项即标题）和<dd>标签（describes each term/name，定义描述即解释）一起使用。

11、<form>标签：可包含一个或多个以下标签：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>。

12、<input>标签：定义一个用户可以输入数据的输入区域。

（1）type属性：type属性定义输入区域的形式，属性值有：button、checkbox、color、 date、datetime-、local、email、file、hidden、image、month、number、password、radio、range、reset、search、submit、tel、text、time、url、week。

（2）checked属性：使用于checkbox、radio等类型，定义页面加载后预先选定<input>元素，属性值：checked。

（3）name属性：定义<input>元素的名称。属性值：文本。

（4）value属性：定义<input>元素的值。属性值：文本。

13、<select>标签：产生下拉列表。<select>标签内部的<option>标签定义列表的可选项。

14、<textarea>标签：多行文本输入框，可由cols和rows属性定义文本框大小。

（1）cols属性：文本框可视宽度，属性值：数字。

（2）rows属性：文本框可视行数，属性值：数字。

15、<table>标签：定义HTML表格。表格由一个或多个<tr>( defines a table row)、<th>( defines a table header)、<td>( defines a table cell)标签组成。

（1）border属性：围绕表格的边框的宽度。属性值：pixels值。

（2）<td>标签的colspan属性：单元格跨的行数。属性值：数字。

16、<a>标签：超链接，用于从一个页面链接到另一个页面。

（1）target属性：打开链接的方式。属性值：_blank、_parent、_self、_top、framename。

 

二、遇到问题

1、字体加粗

HTML5中规定：使用<h1>到<h6>定义标题，强调内容(emphasized text)使用<em>标签，重要文本使用<strong>标签，突出高亮显示的文本使用<mark>标签，当以上情况都不符合时使用<b>标签加粗字体。

同时，可以使用CSS的“font-weight”属性加粗字体。

 

三、已提交作业

代码地址：https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/任务一：零基础HTML编码

Demo地址：http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/任务一：零基础HTML编码/index.html