04_尚硅谷_大数据JavaWEB_HTML常用的标记(1).avi原创

好来，接下来我们就把HTML常用的一些标签啊，那么我基本上呢，都给大家列到这个位置了啊，我们就来给大家去写一个页面，然后呢，我们去感受感受啊呃，那首先呢，我们就哎，我来到我们今天的这个代码里面啊。代码，然后呢，我新建一个等零幺啊，这是我们的第一天，然后这个礼面的话呢，注意了哈，我现在呢，要去新建一个文本文档，能看到吧，这是一个文本文档，然后呢，我们要给它改一个名字啊，重命名一下，重命名的什么呢？比如说我就叫道诶啊my first是吧，T啊my first HTML吧，就是我的第一个HTML页面，大家注意了哈，如果说你还是以这个T叉T来结尾的，那么这就是一个普通的文本理解吧，这就是一个普通的文本，如果说你想让它是一个超文本的话，注意，那么它的这个扩展名呢，我们就不能叫成TRT了，我们要把它叫成HTML，或者说呢，HTM也行啊，但是呢，我还是习惯都把它写上叫做HTML，能明白了吗？OK，这个大家首先要知道啊，就是你在写的时候呢，一定要把这个扩展。

给他改了啊，那么有些同学的电脑呢，他看不到这个扩展没有。这个你们知道怎么去调一下吗？啊，男同学都知道是吧，偷偷的隐藏一些东西是吧？啊，来试一下啊，怎么把它调出来呢？在这个组织里面呢，有一个文件夹口搜索选项啊，可能这个WIN10的同学呢，有点不一样啊，WIN10的应该是在这个位置啊，有一个那个也差不多的设置是吧？啊我就全靠想象啊OK，那么我们来试一下，在这里面有个文件夹口搜索选项，然后这个里面呢，有一个查看，在查看里面呢，我们就能找到这样的一个叫做什么隐藏已知文件类型的扩展名，你把前面的这个勾给它去掉，那么那个扩展名就给你啊显示出来了，能明白了吗？听懂了吧，这个OK啊，大家下去以后呢，自己把自己调一下啊OK，那么现在呢，我们就把它写好了，那么其实写好以后呢，你看一下它的这个图标直接就变成一个是不是浏览器了，对吧，他认为这个就是一个页面，那么这个页。

那呢，就应该由我们的浏览器来给它打开，所以说呢，它这个图标直接就换成浏览器的图标了，但其实实际上这个东西它就是一个文本，就算你是超文本，你的本质还是一个文本，因此呢，我们在编写的时候，我们依旧可以使用什么呀？使用我们的编辑工具，比如说我用的是ID的plus，这个大家都有吗？有有是吧？OK，那我们就通过它来打开，打开以后你还是把它当成一个普通的文本来对待就行了，明白了吧，OK，那在这里面你想写什么就写什么，比如说啊，我想写什么就写什么，OK，那我的第一个页面就好了。

啊不信啊啊不信让你看看是吧，你看了哈，写完以后呢，一定要注意CTRLS保存一下哈，然后你再打开，再打开的时候呢，你就不要再使用文本了，对吧，你就使用你的浏览器火狐也好，IE也好打开。啊。那你看这不就是我的一个页面吗？是不是浏览器打开的，里面有没有内容啊，你写过什么，是不是给你显示什么呀，对吧，就长得丑一点而已，是不是？那你来想一下，你们经常访问那些这个网站啊，什么这个论坛啊，什么京东，什么淘宝吧，无非就是它上面的内容更加的丰富一点嘛。对不对，我只需要把他们那内容我也给你写进来，那我不就把这个页面也做出来了吗？能理解了吗？啊，所以这东西特别简单哈，是吧，讲的太深了啊，就有点侮辱你们的智商是吧？啊来吧，那我们就来看一下，那这个东西我就放这不管了啊那么其实最基本上我们的一个页面呢，好，这个东西呢，是一个HTM里面的注释啊，这个可能大家以前没用过吧，好现在知道一下啊，加括号，感叹号，然后两个斜杠啊，两个横杠哈，然后呢，在两个横杠一个什么加括号中间呢，你想写什么就写什么，这是一个注释，它是不会显示出来的，明白吧，OK，那么给大家解释一下啊，解释个什么东西呢？就是啊一个HTM页面啊，最基本啊的组成结构啊，是由什么呀，由。

