Web前端从入门到精通

Web前端从入门到精通

本节课我继续带着大家学习html

上节课的话我们已经有了一个页面,大概长成这个样子:

<!DOCTYPE html> <html lang="en"> </html>

双击这个文件打开预览,什么都没有

好的,从现在开始我们给它加一些内容

根据html语法规定,html标签里的直系子标签有head body等

所以你的脑海中应该想着我们的页面变成了这样

<!DOCTYPE html> <html lang="en"> <head></head> <body></body> </html>

先来说说head吧

head里面又可以放title meta style link script标签

现在先记住

style里面放css代码

link可以将外部css代码链接进来

具体style里面的代码怎么写,以及为什么需要用link标签将外部代码链接进来,以及如何链接等等一系列问题 等我们讲到css的时候再详细说

script里面99.9%的情况下放的是Javascript代码 也等我们讲到Js的时候再详细说

至于meta标签的话,个人感觉在移动端自适应那一块威力比较大,wps表格,web端的话基本上就是做一些标识等等,大家如果想了解的话可以自己百度一下

这个也没什么好说的

这样我们就只剩title了

title顾名思义 题目,对吧,但是千万不要把它和我们网页上那个大大的题目联系在一起

它们八竿子打不到

title里面放的内容是显示在标签上的,例如我们写了下面一段代码

<!DOCTYPE html> <html lang="en"> <head> <title>title里面的内容显示在标签上</title> </head> <body> </body> </html>

ctrl+s保存之后双击该文件在浏览器中预览,我们就会发现标签上显示出了对应的文字:

chrome

技术分享

FireFox

IE

当然,大家现在可能正在用自己用起来比较爽的编辑器写我们的代码

事实上,我们可以在编辑器中右击在浏览器中预览,这样就可以在浏览器中打开我们的网页了

而没有必要每次都去双击打开

从现在开始我们需要养成一个习惯就是写好了一段代码之后,要在IE FireFox(简称FF) chrome下分别预览效果

当然我们的教程里面在兼容性没什么问题的时候,为了方便就只在一个浏览器里面预览

如果遇到浏览器不一致的地方我们会特殊说明

title标签我们知道干什么了之后

head标签里面的东西我们大概有了一个了解了

接下来看body

body里面的东西才是我们真正要显示到页面当中的东西

body里面可以放很多东西

我先给出一段代码,让大家看一下


本文标题:Web前端从入门到精通,由WPS精选分享
如果您觉得这篇文章不错,请使用分享工具推荐到您喜欢的微博、网站或者论坛

所属分类:WPS其他
本文标签:开源互联网mamicode.com软件开发码迷
发布时间:2016-03-30