当前课程知识点:计算机文化基础 > 第9课:从图像传感器看世界的物联 > 实践:HTML入门实践 > HTML基本标记
那么如何来编辑
这么样一个文档呢
可使用任何一种文字处理软件
来编辑HTML文档
Windows中附件记事本
就可以胜任
其中插入的HTML标记
只有用浏览器
才能被解释
最终在浏览器窗口中
呈现出图文并茂的网页
比如说我们搜狐这种页面
我们可以来看一下它的这个源代码
这里头有很多的
带有尖括弧的
就是HTML的标记
我们就可以通过查看
这个菜单命令
打开记事本
就可以查看到
它里头的HTML代码的写法
这里呢
我们用XHTML来写
那么我们来看看
XHTML的文档结构
XHTML是可扩展的
超文本标记语言
可以认为是HTML4.0的
规范版
一个HTML文档
可以分为
文档类型说明
和文档数据
两个区域
文档类型
由Document type来定义
文档数据区
由HTML元素
来定义
文档数据又分两部分
文档头和文档体
文档头由Head元素来定义
用来定义网页的标题
等头部信息
如网页的标题
作者 关键字等
这个标签之间的内容
不会显示在浏览器中
而文档体
由Body元素来定义
Body元素内
可包含所有的
页面元素
网页中显示的内容
都要定义在Body元素内
下面就来介绍
我们来制作
这样一个样例文档
需要用到的
一些常用的标记
Body元素
然后段落标记
然后标题的
h1到h6
然后超链接的元素
然后图像元素
水平线
项目列表
然后区域元素div
这几个元素
Body元素呢
这里头的属性
text属性
就可以设置
里头文字的显示颜色
bgcolor这个属性
可以设置网页的背景色
background属性可以设置网页的背景图
比如说我们这一个
就设置了背景色是黑颜色的
文字的颜色是黄颜色的
这样最后的显示的效果
就是黑背景
黄色颜色的文字
而下面这个例子呢
拿一个小图片作为一个背景图
文字的颜色是蓝颜色的
就看到这种效果
段落元素p
就是用来为文档分段的
这个p还有结束的这个p之间
就是一个段落
比如说我们这个例子中
一共有三个段落
标题我们让它居中对齐
中间这段文字
左对齐
最后一段
就右对齐
所以我们最后看到的这种效果
align这个属性呢
就可以来设置
对齐的方式
可选的有
左中右
换行元素这个br
它就可以强制换行
比如说我们在记事本中
写了这么一段诗
看上去有五个段落
有回车
但是在浏览器中显示出的效果呢
就是在一行显示出来了
为了让它能够分成这样的分行
那么我们在每一行的后头
加上一个br这种强制的换行
最后浏览出的效果呢
就会在下一行显示出
这段文字
水平线hr
就是起分隔作用的
它有几个属性
一个就是它的高度
size这个属性
就可以设置为
一个高度
直接写成hr呢
就产生一条默认大小的水平线
灰颜色的
100%宽度的这么一条水平线
下面这个例子呢
就是宽度是4的
没有阴影的这么一条水平线
所以跟上面一个比呢
它就是宽了一些
下面这个呢
就设置一个粉颜色的
左对齐的
宽度是70%的
这么一条水平线
这个百分比呢
它是相对于浏览器的大小
它是一个相对的单位
最后这条水平线呢
设置是750像素的
这是一个绝对的单位
这是一个浅紫色的
这么一条线
居中对齐
默认的它就是居中对齐的这种效果
还有这种区块元素
div它就是给文档分节的
使文档的不同部分
应用不同的格式
常常来配合样式表来使用的
比如说我们刚才那段诗
春眠不觉晓这段诗
它默认的是左对齐的
我们要想让它居中对齐
就可以把整个这部分
塞到div这个标记里头去
而且我们可以设置它一个居中对齐
这样整个这段诗
就在页面中都居中对齐了
标题元素
h1到h6
共6级
它的写法也是
在中间呢
就把你的标题写在里头
h1的这个样式
是最大的
h6的字是最小的
所以说这是h1到h6
这6级标题的这种样子
它也有对齐的属性
用align
可以左右中
对齐
清单元素
ol是顺序清单
可以产生这样
像123这样的
清单
无序清单用ul
就可以产生这种实心的这种圈
或者空心的这种圈的
这样的清单
那里头具体的每一个项目
用li
比如说我们这块呢
就是用ol
里头有三个项目
产生的这种顺序清单
下面这段呢
就是个无序清单
也是留了三个项目
当然有多个项目都可以往里头来添加
在页面中添加图片
用img
这个标记
用SOURCE这个属性
就可以把添加图片的这个路径
标识进来
这里头路径呢
我们用相对路径的写法
这样保证可以在不同的机器打开
都可以看到这种图片
这个图片 像这幅图片呢
它也是右对齐
也可以用align这个属性
right这个值
来表示
让它右对齐
超链接用a这个标记
href呢
来把超链接的这个
目的意义来标识
因为我们这里头只作了一个页面
所以用的就是URL链接
可以链接到外部
它的这种写法呢
就是用HTTP
上面就是一个网址
就可以来跳转到这个对应的这个网址上
如果打开的这个超链接
想在新的一个页面来打开
就可以用target这个属性
然后让它去指向一个空白的一个窗口
-由一个短片引出......
-梳理IT产业大脉络(上)
-梳理IT产业大脉络(下)
-你的第一门计算机入门课
--课程介绍及要求
-实践:图像处理入门
--实践小作业要求
--操作前的几点准备
-第1课习题作业
-第1课导学帖
--第1课导学帖
-现代计算机为什么是电子数字的?
-二进制与十进制有什么区别?
--了解二进制
-为什么莱布尼兹没有认识到二进制的重要性?
--与、或、非
-从ENIAC到现代通用计算机
--新材料带来新发展
-摩尔定律会失效吗?
--摩尔定律失效
-讲座:计算机世界中的巨无霸
-参观:感受世界巨无霸(太湖之光)
--神威太湖之光简介
--探秘神威太湖之光
-参观补充:走进济南国家超算中心
--走进国家超算中心
-实践:我的计算机有多快?
-第2课习题作业
-第2课导学帖
--第2课导学帖
-数码相机是如何“计算”出一张数字照片?
--如何拍摄彩色照片
-认识图像数字化过程中的采样和量化
--采样和量化
-计算机是如何感知声音波形的?
--声音量化三要素
-换一种思路来数字化文本信息
--字符集的发展历程
-实践:常用网络资源下载
--常见下载方法介绍
--常见文件类型下载
- 第3课习题作业
-第3课导学帖
--第3课导学帖
-软件解决的目标是什么?
--软件的目的是什么
-我们使用的软件是怎么来的?
--软件是怎么来的1
--软件是怎么来的2
-操作系统拥有什么样的神力?
--操作系统的演变1
--操作系统的演变2
--CPU的管理调度
--虚拟存储技术
-访谈:如何成功研发一款手机APP
-实践:如何利用注册表进行系统优化
--注册表概述
--注册表与信息安全
-第4课习题作业
-第4课导学帖
--第4课导学帖
-数字存储前言
--梳理数字存储历史
--磁、光存储介质
--半导体存储介质
-怎样在存储介质上表示1和0?
-怎样从存储介质读取1和0?
-如何找到所需的数据?
-实践:文章排版基本技能
--引言
--中文输入
--图文混排
--页面设置
--利用表格布局标题
--分栏和首字下沉
--设置页眉与页脚
--设置插图润色排版
--LaTeX入门
-第5课习题作业
-第5课导学帖
--第5课导学帖
-演示文稿制作准备
--操作前的几个概念
--实践前的环境准备
-制作演示文稿
--设置超链接按钮
--设置超链接文本
-作品赏析
-第6课习题作业
-第6课导学帖
--第6课导学帖
-联网目的和资源共享模式的变迁
--资源共享模式
--异构网互联
-物联网连入互联网
--互联网与因特网
-访谈:PC在智能穿戴生态系统中的定位
--对话联想(上)
--对话联想(下)
-参观:联想创新中心掠影
--探秘联想创新中心
-第7课习题作业
-第7课导学帖
--第7课导学帖
-从网络组织来描述计算机网络
--计算机网络的定义
--网络软件
-从功能角度来认识计算机网络
--网络体系结构
--IPv4(上)
--IPv4(下)
--IPv6
-实践:网络不通怎么办
--网络连接
-第8课习题作业
-第8课导学帖
--第8课导学帖
-认识图像传感器
--认识图像传感器
--图像传感器的应用
--图像传感器的市场
-图像传感器的应用
--在汽车中的应用1
--在汽车中的应用2
--物联网中的应用
-了解图像传感器技术
--图像传感器的技术
-图像传感器的挑战
--问题与挑战
-讲座:如何在大数据中精准生活
--走进大数据
--生活中的大数据
-实践:HTML入门实践
--HTML作业要求
--HTML基本标记
--综合样例(上)
--综合样例(下)
-第9课习题作业
-第9课导学帖
--第9课导学帖
-认识搜索引擎
--这就是搜索引擎
-信息检索背后的关键技术
--海量数据的获取
--搜索结果排名
-搜索引擎的未来
--情境感知的搜索
--社会化搜索
--智能搜索
-实践:Aminer学术搜索
--Aminer介绍
-第10课习题作业
-第10课导学帖
--第10课导学帖
-信息安全的基本要求
--早期的计算机安全
-新型的网络攻击有哪些
--信息泄露
--移动安全
-未知攻 焉知防
--未知攻焉知防
--未知攻焉知防2
--信息加密
--安全防范原则
-实践:Excel实践
--实例操作
--实例操作2
--实例操作3
--绘制图表
-第11课习题作业
-第11课导学帖
--第11课导学帖
-回顾与展望
--回顾与展望1
--回顾与展望2
--回顾与展望3
--回顾与展望4
-什么是计算
--什么是计算
-访谈:信息技术交叉应用
--对话风投专家1
--对话风投专家2
--对话风投专家3
-嘉宾分享:闲谈数字产业创新
-第12课习题作业
-第12课导学帖
--第12课导学帖