三个东西，一个是我们的叫做hi，叫做这个HTML，一个是我们的hide，一个是我们的body，啊必须得存在这三个东西，那么这三个东西分别是什么意思呢？我给你写一下啊，最外层呢，我们通过一个HTML来写，注意现在我写的这个叫做什么呀？这个就叫做标记，理解了就整个页面里面，我们应该都是由这种标记来构成的啊，这就是一个标记啊，OK，那么在这个HTML里面，这是一个跟标记啊，给大家解释它是一个跟标记，明白吧，哎，就是最大的那个标记，然后呢，在跟标记里面呢，我们有一个headde叫做什么呀？翻译一下头标记啊，那同样是下面这个body呢，身体是吧体标记，OK，那么就意味着最基本的一个页面，在HTL里面，你应该有一个海。

这的你应该有一个，诶，对了，Body，这才是一个最基本的一个HTML页面，那么这个headde跟这个body有什么区别呢？像这个HTML的话，无非就是一个跟标记了，它也不需要什么做任何解释了，啊主要是hide跟这个body有啥区别呢？他们主要是干什么事的呢？来听我说这个hide呢，就是它里面呢，主要去写一些什么呀？诶写描述性的信息啊，就是你要去描述这个网页了，那么你就写到这里面，比如说像我们后面要讲的CSS以及我们的啊，就它吧，啊这个javascript这样啊，都是在这个里面去写的啊，它是描述页面的，而我这个包得写什么呢？它是什么呀？写页面显示的信息，就是你这个页面你想要显示什么东西，那么你就都写到这个包里面，比方说，我现在想显示这一句话，那么其实这一句话你就应该让它出现到我们的包里面。

明白了吧，也就意味着你写到这个里面，写到hide里面的内容，它是不会给你显示出来的，他只是去描述你这个页面的，而你写到包店里面的内容，我就要给你显示出来，能明白了吗？来，那我们就来看一看啊好，我把这个改成这个样子以后呢，我们只要把这个文本保存一下，然后呢，你回到浏览器端里再去刷新一下，看到没有，是又出来一句话啊，对吧，因为什么上面这个呢，我我想把它删了吧，啊，我们这个就不要了，那么你再去刷新一下，你发现跟刚才也没什么区别，对不对，但是呢，诶，我们最基本上你要写一个网页，你就得有这么几部分。

明白了吧，好，那么这个结构搭起来以后呢，我们就可以来去讲我们最常用的标记了，其实最常用的这三个已经给你讲完了。啊，太简单了啊，那么在这个包间里面我们可以写哪些东西呢？比如说我们先给大家去讲一个啊，也是我们常用的叫做什么标题标记啊，标题标记，什么样的标题标记呢？啊，比如说啊，啊这个我们只能靠想了是吧？呃，大家在这个网站上应该都浏览过一些新闻吧。

看过新闻没有啊，没有是吧，对，还是关心关心吧，国家大事啥的是吧？啊然后呢，你点开某一某一个新闻以后呢，你点进去以后，它就是一个一篇文章对吧，那么在这个文章最上面，它有一个标题是吧？这个标题的话，它这个文字它一般都是加粗的，而且呢，字体比较大。能理解吧，就是跟你那个具体的那个文章内容肯定是有区别的，那么像这个东西，其实我们就可以通过这个标题标题来做啊，那这个标题标题怎么用呢？它是一个H1到什么呀，到H6。啊，这什么意思呢？你看哈，好，我给你写H1，这是一个标记，一直到什么呀，来都给你写出来吧，是吧，啊H2，然后呢，H3好H3啊H4好，这个H5好，最后呢，还有一个什么呀，H6。

好，H6OK啊，那么大家看我写的这个，你要去总结出一些规律来啊，就是这个标记啊，它都是由什么呀，就是现在我所写的这个标记呢，我们叫做什么呀，叫做双标记啊，它都是有一个开始，有一个结束的，能理解吧，而且结束标记里面以后呢，里面都有一个写杠，能明白吗？你这个东西不需要我解释你你这个看一下你还猜不出来吗？可以吧，OK，那么这个标记标记有啥用呢？你看了哈，H1到H6分别是什么意思呢？你看我在里面给你写东西啊，啊，我把这个给你写出来是吧，我就光写个一吧，啊再来个一，OK，再来个一，这就下方了，你从这个地方看，你看不出来啥，因为什么呀，这就是一个普通的文本。对吧，但是你要把这个东西交给浏览器帮你去渲染一下，帮你去打开的话，那这个效果就不一样了，你看我们打开刷新一下。

