Html5 总结快捷键方式

快捷键与各个标签的总结

1)添加Html注释的快捷键:ctrl+shfit+/              形式:
2)  在文件主体中只打出a再按tab键就会出现 
3)  在文件主题中只打出li*4再按tab键就会出现一下样式:
   
  •    
  •    
  •    
  •     < p > p >

        <p>p>
        <p>p>

         在同一的段落文字按着ait键同时进行编写

        <p>zheshiduanluop>
        <p>zheshiduanluop>
        <p>zheshiduanluop>

        

  • ctrl+D:复制当前(duplicat/复制)


    4)Html中标题的大小
         

    最大字体             
    最小字体

         只需要用户把内容放进标签里然后由浏览器负责显示!
    5)

    这是段落(paragraph)标签页面的一个段落,自动换行

         <a href="http://www.runoob.com"target="_blank"title="我真的很菜!">菜鸟网a>

              href属性指定链接的目标

              target属性指定打开目标页面的方式,其取值包括

              _self:在当前页面中打开,默认;

              _blank:在新的页面中打开;

              _parent:父子关系,嵌套关系;

              _top:

    7)  页内跳转
             在目标标签处指定id="……",在链接处指定href="#……"

            id属性是页面元素的唯一标识

           “锚点”:anchor

    8)  图片标签

         src属性:source,图片资源的URL地址,可以是本地的,也可以是远程的。

        <imgsrc="月河街.jpg">

        <imgsrc="https://youimg1.c-ctrip.com/target/100m090000003n6a32DF4.jpg">

        alt属性:alternative(可替代的),即当资源不存在时,替代显示的文字内容。

    9)路径:

         相对路径:

               相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。使用相对路径可以为我们带来非常多的便利,且实验证明相对路径在搜索引擎中表现良好。

         绝对路径:

               在我们平时使用计算机时要找到需要的文件就必须知道文件的位置,而表示文件的位置的方式就是路径。所谓“绝对路径”就是从根目录开始一直到该目录的全程的路径,举个例子:"c:\apache\htdocs\cgi-bin\test.cgi"就是文件test.cgi的绝对路径。  

          ".."表示上一级目录

          "."表示当前目录

          在同一级目录:

          <imgsrc="p1.jpg">

          在上一级目录:

          <imgsrc="../p1.jpg">

          在下一级目录:

          <imgsrc="pic/p1.jpg">

    10)杂项总结

          :可以将部分文本独立出来

         
    :强制换行

         


    :绘制一条横线

          :设置页面的基准地址,从而简化地址的书写

         <basehref="http://www.runoob.com/images/logo.png">

         head>
         <body>
         <imgsrc="logo.png">
         <imgsrc="logo.png">

    11)无序列表

          

      :unorderedlist  定义一个无序列表

           

    • :listitem       定义一个列表项

             type 用来指定无序列列表的符号,取值有:

             disc:实心的圆点,默认值

             circle:空心的圆圈;

             square:实心的正方形;

           
           <ul type="disc">
           <li>浙江li>
           <li>鹤壁li>
           <li>河南li>
          <li>东北li>

    12)有序列表

           

      ordered list.有序列表,即表列带的序号

              type:属性指定序号的类型其取值:   

              1:序号为1.2.3.4默认值

              A:序号为A。B。C;

              a:序号为a。b。c;

               l:序号为I II III IV;

               i:序号为i ii iii iv;       

               type:指定类型

               start:属性指定从第几个开始;当取值为0或负数,依旧按照数值进行执行!

         13) 自定义列表        

             

      defined list          定义一个自定义列表

             

      defined title         列表项标题

             

      defined description   列表项的描述

             <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
             <title>自定义类表的使用title>
              head>
              <body>
              <dl>
              <h1>河南鹤壁简介h1>
              <dt>河南dt>
              <dd>麻雀虽小,五张俱全!dd>
              <dt>鹤壁dt>
              <dd>具有母亲河自称!dd>
              <dt>新区dt>
              <dd>樱花大道,华夏南路之美号!dd>
              dl>

    14)表单
       什么是表单?收集用户填写的信息,并将其提交到后台服务器。

       

       属性:指定提交的地址

      属性:指定提交的方式,get/post;

      1.  Get和post的区别get

      1)长度的限制get限制为2kb以内;

      2)安全性,get方式提交的数据会直接呈现在地址栏,敏感数据容易被截获。

           post传送的数据量较大,一般被默认为不受限制。get安全性非常低,post安全性较高。

    15)文本框

       <inputtype="text">

       Maxlength:指示文本能接收的最大字符个数;

       Size:指示文本框的大小(宽度)

       Value:指定默认初始值

    16)密码框

       <p>密码<inputtype="password"maxlength="6"size="15">p>

       密码框和文本框是一样的,文本框的属性同样适用于密码框,唯一不同的是密码框是      掩码的形式显示内容,保证安全。

       4.4 label的作用

       1)可以单独对其应用相应的样式

       2)for可以使之某个关联,即当单击文本激活相应的

        <form action="#"method="post">
        <label>用户:label>
        <input type="text"maxlength="10"size="15"value="liangliang">
        <br>
        <label for="password">密码:label>
        <input id="password"type="password"maxlength="10"size="15">

    17)单选按钮

      <input type="radio"name="role"> 老大
      <input type="radio"name="role">老二
      <input type="radio"name="role"checked> 老三

          如果需要将若干个单选按钮编为一组(一组最多只有一个被选中)需要设置相同属性的name属性

          如果需要默认选中某个选项,需要加上checked属性。

    标签的属性表示形式:

    1)键值对:属性名=属性值

    Type=“text”   maxlength=“6”

    2)一些取值为布尔类型的属性直接使用属性名

      Checked  readonly 

    18)多选按钮     

    <inputtype="checkbox"checked>音乐
    <input type="checkbox" checked>舞蹈
    <input type="checkbox">唱歌
    <input type="checkbox">绘画
    <input type="checkbox">聊天

     19)提交按钮

         <inputtype="submit">

       1)点击按钮之后跳转到form表单指定的位置Action

       2)Value属性:value上的值对应的就是显示按钮上的文字。

       3)点击按钮:将form表单中的input的name属性的值(键)和 用户输入值组成的键值对(或input 标签value 属性对应的值)。并凭借到form表单Action属性值后面。

    http://localhost:63342/untitled/chapter4/result.html?name=123344&password=&sex=1

    http://localhost:63342/untitled/chapter4/result.html?name=&password=

    20)重置按钮 

         <inputtype="reset"value="刷新">

         1)  点击按钮,重置表单内部form输入框(单选按钮)

         2)  Value属性:value对应的值就是按钮上显示的文字。

    21)普通按钮

        <inputtype="button"value="校验">

       1)点击按钮,没有任何反应

       2)Value属性:value对应的值就是按钮上显示的文字。

    22)图片按钮

          <inputtype="image"src="胖迪.jpg.jpg"alt="爱你呦!">

         3)作用和submit按钮一样

         4)需要设置src属性的值;如果src对应的路径没有找到图片;并且没有设置alt属性,按纽显示默认值“提交”,如果设置了alt属性则显示alt的值。(类似img标签)

    23)

    格式化快捷键:ctrl+Alt+L


    关于button按钮的见解

    知道:button是定义一个按钮,但是在表单中也有一个可以定义按钮,
    我们知道当的时候也是在网页上创建了一个按钮,
    现在要说的是这个button这个标签和input里面的标签有怎样的区别。当然
    这个标签为我们提供了更为强大的功能,我们可以设置button,设置button上
    面的文字,甚至可以加载图像等等多媒体
    在HTML5中button标签有增加了一些属性,比如说autofocus,disabled
    form,formation,formenctype,formmethod,fornovalidate,formtarget
    name,type,value下面我们做一几个小小的案例来说明这个标签:-->



       



       
       



       

       
       
       
       

       




       
       

       
       
            method="get">
        请选择你喜爱的项目:
       
       
         
           









    你可能感兴趣的:(标签,快捷键,方法,总结)