recherche

Maison >interface Web >tutoriel HTML >认识HTML_html/css_WEB-ITnose

认识HTML_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 11:34:331280parcourir

基本框架：

 1 <html>  2 <head>  3 <title>This Is Title</title> 4 </head> 5  6 <body> 7 <h1><!--一级标题--></h1> 8 <h2><!--二级标题--></h2> 9 <p>10 <!--段落-->11 </p>12 </body>13 </html>

注释：

  • 和告诉浏览器文件的内容是HTML
  • 被和包围的首部（head）告诉浏览器关于web页面的信息
  • head标记中放入title标记，title出现在浏览器窗口
  • 页面的主体包括和标记以及他们之间的所有内容，是浏览器中看到的部分
  • 元素 = 开始标记 + 内容 + 结束标记

    • style，CSS

     

     1 <head>                     2     <title>This Is Title</title> 3          4     <style type="text/css"> 5                 body{ 6                     background-color: #eaf;     7                     margin-left: 20%; 8                     margin-right: 20%; 9                     border: 2px dotted black;10                     padding: 10px 10px 10px 10px;11                     font-family: sans-serif;12                 }13     </style>14 </head>

    注释：

  • style指定样式为CSS
  • background-color ：背景色
  • margin-left，margin-right：左右外边距分别占页面的20%
  • border：页面周围边框为虚线，颜色为黑色
  • padding：在页面主体周围创建一些内边距
  • font-family：定义文本使用的字体

    •  

    HT（hypertext）

     

    1 <a href = "beverages/elixir.html" > elixirs </a>2 <a href = "http://www.cnblogs.com/JJ-kelion/" title = "Read His blogs" > cnblogs jj-kelion </a>3 <a href = "../index.html" > RETURN </a>4 <a target = "_blank" href="beverages/elixir.html"> <img  src="images/j.png" alt="认识HTML_html/css_WEB-ITnose" > </a>

    注释：

  • 使用从一个页面链接到另一个页面
  • 的属性指定了链接的目标文件
  • 元素的内容是链接的标签。默认的，这个标签有下划线，指示可以单击的
  • 文字和图像都可以用作链接的标签
  • 使用“..”可以链接到源文件的上一层文件夹的一个文件，".."代表父文件夹。
  • “/”用来分隔路径的图像

    • 示图：

    ,

     

    1 <blockquote>2     Passing cars, <br>3     when you can't see, <br>4     A glimpse, <br>5 </blockquote>6 7 <p>8     <q> passing car </q>,when you can't see.9 </p>

    注释：

  • ：双引号，短引号，作为现有段落的一部分
  • ：较长引用，单独显示，为块元素

  • ：换行符

    •  

      ，
      ，

     

     1 <ol> 2     <li> one </li> 3     <li> two </li> 4     <li> three </li> 5     <li> four thing  6         <ul> 7             <li> one </li> 8             <li> two </li> 9             <li> three </li>10         </ul>11     </li>12 </ol>

    注释：

    • ：ordered list  有序
    • : unordered list 无序
  • ： 用来标识每个元素
    • 和
    1. 或者
        和
      • 总是要一起使用

        •  

         

        URL

         

         1 URL: 2     http://www.cnblogs.com/JJ-kelion/ 3          4     <a href="http://www.cnblogs.com/JJ-kelion/" title="Read His blogs"> cnblogs jj-kelion</a> 5          6     <!--为标题的开始增加标记--> 7     <h2 id="chai"> Chai Tea </h2>   8     <!--用可用ID链接到元素--> 9     <a href="top.html/#chai" title="read chai"> Chai tea </a>10     <!--打开新窗口-->11     <a target="_blank" href="http://www.cnblogs.com/JJ-kelion/" title="Read His blogs"> cnblogs jj-kelion</a>

        注释：

      • URL：域名，用来唯一标识网站
      • 为了便于访问，在元素中使用title元素
      • 使用target属性在另一个浏览器窗口中打开链接。

        •  

        使用图像：

         

        幕后步骤：

      1. 浏览器从服务器获取文件“jj-kelion.html”
      2. 读取“jj-kelion.html”，发现有n个图像需要获取
      3. 从服务器逐个得到图像，从第一开始，显示完后，转向下一个图

      常用图片格式：

    2. JPEG
    3. PNG
    4. GIF

      5. 格式分析：

    5. JPEG：适合连续色调图像，可以表示千万种颜色，有损格式，不支持透明和动画
    6. PNG：适合单色和线条构成图，是一种无损格式，允许透明，
    7. GIF：最适合单色图和线条图，最多256种颜色，支持透明，无损格式，支持动画。

      8. 总结：

    8. JPEG和PNG擅长表示logo和文本图像；
    9. JPEG擅长照片
    10. 需要透明和多种颜色：选择PNG

      11.  

       

      认识HTML_html/css_WEB-ITnose

       

      1 <img  src="images/jj.png" alt="认识HTML_html/css_WEB-ITnose" ><br />2 <img  src="http://www.cnblogs.com/JJ-kelion/images/corporate/ceo.jpg" alt="认识HTML_html/css_WEB-ITnose" ><br />3 <img src="images/jj.png" alt="a picture"><br />4 <img  src="images/jj.png"    style="max-width:90%"  style="max-width:90%" alt="认识HTML_html/css_WEB-ITnose" ><br />  <!--使用缩略图-->5 <a href="big picture"> <img src="small picture" alt="a picture">  </a>

      注释：

    11. src不只是用于相对链接，还可以放入URL
    12. 相同网站上的链接和图像，最好使用相对链接
    13. 如果图像未能显示，就会用alt属性指定的描述图像的文本代替图像

      14. 创建缩略图步骤：

      1. 为缩略图创建一个目录
      2. 将各个分辨率降低后的照片存入文件夹中
      3. 将页面中的各个认识HTML_html/css_WEB-ITnose元素的src设置为缩略版的
      4. 增加从缩略图到一个新页面显示大图的链接

       

      HTML5

       

      指南：

    14.   首行
    15. alt属性为必要的
    16. 指定字符编码，在首部中的首行，
    17. 验证代码工具：http：//validator.w3.org

    • Déclaration：
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Article précédent：html上的div和表格位置不同浏览器错位怎么办_html/css_WEB-ITnoseArticle suivant：6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose

    Articles Liés

    Voir plus