看到了吗？啊，看到了吧，有什么区别啊，是从首先它是一个什么，这个很明显是加粗过的吧，对不对，而且从H1到H6是什么呀，头大字体是不是越来越小啊，对不对啊，你这不就是一个视力表吗？你能看到第几个是吧？啊，能看到了吧？哎，这就是我们的H1到H6标题标记，那么比如说呢，那我标记标记，我想让它在我中间显示怎么办呀，我们可以使用它里面自带的一个属性啊，就是写一个这个属性啊，给它设置一个center center代表的就是居中的意思，如果你想居左，那就是left，如果你想居右，那就是right。明白吧，好，来试一下。诶，稍等一下啊，走，你看这个我们是不是跑到中间了，看到了吧，哎，如果说你想要其他的一个也居中，那你就挨个在这里面去加什么呀，加你的这个center就行了嘛，能听懂吧，如果你不加的话，它默认就是什么呀，在左边的，如果你加了的话，就是什么在中间的，好，那么同样你还可以让他什么往右边跑啊，比如说呢啊，我让这个最后两个跑到右边啊，那就是跑到了我的right。

知道这是一个单词的意思吧，好，Right OK，先好，以后我们再来刷新一下，你看是不是跑到这个位置，看到了吗？哎，就在这个地方，好，那这就是我们的标题标记，那暂时呢，我就使用一个这个，那么中间的话呢，你可以放任何内容，就是你想要你的标题是什么，那你就在这中间去写你的文字就行了。理解这个意思了吧，OK，这是我们的标题标记啊，好来下一个我们再来给大家去介绍，大家注意哈，现在我都是写到这个包里面的，因为它是要给你展示出来的东西，下一个我们来说一个超链接啊，超链接啥叫做超链接啊啊，就是你看上去是一段文字对吧，但是我一点呢，诶，它还能去跳转。

对吧，比如说啊，你在百度上面你搜索了一个东西，然后呢，上面不是帮你列出来各种各样的选项吗。是吧，列出来好多结果，每个结果你是都能点一下点进去的，对吧？这个东西叫做超链接啊，你看我给你写一个超链接，怎么用呢？就是一个A啊，A就是一个超链接，明白吧，比方说呢，哎，我在这里面写一下啊，点我是吧啊查看啊宋老师是吧，私密照片啊是吧？啊你看似这就是一段文字，比如说你就这么写的话，你看了哈，我来给你刷新一下，你看这就是一段文字，你点都点不了的对吧？但是注意了，如果你在A里面，你给它加上一个。

这就不一样了，明白吧，这就不一样了，有啥不一样呢？听我说啊，这个里面就是你指定你要跳转到什么地方，这里面你就写那个地址啊，那么我们可以跳转到我们自己给他设置的地址里面，比如说我想去找到某一个资源，或者说呢，我也可以把它指引到我们网络上，互联网里面任何一个地方，比如说我想让他去到。百度这个大家知道是什么吧？知道吧，哎，这个是要解释一下，好多同学说老师我不知道吗？啊，你用过百度，你能不知道这个吗？是吧？啊那这就有个问题了，说你怎么去往百度这个页面的呀？啊，我百度的呀，是吧，那你怎么打开百度这个页面的呀，我百度的呀，啊这死循环是吧？所以说呢，如果你想去往百度这个页面，其实最根本的你首先得有这样的一个超链接，我才能去往他这个百度页面，你才能进行百度。

