zoukankan      html  css  js  c++  java
  • 吴裕雄--天生自然WEB前端开发实战--HTML基础

    <!DOCTYPE html>             <!--文档声明:告诉浏览器以下文件用HTML版本解析-->
    <html>                         <!--告诉浏览器以下文件为HTML文件,开始-->
    <head>                         <!--表示HTML文件的头部-->
      <meta charset="UTF-8">    <!--网页的编码格式为UTF-8,即国际通用编码格式-->
      <title>第一个网页</title>    <!--网页的标题是“第一个网页”-->
    </head>                        <!--HEAD结束标签-->
    <body>                        <!--HTML文件的实体部分开始-->
        Hello World!            <!--显示在网页中的信息内容都放在BODY标签里-->
    </body>                        <!--HTML文件的实体部分结束-->
    </html>                        <!--HTML文件结束-->

    <!DOCTYPE html>             
    <html>                         
    <head>                         
      <meta charset="UTF-8">    
      <title>标题标记的使用</title>
    </head>                        
    <body>                        
        <h1>Hello world 1</h1>            <!--设置文字Hello World!为一级标题样式显示-->
        <h2>Hello world 2</h2>    
        <h3 align="center">Hello world 3</h3>    
        <h4>Hello world 4</h4>    
        <h5>Hello world 5</h5>    
        <h6>Hello world 6</h6>            <!--设置文字Hello World!为六级标题样式显示-->
    </body>                        
    </html>                        

    <!DOCTYPE html>             
    <html>                         
    <head>                         
      <meta charset="UTF-8">    
      <title>字体标记的使用</title>
    </head>                        
    <body>                        
      <font size="4" color="red" face="隶书">
         武汉轻工大学
      </font>
      <font size="5" color="green" face="黑体">
         数学与计算机学院
      </font>
      <font size="6" color="blue" face="宋体">
         刘兵
      </font>
    </body>                        
    </html>                        

    <!DOCTYPE html>             
    <html>                         
    <head>                         
      <meta charset="UTF-8">    
      <title>换行标记的使用</title>
    </head>                        
    <body>                        
      <font size="5" color="blue" face="黑体">
         《登鹳雀楼》<p />白日依山尽,<br />黄河入海流。<br />欲穷千里目,<br />更上一层楼。
      </font>
    </body>                        
    </html>                        

    <!DOCTYPE html>             
    <html>                         
    <head>                         
      <meta charset="UTF-8">    
      <title>预格式化标记的使用</title>
    </head>                        
    <body>                        
      <font size="6" color="blue" face="黑体">
        <pre>
        《登鹳雀楼》
         
         白日依山尽
         黄河入海流
         欲穷千里目
         更上一层楼。
        </pre> 
      </font>
    </body>                        
    </html>                        

    <!DOCTYPE html>             
    <html>                         
    <head>                         
      <meta charset="UTF-8">    
      <title>特殊标记的使用</title>
    </head>                        
    <body>                        
      在HTML中,常用的特殊字符有:<br/>
    &lt;&gt;&amp;&quot;&copy;&reg;&trade;&times;&divide;等。
    
    </body>                        
    </html>                        

    <!DOCTYPE html>             
    <html>                         
    <head>                         
      <meta charset="UTF-8">    
      <title>文字修饰标记</title>
    </head>                        
    <body>                        
      
      <u>
        下划线
        <i>
             倾斜下划线
            <b>加粗倾斜下划线</b>
         </i>
      </u>
      <h1>
      H<sub>2</sub>0<br />
      X<sup>2</sup>+Y<sup>2</sup>=Z<sup>2</sup>
      </h1>
    </body>                        
    </html>                        

    <!DOCTYPE html>             
    <html>                         
    <head>                         
      <meta charset="UTF-8">    
      <title>无序列表标记</title>
    </head>                        
    <body>                        
      Web前端语言:<br/>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
      Web服务器端语言:<br/>
      <ul type="circle">
        <li>ASP.NET</li>
        <li>PHP</li>
        <li>JSP</li>
      </ul>
    </body>                        
    </html>                        

    <!DOCTYPE html>             
    <html>                         
    <head>                         
      <meta charset="UTF-8">    
      <title>有序列表标记</title>
    </head>                        
    <body>                        
      Web前端语言:<br/>
      <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ol>
      Web服务器端语言:<br/>
      <ol type="I" start="2">
        <li>ASP.NET</li>
        <li>PHP</li>
        <li>JSP</li>
      </ol>
    </body>                        
    </html>                        

    <!DOCTYPE html>
    <html>
    <head>
         <meta charset="utf-8">
        <title>嵌套列表</title>
    </head>
    <body>
        <h3>列表嵌套</h3>
        <ul type="square">
            <li>树叶</li>
            <li><ol>
                  <li>枫树</li>
                  <li>杨树</li>
              </ol>
            </li>
            <li>还有什么</li>
        </ul>
    </body>
    </html>

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>水平分隔线的建立</title>
    </head>
    <body>
       <center>
        《登鹳雀楼》
       <hr  size="10" width="100px" color="red">
         白日依山尽,<br />
         黄河入海流。<br />
         欲穷千里目,<br />
         更上一层楼。<br />
       </center>
       <hr align="center" color="blue" width="50%">
    
    </body>
    </hmtl>

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>文本链接</title>
    </head>
    <body>
       常用的购物网站有:
        <ul>
         <li><a href="http://www.taobao.com/">淘宝</a></li>
         <li><a href="http://www.jd.com" target="_blank">京东</a></li>
         <li><a href="http://www.suning.com" target="_top">苏宁</a></li>
        </ul>
    
    </body>
    </hmtl>

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>书签链接</title>
    </head>
    <body>
       书中目录:
        <ul>
           <li><a href="example1-14.html#top4">第4章</a></li>
           <li><a href="example1-14.html#top11">第5章</a></li>
        </ul>
    </body>
    </hmtl>

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>书签链接</title>
    </head>
    <body>
       书中内容:
        <ul>
         <li><a name="top1">第1章</a></li>
         <li><a name="top2">第2章</a></li>
         <li><a name="top3">第3章</a></li>
         <li><a name="top4">第4章</a></li>
         <li><a name="top5">第5章</a></li>
         <li><a name="top6">第6章</a></li>
         <li><a name="top7">第7章</a></li>
         <li><a name="top8">第8章</a></li>
         <li><a name="top9">第9章</a></li>
         <li><a name="top10">第10章</a></li>
         <li><a name="top11">第11章</a></li>
         <li><a name="top12">第12章</a></li>
         <li><a name="top13">第13章</a></li>
         <li><a name="top14">第14章</a></li>
         <li><a name="top15">第15章</a></li>
         <li><a name="top16">第16章</a></li>
         <li><a name="top17">第17章</a></li>
         <li><a name="top18">第18章</a></li>
         <li><a name="top01">第1章</a></li>
         <li><a name="top02">第2章</a></li>
         <li><a name="top03">第3章</a></li>
         <li><a name="top04">第4章</a></li>
         <li><a name="top05">第5章</a></li>
         <li><a name="top06">第6章</a></li>
         <li><a name="top07">第7章</a></li>
         <li><a name="top08">第8章</a></li>
         <li><a name="top09">第9章</a></li>
         <li><a name="top010">第10章</a></li>
         <li><a name="top011">第11章</a></li>
         <li><a name="top012">第12章</a></li>
         <li><a name="top013">第13章</a></li>
         <li><a name="top014">第14章</a></li>
         <li><a name="top015">第15章</a></li>
         <li><a name="top016">第16章</a></li>
         <li><a name="top017">第17章</a></li>
         <li><a name="top018">第18章</a></li>
         <li><a name="topb1">第1章</a></li>
         <li><a name="topb2">第2章</a></li>
         <li><a name="topb3">第3章</a></li>
         <li><a name="topb4">第4章</a></li>
         <li><a name="topb5">第5章</a></li>
         <li><a name="topb6">第6章</a></li>
         <li><a name="topb7">第7章</a></li>
         <li><a name="topb8">第8章</a></li>
         <li><a name="topb9">第9章</a></li>
         <li><a name="topb10">第10章</a></li>
         <li><a name="topb11">第11章</a></li>
         <li><a name="topb12">第12章</a></li>
         <li><a name="topb13">第13章</a></li>
         <li><a name="topb14">第14章</a></li>
         <li><a name="topb15">第15章</a></li>
         <li><a name="topb16">第16章</a></li>
         <li><a name="topb17">第17章</a></li>
         <li><a name="topb18">第18章</a></li>
        </ul>
    
    </body>
    </hmtl>

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>图片使用</title>
    </head>
    <body>
      <img src="images/1-15.jpg" alt="图片默认的高度与宽度">
    </body>
    </hmtl>

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>图片使用</title>
    </head>
    <body>
     <a href="http://www.whpu1.edu.cn">
      <img src="1-14.jpg" width="250" height="150" border="3">
     </a>
    </body>
    </hmtl>

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>图片使用</title>
    </head>
    <body>
    
      <img src="1-14.jpg" width="210" height="100" usemap="#myMap">
      <map name="myMap">
          <area shape="rect" coords="0,0,210,50" href="http://www.whpu.edu.cn">
        <area shape="rect" coords="0,50,210,100" href="http://www.baidu.com">
        
      </map>
     
    </body>
    </hmtl>

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>滚动字幕</title>
    </head>
    <body>
      <marquee behavior="scroll" direction="right" scrollamount="10"  scrolldelay="200">
      这是一个滚动字幕。
      </marquee>
    </body>
    </hmtl>

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>网页嵌入音乐</title>
    </head>
    <body>
     <embed src="Hotel California.mp3" width="230" height="260" loop="3" >
    </body>
    </hmtl>

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>建立目录列表</title>
    </head>
    <body>
    <font size="2" color="#ff9900">文学世界:</font><br/>
    <dir type="squre">
        <li>散文精选</li>
        <li>小说天地</li>
        <li>诗词歌赋</li>
    </dir>
    </body>
    </html>

  • 相关阅读:
    TP框架中模板赋值
    使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度
    测试相关知识分享(百度和其他途径查找到的)
    测试基本概念
    shell编程之重定向
    shell编程之函数
    shell编程之循环
    shell编程之测试和判断
    shell编程之变量
    Linux系统学习之正则表达式
  • 原文地址:https://www.cnblogs.com/tszr/p/13869642.html
Copyright © 2011-2022 走看看