作业:
1. 谈谈你对html标签, 元素与属性的理解, 并举例说明
2. 列表有几种, 如何定义?
3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
4. 编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次:
5. 编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan
6. 编程实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义
7. 写出总结, 对于这些常用标签的应用场景进行分析
1. 谈谈你对html标签, 元素与属性的理解, 并举例说明
HTML 不是一门编程语言,而是一种用于定义内容结构的标记语言。HTML 由一系列的元素(elements)组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。 一对标签( tags)可以为一段文字或者一张图片添加超链接,将文字设置为斜体,改变字号,等等。HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
● HTML 标签是由尖括号包围的关键词,比如
● HTML 标签通常是成对出现的,比如 和
● 标签对中的第一个标签是开始标签,第二个标签是结束标签
● 开始和结束标签也被称为开放标签和闭合标签
提示:HTML 标签对大小写不敏感:
等同于
,许多网站都使用大写的 HTML 标签。HTML 元素
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
HTML 元素语法
● HTML 元素以开始标签起始
● HTML 元素以结束标签终止
● 元素的内容是开始标签与结束标签之间的内容
● 某些 HTML 元素具有空内容(empty content),比如
元素
● 空元素在开始标签中进行关闭(以开始标签的结束而结束)
● 大多数 HTML 元素可拥有属性HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现,比如:name="value"。
属性总是在 HTML 元素的开始标签中规定。
提示:属性和属性值对大小写不敏感。不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。
下面通过分析一个标准的HTML文档结构来整体认识标签、元素、属性。
实例
html>
测试页面PHP中文网
运行实例 »
点击 "运行实例" 按钮查看在线实例
这里有:
● — 文档类型。DOCTYPE 用来链接一些 HTML 编写守则,有点像自动校正等。然而现在已经没有人关心这些,只是因为历史原因必须将它们保留,但没有实际作用。
● — 元素。这个元素包含了整个页面的内容,有时也被称作根元素。
●
— 元素。这个元素放置的内容不是展现给用户的,而是包含例如面向搜索引擎的搜索关键字(keywords)、页面描述、CSS 样式表和字符编码声明等。● — 这个元素指定了当前文档使用 UTF-8 字符编码 ,UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容,还可以避免以后出现某些问题,我们没有任何理由再选用其他编码。
●
— 元素。这个元素设置页面的标题,显示在浏览器标签页上,同时作为收藏网页的描述文字。●
— 元素。这个元素包含期望让用户在访问页面时看到的内容,可以是文本、图像、视频、游戏、可播放的音轨或其他内容。2. 列表有几种, 如何定义?列表
Web 上的许多内容都是列表,HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为:
①无序列表中项目的顺序并不重要,就像购物列表。用一个
- 元素包围。此列项目使用粗体圆点(典型的小黑圆圈)进行标记。始于
- 标签,每个列表项始于
- 。
②有序列表中项目的顺序很重要,就像烹调指南。用一个
- 元素包围。列表项目使用数字进行标记。有序列表始于
- 标签,每个列表项始于
- 标签。
③自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以
-
开始。每个自定义列表项的定义以
-
开始。
提示:列表的每个项目用一个列表项目(List Item)元素
-
开始。
- 包围。
实例
html>
Document- 苹果
- 香蕉
- 梨子
- 苹果
- 香蕉
- 梨子
-
php
- 最流行的通用服务器编程语言 mysql
- 最流行的免费数据库 laravel
- 最流行的开发框架
运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
表格其实就是很多的小单元格,而这些小单元格很有次序的排列着,它们有很多行,很多列。这些很多行列组成的东西,就叫表格,表格是
购物车 标签,必须先定义行才能定义列。 若要简单展示排列信息的话,用列表即可。如果是详细展示数据的话,因为需要多维度多角度去展示数据,所以一列往往不够,用表格会更直观方便。
4. 编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次:
实例
html>
Document工作计划
前端
- HTML
- CSS
- JavaScript
后端
- Apache
- mysql
- php
框架
- Laravel
- ThinkPHP
- Bootstrap
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan
实例
html>
表格购物车 编号 商品名 单价 数量 价格 1 手机 3299 1 3299 2 平板 2500 1 2500 3 鞋子 799 1 799 合计 6598 运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 编程实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义
实例
html>
表单用户注册
用户名:
密 码:
邮 箱:
年 龄:
课 程:
HTML
CSS
JavaScript
PHP
MySQL
Laravel
爱 好:
玩游戏
撸代码
看电影
性 别:
男
女
保密
注册
运行实例 »
点击 "运行实例" 按钮查看在线实例
7. 写出总结, 对于这些常用标签的应用场景进行分析
本次作业主要介绍HTML的基础组成结构及其内容的理解,完成列表、表格及表单的编程。基础标签:
定义文档类型。
定义 HTML 文档。
定义文档的标题。 定义文档的主体。to
定义 HTML 标题。
定义段落。
定义简单的折行。
定义水平线。定义注释。
表单标签:
定义供用户输入的 HTML 表单。定义输入控件。
定义多行的文本输入控件。
定义按钮。
定义选择列表(下拉列表)。
定义选择列表中相关选项的组合。
定义选择列表中的选项。
定义 input 元素的标注。
定义围绕表单中元素的边框。定义 fieldset 元素的标题。
定义下拉列表。
定义生成密钥。
定义输出的一些类型。
框架标签:
定义框架集的窗口或框架。
定义框架集。定义针对不支持框架的用户的替代内容。
定义内联框架。
图像标签:
定义图像。
定义图像映射。
定义图像地图内部的区域。
定义图形。
定义 figure 元素的标题。 链接标签:
定义锚。
定义文档与外部资源的关系。
定义导航链接。
列表标签:
- 定义无序列表。
- 定义有序列表。
- 定义列表的项目。
-
定义定义列表中的项目。
-
定义定义列表中项目的描述。
定义用户可以从弹出菜单调用的命令/菜单项目。
定义命令按钮。
表格标签:
定义表格标题。 定义表格中的表头单元格。 定义表格中的单元。 样式/节 标签:
定义文档中的节。定义文档中的节。
定义 section 或 page 的页眉。
定义 section 或 page 的页脚。
定义 section。
定义文章。
定义页面内容之外的内容。
定义元素的细节。
定义对话框或窗口。
为 元素定义可见的标题。
元信息 标签:
定义关于文档的信息。定义关于 HTML 文档的元信息。
定义页面中所有链接的默认地址或默认目标。
不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
-
定义定义列表中项目的描述。
- 元素包围。列表项目使用数字进行标记。有序列表始于