能明白吧，啊，那好多同学说我谷歌的呀，我谷歌到百度了是吧？啊不能这么干哈，OK，那我把这个加上以后，你看我再回到页面里面刷新一下，这就不一样了。看到没有，哎，首先颜色不一样，是不是下面还有了一个下划线，而且你鼠标搁上去以后呢，它变成小手了，你看到没有对吧？其实这个你点一下它就有一个行为了，你看了哈，我来点一下它浏览器，你看开始跳转了，你看到没有，只不过我没有网嘛，它这个尝试半天啊，告诉你我过不去对吧？啊，你可以等一等啊，他就是没有网，它肯定是过不去的，如果你有网有网的话，它肯定就有人跳转到百度了。理解了吧，这就是一个超链接，听明白这个意思了吗？OK，好。来吧，那我就取消了哈，不让他往后跳了，其反正你一点呢，比方说我在这个呃，新标签页打开链接啊，你就让他去跳吧，你看一点它就什么已经是百度点com了，你看老师是往这个地方去跳了呀，对吧，只不过呢，他现在正在去连接百度，但是我没有网，那么它是连不过去的。

好吧，这个大家知道就行了哈，你就慢慢去挑取吧，OK，这就是我们的超链接，那么将来的话呢，我们可以可以在这个里面我们去指定什么呀？诶可以指定啊，可以指定我们应用内啊，或者是应用外的任意地址都行，什么样的应用内呢？比如说我自己写的项目，我可以让我让他在我自己写的这个项目里面跳来跳去，对吧，或者说呢，我也可以让他跳转到应用外部互联网里面任何一个地址我都可以跳转过去。这就是一个A超链接啊，你看这个地方已经跳完了哈，叫做呃，找不到这个网站是吧？啊这你看现在这个做的都比较人性化哈，以前的话就是一个很枯燥的一个页面，对不对，现在都做的比较人性化了哈，啊来吧，那这就是我们的一个超链接啊，难吗？这个东西太简单了是吧，我都觉得没必要讲了是吧？来下一个再来给大家去说一个啊常用的再说个什么呢？说个这个表格吧，嗯嗯，表格这个东西呢，现在来讲它就是一个表格了，但以前来讲的话，这个表格有时候他不发挥一个表格的这个作用，他说什么呀，以前我们这个整个页面的这个布局，什么样的布局啊，就是我在页面里面，比如说哎，这个位置呢，我想显示什么东西，这个位置想显示什么东西，这个位置想显示什么东西，这个整个页面的这个布局，它通过表格来做。

但现在不用这么做了，因为表格做起来比较麻烦，现在我们有更好的东西，就是我们的这个div啊，其实后面会给大家去讲到的，现在的布局呢，都通过这个div去做啊，那么这个表格现在怎么用呢？它就是一个具体的表格干嘛的呀？给你显示数据的啊，我们来看一看啊，表格怎么写呢？它就是一个桌子是吧，叫做table。

好叫做什么table，然后呢，这个代表的就是一个表格，能明白吧，OK，表格里面你看我们。知道的表格应该是什么，是是这个样子的呀。是不是这个样子的，没问题吧，哎，大概画一画哈，啊大概讲的就是这个样子，你看一下这个表格就是什么呀，是不是有行有列啊对吧，什么是行什么是列啊啊横向是行还是纵向是行啊，这个没有区分不清楚的同学吧啊，这是行吧，是不是这是列吧，那那这个是第几行第几列啊。

啊，第二行第二行第三列是吧？啊，这个你得区分清楚了哈，别到时候行跟列你搞不清楚对吧？X轴Y轴你不知道是哪个啊OK，那么你看这就是我们的一个表格，那如果说我想做出这样的一个效果来，应该怎么去做呢？诶，那么我们就得需要在表格里面写一个什么呀，表示行的。叫做什么呀？TR这个家伙表示的是行，也就意味着我在天里面我写上一个。诶，我写上一个TR，这就是一行了，然后呢，我再写个TR呢，这就是又一行了，你要再写一个TR呢，哎，这就是第三行了，明白吧，哎，这是第三行了，好，那么你这个行有了列怎么表示啊，是不是有了行以后才有列啊，我们一般说的就是几行几列吧，对吧？我们都习惯性的把这个列呢，给它放到行里面来去讲，就是我这一行里面有几列，那么也就意味着你在每一行里面你要去写你的列啊列我们通过什么呀？TD或者是呢，通过TH来表示，那么这个TH是什么呢？TH呢，它叫做一个解释一下了哈，TH呢，它叫做什么？叫做标题列，你看又提到标题了是吧？哎，标题列的话，它就有这样一个好处，就是什么呀，自带效果，自带什么呀，自带。

