首页 > 代码库 > 2017年5月5号课堂笔记

2017年5月5号课堂笔记

2024-09-19 16:51:18   221人阅读

2017年5月5号 星期五 沙尘暴转晴

内容：U2 HTML5第一节课

一、01第一个霸气的网页

1、老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <!--  html注释  不安全   用户在网页中查看源代码可以看到
      w3c  : World  wide  Web  Consortium  (万维网联盟)
      官网： www.w3.org   www.chinaw3c.org
      w3c标准：
         01.结构化标准语言  html  xhtml  xml
         02.表现标准语言  css
         03.行为标准语言 Dom  ECMAScript(js基础)


      html : Hyper  Text  Markup Language 超文本标记语言   着重于数据的显示！
       超文本：  指的是 页面中可以包含  图片，视频，音频程序等。。。

      结构：
        <html>  开放标签
        </html> 闭合标签
         <br/> 自闭合标签

        head  : 头部！ 提供网页的基本信息！  比如说：文档的标题，编码格式，搜索关键字等。。
           01.title  标题
           02.meta：
                  001.提供了有关于页面的元信息
                  002.没有内容，通过属性名和属性值来设置信息
                  003. xhtml 需要闭合   html不需要闭合

        body:我们内容展示的地方
     -->
    <meta charset="UTF-8">  <!-- 编码格式-->
    <meta name="keywords" content="大家好，hello"><!--keywords 搜索关键字-->
    <meta name="description" content="问候语"><!--description  内容描述 -->
    <title>这是一个霸气的页面</title>
</head>

<body>
   大家辛苦了！
</body>
</html>

2、自己代码：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="keywords" content="做饭好吃，夸媳妇儿">
    <meta name="description" content="文本主题">
    <title>第一个夸媳妇儿的网页</title>
</head>
<body>
传说我媳妇儿做饭挺好吃，嘿嘿~
</body>
</html>
二、02标题标签
1、老师代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>标题标签的使用</title>
    <!--title 是整个网页的标题-->
</head>
<body>
 <!--  内容的标题   h1  -  h6  都是标题标签-->

  <h1>1级标题</h1>
  <h2>2级标题</h2>
  <h3>3级标题</h3>
  <h4>4级标题</h4>
  <h5>5级标题</h5>
  <h6>6级标题</h6>

  <h7>7级标题</h7>
 普通的文字
</body>
</html>

2、自己代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>标题标签的使用</title>
</head>
<body>
<h1>军级军官</h1>
<h2>师级军官</h2>
<h3>旅级军官</h3>
<h4>团级军官</h4>
<h5>营级军官</h5>
<h6>连级军官</h6>

<h7>排级军官</h7>
我是班长

</body>
</html>

三、03段落标签
1、老师代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
  <p>到现在还记得，面试完后，脚底的轻快，跟快要飞起来一样。 </p>

  <p>
      阳光很好，所以我脱下了羽绒服，换上简单轻便的运动装，把头发扎起来。
      金黄色的阳光，斑斑驳驳的，泛着温暖的光。<br/><!--  换行标签-->
      透过树叶之间的缝隙，大把大把的阳光倾洒下来。太阳像是一个慷慨的富人，将自己的所有都奉献出来。
      这样好的天气，这样好的心情，只持续了半天而已。
  </p>
</body>
</html>

2、自己代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
<p>闪耀着火光的火机终于是划完了那道优美的弧线，叮当落地。天空中响起一阵轰鸣，感热飞弹已经喷着火舌从天而降。
    绕岸垂杨的身体开始下坠，他无法立刻使用受身操作，他不是普通的浮空，他是被吸附在“悬磁炮弹”上。</p>

<p>火机、绕岸垂杨、悬磁弹的爆炸，一起迎接了感热飞弹的到来。一朵夸张的蘑菇云腾空而起。
    但这还没完，气流中被掀得不住翻滚的绕岸垂杨，就看到头顶上空一道粗亮的光柱已经直射而下，
    却是枪炮师的终极大招卫星射线……同一时间，绕岸垂杨竟然是把枪炮师的各种高伤大招都吃了个遍。</p>

