您的位置：首页 > Web前端 > HTML

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

2017-08-31 13:25 351 查看
第一篇我们已经详细介绍了如何创建第一个HTML文件和第一个网页页面。介绍了HTML框架构成的一些基本的元素和标签。下面我们继续来深入HTML框架，了解更多的标签，并且增加一点点小应用。在这里，不要意思要插入一个知识点。如果说我写HTML代码也想像写Java代码那样需要写一些注释怎么办。那么你就需要用到这个了
  <!--这是一段注释。注释不会在浏览器中显示。-->
类似于Java注释中的     /*这是一段注释。注释不会影响Java代码*/好了，解决了这个问题我们就可以正式进入正题了。首先，来看看几个简单标签的使用：（1）<em>（内联元素：元素中的内容与其包含元素的其余内容放在一起）      把文本定义为强调的内容。一般的，跟<strong>相比，语气较弱。（2）<br>（“void”元素，“void”元素没有内容，只有一个标记组成。“空”元素没有内容，不过它有开始和结束标记）      换行标签。一般应用于语言分段另起一行，或者表单数据，需要每句一行。（3）<a>      链接一个新的页面。链接的地址在href属性中中指定。      <a href="。。。">This is a link</a>（4）<link>      链接一个外部样式表。对于样式表，即使用css已经设计好的样式，使用方法如下
：
  
<link rel="stylesheet" type="text/css" href="theme.css" />
（5）<blockquote>
  定义块引用。在<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
（6）<q>
  定义短的引用。<q> 标签在本质上与 <blockquote> 是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用 <blockquote> 标签。
（7）<font>     规定文本字体、字体尺寸、字体颜色。包含face、color、size，可自行选择，一般以六位数十六进制的方式选择。
使用如下：
  <font size="3" color="red">
This is some text!
</font>
  <font size="2" color="blue">
This is some text!
</font>
  <font face="verdana" color="green">
This is some text!
</font>
要结合两个元素建立一个HTML列表：使用<ul>和<li>可以建立一个无序列表，使用<ol>和<li>建立有序列表。
（8）<ul>
  无序HTML标签列表。使用如下：
<ul>
<li>Coffee</li><li>Tea</li><li>Milk</li>
</ul>
（9）<ol>
  有序HTML标签列表。使用如下：
<ol>
<li>Coffee</li><li>Tea</li><li>Milk</li>
</ol>
要插入图片，需要用到<img>标签，并且对于浏览器来说，图像太大会使Web页面很难使用，而且下载和显示都很慢。这个时候就需要对图片进行一些修改和处理，并且图片有很多分类，需要有一定的了解。个人推荐编辑应用：Photoshop Elementsis。可以用来调整图像的大小，还可以使用很多免费的联机工具调整图像大小。（10）<img>（内联元素。这说明浏览器不会再图像前后插入一个换行）       向网页中插入一幅图像。请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。<img> 标签有两个必需的属性：src属性 和 alt属性。      src属性：指定图像文件的位置。可以在src属性中使用相对路径包含你自己的网站中的图像，或者可以使用URL包含其他网站的图像；      alt属性：对图像的一个有意义的描述。在一些浏览器中，如果无法找到图像，就会显示这个描述，另外屏幕阅读器会使用这个属性为有视力障碍的人描述图像；另外，图像的宽度要小于800像素，这是Web页面中关于照片大小的一个好经验。数码相机拍摄的大多数照片都太大，不能很好地放在Web页面中，所以需要调整他们的大小。其中，Web浏览器广泛支持的图像格式有三种：      a、JPEG ：可以按不同质量压缩，所以可以很好地权衡图像质量和文件大小，来满足你的需要。最适合保存照片和其他复杂图像；      b、PNG  ：比GIF有更好的透明度控制，而且不像GIF只支持256种颜色，PNG可以支持更多颜色，主要有三种不同大小的选择。PNG-24（支持数百万种颜色）、PNG-16（支持数千种颜色）、以及PNG-8（支持256中颜色）。可以根据需要来进行选择。     c、GIF   ：跟PNG格式差不多。最适合保存logo和其他包含单色、线条或文本的简单图形。GIF和PNG图像格式允许建立一个有透明背景的图像。如果把一个有透明背景的图像放在一个Web页面中，图像后面的的东西（如页面的背景色）就会透过图像的透明部分显示出来。而且GIF和PNG是无损格式，这说明相比于JPEG文件，这些格式的文件往往更大。（关于图像的内容，在后面会专门介绍，请不用着急。）好了，第一个任务介绍标签就完成了，接下来，我们来谈谈HTML模块的构建和如何把很多个文件链接起来的问题。第一，需要对HTML有个整体的把握：一个完整的HTML是一个<html>元素，而<html>元素又是由<head>和<body>两个元素构成。其中，在<head>元素中只能有<style>和<title>这两种元素，而在<body>里面，则是内联许多构建元素。对于HTML模块的构建，趁着现在刚开始学，建议养成一些良好的习惯，推荐如下：（1）开始输入内容之前要规划好Web页面的结构。最好是首先画一个草图，然后创建一个略图，最后再写出HTML；（2）规划页面的时候，从上往下。首先设计大的块元素，然后用内联元素晚上；（3）一定要使用与内容含义最接近的元素。开始学的时候会感觉有点混乱，不过没关系，适应一段时间就会好了。例如，如果需要一个列表，就不要使用段落元素；（4）注意使用嵌套元素。嵌套元素是指完全包含在另一个元素中的元素。如果元素能正确地嵌套，所有标记都能够正确匹配；（5）为网站选择的文件名和文件名夹名中不要使用空格；（6）最好在构建网站初期组织网站文件，这样就不用再网站升级时修改一大堆的路径了。组织网站有很多方法，具体如何组织由你决定。然后我们来介绍一下路径的问题。      （1）相对路径：相对于链接的源Web页面指向网站中其他文件的一个链接。就像在地图上一样，终点总是相对于起点。使用“..”可以链接到源文件上一层文件夹中的一个文件。因为，“..”表示“父文件夹”。前面我们说过，网页的构建是以树形结构为模型的。同样，在保存路径上面，也是树形结构，上一层是下一层的“父文件夹”，下一层是上一层的“子文件夹”。表示如下：  <a href="../../../lounge.html">This is a html</a>   （假如你要找的是lounge.html的页面链接）但是记住，在使用相对路径表示的时候要用“/”（斜线）字符分隔路径中的各个部分。每次要上行到父文件夹时都可以使用“..”。如果要上行两级文件夹，可以输入“../..”。记住两点：                  a、每次上行，都需要用“/”分隔每一部分；                  b、上行的限制是网站的根目录；     （2）绝对路径：从根文件夹到一个文件的路径。告诉服务器如何从你的根文件夹到达某个特定的页面或文件。但是如果服务器没有得到绝对路径，它就不知道去哪里查找。在这里，需要了解一个东西：URL       URL是统一资源定位符或Web地址，可以用来标识Web上的任何资源。典型的URL由一个协议、一个网站名和资源的一个绝对地址组成。例如，百度的URL如下：             https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=%E7%99%BE%E5%BA%A6 在文章的最后，希望大家能够明白，越来越好。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航