当前课程知识点：界面设计导论 > 第四章：从设计到实现：H5网页基础概念 > （2）标签与元素 > 标签与元素
大家好
上节课呢我们讲了html的概念
了解了一个最简单的html网页的结构
在本节课呢我们来学习
html语言中的标签与元素的概念
如图所示
开标签表示一个元素的开始
闭标签表示一个元素的结束
大多数的html标签都是类似的
尖括号中间的文本解释了标签的作用
像这里的
这是一个顶级标题的意思
还有
大家也可以试一下
如果不在我的第一个网页左右加标签
那么它只不过是一段普通的文字
也不能表明
它构成了一段标题文字
属性的概念
属性是用来描述元素的
html中的属性
是非常类似于生活中的形容词
比如白色的杯子
html元素也是可以用
外部浏览器能够理解的方式进行描述
如事例中的居中对齐等等
属性被用于描述包含它们的元素
并总是出现在所在元素的开标签中
几乎所有的属性都有两部分组成
属性名称和属性值
属性名称是指想设置的元素的某种属性
例如例子中的align属性值
是希望该属性具有的值
如例子中的center
属性可以是多个的
属性名称加属性值组成了属性组
并列出现
我们来看一下html语言中的四大核心元素
在html中有四大核心元素
是必须存在的
html head title和body
html元素是整个html文档
最外层的包含元素
每一个html页面文档
都应该由一个开标签html开始
和一个闭标签斜杠html结束
head元素是包含头部元素的容器
title元素被包含在head头部元素中
为你编写的每一个网页赋予一个标题
显示在浏览器窗口的顶端
并可作为收藏书签的默认名称
body元素出现在head元素的后面
它将显示在浏览器的主窗口中
被称为主体内容部分
在html中还有四大核心属性
是id title class style
id属性是用来唯一标识
页面中的任何元素
可以通过唯一标识一个元素
使你能够链接到文档中的该特性部分
或者用来指定一个css样式
或者是一段Javascript
id属性的语法规则为
必须以字母开头的字符串
在文档中必须保持唯一性
也就是在同一个html页面中
不允许存在两个或以上的相同的id属性
class属性
用来指定某元素属于某一特定的类型
class规则的语法
class的写法是class=〝className〞
class属性的取值
可以是一个空格分隔的class列表
例如class=〝className1 className2 className3〞
title属性
用来为元素提供一个参考的标题
写法是class等于一个字符串
style属性
在元素内部指定的css规则
style属性是在元素内部指定的css规则
例如这个
标签中间
可以增加一个style属性
让它的字体是24号
颜色是一个灰色
从总体性通用性的原则考虑
尽量避免使用这个属性
尽可能使用独立的外部css样式表的形式
来取而代之
css的概念
在后面的课程中我们将会介绍到
我们到编程环境中来看一下效果
我们在上次的代码的基础上
给标签增加属性和属性组
例如我们在
开标签中增加一个居中的属性
align=〝center〞
在编程环境中会弹出一些帮助的提示
如果有合适我们想用的
我们选择后点击回车即可
再来看一下效果
现在我们再来加一个id属性
给这个hr标签组成
这样组成了一个属性组
id属性的作用我们暂时还看不出来
在后面的课程中我们会看到效果
好 我们现在编程环境中来复习一下
html中的四大核心元素
在最外层是html元素
然后是头部容器head元素
头部中间包含了title元素
以及主体部分的body元素
现在我们再来看一下效果
这里呢是title元素显示的部分
这是主体元素显示的部分
我们现在再来试一下style这个属性
在这里添加一个字体颜色
为红色的设置
在这里我们可以更改颜色
看一下效果
这里就变成了红色
好 本课就讲到这里
非常感谢大家的学习
谢谢
-课程简介
--课程简介
-（1） 什么是界面
--什么是界面
-（2）界面设计为什么重要
-（3）UI的进化
--UI的进化
-（4）设计师的自我修炼
--新手的疑问
-第一章总结
--第一章总结
-第一章：界面设计概述--课后习题
-本章概述
--本章概述
-（1） 为什么设计？
-- 为什么设计？
-（2）界面设计流程
--界面设计流程
-（3）视觉优化原理
--视觉优化原理
-（4）可用性评估的基本原则
-第二章：GUI设计心法--课后习题
-本章概述
--本章概述
-（1）信息结构与交互设计（1-4）
--第一讲
--第二讲
--第三讲
--第四讲
-（2） 界面草图与原型设计
-（3）视觉设计原则
--视觉设计原则
-（4） 文字与阅读
--字体设计
-（5）图标
--图标
-（6） 色彩
--色彩
-（7） 动效
--动效设计概述
--动效小制作1
--动效小制作2
-（8）第三章小结
--第三章小结
-（9）学生个人作品网站主页设计体会
--张铁汉
-第三章：界面设计元素--大作业
-前言
--前言
-（1）什么是网页
--什么是网页
-（2）标签与元素
--标签与元素
-（3）文本格式化、块级元素与行内元素
-（4）如何使用H5进行网页布局
-（5）目录、目录结构及在页面中插入图片
-（6）CSS样式表
--CSS样式表
-（7）CSS盒子模型
--CSS盒子模型
-（8）CSS控制文本
--CSS控制文本
-（9）CSS背景、特效、动画
-（10）初识javascript及jquery
-总结
--总结
-邱艺芸-清华大学艺术博物馆APP设计
--邱艺芸
-潘俊丞-阿甘跑步改版界面设计——“趣跑”
--潘俊丞
-王婧-星巴克改版设计
--王婧
-李向阳-DIY服装app设计
--李向阳
-相宸卓-效率软件改版设计
--相宸卓
-周文欣-“你好，安德烈”app设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
