零基础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”属性加粗字体。

三、github地址:https://github.com/Nunawading2016/2017-IFE-Baidu.git

时间: 2024-10-11 05:18:21

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

零基础JavaScript编码(二)

任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM中的内容 任务描述 参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示在网页上 <!DOCTYPE html> <html> <head> <meta charset=&

python基础教程_学习笔记5:字符串

字符串 基本字符串操作 字符串也是序列,因此序列的基本操作(索引.分片.连接.乘法.长度.求最大值和最小值.成员资格)对字符串同样适用: 索引 >>> 'a_string'[0] 'a' 长度 >>> len('a_string') 8 求最大值 >>> max('a_string') 't' 求最小值 >>> min('a_string') '_' 乘法 >>> 'a_string'*2 'a_stringa_st

零基础JavaScript编码(一)

任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以下示例代码,补充其中的JavaScript功能,完成一个JavaScript代码的编写 本任务完成的功能为:用户可以在输入框中输入任何内容,点击"确认填写"按钮后,用户输入的内容会显示在"您输入的值是"文字的右边 <!DOCTYPE html> <ht

《语义网基础教程》学习笔记(二)

二.RDF概述(参考http://zh.transwiki.org/cn/rdfprimer.htm) 1.本体: 一个本体是一个概念体系(conceptualization)的显式的形式化规范. 一般来说,一个本体形式地刻画一个论域.一个典型的本体由有限个术语及它们之间的关系组成. ★在万维网这个环境中,本体提供了对给定领域的一种共识.这种共识对于消除术语差别是必要的. 通过把各自的术语差异映射到一个公共的本体之间的直接映射,可以消除这些术语差异. 不管采用哪种方案,本体都支持语义可共用性(s

python基础教程_学习笔记23:图形用户界面

图形用户界面 丰富的平台 在编写Python GUI程序前,需要决定使用哪个GUI平台. 简单来说,平台是图形组件的一个特定集合,可以通过叫做GUI工具包的给定Python模块进行访问. 工具包 描述 Tkinter 使用Tk平台.很容易得到.半标准. wxpython 基于wxWindows.跨平台越来越流行. PythonWin 只能在Windows上使用.使用了本机的Windows GUI功能. JavaSwing 只能用于Jython.使用本机的Java GUI. PyGTK 使用GTK

python基础教程_学习笔记3:元组

元组 元组不能修改:(可能你已经注意到了:字符串也不能修改.) 创建元组的语法很简单:如果用逗号分隔了一些值,那么你就自动创建了元组. >>> 1,3,'ab' (1, 3, 'ab') 元组也是(大部分时候是)通过圆括号括起来的. >>> (1,3,'13') (1, 3, '13') 空元组可以用没有内容的两个圆括号来表示. 如何实现包括一个值的元组呢? >>> (5) 5 >>> ('ab') 'ab' >>>

蓝鸥Unity开发基础——If 语句学习笔记

蓝鸥Unity开发基础--If 语句学习笔记 本节内容:程序的三种结构,if语句,问号表达式 程序的三种结构 顺序结构:顺序执行语句 分支结构:通过进行判断,在多个语句块中选择某一个执行 循环结构:条件满足时,反复执行同一语句块 If语句 用if语句可以构成分支结构 它根据给定的条件进行判定,用来决定要执行某个程序段 一.if(条件表达式){语句1} using System; namespace Lesson11{    class MainClass    {        public s

《语义网基础教程》学习笔记(一)

一.XML概述 1.有效(valid)的XML文档:遵守了XML文档的基本规则,并使用DTD或Schema定义了语义约束,而且也完全遵守了DTD或Schema所定义的语义约束的XML文档 2.XML声明部分的encoding属性值应该与保存该文档所使用的字符集相同.如果需要让XML支持中文,应该注意以下几点: ①保存文件时使用支持中文的字符集 ②XML声明部分的encoding属性应该与保存该文件时所使用的字符集相同 3.XML元素里的多个属性之间是无序的,因此同一个元素不可包含多个同名的属性,

python基础教程_学习笔记9:抽象

抽象 懒惰即美德. 抽象和结构 抽象可以节省大量工作,实际上它的作用还要更大,它是使得计算机程序可以让人读懂的关键. 创建函数 函数可以调用(可能包含参数,也就是放在圆括号中的值),它执行某种行为并且返回一个值.一般来说,内建的callable函数可以用来判断函数是否可调用: >>> import math >>> y=1 >>> x=math.sqrt >>> callable(x) True >>> callab