首页 > 代码库 > HTML常用标签3

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: 外边距.

width: 像素 百分比.(最好通过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>

 

HTML常用标签3