《基于.NET的Web开发技术》是.NET环境下进行Web编程的一门重要课程。内容包括Web原理及环境部署、HTML基础、CSS应用、JavaScript基础、ASP.NET技术；重点介绍ASP.NET技术及相关的数据库应用开发，通过实例介绍各种技术的特点及应用。 通过本课程的学习，使学员了解Web应用开发技术的发展与现状，了解WEB原理、开发过程和环境部署；能够熟练掌握HTML语言，CSS，JavaScript，掌握利用ASP.NET进行Web应用开发的特点；掌握各种控件的用法和ADO.NET相关技术，掌握数据源控件和数据绑定控件的用法；具备运用面向对象的思想和ASP.NET相关知识对Web网站进行需求分析、进而进行设计和开发的能力。学员学完该课程后，应能利用ASP.NET开发简单的Web应用程序。
HTML常用元素（1）
Loading...
来自 西安交通大学 的课程
基于.Net的Web开发技术
3 评分
从本节课中
因特网及HTML基础
本单元主要介绍与Web开发有关的因特网的相关基础知识，如因特网工作的基本原理，URL、DNS、HTTP的概念，五层协议及IP地址等；在此基础上引入简单的HTML语法及标签使用。
与讲师见面
乔亚男讲师
计算机教学实验中心
谢涛讲师
吴 宁教授
西安交通大学电信学院计算机教学实验中心
[音乐] 大家好，我们这次来看一下
HTML 的常用元素 首先呢是列表，那么列表呢有无序列表和有序列表
无序列表我们先来看一下，这是一个无序列表的示例
这是它的显示效果图，那么既然是无序，我们看到了实际上它前面用了一个点号 所以这个是没有顺序的。
当然在这里面呢 ul 代表一个项目无序的列表 它是一个块元素；li
呢是列表中一个单独的项目 也是块元素，这是无序列表。
那么这里面有一个无序列表的示例 在这个无序列表里面大家实际上看到了，实际上它用到了两项无序列表
并且呢实际上这里面用到了无序列表的一个嵌套
那么大家在具体设计的时候呢，也可以根据自己的需求
看看到底是用无序列表还是有序列表 是否需要列表的嵌套。
在一个就是有序列表 有序列表呢我们可以看到了，刚才是个
ul ，现在是个 ol o 是 order 的意思，是有序的，所以
ol 表示的是 有序列表；那么这里面也有一个示例，在这个示例里面呢大家
可以看到除了 ol、 ul 区别之外呢 它列表的项目
li 这个都是没有变的，所以最后输出的结果大家可以看到
这里面呢三个列表项呢，它带上了编号 1、 2、 3 表明了一种顺序
所以 ol 呢，它代表的是具有项目编号的一个列表
当然呢实际上我们在后面，在讲解 CSS
的时候呢 我们也可以利用 CSS 来制作
带字母或者是罗马数字的一些列表。
表格 表格呢其实在我们 HTML 中用的是相对来说比较多 尤其呢是在原来
CSS 还用的比较少的情况下 那么表格呢实际上是我们网页中定位的一个重要的标签
我们来看看表格，这里面呢大家可以看到，表格呢它标识也比较多 table
表格 caption 代表的是标题，tr
表示的是行，行 roll 所以是 tr
表示的是表里面的行，td 单元格，th
列标题 那么实际上呢在这里面呢经常用到的，就是我们在网页中
最常碰到的关于表格的标签呢有 table ，有 tr
有 td caption 和 th 相对来说用的还是比较少的
正如我们刚才所说的，实际上呢 很多时候，由于我们在
HTML 中 控制元素的位置呢，相对来说是比较麻烦的
尤其对于初学者，所以呢如果说 你对于位置呢比较陌生，或者是感觉难操作的话，实际上表格
经常用作定位呢还是一个比较理想的选择 table
的属性我们来看一下 首先呢有一个align
，它的对齐方式 对应的值是左、 中、
右 当然呢实际上呢我们在这块呢很多属性，其实呢
在我们来看它是不赞成使用的，包括我们介绍的这个 align
还有下面这个 bgcolor ，那么为什么呢？实际上呢我们给大家说过了
我们后面要学习 CSS 那么
CSS 层叠样式表，专门是做样式修饰和控制的
那么我们最终的这个理想状态呢，是你这个 HTML
中 只有内容，所有的格式修饰尽可能都放到 CSS 中，所以呢我们一般我们不赞成使用
第二个呢就是 bgcolor 是它的这个背景色
背景色，当然表示颜色的时候，那么有三种方式 rgb
或者是十六进制的带井号的，或者是直接用颜色名称 border
规定表格的宽度 这个很好理解，但是它这个单位呢是像素
还有 cellpadding 还有一个 cellspacing
那么 padding 呢 主要是规定单元边沿和其它内容之间的空白
spacing 规定单元格之间的空白，所以两个实际上是有差别的
那么我们也是到这个具体的例子中，我们再来看看这详细的差别 还有一个宽度，表示表格的宽度
那么这里面宽度还有 padding、 spacing
它这个在选用值的时候都有两种方式 一个是用像素，在一个是用百分比。
那么用像素 用百分比有什么区别呢？实际上呢如果用百分比的话
相对来说就比较灵活一些，那么有些时候呢比如说 我们调整浏览器的大小，如果你用绝对值像素点的话
那么它这个可能会出现一些滑块，必须滑动才能看完全部的内容
那么如果我们用百分比的话，那么这时候呢整个表格的宽度呢它会随着
浏览器的大小改变而改变，所以这个实际上呢到底用
哪一种值呢，那么实际上我们要根据实际情况来确定用哪一种值
我们来看一下跨列与跨行居中 一个是 colspan
这个称之为跨列居中，一个是 rowspan 这个是跨行居中，这里面呢有一个跨列居中的例子
也有一个跨行居中的例子，对于这一类跨行或者跨列的表格呢 我们在这个工作与学习中呢，实际上经常用到
那么为了看清楚它的效果，那么我们给大家把这个代码呢，放在我们网页中演示一下
大家马上就能够明白，这个到底是一个什么样的表格
好，我们来把这个代码复制一下，然后我们 自己新建一个文件，然后呢我们可以直接给它调试一下
大家注意观察，我在新建文件的时候我用到了最简单的 文本文件。
好，那么有的同学可能会问 你这个能运行不？那么实际上我们在前面的例子中给大家说过
我这是最简单的一种测试 HTML 的方式，它这个是没有问题是可以运行的
我打开它，好，大家看到了是横跨两列 这样的一个示意，同样的道理我们还可以把它换成横跨两行
[空白_录音]
好，我们再把这个网页刷新一下
好，这就是横跨行和横跨列两个的效果，那么我们可以根据
我们实际使用的需求，我们确定到底是跨列还是跨行 当然呢一个表格中有可以会出现啥？既跨行又跨列
好，再一个是引用，那么引用呢我们这块先介绍一个块引用
blockquote 这个属于是长引用，因为是块所以是对
一大片区域进行引用，并且是一个块元素这个也很明显 那么这里面呢有一个源码和它输出的结果。
那么源码里面大家可以看到 它这个 blockquote 它用的这个范围
那么我们在输出结果里面大家可以看到，实际上这个 引用的这一部分呢，实际上和前面还是有明显的差异的
那么这块呢实际上呢它在浏览器中呢，会 把这个 blockquote
这个元素前后都添加一个换行 而且呢增加了一定的边距，外边距，这个实际上我们通过这个例子呢能够明显的看出来
那么有些时候在有的浏览器中呢还会出现倾斜，还会出现倾斜 好，还有一个是行内引用，这个是
q 这个行内引用呢属于短引用，它既然说行内引用呢自然是短引用
行内元素，那么这个引用的时候呢大家可以看到 实际上这个
q 引用呢，实际上给它加了啥 引号，给它加了引号。
所以呢这个是属于我们的 行内引用。
好，那么本节课呢 我们给大家介绍了一些关于
HTML 的一些 基本的元素，那么实际上关于 HTML 元素呢，后面还有一些
那么我们本次课呢就先学习这么一些元素，好，谢谢大家