<p>被卫星射线洗涤的他，此时周身还在翻滚着爆炸的光亮和硝烟。<br/><!--换行标签-->
    叶修抓紧时间又是操作逐烟霞丢进了几个技能，
    围观党们目瞪口呆地看着接连的爆炸硬是轰出一个多达77段的连续攻击。</p>


</body>
</html>

四、04段落,标题,水平线
1、老师代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>段落 标题 水平线</title>
</head>
<body>
   <h3>小学生作文</h3> <!--标题标签-->
   <hr/><!-- 自闭合标签   水平线-->
  <p>到现在还记得，面试完后，脚底的轻快，跟快要飞起来一样。 </p>

  <p>
      阳光很好，所以我脱下了羽绒服，换上简单轻便的运动装，把头发扎起来。
      金黄色的阳光，斑斑驳驳的，泛着温暖的光。<br/><!--  换行标签-->
      透过树叶之间的缝隙，大把大把的阳光倾洒下来。太阳像是一个慷慨的富人，将自己的所有都奉献出来。
      这样好的天气，这样好的心情，只持续了半天而已。
  </p>
</body>
</html>

2、自己代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>段落 标题 水平线</title>
</head>
<body>
<h3>全职高手</h3><!--标题标签-->
<hr/><!--自闭合标签  水平线-->
<p>闪耀着火光的火机终于是划完了那道优美的弧线，叮当落地。天空中响起一阵轰鸣，感热飞弹已经喷着火舌从天而降。
    绕岸垂杨的身体开始下坠，他无法立刻使用受身操作，他不是普通的浮空，他是被吸附在“悬磁炮弹”上。</p>

<p>火机、绕岸垂杨、悬磁弹的爆炸，一起迎接了感热飞弹的到来。一朵夸张的蘑菇云腾空而起。
    但这还没完，气流中被掀得不住翻滚的绕岸垂杨，就看到头顶上空一道粗亮的光柱已经直射而下，
    却是枪炮师的终极大招卫星射线……同一时间，绕岸垂杨竟然是把枪炮师的各种高伤大招都吃了个遍。</p>

<p>被卫星射线洗涤的他，此时周身还在翻滚着爆炸的光亮和硝烟。<br/><!--换行标签-->
    叶修抓紧时间又是操作逐烟霞丢进了几个技能，
    围观党们目瞪口呆地看着接连的爆炸硬是轰出一个多达77段的连续攻击。
</p><!--段落标签-->


</body>
</html>


五、05斜体加粗
1、老师代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>斜体加粗</title>
</head>
<body>
   <h3>小学生作文</h3> <!--标题标签-->
   <hr/><!-- 自闭合标签   水平线-->
  <p>到现在还记得，面试完后，脚底的轻快，跟快要   <strong><em>飞起来</em></strong>一样。 </p><!-- strong 字体加粗 -->
       <!--  em  i   都是斜体-->
  <p>
      阳光很好，所以我脱下了羽绒服，换上简单轻便的运动装，把头发扎起来。
      金黄色的阳光，斑斑驳驳的，泛着温暖的光。<br/><!--  换行标签-->
      透过树叶之间的缝隙，大把大把的阳光倾洒下来。太阳像是一个慷慨的富人，将自己的所有都奉献出来。
      这样好的天气，这样好的心情，只持续了半天而已。
  </p>
</body>
</html>

2、自己代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>斜体加粗</title>
</head>
<body>
<h3>全职高手</h3>
<hr/>
<p>闪耀着火光的火机终于是划完了那道优美的弧线，叮当落地。天空中响起一阵轰鸣，感热飞弹已经喷着火舌从天而降。
    绕岸垂杨的身体开始下坠，他无法立刻使用受身操作，
    他不是普通的浮空，他是被吸附在<strong>“悬磁炮弹”</strong>上。</p>