居中并加粗的效果就是如果你在标题里面写了文字了，那么这个文字的话就是居中的，并且是加粗的，是自带的一个效果，而这个TD的话呢，就是很普通的了，对吧，它就是一个我们的普通类，啥都不带啊，普通类。A，普通列啊，那比如说呢，我们就呃先用一下这个标题类吧，对吧，我们一个表格总得有那个表头嘛，是不是，那比如说呢，我们这个table做什么东西啊，你看了哈啊，我就做一个这样吧，我在table上面呢，我用一下我们刚刚讲过的这个H1嘛，是不是刚讲过呀，诶H1啊，然后呢，我就写一个这是我们的啊员工信息列表好，然后呢，我希望他居中一下，那我就把它居中一下，等于啊center给它居中一下，那么这个居中了啊，然后呢，在这个TR里面呢，我们在写什么东西啊。

你看了哈，我就写TH，大家写的时候呢，一定要看清楚了啊，不要写错了，这东西你写错了都是这个加括号加括号的看着眼花啊，不好找这个串啊，然后呢啊，尽量的话，你就写上这么一次呢，你就是吧CV打法就行了啊然后呢，这里面比如说我们写一下啊，就是员工的ID，好员工的这个员工号是吧，再来一个员工的这个好员工名字，好员工名吧，再来个什么呀，呃，员工的性别好可以吧，再来个员工的描述，嗯。

好，再来个员工的描述，OK，这就是我想做的一个表格，那么接近你看了哈，我把这个写出来以后呢，现在我们来刷新一下这个浏览器，它已经有一些感觉了哈，刷新一下，你看是这个东西是已经出来了，对吧，但是呢，我们并看不到你那个表格的那个样子。好，所以说呢，大家注意了，如果你想看到那个格子的话呢，我们需要在这个table里面给它去设置一些东西，设置一个最起码得有一个包的，就是那个边框，对吧，就是我们刚刚画的这个，比如说这是你的一个表格，那么你这个表格的话。像这种东西，这个就是表格的边框嘛，你是不是只有有了这个边框以后，你才能看出这个格子来，对吧？哎，那这个边框的线呢，我们得给它设置一下，比如说它是一个项数的PX代表的是项数。

知道什么是像素吗？知不知道什么叫像素啊，啊，听说过，但是不知道是吧？啊，卖手机多少多少万像素的。是不是啊，知道这个概念吗？不知道吧，给你解释一下是吧？啊，那你这个分辨率知道是什么意思吗？你电脑这个分辨率设置过没有，也没设置过呀，啊，那没得聊了是吧？设置过吧，对吧？比如说哎，我这个分辨率是1366乘以768的啊1366乘以768的，也就意味着在我整个的这个桌面上面。

啊，就是我整个这个桌面上面，它是一个1366乘以78的什么意思呢？就是横向总共有1366个像数点组成的，纵向总共有768个像素点组成的，那么整个我这个桌面的像素点有多少个呢？就是1366乘以768个像素点，理解了吗？那么像素就是这个意思。明白了吧，比如说哎，我这个照片，如果说我的照相机的这个像素越高，我照出来的照片就越清晰。是不是啊，为什么呀，因为你在相同的就是同一块区域呢，就是固定的这个区域，区域内你的像素点多呀，是吧？啊，你要说像素点少的很少，那就是马赛克。是吧，看的就是一个格子一个格子一个格子的是吧，是不是这个意思啊，哎，这你要明白这个东西的啊，OK，那这个一个PX代表就是一个项数，理解吧，你就想一下啊，比如说我现在不是1366乘以768嘛，那么横向就是1366那一个项数呢，就是横向1/1366就是一个相数点。

明白吧，啊，这个你知道就行了哈，PX代表的是像数啊，那我把这个写出来以后，我们再来刷新浏览器，你看这个效果就不一样了，你看是不是有这个框框了呀，对不对，OK啊，只不过还长得比较丑哈，那如果我想我也想让他居中一下，那你就可以在这里面呢给他也写一个，哎，但是大家注注意了啊，这个东西呢，不是说每个标签都能用的啊，不是说每一个标记都能用的，有些标记里面是没有的。理解吧，所以说呢，我们有的我才能用，没有的你写上那就不行了。好理解了吧，OK，好，那么比如说我们还可以设置什么东西呢？我们常用的比如说设置一个宽。你这个表格你得有个宽吧，对吧，这个宽我们怎么设置呢？你可以通过像素来设置，比如说啊600个PX啊600个像素，你刷新一下，你看是不是宽了也跑到中间了吧，啊如果说呢，哎，你想要它什么自适应，什么样的自适应啊，就比如说诶你当前这个，如果说你这个。

