基本框架：

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

style，CSS

 <head>

     <title>This Is Title</title>

     <style type="text/css">

                 body{

                     background-color: #eaf;

                     margin-left: 20%;

                     margin-right: 20%;

                     border: 2px dotted black;

                     padding: 10px 10px 10px 10px;

                     font-family: sans-serif;

                 }

     </style>

 </head>

注释：

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

HT（hypertext）

 <a href = "beverages/elixir.html" > elixirs </a>

 <a href = "http://www.cnblogs.com/JJ-kelion/" title = "Read His blogs" > cnblogs jj-kelion </a>

 <a href = "../index.html" > RETURN </a>

 <a target = "_blank" href="beverages/elixir.html"> <img src="data:images/j.png"> </a>

注释：

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

示图：

<p>,<blockquot><br>

 <blockquote>

     Passing cars, <br>

     when you can't see, <br>

     A glimpse, <br>

 </blockquote>

 <p>

     <q> passing car </q>,when you can't see.

 </p>

注释：

  • <q>：双引号，短引号，作为现有段落的一部分
  • <blockquote>：较长引用，单独显示，为块元素
  • <br>：换行符

<ol>，<ul>，<li>

 <ol>

     <li> one </li>

     <li> two </li>

     <li> three </li>

     <li> four thing

         <ul>

             <li> one </li>

             <li> two </li>

             <li> three </li>

         </ul>

     </li>

 </ol>

注释：

  • <ol>：ordered list  有序
  • <ul> : unordered list 无序
  • <li> ： 用来标识每个元素
  • <ol>和<li> 或者 <ul>和<li>总是要一起使用

URL

 URL:

     http://www.cnblogs.com/JJ-kelion/

     <a href="http://www.cnblogs.com/JJ-kelion/" title="Read His blogs"> cnblogs jj-kelion</a>

     <!--为标题的开始增加标记-->

     <h2 id="chai"> Chai Tea </h2>

     <!--用可用ID链接到元素-->

     <a href="top.html/#chai" title="read chai"> Chai tea </a>

     <!--打开新窗口-->

     <a target="_blank" href="http://www.cnblogs.com/JJ-kelion/" title="Read His blogs"> cnblogs jj-kelion</a>

注释：

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

使用图像：

幕后步骤：

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

常用图片格式：

  • JPEG
  • PNG
  • GIF

格式分析：

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

总结：

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

<img>

 <img src="data:images/jj.png">

 <img src="http://www.cnblogs.com/JJ-kelion/images/corporate/ceo.jpg">

 <img src="data:images/jj.png" alt="a picture">

 <img src="data:images/jj.png" width="48" height="10">
  <!--使用缩略图-->

 <a href="big picture"> <img src="small picture" alt="a picture">  </a>

注释：

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

创建缩略图步骤：

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

HTML5

指南：

  • <!doctype html>  首行
  • alt属性为必要的
  • 指定字符编码，在<head>首部中的首行，<meta charset = "utf-8">
  • 验证代码工具：http：//validator.w3.org

随机推荐

  1. android开发之路03

    一.Activity1.如何在一个应用程序中定义多个Activity:①定义一个类,继承Activity:②在该类当中,复写Activity当中的onCreate方法:③在AndroidManifes ...

  2. 深入理解计算机系统第二版习题解答CSAPP 2.15

    只使用位级运算和逻辑运算,编写一个C表达式,它等价于x==y.换句话说,当x和y相等时它将返回1,否则就返回0. !(x ^ y)

  3. 使用SQL循环打印'*'菱形

    菱形每一行都是由n个' ' + n 个'**' + 1个'*' 组成的 例如高度为9的菱形(共print 9次),*最多的一次print为第五次第五次就是0个' '  + 4个'**' + 1个'*' ...

  4. 用js对象创建链表

    //以下是一个链表类 function LinkedList(){ //Node表示要加入列表的项 var Node=function(element){ this.element=element; ...

  5. for循环里面的判断条件

    先看下面这段代码,你很容易猜到结果 for(i=0;i<10;i++){ console.log(i); // 结果是打印出 1,2,3,4,5,6,7,8,9 } 再看一下这款代码,也许很容易 ...

  6. get请求在ie浏览器下有缓存

    今天做项目的时候,数据库有新数据更新后,发现页面的行为却没有更新: 打断点调试的时候,发现程序也不进方法: 最终发现是因为请求数据的时候使用了get请求,而且在IE10下导致的: 注:IE浏览器中使用 ...

  7. 议：如何将树形菜单形式的数据转化成HTML的二维表（相同内容需合并单元格）

    一般做OA类管理系统,经常涉及到“组织架构”的概念,那么像这种有上下层级关系的数据一般会做成树形菜单的方式显示,底层代码必定会用到递归算法.这篇随笔的目的就是要谈谈除了用树形菜单来显示这种上下层级关系 ...

  8. ASP怎样获得代码中第一张图片地址

    '把pattern 又修改了下 'code要检测的代码 'http://www.knowsky.com/asp.asp 'leixing html 或者ubb 'nopic 代码没有图片时默认值 fu ...

  9. 常用meta整理【转载】

    < meta > 元素 概要 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 we ...

  10. 0708_Java如何设置输入流

    1.Java如何设置输入流:?(以解决看下面实例代码) 2.Java如何设置全局变量:(以解决public static即可) 3.Java为什么在做那种机试题目的时候都要设置成静态的:(以解决,因为 ...