HTML技术入门

发布时间:2017年05月11日 10点56分06秒
博客类别:JavaWeb基础
阅读(175)   评论(0)   喜欢(1)
  • 分享到: QQ空间 更多
  • 01.jpg




    OK,不多说,开始今天的课程吧。我不会讲太多理论性的东西,直接实战。今天是我们基础班的第一节课,让我们来体验一下HTML的魅力,了解一下它到底是什么东西?




    好的,我们开始吧,打开Eclipse,新建一个项目,就叫做Base吧,基础班的意思。注意哦,要建一个JavaWeb项目。右键,new,Dynamic Web Project,如果出来的菜单项没有,就点最下面的others,找到Dynamic Web Project。




    (注:你不需要跟着我一步一步搭项目,到时候直接通过SVN把项目Import到本地,需要做什么作业的话,我会在最后给出。你们直接导入项目,看我的源码就OK了。)




    blob.png




    点Next。




    blob.png




    点Next。




    blob.png




    点击Finish,项目新建成功!




    目录结构如下:




    blob.png




    接下来,我们再来建一个文件夹。




    blob.png




    那么,今天我们的讲课资料,都会放在这个文件夹里面。右键点中ch01,new一个file,取名为index.html。




    blob.png




    blob.png




    现在他还只是一个空白文件,啥也没有哦。现在,我要把这个项目跑起来,如何做呢,很简单,根据以前的知识点,我是不是只要去修改Tomcat的配置文件就好了呀,如果还有不会的,去看之前的教程,我不会再重复了。现在,我打开这个:




    blob.png




    blob.png




    注意哦,看我怎么操作的,我现在把鼠标的光标放在这一行上:




    blob.png




    随便放在这一行的哪个位置,能看到光标在闪啊闪的就行了,现在就是见证奇迹的时刻!




    我按住键盘上的Ctrl键和Alt键,然后按一下键盘上的向下箭头,这一行就被神奇的复制到下一行了,有图有真相:




    blob.png




    听好,这个快捷键在实际开发中会经常被使用的,使用频率非常非常高,一定要把这个快捷键记住。然后把doBase修改一下,改成我们Base项目的WebContent目录地址,这个就是Web项目的发布目录。我就再讲一遍吧,看好了,如何迅速地找到文件目录:




    1.gif




    就是这样做的,OK,我们把doBase换成这个地址,路由映射地址改成我们的项目名称:




    <Context docBase="E:\Java培训\software\eclipse-mars\workspace\Base\WebContent" path="/Base" debug="0" reloadable="false" />

    然后,启动Tomcat:




    blob.png




    打开浏览器,输入 http://localhost/Base/ch01/index.html




    http://localhost/Base的意思就是我们项目的根路径,你可以理解为就是WebContent文件夹:




    blob.png




    然后,我们访问这个文件:ch01/index.html




    不就是访问我们ch01文件夹下面的index.html吗?这就是Web项目,其实就是访问一些东西而已。当然,我们现在还没有涉及Java代码,所以,编译路径暂时还不需要改。现在,我们在index.html里面写上一句话:




    blob.png




    哈哈,这不就是和普通的文本文件txt一样的吗?虽然它的名字叫做index.html,可实际上,他的内容和txt文件没有什么不同,你说对不对?刷新浏览器,可以看到:




    blob.png




    OK,是不是有了,现在,我们写中文试试:




    blob.png




    刷新页面:




    blob.png




    也可以,因为我们文件的编码是UTF-8的,所以这里写中文也没有太大的问题。可以说,这是一个伪HTML文件,我们要让它变成真的HTML文件,就必须满足HTML文件的一些规范。我现在把这些文字放在一个html元素中。像这样:




    blob.png




    其实严格来说呢,HTML是一种结构性语言,他和传统的编程语言,比如Java,JavaScript,C,C++等不同,它没有语法,只有结构。它会通过结构,来描述一些东西,仅此而已。




    我喜欢把<html></html>这样的东西称呼为元素,有的书上称呼这个为标签,其实我觉得这样反而不好理解了,不就是元素嘛?在以上那个例子中,我创建了一个html元素,诶,这样一来,浏览器就知道了,他知道有一个html元素,然后对它里面的东西,根据某种规则做一些渲染。




    可以看到,我们这样写有一个警告:




    blob.png




    它说Invalid text string,无效的文本字符。原因是,在html元素中,是不允许直接放字符串的。那么,我现在在html元素中,挂载一个body元素:




    blob.png




    刚才的警告信息就没有了,这是什么原因呢?它起码说明,这样的结构就符合了一个html文件的规范。所以,我们以后都不应该直接在html元素中写字符串。现在,我给html元素绑定一个lang属性。




    <html lang="en">

    这又是什么意思呢?其实,它的意思是,我设置该HTML文件的语言为英文,那么浏览器在读到这个配置信息的时候,就会知道,哦,这是一个英文网页。如果是谷歌浏览器,可能还会自动提示你,要不要对该页面进行翻译?有的同学可能会好奇了,那为什么我写中文也可以显示呢?其实这个没有必然关系的,难道英文网页就不能显示中文吗,只要你的文件编码支持中文,比如GBK,UTF-8,那么,浏览器就能成功地把中文显示出来。那么,我可不可以设置这个网页为中文网页呢?当然也可以,只需要把en改成"zh-CN",像这样:




    <html lang="zh-CN">

    这就表明,这个网页的语言采用简体中文,在国内使用的。嗯,接下来我们加快点速度:




    <html lang="zh-CN">
    <head>
    <title>My Test Page</title>
    <meta charset="UTF-8">
    </head>
    <body>
      Hello!
      这是我的第一个HTML文件!
    </body>
    </html>

    <title>My Test Page</title>的意思是,设置网页的标题为My Test Page




    <meta charset="UTF-8">的意思是,设置网页的编码为UTF-8




    在实际开发当中呢,这个大概就是一个完整的网页结构了,我们所有的内容,都需要写在body元素中,以元素挂载的方式一个个添加进去,然后每个元素又可以挂载其他元素。比如,我在head元素上面,又挂载了title元素,对不对?看到这里,有的同学可能又要问了,为什么一定是这么写啊,这些元素是在哪里定义的啊,元素名称非得和他一模一样吗?我能不能写一个自定义的元素呢?




    首先,回答你第一个问题,其实,这些元素,比如html,body,它就是叫这个名字的,在很早很早以前,浏览器还没有普及的时候,就已经有了这么一套规范。随着科技的进步,又出来一个组织,专门来设置这些规范。然后浏览器厂商遵循这些规范,开发出自己的浏览器产品。




    第二个问题,自定义属性,这个也是可以的,但是,你这样做的话,浏览器不会主动识别这些元素,就连这些元素到底是行级元素还是块级元素都不知道。在浏览器中,很多元素都是预设好的,比如P元素,P元素里面的内容,都会被浏览器认为是一个段落。比如,现在我们的网页上,虽然有换行:




    blob.png




    可是,页面上却没有换行的效果:




    blob.png




    那么如何换行呢,一种方法是用<br>元素,加载 Hello! 的后面,或者把两句话分别用p元素包起来,比如这样:




    blob.png




    页面:




    blob.png




    01.jpg




    说了这么多,让我们回到本节最开始的那张图,其实我主要就是想让你明白一件事,关于HTML,你只需要记住两个要点即可:




    1、一个网页由元素组成,根元素是一个叫做html的元素,而且,一个元素上面还可以挂载其他元素。




    2、每个元素都可以绑定自己的属性,属性必然包括属性键和属性值(如图所示),这很像一个简单的分子结构。我们可以说,一个元素由多个属性分子组成,每个属性分子就是由属性键和属性值组成的单一结构。




    以上是我自己的总结,所以,你不会在其他任何书上看到这样的描述。让我们回到html文件:




    <html lang="zh-CN">
    <head>
        <title>My Test Page</title>
        <meta charset="UTF-8">
    </head>
    <body>
      Hello!
      这是我的第一个HTML文件!
    </body>
    </html>

    现在我来描述一下这个文件:




    1、根元素是html元素,在它上面一共挂载了两个元素,分别是head元素和body元素。




    2、html元素绑定了一个属性分子,用于说明该网页所用的语言是怎样的,该属性分子的结构如下:




    blob.png




    3、 ...




    是不是很形象呢?OK,接下来,我们做一个练习,我就不多说了,就贴一些代码,你按照本节所提供的探索思路,照着自己体会一下,最好说一遍:




    <html>    
        <head>    
            <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">    
            <meta charset="utf-8" />    
            <title>小兔博客-JavaWeb知识分享网</title>    
            <meta name="description" content="立志于打造国内最逗逼的JavaWeb技术博客,和新手学习平台。JavaWeb知识分享网,Javascript,css,html,Java,Servlet,免费视频更新" />    
            <meta name="keywords" content="JavaWeb知识分享网,Javascript,css,html,Java,Servlet,免费视频更新,Java资源,外网搜索,谷歌自定义搜索" />    
            <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'/>    
            <link rel="stylesheet" href="http://www.xiaotublog.com/resource/css/style.css" />    
            <link rel="stylesheet" href="http://www.xiaotublog.com/resource/font/iconfont.css"/>    
            <script type="text/javascript" src="http://www.xiaotublog.com/resource/js/jquery-1.11.2.min.js" ></script>    
            <script type="text/javascript" src="http://www.xiaotublog.com/resource/js/util.js"></script>    
            <script type="text/javascript">var basePath="http://www.xiaotublog.com";</script>   
        </head>    
        
        <body style="background: #eee">     
        
        </body>
    
    </html>

    这是小兔博客首页的部分代码,你对照着思考:




    1、哪些是元素?




    2、哪些元素有其他元素挂载




    3、这些元素各绑定了哪些属性分子,属性键和属性值分别是什么?




    4、猜一下他们的意思?




     


    上一篇:超级VIP模块关闭通知

    下一篇:Every derived table must have its own alias (MYSQL)