<!--strong 字体加粗-->
<p>火机、绕岸垂杨、悬磁弹的爆炸，一起迎接了感热飞弹的到来。一朵夸张的蘑菇云腾空而起。
    但这还没完，气流中被掀得不住翻滚的绕岸垂杨，就看到头顶上空一道粗亮的光柱已经直射而下，
    却是枪炮师的终极大招<strong><i>卫星射线</i></strong>……
    同一时间，绕岸垂杨竟然是把枪炮师的各种高伤大招都吃了个遍。</p>
<!--如果你只想使用斜体字来显示文本的话，请使用 <i> 标签。
除此之外，文档中还可以包括用来改变文本显示的级联样式定义。-->
<p>被卫星射线洗涤的他，此时周身还在翻滚着爆炸的光亮和硝烟。<br/><!--换行标签-->
    叶修抓紧时间又是操作逐烟霞丢进了几个技能，
    围观党们目瞪口呆地看着接连的爆炸硬是轰出一个<em>多达77段的连续攻击。</em></p>
<!--em <em> 标签告诉浏览器把其中的文本表示为强调的内容。
对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
尽管现在 <em> 标签修饰的内容都是用斜体字来显示，但这些内容也具有更广泛的含义，
将来的某一天，浏览器也可能会使用其他的特殊效果来显示强调的文本。-->

</body>
</html>
 

六、06特殊符号
1、老师代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>特殊符号</title>
    <!--
    &nbsp;  空格
    &gt;  大于号
    &lt;  小于号
    &quot;  "
    &copy;  C
    &reg;  R
     ? :  alt+153
    -->

</head>
<body>
   <h3>小学生&nbsp;作文&gt;</h3> <!--标题标签-->
   <hr/><!-- 自闭合标签   水平线-->
  <p>到现在还记得，面试完后，脚底的轻快，跟快要   <strong><em>飞起来</em></strong>一样。 </p><!-- strong 字体加粗 -->
       <!--  em  i   都是斜体-->
  <p>
      阳光很好，所以我脱下了羽绒服，换上简单轻便的运动装，把头发扎起来。
      金黄色的阳光，斑斑驳驳的，泛着温暖的光。<br/><!--  换行标签-->
      透过树叶之间的缝隙，大把大把的阳光倾洒下来。太阳像是一个慷慨的富人，将自己的所有都奉献出来。
      这样好的天气，这样好的心情，只持续了半天而已。
  </p>
   &copy;
   &reg;
   ?
</body>
</html>

2、自己代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>特殊符号</title>
    <!--
&nbsp;  空格
&gt;  大于号
&lt;  小于号
&quot;  "
&copy;  C
&reg;  R
 ? :  alt+153
-->
</head>
<body>
<h3>全职&nbsp;高手&gt;</h3>
<hr/>
<p>闪耀着火光的火机终于是划完了那道优美的弧线，叮当落地。天空中响起一阵轰鸣，感热飞弹已经喷着火舌从天而降。
    绕岸垂杨的身体开始下坠，他无法立刻使用受身操作，
    他不是普通的浮空，他是被吸附在<strong>“悬磁炮弹”</strong>上。</p>
<!--strong 字体加粗-->
<p>火机、绕岸垂杨、悬磁弹的爆炸，一起迎接了感热飞弹的到来。一朵夸张的蘑菇云腾空而起。
    但这还没完，气流中被掀得不住翻滚的绕岸垂杨，就看到头顶上空一道粗亮的光柱已经直射而下，
    却是枪炮师的终极大招<strong><i>卫星射线</i></strong>……
    同一时间，绕岸垂杨竟然是把枪炮师的各种高伤大招都吃了个遍。</p>
<!--如果你只想使用斜体字来显示文本的话，请使用 <i> 标签。
除此之外，文档中还可以包括用来改变文本显示的级联样式定义。-->
<p>被卫星射线洗涤的他，此时周身还在翻滚着爆炸的光亮和硝烟。<br/><!--换行标签-->
    叶修抓紧时间又是操作逐烟霞丢进了几个技能，
    围观党们目瞪口呆地看着接连的爆炸硬是轰出一个<em>多达77段的连续攻击。</em></p>
