zoukankan      html  css  js  c++  java

  • html5个人笔记

    阿西，生气，好不容易写的忘记保存，打开只剩下一片空白了，只好再来一次了

    6.9，这是第三次的第二次，由于漫长的寒假刚刚过去，又迎来了暑假，所以打算嗯嗯嗯，然后因为这是自学的应该会有很多的不足，希望能写的比上一次好那么一点点点点，好好学习

    基本元素

    • a：超链接

      • target

        • target=“_self”：默认目标，载入并显示在相同的框架或窗口

        • target="blank"：在一个新打开，未命名的窗口载入目标

        • target=“parent”：载入父窗口或者包含超链接引用的框架的框架

        • target=“top”：载入包含这个超链接的窗口，会清除所有被包含的框架并将文档载入整个浏览器窗口

    • b：粗体

    • i：斜体

    • u：下划线

    <!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title>这是网页名称</title>
    </head>
    <body>
    <a href="https://www.baidu.com/">这是百度的超链接</a>
    <br><!--这是另起一行-->
    <b>这是粗体</b>
    <br>
    <i>这是斜体</i>
    <br>
    <u>这是下划线</u>
    </body>
    </html>
    ​

     

    列表元素

    • ol：有序列表

      • type=“A|a|I|i”：样式

      • reserved：降序

    • ul：无序列表

    <!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title>这是网页名称</title>
    </head>
    <body>
      <ol>
      <li>这是第一项</li>
      <li>这是第二项</li>
      <li>这是第三项</li>
      <ol reversed>
        <li>这是降序第一项</li>
        <li>这是降序第二项</li>
        <li>这是降序第三项</li>
        <ol type="A">
          <li>这也是第一项</li>
          <li>这也是第二项</li>
          <li>这也是第三项</li>
          <ol type="a">
            <li>这还是第一项</li>
            <li>这还是第二项</li>
            <li>这还是第三项</li>
            <ol type="I">
              <li>这怎么还是第一项</li>
              <li>这怎么还是第二项</li>
              <li>这怎么还是第三项</li>
              <ol type="i">
                <li>这是最后一个第一项</li>
                <li>这是最后第二项</li>
                <li>这是最后第三项</li>
                <ul>
                  <li>哈哈哈，这才是无序的最后一项的是第一项</li>
                  <li>哈哈哈，这才是无序的最后一项的是第二项</li>
                  <li>哈哈哈，这才是无序的最后一项的是第二项</li>
                </ul>
              </ol>
            </ol>
          </ol>
        </ol>
      </ol>
    </ol>
    </body>
    </html>
    ​

     

    表格元素

    tr：行

    th：表头

    td：列

    <!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title>这是网页名称</title>
    </head>
    <body>
    这是一个表格
    <table border="1px"><!--表格-->
    ​
      <tr><!--行-->
        <th>我是表头</th><!--会居中的表头-->
        <th>我会居中</th>
        <th>真的吗</th>
      </tr>
      <tr>
        <td>我是第二行第一列列</td><!--列-->
        <td colspan="2">我是合并的行</td>
      </tr>
      <tr>
        <td rowspan="2">我是合并的列</td>
        <td>脖</td>
        <td>子</td>
      </tr>
      <tr>
        <td>好</td>
        <td>痛</td>
      </tr>
    </table>
    </body>
    </html>
    ​

     

    表单元素

    • form：为用户输入创建表单

      • Method：发送form-data的http方法

      • Action：当提交表单时向何处发送表单数据

      • input：搜集用户信息

        • type="text":

          • value:文本框里的值

          • placeholder：文本框内的提示

          • maxlenth：限制文本框最大字符

          • size：文本框可见的字符数目

          • readonly：文本框只读

      • type="password"：输入密码的单行文本框（密码以明文传输到服务器）

        • rows：文本框的宽度

        • cols：文本框的长度

        • type="button“：按钮

        • type="checkbox"：复选框（为Boolean类型）

        • type="radio"：单选框（要使用name属性值相同才可以哦）

        • type="number"：数字框

        • type="search"：获取搜索用词

      • type=“date”：日期

        • type=“color“：获取颜色值

        • type=“image”：嵌入图片

        • type=”file“：上传文件

          • multiple：一次允许上传多个文件

          • readonly：必须上传一个文件

      • textarea：多行文本框

      • select：列表框

      • datalist：可选框，必须搭配单行文本框使用，并设置id属性（和selectd的区别：select只能从选项中选择，datalist可以手动输入其他选项）

    <!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title>这是网页名称</title>
    </head>
    <body>
    <form>
      <input >
      这是一个什么都没有的文本框
      <br>
      <input type="text" value="这是文本框内的值">
      <br>
      <input type="text" placeholder="这只是一个提示，输入时没了">
      <br>
      <input type="text" maxlength="7"value="我只能输7个字">
      <br>
      <input type="text" readonly value="你只能看看我，而不能改掉我">
      <br>
      <textarea rows="15">你看我这么长</textarea>
      <br>
      <textarea cols="60">你看我这么宽</textarea>
    </form>
    </body>
    </html>


    <!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title>这是网页名称</title>
    </head>
    <body>
    <form>
    <input type="button" value="这是一个小按钮"><!--常和js一起使用并作为绑定事件处理-->
      <br>
      <button>这也是一个按钮</button><!--可以当任何按钮来使用-->
      <br>
      <input type="submit" value="这是一个提交按钮">
      <br>
      下面是多选题
      <br>
      <input type="checkbox">这是一个复选框
      <br>
      <input type="checkbox">你可以随便选哪个
      <br>
      <input type="checkbox">你可以随便选几个
      <br><br>
      下面是单选题
      <br>
      <input type="radio" name="1">这是一个单选框
      <br>
      <input type="radio" name="1">因为有了相同的name
      <br>
      <input type="radio" name="1">所以只能选一个
      <br>
      <select>
        <option>往下拉</option>
        <option>你就可以看见我了</option>
        <option>惊喜吗</option>
      </select>
      <br>
    <input type="text" list="datalist">
      <datalist>
        <option>往下拉</option>
        <option>你看见我了吗</option>
        <option>好吧，这回真的看不见了</option>
        <option>你还可以选择自己输入哦</option>
      </datalist>
    <!--哈哈哈哈，由于贫穷的我只有chore和ie,就看不了了，datalist只有Firefox和Opera支持-->
      <br>
      <input type="range" min="0" max="100" step="10"><!--由于不同的浏览器有不同的效果，就显示得不太一样了-->
    <br>
      <input type="number" min="0" max="100" step="10"><!--数字框-->
    </form>
    </body>
    </html>

    

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>网页名称</title>
    </head>
    <body>
    <form>
      这是一个日期
      <br>
      <input type="date">
      <br>
      <input type="search">获取搜索用词
      <br>
      <input type="image" src="明日何其多.jpg" width="100">
      <br>
      <input type="file" multiple>一次允许上传多个文件
      <br>
      <input type="file" readonly>必须上传一个文件
    </form>
    </body>
    </html>
    ​
    

    

     
    

    图片及分区
    

      

    • 

      img：在文档中嵌入图片
      

        

      • 

        alt：定义图片的备用元素
        

        • 

      

      • 

    • 

      map：客户端分区的关键元素
      

      • 

    • 

      area：可以有多个，每个各自代表图像上可被点击的一块区域
      

        

      • 

        href：网页链接
        

        • 

      • 

        shape：形状（circle圆形，rect正方形，poly多边形）
        

        • 

      • 

        coords：坐标
        

          

        • 

          圆形：圆心坐标，半径
          

          • 

        • 

          正方形：左上角坐标，右上角坐标
          

          • 

        • 

          多边形：各个点的坐标，第一个坐标要和最后一个坐标一样
          

          • 

        

        • 

      

      • 

    

    <!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title>这是网页名称</title>
    </head>
    <body>
    <img src="0.jpg" width="100" height="100" alt="找不到图片">
    <!--alt表示元素的备用内容，如果找不到img的图片，则显示alt-->
    <br><br>
    <a href="hello.html" target="_self"><img src="1.jpg" width="100" height="100"></a>
    这个图片点进去是一个超链接，就不截图了哈
    <br>
    <br>
    <img src="分区.jpg" usemap="#0">
    <form>
      <input type="image" src="分区.jpg"  usemap="#0"><!--这个是用于确认坐标的-->
    <map name="0">
      <!--多边形，小飞机-->
      <area href="picture1.html" shape="poly" coords="143,50,125,130,102,113,90,125,85,105,65,95,143,50" target="_blank" >
      <!--正方形-->
      <area href="picture2.html" shape="rect"coords="235,20,375,160" target="_blank">
      <!--圆形-->
      <area href="picture3.html" shape="circle"coords="500,90,40" target="_blank">
    </map>
    </form>
    </body>
    </html>
    

    

     
    

    视频
    

      

    • 

      video：嵌入视频
      

        

      • 

        autoplay：自动播放
        

        • 

      • 

        controls：显示控件，如：开始，暂停，进度条等
        

        • 

      • 

        loop：循环播放
        

        • 

      • 

        preload：预备播放，如果使用autoplay则忽略该属性
        

          

        • 

          auto：载入整个视频
          

          • 

        • 

          meta：在载入元数据（一帧）
          

          • 

        • 

          none：不载入
          

          • 

        

        • 

      

      • 

    

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <video src="工作细胞.mp4" height="500" autoplay preload="metadata" controls>
      <source src="工作细胞.ogv" type="vodeo/ogg">
    </video>
    </body>
    </html>
    ​
    

    杂
    

      

    • 

      好吧我可能真的是一个憨憨，其实这是第三次写的，我又忘记保存了，真的是......
      

      • 

    • 

      这个就写了一点点，等我以后再慢慢补充哈
      

      • 

    • 

      明日复明日，明日何其多，真的是一天拖一天，一天又一天，嗐
      

      • 

    • 阿西，完了这回真的是了，现在才发现我的图片好像都没有上传，明明都复制了，，，奇怪，还要补一补了
      • 

    

    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  面向对象的思维
                    
    343. 整数拆分
                    
    413. 等差数列划分
                    
    303. 区域和检索
                    
    62. 不同路径
                    
    char类型与int类型相加
                    
    mybatis里面resultmap的问题
                    
    easyui的datagrid如何获取一个对象里面的成员对象里面的属性？
                    
    ==和equls的区别
                    
    泛型的使用思想
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/bell-ld/p/13156847.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看