前端开发之 HTML基础

HTML基础

标签种类
1.双标签：成对出现，如<p>分段</p>
2.单标签：独立使用，如<br/>换行

标签关系
1.包含关系
2.并列关系

基本结构

常用标签

1. 标题标签<h1><h2><h3><h4><h5><h6>
2. 段落标签<p></p>
3. 换行标签<br>
4. 水平线<hr>
5. 盒子标签<div></div>&&<span></span>
6. 文本格式标签：

<strong>加粗</strong>
<del>删除线</del>
<em>倾斜</em>
<ins>下划线</ins>

7. 图像<img src="路径" alt="替换文本" title="提示文本" width="宽度" higth="高度" border="边框粗细">
   路径：
   相对路径：同级，上一级…/,下一级/
   绝对路径：C:/Scarlett/image/hemin.jpg
8. 超链接<a href="路径" target="弹出方式" >文本或图片</a>
9. 表格标签（不是布局页面，是展示多组数据）
   行标签<tr></tr>
   单元格标签<td></td>
   表头单元格标签<th></th>
   表头区域<thead></thead>
   表中区域<tbody></tbody>

 <table align="center" boder="1" cellpadding="20" cellspacing="0" width="500" height="200">
       <tr>
         <td>单元格</td>
       </tr>
 </table>

合并单元格：
跨行合并rowspan=“个数”，最上侧作为目标单元格
跨列合并colspan=“个数”，最左侧作为目标单元格
删除多余的单元格

10.列表标签
无序列表（重要）

<ul>//只能嵌套<li>标签
   <li></li>
   ......
   <li></li>
</ul>

有序列表（理解）

<ol>
   <li></li>
   ......
   <li></li>
</ol>

自定义列表（重要）

<dl>
  <dt>标题</dt>
  <dd>名词1</dd>
  <dd>名词2</dd>
  ......
</dl>

10. 表单标签（收集用户信息）
    表单域，包含表单元素的区域，送至后台实现交互
    表单元素（输入input，选择select，文本域textarea）
    提示信息，直接输入

• input

<form action="后台地址" method="POST" name=""> 
  用户名：<input type="text" name="username" value="请输入用户名">
  密码：<input type="password" name="pwd">/*输入信息用户看不见*/
  性别：男<input type="redio" name="sex" value="男"> 女<input type="redio" name="sex" value="女">//单选,相同name
  爱好：吃饭<input type="checkbox" name=""> 睡觉<input type="checkbox" name=""> 打豆豆<input type="checkbox" name="">//多选
  /*type可以让表单元素显示不同的值*/
  /*name区别不同的表单元素*/
  /*checked="checked"单选和复选按钮默认被选上*/
  /*maxlength="6"可以控制输入的最大限*/
  提交：<input type="submit">
  重置：<input type="reset">
  普通按钮：<input type="button" value="获取短信验证码">
  上传文件：<input type="file">
  /*label标签增加用户的体验感*/
  <label for="sex">男</label>
  <input type="radio" name="sex" id="sex"/>
</form>

• select

<form>
  <select>
    <option select="selected">选项一</option>/*selected默认被选勾选*/
    <option>选项二</option>
    ......
  </select>
</form>

• textarea

<form>
   留言板：<textarea>
   我想对你说，
          </textarea>
</form>

案例-注册页面

<table>
 <h4>青春不常在，表白趁现在</h4>
        <table width="600" border="1">
          <!--第一行--> 
          <tr>
              <td>性别：</td>
              <td>
                  <input type="radio" name="sex" id="nan"><lable for="nan">男</lable>
                  <input type="radio" name="sex" id="nv"><lable for="nv">女</lable>
              </td>
          </tr>
          <!--第二行-->
          <tr>
              <td>生日：</td>
              <td>
                  <select>
                      <option>--请选择年份--</option>
                      <option>2001</option>
                      <option>2002</option>
                      <option>2003</option>
                      <option>2004</option>
                  </select>
                  <select>
                      <option>--请选择月份--</option>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                      <option>6</option>
                      <option>7</option>
                      <option>8</option>
                      <option>9</option>
                      <option>10</option>
                      <option>11</option>
                      <option>12</option>
                  </select>
                  <select>
                      <option>--请选择日期--</option>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                      <option>6</option>
                      <option>7</option>
                      <option>8</option>
                      <option>9</option>
                      <option>10</option>
                      <option>11</option>
                      <option>12</option>
                      <option>13</option>
                      <option>14</option>
                      <option>15</option>
                      <option>16</option>
                      <option>17</option>
                      <option>18</option>
                      <option>19</option>
                      <option>20</option>
                      <option>21</option>
                      <option>22</option>
                      <option>23</option>
                      <option>24</option>
                      <option>25</option>
                      <option>26</option>
                      <option>27</option>
                      <option>28</option>
                      <option>29</option>
                      <option>30</option>
                      <option>31</option>
                  </select>
              </td>
          </tr>
          <!--第三行-->
          <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京"></td>>
          </tr>
          <!--第四行-->
          <tr>
              <td>婚姻状况：</td>
              <td>
                <input type="radio" name="marry" checked="checked">未婚 <input type="radio" name="marry">已婚 <input type="radio" name="marry">离婚
              </td>
          </tr>
          <!--第五行-->
          <tr>
            <td>学历</td>
            <td><input type="text" value="高中"></td>
          </tr>
          <!--第六行-->
          <tr>
            <td>喜欢的类型：</td>
            <td>
              <input type="checkbox" name="love">妩媚的
              <input type="checkbox" name="love">可爱的
              <input type="checkbox" name="love">小鲜肉
              <input type="checkbox" name="love">大叔类型
            </td>
          </tr>
          <!--第七行-->
          <tr>
            <td>个人介绍</td>
            <td>
              <textarea>个人简介</textarea>
            </td>
          </tr>
          <!--第八行-->
          <tr>
            <td></td>
            <td>
              <input type="submit" value="免费注册">
            </td>
          </tr>
          <!--第九行-->
          <tr>
            <td></td>
            <td>
              <input type="checkbox" checked="checked">我同意注册条款和会员加入标准
            </td>
          </tr>
          <!--第十行-->
          <tr>
            <td></td>
            <td>
              <a href="#">我是会员，立即登录</a>
            </td>
          </tr>
          <!--第十一行-->
          <tr>
            <td></td>
            <td>
              <h5>我承诺</h5>
              <ul>
                <li>年满18岁,单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚的寻找另一半</li>
              </ul>
            </td>
          </tr>
        </table>