<!--em <em> 标签告诉浏览器把其中的文本表示为强调的内容。
对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
尽管现在 <em> 标签修饰的内容都是用斜体字来显示，但这些内容也具有更广泛的含义，
将来的某一天，浏览器也可能会使用其他的特殊效果来显示强调的文本。-->
&copy;
&reg;
&trade;
<!--后三行效果图 ? ? ?-->

</body>
</html>


七、07图片操作
1、老师代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片标签</title>
    <!--
      因为项目中  会有很多图片！ 也不能保证  客户端 有这些文件！
      图片的路径肯定不能写成绝对路径！
      怎么办？
      01.在项目中创建images文件夹
      02.把项目需要的所有图片放进images文件夹
      03.在页面中引入图片

     images文件夹和07 图片操作这个页面什么关系？
       平级！！！
    07图片操作想引入 images文件夹下面的 cat.jpg
    -->
</head>
<body>
    <h1>这是一只可爱的小猫咪</h1>
    <!--
      src:图片存放的位置，一定要弄清楚 当前页面和图片的关系
      height：图片高度
      width：图片宽度
      title：鼠标悬停在图片时的文字
      alt:如果图片不能正常显示 出现的替换文字
      ../代表返回上一级  一定要找到当前页面和图片所在文件夹的平级
    -->


  <img src="http://www.mamicode.com/images/cat.jpg" height="300" width="300"
          title="这是一只可爱的小猫咪"
          alt="小猫咪出去捉鱼了">
</body>
</html>

2、自己代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片标签</title>
    <!--
          因为项目中  会有很多图片！ 也不能保证  客户端 有这些文件！
          图片的路径肯定不能写成绝对路径！
          怎么办？
          01.在项目中创建images文件夹
          02.把项目需要的所有图片放进images文件夹
          03.在页面中引入图片

         images文件夹和07 图片操作这个页面什么关系？
           平级！！！
        07图片操作想引入 images文件夹下面的 cat.jpg
        -->


</head>
<body>
<h1>香吉士小时候</h1>
<!--
      <img>导入图片，不用闭合
      src:图片存放的位置，一定要弄清楚 当前页面和图片的关系
      height：图片高度
      width：图片宽度
      title：鼠标悬停在图片时的文字
      alt:如果图片不能正常显示 出现的替换文字
      ../代表返回上一级  一定要找到当前页面和图片所在文件夹的平级
    -->
<img src="http://www.mamicode.com/images/sanji05.jpg" height="220" width="300"
        title="香吉士小时候也那么帅"
        alt="香吉士去找娜美约会了，暂时不在^_^"
        >



</body>
</html>


八、08超链接
1、老师代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
<!--
href：需要连接的页面  ！  默认都是跳转到 页面的最顶部
target：在哪个窗口打开
       默认是 _self 在本窗口打开
             _blank 新开窗口显示
-->


<a href="http://www.baidu.com" target="_blank">跳转到百度页面</a>
<a href="http://www.taobao.com" target="_blank">跳转到淘宝页面</a>
</body>
</html>

2、自己代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
<!--
<a>:超链接
href：需要连接的页面  ！  默认都是跳转到 页面的最顶部
target：在哪个窗口打开
       默认是 _self 在本窗口打开
             _blank 新开窗口显示
-->
<a href="http://www.baidu.com" target="_self">跳转到百度主页</a><hr/>
<a href="http://www.qq.com" target="_blank">在新开页面中跳转到腾讯主页</a><br/>
<a href="http://www.aliyun.com" target="_parent">跳转到阿里云主页</a>
</body>


