任务目的

  • 了解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

零基础HTML编码学习笔记的更多相关文章

  1. 【转载】salesforce 零基础开发入门学习(二)变量基础知识,集合,表达式,流程控制语句

    salesforce 零基础开发入门学习(二)变量基础知识,集合,表达式,流程控制语句 salesforce如果简单的说可以大概分成两个部分:Apex,VisualForce Page. 其中Apex ...

  2. 零基础JavaScript编码(三)总结

    任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参 ...

  3. 零基础JavaScript编码(二)

    任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...

  4. 零基础JavaScript编码(一)

    任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...

  5. 零基础如何系统学习Java Web

    零基础如何系统学习Java Web?   我来给你说一说 你要下决心,我要转行做开发,这样你才能学成. 你要会打字,我公司原来有一个程序员,打字都是两个手一指禅,身为程序员你一指禅怎么写出的代码,半个 ...

  6. C#区块链零基础入门,学习路线图 转

    C#区块链零基础入门,学习路线图 一.1分钟短视频<区块链100问>了解区块链基本概念 http://tech.sina.com.cn/zt_d/blockchain_100/ 二.C#区 ...

  7. (转)零基础入门深度学习(6) - 长短时记忆网络(LSTM)

    无论即将到来的是大数据时代还是人工智能时代,亦或是传统行业使用人工智能在云上处理大数据的时代,作为一个有理想有追求的程序员,不懂深度学习(Deep Learning)这个超热的技术,会不会感觉马上就o ...

  8. 【转载】salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建

    salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建   VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的 ...

  9. 【转载】salesforce 零基础开发入门学习(五)异步进程介绍与数据批处理Batchable

    salesforce 零基础开发入门学习(五)异步进程介绍与数据批处理Batchable   本篇知识参考:https://developer.salesforce.com/trailhead/for ...

随机推荐

  1. 获取url参数和时间格式化

    1. 获取url参数: var url = request("url"); //获取url参数 function request(paras) { //decodeURI() 函数 ...

  2. 如何在Eclipse中配置python开发环境

    考虑到网上关于Eclipse中配置Python开发环境的文章千篇一律,故写此文以总结. 本文主要内容是:三种Pydev配置方法和一种PyDev卸载方法. 本文的前提是你已经安装了Eclipse和pyt ...

  3. html块级元素和内联元素区别详解

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...

  4. Unity UGUI —— 无限循环List

    还记得大学毕业刚工作的时候是做flash的开发,那时候看到别人写的各种各样的UI组件就非常佩服,后来自己也慢慢尝试着写,发现其实也就那么回事.UI的开发其实技术的成分相对来说不算多,但是一个好的UI是 ...

  5. Struts2 属性驱动、模型驱动、异常机制

    模型驱动使用单独的VO(值对象)来封装请求参数和处理结果,属性驱动则使用Action实例来封装请求参数和处理结果. 一.使用模型驱动 1.login.action采用模型驱动模式实现,采用模型驱动时必 ...

  6. shc加密shell脚本

    下载地址:http://www.datsi.fi.upm.es/~frosal/sources/ 安装 .tgz cd shc- mkdir -p /usr/local/man/man1 这步是必须的 ...

  7. jQuery事件绑定、解绑、命名空间

    jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...

  8. CentOS7系统安装DNS服务

    CentOS7系统安装DNS服务 30.1.DNS是什么? DNS ( Domain Name System )是"域名系统"的英文缩写,简单来说就是一个数据库,用于存储网络中IP ...

  9. iOS多线程——GCD与NSOperation总结

    很长时间以来,我个人(可能还有很多同学),对多线程编程都存在一些误解.一个很明显的表现是,很多人有这样的看法: 新开一个线程,能提高速度,避免阻塞主线程 毕竟多线程嘛,几个线程一起跑任务,速度快,还不 ...

  10. OC基础了解篇

    .h文件存放声明 .m文件存放实现(支持c语言和OC的混编) .mm文件存放实现 (支持OC就和C++的混编) 异常处理,很少被用到/** *#import功能与#include功能一样就是包含文件 ...