任务目的
- 了解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”属性加粗字体。
二、github地址:https://github.com/Nunawading2016/2017-IFE-Baidu.git