zoukankan      html  css  js  c++  java
  • HTML常用标签3

    1.<a>标签,是内联标签

       href:需要跳转的网址

    2.id属性:

    相当于一个身份证

    例如:

        设置id属性

    3.列表标签

    <ul>: 无序列表 [type属性:disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

    <ol>: 有序列表

             <li>:列表中的每一项.

    <dl>  定义列表

             <dt> 列表标题

             <dd> 列表项

     

    4.表格标签 

    表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。

    表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。

    表格的基本结构:
    <table>
             <tr>
                    <td>标题</td>
                    <td>标题</td>
             </tr>
             
             <tr>
                    <td>内容</td>
                    <td>内容</td>
             </tr>
    </table>

    属性:

    border: 表格边框.

    cellpadding: 内边距

    cellspacing: 外边距.

    像素 百分比.(最好通过css来设置长宽)

    rowspan:  单元格竖跨多少行

    colspan:  单元格横跨多少列(即合并单元格)

     练习:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            td{
                text-align: center;   #设置居中
            }
        </style>
    </head>
    <body>
    <table border="2px" cellpadding="20px" cellspacing="1px">
        <tr>
            <th colspan="3">星期一菜谱</th>
        </tr>
        <tr>
            <td rowspan="2">素菜</td>
            <td>清炒茄子</td>
            <td>花椒扁豆</td>
        </tr>
        <tr>
    
            <td>清炒茄子</td>
            <td>花椒扁豆</td>
        </tr>
        <tr>
            <td rowspan="2">荤菜</td>
            <td>油焖大虾</td>
            <td>海参鱼翅</td>
        </tr>
        <tr>
    
            <td>红烧肉<img src="https://www.baidu.com/img/bd_logo1.png" width="150" height="180"></td>
            <td>烤全羊</td>
        </tr>
    </table>
    
    </body>
    </html>
    

    5.表单标签:<form>

    功能:表单用于向服务器传输数据,从而实现用户与web服务器的交互

    表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等。

    表单还可以包含textarea、selsct、filedset、和label标签

    表单属性:

    input标签(内联标签)

    <1> 表单类型
    
    type:        text 文本输入框
                 password 密码输入框
                 radio 单选框
                 checkbox 多选框  
                 submit 提交按钮            
                 button 按钮(需要配合js使用.) button和submit的区别?
                 file 提交文件:form表单需要加上属性enctype="multipart/form-data" 
                上传文件注意两点:
                         1 请求方式必须是post
                         2 enctype="multipart/form-data"

    <2>name属性:

    对应发送给服务器的key

    name属性是内置的,不能更改

    name:    表单提交项的键.

               注意和id属性的区别:name属性是和服务器通信时使用的名称;

               而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在css和javascript中使用的

    value:    表单提交项的值.对于不同的输入类型,value 属性的用法也不同:

                    type="button", "reset", "submit" - 定义按钮上的显示的文本

                    

                    type="text", "password", "hidden" - 定义输入字段的初始值

                    

                    type="checkbox", "radio", "image" - 定义与输入相关联的值

    checked:  radio 和 checkbox 默认被选中

    readonly: 只读. text 和 password

    disabled: 对所用input都好使.

    6.select标签

    <select> 下拉选标签属性

              name:表单提交项的键.

              size:选项个数

              multiple:multiple

                     <optgroup>为每一项加上分组

                     <option> 下拉选中的每一项 属性:

                           value:表单提交项的值.  

                           selected: selected下拉选默认被选中

    7.<textarea> 多行文本框

    <form id="form1" name="form1" method="post" action="">

            <textarea cols=“宽度” rows=“高度” name=“名称”>

                       默认内容

            </textarea>

    </form>

    8.<label>标签(了解)

    定义:<label> 标签为 input 元素定义标注(标记)。

    说明:

    1 label 元素不会向用户呈现任何特殊效果。

    2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同

    <form method="post" action="">

            <label for=“username”>用户名</label>

            <input type=“text” name=“username” id=“username” size=“20” />

    </form>

    9.<fieldset>标签(了解)

    <fieldset>

        <legend>登录吧</legend>

        <input type="text">

    </fieldset>

  • 相关阅读:
    谷歌眼镜--参考文档
    谷歌眼镜--与菜单项互动
    谷歌眼镜--UI指南
    【cl】工程导入
    Ylmf_Ghost_Win7_SP1_x64_2017_0113.iso虚拟机安装
    win7_64
    linux下安装jdk
    rar x 解压rar文件,提示permission denied
    linux下安装rar解压包
    Red Hat Linux虚拟机与主机共享文件
  • 原文地址:https://www.cnblogs.com/asaka/p/6889715.html
Copyright © 2011-2022 走看看