search

Home >Web Front-end >HTML Tutorial >认识HTML_html/css_WEB-ITnose

认识HTML_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:34:331277browse

基本框架：

 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

    • Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：html上的div和表格位置不同浏览器错位怎么办_html/css_WEB-ITnoseNext article：6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose

    Related articles

    See more