form表单知识总结

form标签的属性

|-----action  提交的页面地址

|----method  提交的方式  

|--------------post  隐形传值方式

|--------------get   显性传值方式

|------target    打开页面的方式    _blank  新开页面的方式   _self   在自身页面打开

<form action="https://www.baidu.com" method="get" target="_self">
</form>

文本类

账号<input type="text" name="uid" id="" value="" placeholder="请输入用户名" /><br>
            密码<input type="password" name="pwd" id="" value="" placeholder="请输入密码" /><br>
            <input type="hidden" name="hid" id="hid" value="123" /><br>

按钮类

input type="submit" name="" id="" value="提交" /><!--提交按钮-->
            <input type="button" name="" id="" value="普通按钮" /><!--普通按钮-->
            <input type="reset" name="" id="" value="重置按钮" /><!--重置按钮-->

|-------图片按钮

<input type="image" src="" name="" id="" value="" width="" height="" />

 控制类标签

|----<b></b> 字体加粗

|----<i></i> 字体倾斜

|----<u></u> 字体下划线

|----<br> 单标签，换一行

|----&nbsp 空格符号，需要几个空格就写几个&nbsp

内容标签

|---块状元素：内容单独占一行，无论内容多少，右边都是空着，

|------<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>   h1到h6这几个标签作用是控制字体的大小,h1标签字体最大，h6标签字体最小

|------<p></p>  段落标签

|------<div></div>  把文档分割为独立的部分

|---行内元素

|------<span></span>  内容再一行里面显示

|---列表

|------ol 有序列表，内容以123或者abc的顺序排列

<ol type="I">
             <li>第一行</li>
             <li>第二行</li>
             <li>第三行</li>
             <li>第四行</li>
         </ol>

|------ul 无序列表，内容以相同的符号进行排列，没有顺序

 <ul type="disc">
            <li>第一行</li>
             <li>第二行</li>
             <li>第三行</li>
             <li>第四行</li>
        </ul>

引入图片标签

<img src=""  width="100" height="50" title="这是我的图片" alt="这也是我的图片"/>

src:图片地址 width：图片的宽  height：图片的高  title：鼠标移到图片上显示的文字  alt：当图片无法显示的时候显示的文字

|-------<a></a>标签

|-----------做链接

<a href="https://www.baidu.com">跳转到百度</a>

href：跳转的路径

|----------做下载

<a href="dh3.zip">下载</a>

注意：文本，图片和网页内容会直接打开不会下载

|--------做锚点

<a href="#dingbu">回顶部</a>

表格

<table width="100%" border="1" cellspacing="0" cellpadding="0"> 

|-------width是表格的宽度，width="100%"表示表格自动适应屏幕的宽度

|-------cellspacing是每个单元格的间距

|-------cellpadding是内间距

表格合并标签

|-----colspan列合并

|----rowspan行合并

选择类的按钮

|------radio单选按钮，两个选项只能选一个

<input type="radio" name="sex" id="" value="1">男
<input type="radio" name="sex" id="" value="0">

两个代码name需要一致，起到互斥的效果

|------checkbox复选框，多个选项可以一起选

<input type="checkbox" name="area1" id="" value="张店" />张店
<input type="checkbox" name="area2" id="" value="桓台" />桓台
<input type="checkbox" name="area3" id="" value="临淄" />临淄
<input type="checkbox" name="area4" id="" value="高青" />高青

|-----select下拉列表标签

<select name="chinaArea">   
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="gz">广州</option>
        <option value="hz" selected="selected">杭州</option>
</select>

|----<select></select>表示下拉

|----<option></option>表示下拉列表里面的选项

|----selected="selected"表示默认选中这一项

框架

|---<frameset></frameset>框架集，frameset存在时不能使用body标签

|-----属性

|-------cols左右拆分

|-------rows上下拆分

|-------frameboede边框

<frameset rows="300*" frameborder="0">
        <frame src="0809.html" />
        <frame src="https://map.baidu.com/" />
    </frameset>

|---<iframe></iframe>把另一个页面嵌到普通页面里

<iframe src="" width="" height="" scrolling="yes"></iframe>

|-----属性

|-------src框架中显示的页面地址

|-------width框架的宽度

|-------height框架的高度

|-------scrolling滚动条