zoukankan      html  css  js  c++  java
  • HTML(入门第一课)

      html —— 超文本标记语言 标准的格式 如果出现小的编码错误 系统会自动帮你纠正

      htm —— 一些较老的服务器,只有支持后缀为三位

      xhtml—— 严格的html 格式

      Meta 标签:

       <meta name="Keywords" content="学生成绩"> 向搜索引擎说明网页的关键字 如果搜索学生成绩 那么就对抓取到这个网页 如果输入其他的则无法搜索到

       <meta name="Description" content="这是统计学校成绩的网页"> 网页的描述 如果搜索引擎以一段文字抓取的话那么就会搜索到这网页

       <meta http-equiv="content-type" content="text/html;charset=utf-8">  设置网页的编码格式为:UTF-8

       <meta http-equiv="refresh" content="3"> 这个网页会在三秒后刷新

        <meta http-equiv="refresh" content="3;url=http://www.baidu.com">  三秒后转跳到百度网页

    <!----> 在html中表示注解

      定义正文标题:<h1></h1>  ---------->   <h6></h6>

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

    注解:正文就是正文  而标题也就是标题  正文无法变成标题 而标题也不会变成正文

       定义段落标签:<p></P> 段落结尾之处必须换行 可以存在很多的P标签

       代码演示:

             <p>这是一个P标签</p>
             <P>而这是第二个P标签 会在这里换行</P>

      blockquote标签 用于引用文本

       代码演示:

           <blockquote>这里是引用的文本</blockquote>

      定义列表:

            有两种组合:

               <ul><li>无序列表</li></ul> 

                <ol><li>有序列表</li></ol>(<li></li>标签 是有序和无序标签的包含标签)

       代码演示:

         <p>以下是定义列表</p>
        <p>首先是无序组合列表</p>
        <ul>
          <li>无序列表1</li>
          <li>无序列表2</li>
          <li>无序列表3</li>
        </ul>
        <P>然后是有序组合列表</P>
        <ol>
         <li>有序列表1</li>
         <li>有序列表2</li>
         <li>有序列表3</li>
        </ol>

     dl标签 :

        <dl><!---DL为描述标签-->

         <dt><img src="图片名"></dt><!---一般来说放入图片--->

         <dd>对DT的描述  通常是对上面图片的解释</dd>

       </dl>

       代码演示:

        <p>描述标签</p>
      <dl>
          <dt><img src="img/1.jpg"></dt>
          <dd>这照片好帅</dd>
      </dl>

    注:../表示回到上一级    <img sre="图片" alt+"文字"> 此标签当图片因为特殊原因无法显示的时候 显示的提示语句

     pre 标签: 我们自定义的格式  我们想怎么定义都可以

       代码演示:

           <P>自定义格式PRE标签</P>
      <pre>
          45
         +15
        -------
          =60
      </pre>

     常用的实体符号:

       &nbsp; 空格    &lt; 左括号(<)  &gt; 右括号(>) &copy; 版权符号     &reg; 已注册符号     &amp; &符号   &#15; 长破折号

       button标签 为html中的按钮标签

         代码演示:

        <p>按钮标签button</p>
        <button>我是按钮</button>

     A标签为超链接标签:

         a标签可以连接到其他的地方

      代码演示:

         <P>A标签演示:</P>
      <a href="http://www.baidu.com">我是A标签 点我转跳到百度</a>       如果点击文字就会转跳到百度网页
      <a href="http://www.baidu.com" accesskey="a">按住Alt+a 转跳到百度</a>     按住Alt+a 转跳到百度  
      <a tabindex="1">按下Tad 第一个跳到这里</a>     按下Tad 第一个跳到这里 
      <a tabindex="2">按下Tad 第二个跳到这里</a>
      <a tabindex="3">按下Tad 第三个跳到这里</a>

    表格: table 标签 加入 border="1" cellspacing="0" 表示给这个表格加上边框

     <table>

      <tr>  <!---TR为行--->

    <td>TD为列</td>

      </tr>

     </table>

       代码演示:

    <p>以下是表格演示</p>
      <table border="1" cellspacing="0">
          <tr>
              <td>第一行第一列</td>
              <td>第一行第二列</td>
              <td>第一行第三列</td>
          </tr>
          <tr>
              <td>第二行第一列</td>
              <td>第二行第二列</td>
              <td>第二行第三列</td>
          </tr>

      </table>

    合并单元格:

      

    <p>合并单元格演示:</p>
      <table border="1" cellspacing="0">
          <tr>
              <td rowspan="2">合并两行</td>
              <td>第一行第一列</td>
              <td>第一行第二列</td>
              <td>第一行第三列</td>
          </tr>
          <tr>
              <td>第二行第一列</td>
              <td>第二行第二列</td>
              <td>第二行第三列</td>
          </tr>

      </table>

      <table border="1" cellspacing="0">
          <tr>
              <td colspan="3">合并三列</td>
          </tr>
          <tr>
              <td>第二行第一列</td>
              <td>第二行第二列</td>
              <td>第二行第三列</td>
          </tr>

      </table>

    iframe 标签 在网页嵌套另外一个网页 width设置宽  height设置高

     <P>一个网页嵌套别的网页iframe标签</P>
    <iframe src="http://www.baidu.com" width="1000" height="600"></iframe>

      锚链接:

       代码演示:

       

    <a href="#p1">锚链接点这里</a>

    <P id="p1">锚链接会跳到这里</P>

    注: 每一个标签都有ID 属性 而且是唯一的不能重复

    ------------------------------------------------------------------------------------------这是分界线一下是完整代码-----------------------------------------------------------------------------------

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <meta name="Description" content="这是统计学校成绩的网页">
        <meta http-equiv="refresh" content="300">
    </head>
    <body>

    <a href="#p1">锚链接点这里</a>

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

      <p>这是一个P标签</p>
      <P>而这是第二个P标签 会在这里换行</P>

      <blockquote>这里是引用的文本</blockquote>

      <p>以下是定义列表</p>
      <p>首先是无序组合列表</p>
      <ul>
          <li>无序列表1</li>
          <li>无序列表2</li>
          <li>无序列表3</li>
      </ul>
      <P>然后是有序组合列表</P>
      <ol>
         <li>有序列表1</li>
         <li>有序列表2</li>
         <li>有序列表3</li>
     </ol>

      <p>描述标签</p>
      <dl>
          <dt><img src="img/1.jpg"></dt>
          <dd>这照片好帅</dd>
      </dl>

      <P>自定义格式PRE标签</P>
      <pre>
          45
         +15
        -------
          =60
      </pre>

    <p>按钮标签button</p>
    <button>我是按钮</button>

      <P>A标签演示:</P>
      <a href="http://www.baidu.com">我是A标签 点我转跳到百度</a>
      <a href="http://www.baidu.com" accesskey="a">按住Alt+a 转跳到百度</a>
      <a tabindex="1">按下Tad 第一个跳到这里</a>
      <a tabindex="2">按下Tad 第二个跳到这里</a>
      <a tabindex="3">按下Tad 第三个跳到这里</a>

      <p>以下是表格演示</p>
      <table border="1" cellspacing="0">
          <tr>
              <td>第一行第一列</td>
              <td>第一行第二列</td>
              <td>第一行第三列</td>
          </tr>
          <tr>
              <td>第二行第一列</td>
              <td>第二行第二列</td>
              <td>第二行第三列</td>
          </tr>

      </table>

    <p>合并单元格演示:</p>
      <table border="1" cellspacing="0">
          <tr>
              <td rowspan="2">合并两行</td>
              <td>第一行第一列</td>
              <td>第一行第二列</td>
              <td>第一行第三列</td>
          </tr>
          <tr>
              <td>第二行第一列</td>
              <td>第二行第二列</td>
              <td>第二行第三列</td>
          </tr>

      </table>

      <table border="1" cellspacing="0">
          <tr>
              <td colspan="3">合并三列</td>
          </tr>
          <tr>
              <td>第二行第一列</td>
              <td>第二行第二列</td>
              <td>第二行第三列</td>
          </tr>

      </table>

    <P>一个网页嵌套别的网页iframe标签</P>
    <iframe src="http://www.baidu.com" width="1000" height="600"></iframe>

    <P id="p1">锚链接会跳到这里</P>
    </body>
    </html>

  • 相关阅读:
    CentOS6.5升级内核到3.10.28的记录
    redis集群搭建,手把手教学
    zookeeper集群搭建,这一篇就够了
    Caused by: java.sql.SQLException: Column 'show_type' not found
    zkEnv.sh: Syntax error: "(" unexpected (expecting "fi")记录一下解决方法。。。
    http分层
    浏览器
    less
    333
    CSS 解决方案
  • 原文地址:https://www.cnblogs.com/chenyangpeng/p/5543994.html
Copyright © 2011-2022 走看看