九、09锚链接
1、老师代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>锚链接</title>
</head>
<body>
<!--
锚链接：
 01.本页面  去找到本面中的第100猫咪的位置
     解决办法：
          01.现在第100猫咪的位置 做一个标记
             怎么做标记！
             <a name="cat">第100猫咪的位置 </a>
          02.创建跳转的链接  本页面就是#  标记名称是cat
             <a href="http://www.mamicode.com/#cat">跳转到第100猫咪的位置</a>
 02.不同的页面跳转
    从当前页面的21行   点击a超链接时，
    跳转到 10锚链接页面的 <a name="cat">第100猫咪的位置 </a>

    01.跨页面了没有？
     还能使用#  ？
    02.# 不能省略 但是需要加上 目标页面的名称
-->

<a href="http://www.mamicode.com/10锚链接.html#cat">跳转到第100猫咪的位置</a>  <br/>

</body>
</html>

2、自己代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>09锚链接</title>

</head>
<body>
<!--
锚链接：
 01.本页面  去找到本页面中的第100猫咪的位置
     解决办法：
          01.在第100猫咪的位置 做一个标记
             怎么做标记！
             <a name="cat">第100猫咪的位置 </a>
          02.创建跳转的链接  本页面就是#  标记名称是cat
             <a href="http://www.mamicode.com/#cat">跳转到第100猫咪的位置</a>
 02.不同的页面跳转
    从当前页面的21行   点击a超链接时，
    跳转到 10锚链接页面的 <a name="cat">第100猫咪的位置 </a>

    01.跨页面了没有？
     还能使用#  ？
    02.# 不能省略 但是需要加上 目标页面的名称
-->
<a href="http://www.mamicode.com/10锚链接.html#cat" target="_blank">跳转到第18只猫咪的位置</a>

</body>
</html>


十、10锚链接
1、老师代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>锚链接</title>
</head>
<body>

<img src="http://www.mamicode.com/images/cat.jpg" title="第1个猫咪">
<img src="http://www.mamicode.com/images/cat.jpg" title="第2个猫咪">
<img src="http://www.mamicode.com/images/cat.jpg" title="第3个猫咪">
<img src="http://www.mamicode.com/images/cat.jpg" title="第4个猫咪">
<img src="http://www.mamicode.com/images/cat.jpg" title="第5个猫咪">
<img src="http://www.mamicode.com/images/cat.jpg" title="第6个猫咪">
<img src="http://www.mamicode.com/images/cat.jpg" title="第1个猫咪">
<img src="http://www.mamicode.com/images/cat.jpg" title="第1个猫咪">
<img src="http://www.mamicode.com/images/cat.jpg" title="第1个猫咪">
<img src="http://www.mamicode.com/images/cat.jpg" title="第1个猫咪">
<img src="http://www.mamicode.com/images/cat.jpg" title="第100个猫咪">
<a name="cat">第100猫咪的位置 </a>
<img src="http://www.mamicode.com/images/cat.jpg" title="第101个猫咪">
<img src="http://www.mamicode.com/images/cat.jpg" title="第102个猫咪">
<img src="http://www.mamicode.com/images/cat.jpg" title="第103个猫咪">
<img src="http://www.mamicode.com/images/cat.jpg" title="第104个猫咪">

</body>
</html>

2、自己代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>10锚链接</title>
</head>
<body>
<a href="http://www.mamicode.com/#cat">跳转到第18只猫咪的位置</a>


<img src="http://www.mamicode.com/images/sanji05.jpg" title="第1只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第2只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第3只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第4只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第5只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第6只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第7只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第8只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第9只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第10只猫咪"><br/>
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第11只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第12只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第13只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第14只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第15只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第16只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第17只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第18只猫咪">
<a name="cat">第18只猫咪的位置</a>
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第19只猫咪">
<img src="http://www.mamicode.com/images/sanji05.jpg" title="第20只猫咪">



</body>
</html>


十一、11功能性链接
1、老师代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>功能性链接</title>
</head>
<body>
 <a href="mailto:501804292@qq.com">联系老板</a>
</body>
</html>

2、自己代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>功能性链接</title>
</head>
<body>
<a href="mailto:1234657@qqcom">联系老板</a>
<!--mailto使用前提是本机装有例如Outlook这样的可使用mail功能的软件-->
</body>
</html>


