HTML新手入门（二）

@[TOC]((HTML新手入门——html初步(二))

表单

<form action="" method="GET"></form>

属性

action

表示提交服务器的地址，跳转页面，若省略action属性，则会默认设置为当前页面

method

 提交数据方式
  get：请求参数在地址栏可见，长度受限
  post：请求参数不可见（安全性高），长度没有限制

---

元素

input标签

可通过设置type属性来选择不同的表单类型

文本输入框

姓名：<input type="text" name="" id="" >

---

单选按钮
 用name属性来进行单选框的分类
  未设置name属性，选中后不能自己清除选择

    （单选）性别： 男<input type="radio" name="sex" value="boy" checked> 女<input type="radio" name="sex" value="gril">
    <br>
    （多选）选项： 二氧化碳<input type="radio"  value="CO2" > 氧气<input type="radio"  value="O2">

多个单选按钮的name属性一样时，才能实现‘单选’效果

---

复选框
 属性checked 表示初始状态为选中,value为参数值

（复合查询）类别： <input type="checkbox" name="cost" value="cost">花销  <input type="checkbox" name="sum" value="sum">总收入

---

密码输入框

密码：<input type="password" >

---

邮件输入框
 可用于邮件格式的检查，格式不规范时提交表单时会提示出错

邮件输入框 <input type="email">

---

日期选择框

日期选择框 <input type="date" >

---

月份 type=“month”

月份 <input type="month" >

---

重置按钮 type=“reset”，可初始化表单数据

重置按钮 <input type="reset" >

---

提交按钮 type=“submit”

提交 <input type="submit" >

---

颜色选择器 type=“color”

颜色选择 <input type="color">

---

数字选择框 type=“number”

数字选择 <input type="number" >

---

普通按钮 type=“button”,与button标签的区别在于，不可嵌入元素

普通按钮 <input type="button" value="普通按钮" >

---

select标签

  下拉选择框,用option标签 定义下拉选项，但提交的数据只与其属性值value有关

选择城市<select>
        <option value="shanghai">上海</option>
        <option value="beijing">北京</option>
        <option value="chengdu">成都</option>
    </select>

---

textarea标签

  多行的文本框,cols 文本列数,rows 文本行数

这是一个多行的文本框<textarea name="" id="" cols="30" rows="10"></textarea>

---

button标签

  可嵌套其他的标签,通过type设置按钮的样式:submit 提交按钮、reset 重置按钮、button 普通的按钮（须配以onclick事件使用才有效果）

 <button type="button">button</button>
    <button type="menu">menu</button>
    <button type="reset">reset</button>
    <button type="submit">submit</button>
    <button><h2>H2_button</h2></button>

---

表单实例

制作个人简历

点此处进行跳转

---

表格

	开始标签 <table>
	表格标题 <caption>
	表头 <th>
	行 <tr>
	定义单元格 <td>
		单元格合并
			列合并：colspan
			行合并：rowspan
		设置宽高
			width 设置宽度
			height 设置高度

有关行列合并，详见表单实例 点此处进行跳转

<table border="1px" bordercolor="#000000" cellspacing="0px" >
        <!-- 标题 -->
        <caption><h2>小说排行榜</h2></caption>
        <!-- 表头 -->
        <tr>
            <th style="width: 50px;">排名</th>
            <th style="width: 60px;">关键词</th>
            <th>趋势</th>
            <th style="width: 80px;">今日搜索</th>
            <th style="width: 100px;">最近七日</th>
            <th style="width: 140px;">相关链接</th>
        </tr>
        <!-- 第一行 -->
        
        <tr>
            <td>1</1d>
            <td>鬼吹灯</td>
            <td><img src="素材\images\up.jpg" alt="上升"></td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="https://tieba.baidu.com/">贴吧</a>
                <a href="https://image.baidu.com/">图片</a>
                <a href="https://baike.baidu.com/">链接</a>
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>1</1d>
            <td>鬼吹灯</td>
            <td><img src="素材\images\down.jpg" alt="下降"></td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="https://tieba.baidu.com/">贴吧</a>
                <a href="https://image.baidu.com/">图片</a>
                <a href="https://baike.baidu.com/">链接</a>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="https://tieba.baidu.com/">贴吧</a>
                <a href="https://image.baidu.com/">图片</a>
                <a href="https://baike.baidu.com/">链接</a>
            </td>
        </tr>
        

    </table>

---

列表

有序列表

使用有序的数字/字母/罗马数字行进标记

通过属性type选择标记类型：
  1 : 数字（默认）
  A/a：大写/小写字母
   I/i： 大小/小写罗马数字

		<h2>搜索引擎排名</h2>
        <ol type="1">
            <li>Google</li>
            <li>Baidu</li>
            <li>Bing</li>
            <li>Sogou</li>
        </ol>

搜索引擎排名

1. Google
2. Baidu
3. Bing
4. Sogou

---

无序列表

使用相同的特殊符号进行标记

通过属性type选择标记类型：
  disc: （默认）实体圆心
  square： 实体方心
  circle： 空心圆

<h2>软件编程语言</h2>
        <ul type="disc">
            <li>Java</li>
            <li>C++</li>
            <li>Python</li>
            <li>JavaScript</li>
        </ul>

软件编程语言

• Java
• C++
• Python
• JavaScript

---

自定义列表

    <dl> 开始标签
	<dt>列表项标签
	<dd>列表定义标签

        <h2>健康食品</h2>
        <dl>
            <dt>水果</dt>
            <dd>苹果</dd>
            <dd>香蕉</dd>
            <dt>蔬菜</dt>
            <dd>西兰花</dd>
            <dd>菠菜</dd>
        </dl>

健康食品

水果

苹果

香蕉

蔬菜

西兰花

菠菜

附件:

<div style="display:flex;justify-content: center;align-items: center;">
        <form action="">
            <table border="1px" bordercolor="#000000" cellspacing="0px">
                <caption><h3>个人简历</h3></caption>
    
                <!-- 第一行 -->
                <tr>
                    <td style="text-align: center; width: 80px;">姓名</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="name" id="name" style="width: 90%;text-align: center;" >
                    </td>
                    <td style="text-align: center; width: 80px;">性别</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="sex" id="sex" style="width: 90%;text-align: center;" >
                    </td>
                    <td style="text-align: center; width: 80px;">出生年月</td>
                    <td style=" width: 80px;text-align: center;">
                        <input type="text" name="birthday" id="birthday" style="width: 90%;text-align: center;" >
                    </td>
                    <td rowspan="4" style="width: 90px;vertical-align: top;">
                        <input type="file" name="picture" id="picture" style="width: 90%;">
                    </td>
                </tr>

                <!-- 第二行 -->
                <tr>
                    <td style="width: 80px; text-align: center;">民族</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="nation" id="nation" style="width: 90%;text-align: center;">
                    </td>
                    <td style="text-align: center; width: 80px;">政治面貌</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="face" id="face" style="width: 90%;text-align: center;">
                    </td>
                    <td style="text-align: center; width: 80px;">身高</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="height" id="height" style="width: 90%;text-align: center;">
                    </td>
    
                </tr>
    
                <!--  -->
                <tr>
                    <td style="width: 80px; text-align: center;">学制</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="学制" id="3-1" style="width: 90%;text-align: center;">
                    </td>
                    <td style="text-align: center; width: 80px;">学历</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="学历" id="3-2" style="width: 90%;text-align: center;">
                    </td>
                    <td style="text-align: center; width: 80px;">户籍</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="户籍" id="3-3" style="width: 90%;text-align: center;">
                    </td>
                </tr>
                
                <!--  -->
                <tr>
                    <td style="width: 80px; text-align: center;">专业</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="专业" id="4-1" style="width: 90%;text-align: center;">
                    </td>
                    <td colspan="2" style="text-align: center; width: 160px;">毕业学校</td>
                    <td colspan="2"style="width: 160px;text-align: center;">
                        <input type="text" name="毕业学校" id="4-2" style="width: 95%;text-align: center;">
                    </td>
    
                </tr>
    
                <!--  -->
                <tr>
                    <th colspan="7" style="width: 570px;">技能、特长或爱好</th>
                </tr>
      
                <!--  -->
                <tr>
                    <td style="width: 80px; text-align: center;">外语等级</td>
                    <td colspan="2" style="width: 160px;text-align: center;">
                        <input type="text" name="外语等级" id="5-1" style="width: 95%;text-align: center;">
                    </td>
                    <td style="text-align: center; width: 80px;">计算机</td>
                    <td colspan="3" style="width: 250px;text-align: center;">
                        <input type="text" name="计算机" id="5-2" style="width: 97%;text-align: center;">
                    </td>
                </tr>
    
                <!--  -->
                <tr>
                    <td colspan="7" style="text-align: center;width: 560px;">个人履历</td>
                </tr>

                <!--  -->
                <tr>
                    <td style="width: 80px; text-align: center;">时间</td>
                    <td colspan="2" style="width: 160px;text-align: center;">单位</td>
                    <td colspan="4" style="width: 320px;text-align: center;">经历</td>
                </tr>
    
                <!--  -->
                <tr>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="时间1" id="6-1" style="width: 90%;text-align: center;">
                    </td>
                    <td colspan="2" style="width: 160px;text-align: center;">
                        <input type="text" name="单位1" id="6-2" style="width: 95%;text-align: center;">
                    </td>
                    <td colspan="4" style="width: 330px;text-align: center;">
                        <input type="text" name="经历1" id="6-3" style="width: 97%;text-align: center;">
                    </td>
                </tr>
    
                <!--  -->
                <tr>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="时间2" id="7-1" style="width: 90%;text-align: center;">
                    </td>
                    <td colspan="2" style="width: 160px;text-align: center;">
                        <input type="text" name="单位2" id="7-2" style="width: 95%;text-align: center;">
                    </td>
                    <td colspan="4" style="width: 330px;text-align: center;">
                        <input type="text" name="经历2" id="7-3"style="width: 97%;text-align: center;">
                    </td>
                </tr>
    
                <!--  -->
                <tr>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="时间3" id="8-1" style="width: 90%;text-align: center;">
                    </td>
                    <td colspan="2" style="width: 160px;text-align: center;">
                        <input type="text" name="单位3" id="8-2" style="width: 95%;text-align: center;">
                    </td>
                    <td colspan="4" style="width: 330px;text-align: center;">
                        <input type="text" name="经历3" id="8-3" style="width: 97%;text-align: center;">
                    </td>
                </tr>
    
                <!--  -->
                <tr>
                    <td colspan="7" style="text-align: center;width: 570px;">联系方式</td>
                </tr>
    
                <!--  -->
                <tr>
                    <td style="text-align: center; width: 80px;">通信地址</td>
                    <td colspan="2" style="width: 160px;text-align: center;">
                        <input type="text" name="通信地址" id="9-1" style="width: 95%;text-align: center;">
                    </td>
                    <td style="text-align: center; width: 80px;">联系电话</td>
                    <td colspan="3"style="width: 250px;text-align: center;">
                        <input type="text" name="联系电话" id="9-2" style="width: 97%;text-align: center;">
                    </td>
                </tr>
    
                <!--  -->
                <tr>
                    <td style="text-align: center; width: 80px;">E-mail</td>
                    <td colspan="2" style="width: 160px;text-align: center;">
                        <input type="text" name="E-mail" id="10-1" style="width: 95%;text-align: center;">
                    </td>
                    <td style="text-align: center; width: 80px;">邮编</td>
                    <td colspan="3" style="width: 250px;text-align: center;">
                        <input type="text" name="邮编" id="10-2" style="width: 97%;text-align: center;">
                    </td>
                </tr>
    
                <!--  -->
                <tr>
                    <td colspan="7" style="text-align: center;width: 570px;">自我评价</td>
                </tr>

                <tr>
                    <td colspan="7" style="text-align: center; width: 570px;">
                        <textarea name="自我评价" id="11" cols="36" rows="16" style="width:98%;">&emsp;&emsp;</textarea>
                    </td>
                </tr>
    
    
    
            </table>
        </form>
    </div>