zoukankan      html  css  js  c++  java
  • html_基础标签

    块级标签: 默认情况会占位一整行
    行内(内联)标签:默认只有自己的大小

    块级标签如:  <div>我是字</div>
             <h1>标题1</h1>
             <p>段落</p>

    行内标签如:   <a>我是一串字</a>

            <span> 我也是字</span>

            <lable></lable>  ; <input />  ;  <form></form>  ; <img />

    标签的包含:默认子标签所有内容在父标签里面


    部分基础标签:

    <html>
      <head>
      <title> </title>
      </head>
    
      <body>
        <div> div:只是把这一行占满,里面写什么就是什么,默认为块级标签可以通过css样式把块级标签变为内联标签</div>
        <span> span:和div 没有什么区别</span>
        <div style="200px;border:1px solid red; word-break: break-all;">
        <p> word-break:break-all :表示默认超出红框的字符自动换行xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>
         <!--a 标签中 target 和 href 是a标签特有的-->
        <a href="www.baidu.com" target="_blank">百度</a> <!-- 超链接; _blank:打开新的窗口-->
    
        <a href="s2.html" target="_blank">s2网页</a> <!--跳转到s2.html页面-->
    
        <a href="#tt">锚点</a> <!--锚点跳转到id为tt的标签-->
    
        <div id="tt" style="height:500px;background-color:red;">第一章</div> <!--id不能被重复-->
    
        <img title="当鼠标放在图片上图片上出现的字" src="图片的地址/图片名.jpg" style = "height:100px; 100px;"/>
    
      </body>
    </html>

    <br/> : 换行符

    <hr/>: 分割线的符号


    select标签:

    <html>
    <head>
            <title> </title>
    </head>
    
    <body>
        <select  size="2">  <!--下拉选项框:可提交到后台-->
        <option value="1"> <!--设置为 1 就代指“北京”使传到服务器上的值为1-->
        北京
        </option><!--选项框中的项-->
        <option value="1">
        上海
        </option><!--选项框中的项-->   
        <option value="1" selected="selected">   <!--selected把广州设为默认-->
        广州
        </option><!--选项框中的项-->
        </select>
        <select size="2">框中项的个数</select>
        <select multiple="multiple">
            <optgroup label="河北省"><!--分的组不能选中-->
                <option>石家庄</option>
                <option>邯郸</option>
            </optgroup>
            <optgroup label="山西省">
                <option>太原</option>
                <option>平遥</option>
            </optgroup>
        </select>
        <select multiple="multiple">按住Ctrl可多选</select>
    
    </body>
    </html>    

    input系列标签:自闭合形式的标签

    <html>
    <head>
            <title> </title>
    </head>
    <body>
        
        <input type="checkbox" checked="checked"/><!--复选框:checked默认为选中状态-->
    
    
        <p><input name="1" type="radio"/></p><!--单选框:name相同才能是互斥的:例:性别-->
        <p><input name="1" type="radio"/></p>
    
        <input type="text" value="默认的文字"/><!--文本框-->
    
        <input type="password"/><!--密码框-->
        <input type="button" value="button按钮上的文字"/>   <!--简单的按钮-->
        <input type="submit" value="submit按钮上的文字"/>   <!--提交表单的按钮-->
        <input type="file" value="选择上传文件的按钮"/>   <!--选择电脑上的文件-->
       <textarea>iii(默认数据)</textarea><!--多行文本框-->
    
    </body>
    </html>   

     submit按钮 / form表单提交:

    <html>
        <head>
                <title> </title>
        </head>
    
        <body>
            <!--from 表单提交-->
            <form action="http://www.baidu.com"><!--提交到其他地方必须要用这个标签-->
            <input type="text">
            <input type="button" value="button提交"/>
            <input type="submit" value="submit提交"/><!--submit 才是提交到后台的按钮-->
    
            </form>
    
            <form action="http://www.baidu.com"><!--提交到其他地方必须要用这个标签-->
                <div>
                    主机名:<input name="host" type="text"/>  
                </div><!--name 用于服务器识别客户端传入的数据-->
                <div>
                    端口:<input name="port" type="text"/>
                </div>
                <div>
                    类型:<input name="type" type="text"/>
                </div>
                <div>
                    用户:<input name="user" type="text"/>
                </div>
                <input type="button" value="button提交"/>
                <input type="submit" value="submit提交"/><!--submit 才是提交到后台-->
            </form>
        </body>
    </html>    

    lable标签for属性对应的id : 对文本 进行操作 就可以操作 文本所对应的文本框或者单选框

    <label for="对应id名">啦啦</label>

    <html>
        <head>
            <title> </title>
        </head>
    
        <body>
            <label for="hh">例:点我点我</label> 
            <input id="hh" type="textarea"/>
            
            <label for="xx">也点我也点我</label>          
            <input id='xx' type='checkbox'/>
        </body>
    </html>   

    列表:

    <html>
        <head>
                <title> </title>
        </head>
        <body>
            <ul><!--前面是小黑点的列表形式--
                <li>1111</li>
                <li>111</li>
                <li>11</li>
                <li>1</li>
            </ul>
    
            <ol><!--前面是数字的列表形式-->
                <li>wwww</li>
                <li>www</li>
                <li>ww</li>
                <li>w</li>
            </ol>
    
            <dl>
                <dt>标题1</dt>
                <dd>内容1</dd>
                <dd>内容1</dd>
                <dt>标题2</dt>
                <dd>内容2</dd>
                <dd>内容2</dd>
            </dl>
    
        </body>
    </html>    

    table标签(表格) : 其中,<thead></thead>  <tbody></tbody> 可省略

    <html>
        <head>
                <title> </title>
        </head>
    
        <body>
            <table border="1"><!--border 设置边框-->
                <thead><!--表头-->
                    <tr><!---->
                        <th>第一列</th><!---->
                        <th>第二列</th>
                        <th>第三列</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><!---->
                        <td colspan="2">111111</td><!--colspan 占两列的位置(横的)-->
                    <!--    <td>111</td>  -->
                        <td>111</td>
                    </tr>
                    <tr><!---->
                        <td rowspan="2">222333</td><!--rowspan 占两行的位置(竖的)-->
                        <td>222</td>
                        <td>222</td>
                    </tr>
                    <tr><!---->
                    <!--    <td>333</td>  -->  
                        <td>333</td>
                        <td>333</td>
                    </tr>
                </tbody>
            </table>
        </body>
    </html>    

    fieldset 标签 : 在线框上插入文本

    <html>
        <head>
                <title> </title>
        </head>
    
        <body>
          <fieldset>
              <legend>我是框上的字</legend>
              <p>用户名:<input type='text' value='请输入用户名'/></p>
              <p>密   码:<input type='text' value='请输入密码'/></p>
          </fieldset>
        </body>
    </html>    

    属性总结

      公共属性:id ,name (一般只是提交数据的时候用),style,class

      私有属性

        input : text, password

          <input type="text" value="123"/>


        input : button, submit
          <input type="submit" value="sub">
          <input type="checkbox" checked="checked"> : checked 表示默认为选中状态


        input : radio 其中,name 的命名可作为选项互斥
          <input name="1" type="radio" checked="checked"> : checked 表示默认为选中状态
          <input name="1" type="radio">

        form : action ,如果想要提交文件,需要在其所在form标签中特地添加enctype='multipart/form-data' method='POST'
          <form action="提交到某一地址">要提交的所有标签</form>:
          <form action="提交到某一地址" enctype='multipart/form-data'  method='POST'> 
            <input type="text"/>
            <input type="file"/>
          </form>
        注:textarea 要提交到后台也需要使用name属性

    <!--符号-->
    参考博客:http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

    其中,空格符为:&nbsp;

  • 相关阅读:
    形态学操作
    形态学腐蚀膨胀操作
    图像模糊操作
    OpenCV像素操作和图形绘制
    c++中char类型的取值范围
    二叉树基本操作
    剑指27 二叉树的镜像
    剑指26 树的子结构
    剑指24: 反转链表
    剑指22 链表倒数第k个节点
  • 原文地址:https://www.cnblogs.com/Vera-y/p/10439533.html
Copyright © 2011-2022 走看看