十二、12行内元素和块元素
1、老师代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>块元素</title>

    <!--
    块元素  :无论内容多少 都会独占一行！  h1 -h6  p   div

    行内元素：内容会撑开宽度！如果元素周围都是行内元素，则在一行显示！
       a     strong  i   em
    -->
</head>
<body>
<img src="http://www.mamicode.com/images/cat.jpg"  height="20" width="20">
<img src="http://www.mamicode.com/images/cat.jpg"  height="20" width="20">
<img src="http://www.mamicode.com/images/cat.jpg"  height="20" width="20">
<img src="http://www.mamicode.com/images/cat.jpg"  height="20" width="20">
</body>
</html>

2、自己代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>块元素</title>
    <!--
   块元素  :无论内容多少 都会独占一行！ 例如： h1 -h6  p   div   hr    center
    具体例子：05斜体加粗

   行内元素：内容会撑开宽度！如果元素周围都是行内元素，则在一行显示！
      a     strong  i   em
    具体例子：10锚链接

   特殊的一个：
     img   是替换内联元素 replaced inline element，属于inline element类目。
    和其它的内联元素（行内元素）有什么不同呢？
    它在计算height/margin/width等值或在绝对定位的时候，有一些额外的规则。
    比如设定了width但未设置height, img的height会根据比列缩放。
    具体例子如下所示：
   -->
</head>
<body>
<img src="http://www.mamicode.com/images/sanji05.jpg" height="200" width="200">
<img src="http://www.mamicode.com/images/sanji05.jpg" height="200" width="200">
<img src="http://www.mamicode.com/images/sanji05.jpg" width="20">
<img src="http://www.mamicode.com/images/sanji05.jpg" width="20">
<img src="http://www.mamicode.com/images/sanji05.jpg" height="200" width="200">
<img src="http://www.mamicode.com/images/sanji05.jpg" height="200" width="200">
<img src="http://www.mamicode.com/images/sanji05.jpg" width="20">
<img src="http://www.mamicode.com/images/sanji05.jpg" width="20">
<img src="http://www.mamicode.com/images/sanji05.jpg" height="200" width="200">
<img src="http://www.mamicode.com/images/sanji05.jpg" height="200" width="200">
<img src="http://www.mamicode.com/images/sanji05.jpg" width="20">
<img src="http://www.mamicode.com/images/sanji05.jpg" width="20">

</body>
</html>


十三、meta

HTML <meta> 标签

浏览器支持

IEFirefoxChromeSafariOpera
         

所有浏览器都支持 <meta> 标签。

定义和用法

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

HTML 与 XHTML 之间的差异

在 HTML 中，<meta> 标签没有结束标签。

在 XHTML 中，<meta> 标签必须被正确地关闭。

提示和注释：

注释：<meta> 标签永远位于 head 元素内部。

注释：元数据总是以名称/值的形式被成对传递的。

必需的属性

属性值描述
content some_text 定义与 http-equiv 或 name 属性相关的元信息

可选的属性

属性值描述
http-equiv
  • content-type
  • expires
  • refresh
  • set-cookie
 把 content 属性关联到 HTTP 头部。
name
  • author
  • description
  • keywords
  • generator
  • revised
  • others
 把 content 属性关联到一个名称。
scheme some_text 定义用于翻译 content 属性值的格式。

name 属性

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：

<meta name="keywords" content="HTML,ASP,PHP,SQL">

如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

http-equiv 属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含：

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

scheme 属性

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

全局属性

<meta> 标签支持 HTML 中的全局属性。

TIY 实例

文档描述
Meta 元素中的信息可以描述 HTML 文档。
文档关键字
Meta 元素中的信息可以描述文档的关键词。
重定向
这个例子演示：在网址已经变更的情况下，将用户重定向到另外一个地址。



十四、图片格式

1、BMP格式

