html高级标签

空格和回车是用来分割字符的

 表示空格
&lt;表示<
&gt;表示>
<br>表示回车
<hr>表示水平线

有序列表(默认按1. 2. 3. … 排列,按 type排列)五种(1/a/A/i/I)

   <ol type="a" reversed="reversed" start="2">    reversed倒着排 从2开始排
        <li>狮子王</li>  
        <li>百年孤独</li>  
        <li>返老还童</li>
   </ol>

无序列表

   ul>li*3
   <ul type="disc">discircles实心圆  circle圈 square矩形
      <li>西瓜</li>   
      <li>车厘子</li>   
      <li>柚子</li>
      </ul>
      
天猫背景:
      <html lang ="en,zh"><head>  
      <meta charset="utf-8"> 
      <title>Document</title>  
      <style type="text/css">  
      *{
        margin: 0;    padding: 0;    /* 去空隙 */     
       }    
        ul{
        list-style: none; /* 去掉圈 */ 
        }      
        li{
          margin: 010px;         /* 留空隙 */        
          float: left;         /* 横着 */        
          color: #f40;       
          font-weight:bold;        /* 加粗 */      
          font-size:14px;          /* 字体大小   */      
          height:25px;        line-height: 25px;        /* 上下高度 */       
          padding: 0 5px;        /* 左右宽度 */  
            }  
          li:hover    /* 鼠标移动在上发生的事 */  
            {border-radius: 15px;        /* 圆角 */ 
             background-color: #f40;       /*背景颜色 */
             color: #fff;    }
      </style>   
      </head>
      <body> 
      <ul >   
        <li>天猫</li>   
        <li>淘宝</li>   
        <li>聚划算</li>
     </ul>
     </body>
     </html>


     <img src="">
     1.网上的url
     2.本地的绝对路径
     3.本地的相对路径
      <img src="http://d.hiphotos.baidu.com/zhidao/pic/item/730e0cf3d7ca7bcb2961ee2fbd096b63f624a893.jpg" style="width:200px">
      <img src="001.jpg" style="width:200px" alt="这是猫" title="猫">
      alt=""图片占位符 图片出错时展示文字信息
      title=""图片提示符,鼠标放图片上时提示信息

      a标签//超级链接//锚点//打电话//协议限定符
      <a href="http:www.baidu.com">www.baidu.com</a>
      也能放图片
       target="_blank_"能在新标签页打开 
      <a href="http:www.baidu.com"  target="_blank_">
      <img src="" >
      </a>
      锚点,回到定义的位置
      <div id="demo1" style="width: 100px;height: 100px;background-color: green">demo1</div>
      <div id="demo2" style="width: 100px;height: 100px;background-color:red">demo2</div>
      <a href="#demo1">find demo1</a>
      <a href="#demo2">find demo1</a>
      右下角定义块状回到指定位置
      <a style="display:block;position:fixed;bottom:50px;right:50px;border:1pxsolidblack;height:50px;width:200px;background-color:#fcc;"  href="#demo1">find demo1</a>
      <a style="display:block;position:fixed;bottom:100px;right:50px;border:1pxsolidblack;height:50px;width:200px;background-color:#ffc;"  href="#demo2">find demo2</a>
        <a href="tel:17766662828">电话</a>
        <a href="mailto:123456@qq.com">邮件</a>
        <a href="javascript:while(1){alert('让你手欠')}">死循环</a>
       
<form ></form>表单标签实现发送

 method="get/post"发送数据方式
 action=""发送给谁的位置
<form method="get" action=""></form>

<form method="get" action="">  
  用户名<input type="text" name="username" value="请输入用户名">   
 密码<input type="password" name="password">     有name才能发送
 <input type="submit" value="login">
 </form>
 
 <input type="radio" name="star" value="1">qq    
 <input type="radio" name="star" value="2">ww    radio换checkbox就是复选
 <input type="radio" name="star" value="3">mm    有name才能变成单选,有value才能提交
 <input type="submit" >  
 测试:鼠标没聚焦时暗色显示请输入用户名,聚焦时消失,自己输入类容是黑色
  <p>用户名<input type="text" name="username" style="color:#999" value="请输入用户名"         onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='424242'}"         onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}"></p>有name才能发送    <p> 密码<input type="password" name="password" ></p>    <input type="submit" value="login">  

单选设置默认选项

   <h1> choose you sex</h1>   
   male:<input type="radio" name="sex" value="male" checked="checked">   
    female:<input type="radio" name="sex" value="female ">   
    <p><input type="submit" > </p> 

下拉菜单

    <h1>Province</h1>
    <select name="Province" >    
    <option >jiangsu</option>    
    <option >beijing</option>    
    <option >shanghai</option>
    </select>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值