零基础HTML学习历程（二）标签应用、HTML构建和路径问题

第一篇我们已经详细介绍了如何创建第一个HTML文件和第一个网页页面。介绍了HTML框架构成的一些基本的元素和标签。

下面我们继续来深入HTML框架&＃xff0c;了解更多的标签&＃xff0c;并且增加一点点小应用。

在这里&＃xff0c;不要意思要插入一个知识点。如果说我写HTML代码也想像写Java代码那样需要写一些注释怎么办。那么你就需要用到这个了

类似于Java注释中的

     /*这是一段注释。注释不会影响Java代码*/

好了&＃xff0c;解决了这个问题我们就可以正式进入正题了。首先&＃xff0c;来看看几个简单标签的使用&＃xff1a;

&＃xff08;1&＃xff09;&＃xff08;内联元素&＃xff1a;元素中的内容与其包含元素的其余内容放在一起&＃xff09;

      把文本定义为强调的内容。一般的&＃xff0c;跟相比&＃xff0c;语气较弱。

&＃xff08;2&＃xff09;
&＃xff08;“void”元素&＃xff0c;“void”元素没有内容&＃xff0c;只有一个标记组成。“空”元素没有内容&＃xff0c;不过它有开始和结束标记&＃xff09;

      换行标签。一般应用于语言分段另起一行&＃xff0c;或者表单数据&＃xff0c;需要每句一行。

&＃xff08;3&＃xff09;

      链接一个新的页面。链接的地址在href属性中中指定。

      This is a link

&＃xff08;4&＃xff09;

      链接一个外部样式表。对于样式表&＃xff0c;即使用css已经设计好的样式&＃xff0c;使用方法如下&＃xff1a;

&＃xff08;5&＃xff09;

  定义块引用。在

与

之间的所有文本都会从常规文本中分离出来&＃xff0c;经常会在左、右两边进行缩进&＃xff08;增加外边距&＃xff09;&＃xff0c;而且有时会使用斜体。也就是说&＃xff0c;块引用拥有它们自己的空间。

&＃xff08;6&＃xff09;

  定义短的引用。 标签在本质上与

是一样的。不同之处在于它们的显示和应用。 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分&＃xff08;通常显示为缩进的块&＃xff09;&＃xff0c;请使用

标签。


&＃xff08;7&＃xff09;

     规定文本字体、字体尺寸、字体颜色。包含face、color、size&＃xff0c;可自行选择&＃xff0c;一般以六位数十六进制的方式选择。使用如下&＃xff1a;


  This is some text!


  This is some text!


  This is some text!




要结合两个元素建立一个HTML列表&＃xff1a;使用