编辑
位图（外语简称：BMP、外语全称：BitMaP）BMP
技术分享蓝天草坪
是一种与硬件设备无关的图像文件格式，使用非常广。它采用位映射存储格式，除了图像深度可选以外，不采用其他任何压缩，因此，BMP文件所占用的空间很大。BMP文件的图像深度可选lbit、4bit、8bit及24bit。BMP文件存储数据时，图像的扫描方式是按从左到右、从下到上的顺序。
由于BMP文件格式是Windows环境中交换与图有关的数据的一种标准，因此在Windows环境中运行的图形图像软件都支持BMP图像格式。
典型的BMP图像文件由三部分组成：位图文件头数据结构，它包含BMP图像文件的类型、显示内容等信息；位图信息数据结构，它包含有BMP图像的宽、高、压缩方法，以及定义颜色等信息。
BMP 是（Windows 位图） Windows 位图可以用任何颜色深度（从黑白到 24 位颜色）存储单个光栅图像。Windows 位图文件格式与其他 Microsoft Windows 程序兼容。它不支持文件压缩，也不适用于 Web 页。 从总体上看，Windows 位图文件格式的缺点超过了它的优点。为了保证照片图像的质量，请使用 PNG 、JPEG、TIFF 文件。BMP 文件适用于 Windows 中的墙纸。
优点：BMP 支持 1 位到 24 位颜色深度。
BMP 格式与现有 Windows 程序（尤其是较旧的程序）广泛兼容。
缺点： BMP 不支持压缩，这会造成文件非常大。
 
2、jpg
jpg全名是JPEG。JPEG图片以 24 位颜色存储单个位图。JPEG 是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。渐近式 JPEG 文件支持交错。
可以提高或降低JPEG文件压缩的级别。
技术分享
但是，文件大小是以牺牲图像质量为代价的。压缩比率可以高达 100:1。（JPEG 格式可在 10:1 到 20:1 的比率下轻松地压缩文件，而图片质量不会下降。）JPEG压缩可以很好地处理写实摄影作品。但是，对于颜色较少、对比级别强烈、实心边框或纯色区域大的较简单的作品，JPEG压缩无法提供理想的结果。有时，压缩比率会低到 5:1，严重损失了图片完整性。这一损失产生的原因是，JPEG压缩方案可以很好地压缩类似的色调，但是 JPEG 压缩方案不能很好地处理亮度的强烈差异或处理纯色区域。
 

优点

编辑
摄影作品或写实作品支持高级压缩。利用可变的压缩比可以控制文件大小。支持交错（对于渐近式 JPEG 文件）。广泛支持Internet标准。
由于体积小，jpg在万维网中被用来储存和传输照片的格式。

缺点

编辑
有损耗压缩会使原始图片数据质量下降。当您编辑和重新保存 JPEG 文件时，JPEG 会混合原始图片数据的质量下降。这种下降是累积性的。JPEG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。

使用范围

编辑
jpg格式是一种图片格式，是一种比较常见的图画格式，如果你的图片是其他格式，可以通过以下方法转化：
1、photoshop，打开图画以后，按另存为，下面格式那里选择JPG格式就是了，这个方法比较简单，而且适合画质比较好的，要求比较高的图片转换。
2、如果你要求不高，你直接通过windows附带的图画程序，选择JPG格式就可以，这种转换方式画质不高
如果JPG格式转其他格式，这样的方法同样适用。

压缩模式

编辑
JPEG （Joint Photographic Experts GROUP）是由国际标准组织（ISO:International Standardization Organization）和国际电话电报咨询委员会（CCITT:Consultation Commitee of the International Telephone and Telegraph）为静态图像所建立的第一个国际数字图像压缩标准，也是至今一直在使用的、应用最广的图像压缩标准。JPEG由于可以提供有损压缩，因此压缩比可以达到其他传统压缩算法无法比拟的程度。
JPEG的压缩模式有以下几种：
顺序式编码（Sequential Encoding）
一次将图像由左到右、由上到下顺序处理。
递增式编码（Progressive Encoding）
当图像传输的时间较长时，可将图像分数次处理，以从模糊到清晰的方式来传送图像（效果类似GIF在网络上的传输）。
无失真编码（Lossless Encoding）
阶梯式编码（Hierarchical Encoding）
图像以数种分辨率来压缩，其目的是为了让具有高分辨率的图像也可以在较低分辨率的设备上显示。
 
