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>

原文地址:https://www.cnblogs.com/asaka/p/6889715.html