和
• 可以建立一个无序列表&＃xff0c;使用
  和
  1. 建立有序列表。

     


     &＃xff08;8&＃xff09;

       无序HTML标签列表。使用如下&＃xff1a;

     • Coffee
     • Tea
     • Milk
     
     
     
     
     &＃xff08;9&＃xff09;

       有序HTML标签列表。使用如下&＃xff1a;

     1. Coffee
     2. Tea
     3. Milk
     
     
     
     
     

     要插入图片&＃xff0c;需要用到标签&＃xff0c;并且对于浏览器来说&＃xff0c;图像太大会使Web页面很难使用&＃xff0c;而且下载和显示都很慢。这个时候就需要对图片进行一些修改和处理&＃xff0c;并且图片有很多分类&＃xff0c;需要有一定的了解。个人推荐编辑应用&＃xff1a;Photoshop Elementsis。可以用来调整图像的大小&＃xff0c;还可以使用很多免费的联机工具调整图像大小。
     

     &＃xff08;10&＃xff09;&＃xff08;内联元素。这说明浏览器不会再图像前后插入一个换行&＃xff09;

            向网页中插入一幅图像。请注意&＃xff0c;从技术上讲&＃xff0c; 标签并不会在网页中插入图像&＃xff0c;而是从网页上链接图像。 标签创建的是被引用图像的占位空间。 标签有两个必需的属性&＃xff1a;src属性 和 alt属性。

           src属性&＃xff1a;指定图像文件的位置。可以在src属性中使用相对路径包含你自己的网站中的图像&＃xff0c;或者可以使用URL包含其他网站的图像&＃xff1b;

           alt属性&＃xff1a;对图像的一个有意义的描述。在一些浏览器中&＃xff0c;如果无法找到图像&＃xff0c;就会显示这个描述&＃xff0c;另外屏幕阅读器会使用这个属性为有视力障碍的人描述图像&＃xff1b;

     
     

     另外&＃xff0c;图像的宽度要小于800像素&＃xff0c;这是Web页面中关于照片大小的一个好经验。数码相机拍摄的大多数照片都太大&＃xff0c;不能很好地放在Web页面中&＃xff0c;所以需要调整他们的大小。
     

     
     

     其中&＃xff0c;Web浏览器广泛支持的图像格式有三种&＃xff1a;

           a、JPEG &＃xff1a;可以按不同质量压缩&＃xff0c;所以可以很好地权衡图像质量和文件大小&＃xff0c;来满足你的需要。最适合保存照片和其他复杂图像&＃xff1b;

           b、PNG  &＃xff1a;比GIF有更好的透明度控制&＃xff0c;而且不像GIF只支持256种颜色&＃xff0c;PNG可以支持更多颜色&＃xff0c;主要有三种不同大小的选择。PNG-24&＃xff08;支持数百万种颜色&＃xff09;、PNG-16&＃xff08;支持数千种颜色&＃xff09;、以及PNG-8&＃xff08;支持256中颜色&＃xff09;。可以根据需要来进行选择。

          c、GIF   &＃xff1a;跟PNG格式差不多。最适合保存logo和其他包含单色、线条或文本的简单图形。GIF和PNG图像格式允许建立一个有透明背景的图像。如果把一个有透明背景的图像放在一个Web页面中&＃xff0c;图像后面的的东西&＃xff08;如页面的背景色&＃xff09;就会透过图像的透明部分显示出来。而且GIF和PNG是无损格式&＃xff0c;这说明相比于JPEG文件&＃xff0c;这些格式的文件往往更大。

     &＃xff08;关于图像的内容&＃xff0c;在后面会专门介绍&＃xff0c;请不用着急。&＃xff09;

     
     

     好了&＃xff0c;第一个任务介绍标签就完成了&＃xff0c;接下来&＃xff0c;我们来谈谈HTML模块的构建和如何把很多个文件链接起来的问题。

     
     

     第一&＃xff0c;需要对HTML有个整体的把握&＃xff1a;

     一个完整的HTML是一个元素&＃xff0c;而元素又是由和两个元素构成。其中&＃xff0c;在元素中只能有和这两种元素&＃xff0c;而在里面&＃xff0c;则是内联许多构建元素。
     

     对于HTML模块的构建&＃xff0c;趁着现在刚开始学&＃xff0c;建议养成一些良好的习惯&＃xff0c;推荐如下&＃xff1a;

     &＃xff08;1&＃xff09;开始输入内容之前要规划好Web页面的结构。最好是首先画一个草图&＃xff0c;然后创建一个略图&＃xff0c;最后再写出HTML&＃xff1b;

     &＃xff08;2&＃xff09;规划页面的时候&＃xff0c;从上往下。首先设计大的块元素&＃xff0c;然后用内联元素晚上&＃xff1b;

     &＃xff08;3&＃xff09;一定要使用与内容含义最接近的元素。开始学的时候会感觉有点混乱&＃xff0c;不过没关系&＃xff0c;适应一段时间就会好了。例如&＃xff0c;如果需要一个列表&＃xff0c;就不要使用段落元素&＃xff1b;

     &＃xff08;4&＃xff09;注意使用嵌套元素。嵌套元素是指完全包含在另一个元素中的元素。如果元素能正确地嵌套&＃xff0c;所有标记都能够正确匹配&＃xff1b;

     &＃xff08;5&＃xff09;为网站选择的文件名和文件名夹名中不要使用空格&＃xff1b;

     &＃xff08;6&＃xff09;最好在构建网站初期组织网站文件&＃xff0c;这样就不用再网站升级时修改一大堆的路径了。组织网站有很多方法&＃xff0c;具体如何组织由你决定。

     
     

     然后我们来介绍一下路径的问题。

           &＃xff08;1&＃xff09;相对路径&＃xff1a;相对于链接的源Web页面指向网站中其他文件的一个链接。就像在地图上一样&＃xff0c;终点总是相对于起点。使用“..”可以链接到源文件上一层文件夹中的一个文件。因为&＃xff0c;“..”表示“父文件夹”。前面我们说过&＃xff0c;网页的构建是以树形结构为模型的。同样&＃xff0c;在保存路径上面&＃xff0c;也是树形结构&＃xff0c;上一层是下一层的“父文件夹”&＃xff0c;下一层是上一层的“子文件夹”。

     表示如下&＃xff1a;

     
     

       This is a html   &＃xff08;假如你要找的是lounge.html的页面链接&＃xff09;
     

     
     

     但是记住&＃xff0c;在使用相对路径表示的时候要用“/”&＃xff08;斜线&＃xff09;字符分隔路径中的各个部分。每次要上行到父文件夹时都可以使用“..”。如果要上行两级文件夹&＃xff0c;可以输入“../..”。记住两点&＃xff1a;

                       a、每次上行&＃xff0c;都需要用“/”分隔每一部分&＃xff1b;

                       b、上行的限制是网站的根目录&＃xff1b;

     
     

          &＃xff08;2&＃xff09;绝对路径&＃xff1a;从根文件夹到一个文件的路径。告诉服务器如何从你的根文件夹到达某个特定的页面或文件。但是如果服务器没有得到绝对路径&＃xff0c;它就不知道去哪里查找。

     
     

     在这里&＃xff0c;需要了解一个东西&＃xff1a;URL

     
     

            URL是统一资源定位符或Web地址&＃xff0c;可以用来标识Web上的任何资源。典型的URL由一个协议、一个网站名和资源的一个绝对地址组成。例如&＃xff0c;百度的URL如下&＃xff1a;

                  https://www.baidu.com/baidu?tn&＃61;monline_3_dg&ie&＃61;utf-8&wd&＃61;%E7%99%BE%E5%BA%A6

     
     

     在文章的最后&＃xff0c;希望大家能够明白&＃xff0c;越来越好。