3、PNG格式
便携式网络图形（外语简称PNG、外语全称：Portable Network Graphics），是网上接受的最新图像文件格式。PNG能够提供长度比GIF小30%的无损压缩图像文件。它同时提供 24位和48位真彩色图像支持以及其他诸多技术性支持。由于PNG非常新，所以并不是所有的程序都可以用它来存储图像文件，但Photoshop可以处理PNG图像文件，也可以用PNG图像文件格式存储。[5] 
优点：
PNG 支持高级别无损耗压缩。
PNG 支持 alpha 通道透明度。
PNG 支持伽玛校正。
PNG 支持交错。
PNG 受最新的 Web 浏览器支持。
缺点：
较旧的浏览器和程序可能不支持 PNG 文件。
作为 Internet 文件格式，与 JPEG 的有损耗压缩相比，PNG 提供的压缩量较少。
作为 Internet 文件格式，PNG 对多图像文件或动画文件不提供任何支持。GIF 格式支持多图像文
件和动画文件。

 

4、TIFF格式
标签图像文件格式（外语简称TIFF、外语全称：TagImage FileFormat）是由Aldus和Microsoft公司为桌上出版系统研制开发的一种较为通用的图像文件格式。 TIFF格式灵活易变，它又定义了四类不同的格式：TIFF-B适用于二值图像：TIFF-G适用于黑白灰度图像；TIFF-P适用于带调色板的彩色图像：TIFF-R适用于RGB真彩图像。
TIFF支持多种编码方法，其中包括RGB无压缩、RLE压缩、JPEG压缩等。
TIFF是现存图像文件格式中最复杂的一种，它具有扩展性、方便性、可改性，可以提供给IBMPC等环境中运行、图像编辑程序。
TIFF图像文件由三个数据结构组成，分别为文件头、一个或多个称为IFD的包含标记指针的目录以及数据本身。
TIFF图像文件中的第一个数据结构称为图像文件头或IFH。这个结构是一个TIFF文件中唯一的、有固定位置的部分；IFD图像文件目录是一个字节长度可变的信息块，Tag标记是TIFF文件的核心部分，在图像文件目录中定义了要用的所有图像参数，目录中的每一目录条目就包含图像的一个参数。
 
5、GIF格式
图形交换格式（外语简称：GIF、外语全称：Graphics Interchange Format），是CompuServe公司在 1987年开发的图像文件格式。GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50%左右，它不属于任何应用程序。几乎所有相关软件都支持它，公共领域有大量的软件在使用GIF图像文件。
GIF图像文件的数据是经过压缩的，而且是采用了可变长度等压缩算法。所以GIF的图像深度从lbit到8bit，也即GIF最多支持256种色彩的图像。GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。
GIF解码较快，因为采用隔行存放的GIF图像，在边解码边显示的时候可分成四遍扫描。第一遍扫描虽然只显示了整个图像的八分之一，第二遍的扫描后也只显示了1/4，但这已经把整幅图像的概貌显示出来了。在显示GIF图像时，隔行存放的图像会给您感觉到它的显示速度似乎要比其他图像快一些，这是隔行存放的优点；另外，GIF不支持Alpha透明通道。
 
 
十五、作业和考试
1、作业
（1）mindmanager写今天讲的东西
（2）周末写完项目，下周三再次答辩
（3）老师今天讲的东西自己敲一遍

2、考试

　　2017.05.05
　　16:43开始，17:13结束；答题时间：29 分钟；检查时间: 1 分钟；
　　成绩： 84 分
　　u2第一次考试

 
十六、老师辛苦了

技术分享



2017年5月5号课堂笔记


联系
我们