【2017-03-21】表单、常用标记

一、表单

1、格式

<form action="负责处理的服务器端" method="post/get" id="" name="">  其中id不可重复;name可重复;get提交有长度限制,并且编码后的内容在地址栏可见,post提交无长度限制,并且编码后内容不可见。

</form>

2、文本类   文本类的value="",文本框中默认的是value中的内容 

<input type="text"  placeholder="请输入用户名" />             文本框   placeholder=""在文本框中灰色显示,当用户输入内容则消失。

<input type="password" />     密码框

<textarea></textarea>          文本域,文本域没有value。在两个尖括号中加内容为默认值

<input type="hidden" />         隐藏文本,给程序看的

3、按钮类

<input type="button" value="显示在按钮上的内容" />                 普通按钮

<input type="submit"  value="显示在按钮上的内容" />                提交按钮,把表单中的内容发送到服务器,并刷新浏览器。

<input type="reset" value="显示在按钮上的内容" />                    重置按钮,清空当前表单下的内容。

<input type="image" src="图片的相对路径" />                           图片按钮=提交按钮                          

4、选择类。其中value=""是给程序看的内容

单选。

<input type="radio"  name="sex"  id="man" /><lable for="man">男</lable>                             name是分组让选男女互斥

<input type="radio"  name="sex"  id="women"/><lable for="women">女</lable>                     id属性和lable标记让显示出来的“男女”也可以按

多选。

<input type="checkbox" name="fruit" id="fruit1" /><lable for="fruit1">苹果</lable>                   

<input type="checkbox" name="fruit" id="fruit2" /><lable for="fruit2">香蕉</lable> 

<input type="checkbox" name="fruit" id="fruit3" /><lable for="fruit3">梨</lable> 

下拉列表选择。

<select>                                                  

   <option value="A">济南</option>

   <option value="B">青岛</option>

   <option value="C">淄博</option>

   <option value="F">烟台</option>

</select>

上传。

<input type="file" />

二、常用标记

1、换行:<br />

2、空格:&nbsp;

3、段落:<p></p>

4、图片:<img src="相对路径" title="" alt="" />    title图片标签;alt如果图片加载不出来就会在图裂的位置显示alt=""引号内的内容

5、超链接:<a href="本地路径/公共路径" target="_blank">文字/图片</a>                         target="_blank"在新的选项卡中打开超链接的网页

6、表:

<table>
    <tr>
        <td></td>
    </tr>
</table>

7、标题标记:<h1> ~ <h6>        字号由大到小 

8、层标签(单独占一行):<div></div>

9、有序排列:

<ol>

    <li>内容</li>

    <li>内容</li>

    <li>内容</li>

</ol>

10、无序排列:

<ul>
    <li>内容</li>

    <li>内容</li>

    <li>内容</li>
</ul>

原文地址:https://www.cnblogs.com/qq609113043/p/6595058.html