呃，分辨率是1366的，那你可能想要显示600个像素，但我的分辨率改成1024以后，600个像素那就太大了，我想让它什么再小一点，对吧，就是自动的去适应你这个屏幕的大小，那么你就不要去写具体的数字了，你就写什么呀，百分比，比如说我就希望是60%，这样的话，它会根据你屏幕的这个分辨率来去啊，自动去显示找他60%的这个大小，你看我们现在再写上以后呢，刷新一下。这就是60%，你再怎么调，它都给你显示60%。能明白这个意思了吧，它都给你显示60%，你看到没有。是吧，哎，就这个意思了啊好，那么我们就把它写成这个样子的，那么这是我们的一个。

标题列，那接下来我们在这个TR里面呢，再去演示一下这个普通列啊，普通列就是一个TD了，那就是什么下一行了嘛，对吧？哎，下一行了哈，你看那TD里面我们写点啥呀，那不就是你看一下我们就要在这个下面去写具体的员工了吗？是不是？哎，那我们就写两个哈，比如说这个员工号1001是吧，然后员工的名字呢啊。萍姐是吧，啊，教给大家吧，啊来呃，性别呢，女的员工描述呢。啊，你们来给陈姐做个描述啊，硅谷之花啊啊啊，那就是什么硅谷第一美女是吧？啊第一美女啊，OK，好，那你看当我把这个写出来以后呢，我们再来刷新一下。诶，你看到没有，它下面是不是就多出来这么一个格子了，对不对，但是你很明显就能看出来，这个TD一看就是后妈影的是吧？你看既没有加粗，也没有居中的效果，我们就只能自己去做了，如果说我也想让我这个文字呢，也居中一下加粗我们就不用了啊，因为你具体的文字你是不需要加粗的，对吧？那如果我也想让他居中怎么办呢？你可以在TD里面使用这个东西啊，这是一个好消息是吧？能使用它，你看1001呢，它就给你居中了，看到没有，但你说我这么多内容我都得加上那个东西，是不是也比较烦啊，对吧？这就是一个坏消息了哈，那么我们可以怎么做呀？我干脆在你的TR上面，就整个这一行上面，你给我举动不就行了吗？

是吧，整个这一行你给我居中一下不就行了吗？你看我们来刷新一下，这不就都居中了吗？看到了吧？OK，好，那我们再来写一个吧，不是还有一个DR吗？好，再来写一个。

比说一下。司机是吧？然后呢，男的啊，不对，这是男的啊，知道是谁吗？不知道啊，啊，那他给他描述一下呗，车啊秋名山车神是吧？啊啊不多不少是吧，啊60秒刚刚好对吧。OK，这就是对他的一个描述哈，你们在教室里面听不到他笑吗？OK啊，那就写好了啊，写好以后呢，我们来刷新一下，看下这个效果啊，你看一下这个表格，我们是不是相当于给他做出来了。

对吧，像类似于这种效果的，大家在网站里面见过没见过啊。见过没见过，我觉得女生应该见的比较多了，是吧？啊，经常买东西，购物车不就这个样子吗？只不过人家那个做的稍微好看一点，但实际上它就是一个表格嘛。对吧，啊，就是这个意思啊啊啊，那么像这个表格的话呢，我们看一下啊，这个格子与格子之间呢，它还有一个小小的距离，你看到没有，对吧？这个距离如果说你不想要的话呢，那我再教你一下啊，你在这个table里面呢，再使用一个C。Self space是吧，把它设置为0PX，嗯，这个东西是来设置什么呀，设置那个TD与TD之间的一个距离的啊，就是表格与表格以之间的这个距离，就这个距离，就这个东西。这个东西以及这个东西就是什么，通过那个C来设置的，好，那么现在呢，我们再来刷新一下，我看到这个没有了。看明白了吗？他是有的哈，但是你给它设置一下呢，这个东西就没有了，理解了吧，OK，那么这就是我们的一个什么东西啊，哎，表格啊，给大家去说的。

明白了吗？OK，好。那我们先停一下啊。