前端学习阶段一：HTML02-CFANZ编程社区

1、列表

无序列表：ul>li 展示的内容无1，2，3...的顺序

ul标签：表示无序列表的整体

li标签：表示无序列表的每一项内容

ul标签中只能有li标签

li标签可以包裹其他标签

<ul>
    <li>西瓜</li>
    <li>冬瓜</li>
    <li>哈密瓜</li>
</ul>

有序列表：ol>li 显示序号标识

ol标签：有序列表的整体

li标签：有序列表的每一项内容

ol标签只允许包裹li标签

li标签可包裹其他标签

<ol>
    <li>易烊千玺</li>
    <li>白敬亭</li>
    <li>王一博</li>
</ol>

自定义列表：dl>dt+dd 通常在页面的底部导航中实现

dl标签：自定义列表的整体

dt标签：自定义列表的主题

dd标签：自定义列表的针对主题的每一项内容

dd前会默认显示缩进效果

dl标签只允许包裹一个dt和多个dd标签

<dl>
     <dt>白敬亭
         <dd>身高183cm</dd>
         <dd>体重75kg</dd>
         <dd>星座天秤座</dd>
     </dt>
</dl>

2、表格

表格基本标签

table 表格整体，包裹tr

tr 表格的行，包裹td

td 表格单元格，包裹内容

表格的属性：

border 边框宽度

width 表格宽度

heigh 表格高度

align 对齐方式 left,center,right

cellspacing 单元格与单元格之间的距离，默认2像素

cellpadding 单元格内容到单元格边框之间的距离，默认1像素

<table border="1" width="200" height="100" cellspacing="0" cellpadding="10">
   <tr>
      <td>姓名</td>
      <td>年龄</td>
      <td>职业</td>
   </tr>
   <tr>
      <td>王一博</td>
      <td>24</td>
      <td>演员</td>
   </tr>
   <tr>
       <td>白敬亭</td>
       <td>28</td>
       <td>演员</td>
   </tr>
</table>

表格标题和表头单元格标签

caption 表格大标题

th 表头单元格

caption 写在table内部

th标签写在tr标签内部，用于替换td

<table border="1" width="300" height="200">
    <caption><h3>信息记录表</h3></caption>
    <tr>
       <th>姓名</th>
       <th>性别</th>
       <th>职业</th>
    </tr>
    <tr>
       <td>易烊千玺</td>
       <td>男</td>
       <td>演员</td>
    </tr>
    <tr>
       <td>李钟硕</td>
       <td>男</td>
       <td>演员</td>
    </tr>
</table>

表格结构

thead 表格头部

tbody 表格主体

tfoot 表格底部

表格结构标签内部用于包裹tr标签

<table border="1" width="300" height="200">
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>评语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
             <td>刘亦菲</td>
             <td>女</td>
             <td>神仙姐姐</td>
        </tr>
        <tr>
             <td>赵今麦</td>
             <td>女</td>
             <td>宝藏女孩</td>
        </tr>
     </tbody>
     <tfoot>
         <tr>
             <td>总结</td>
             <td>漂亮小姐姐</td>
             <td>很难不爱</td>
         </tr>
     </tfoot>
</table>

合并单元格

左上原则

上下合并(跨行):保留最上的，删除/注释其他的

左右合并(跨列):保留最左的，删除/注释其他的

给保留的单元格设置：跨行合并rowspan,跨列合并colspan

不可跨结构(thead,tbody,tfoot之间不可合并）

     <table border="1" width="500" height="500">
         <tr>
             <td></td>
             <td rowspan="3"></td>
             <td></td>
             <td></td>
             <td></td>
         </tr>
         <tr>
             <td></td>
             <!-- <td></!--> -->
             <td></td>
             <td colspan="2"></td>
             <!-- <td></td> -->
         </tr>
         <tr>
             <td></td>
             <!-- <td></!--> -->
             <td></td>
             <td></td>
             <td></td>
         </tr>
     </table>

3、表单

input系列标签

type属性值：

text文本框

password密码框（密码不可见）

radio单选框

checkbox多选框

file文件域/文件上传控件

submit提交按钮

reset重置按钮

button普通按钮配合js做特效

     <!-- form 表单 是用来收集用户信息的 -->
     <!-- action 提交路径 收集的信息提交给那个页面处理 -->
     <form action="http://www.baidu.com">
         <!-- 占位符 placeholder 提示作用 -->
         用户名：<input type="text" placeholder="请输入用户名">
         <br><br>
         密码：<input type="password" placeholder="请输入密码">
         <br><br>


         <!-- 
         name     名称，相同name属性值的单选框为一组，一组中同时只能有一个被选中
         checked  默认选中(多选同理)
         -->
         性别：<input type="radio" name="sex">男
         <input type="radio" name="sex" checked>女
         <br><br>

         爱好：<input type="checkbox" checked>吉他
         <input type="checkbox">篮球
         <input type="checkbox">手工
         <br><br>


         <!-- multiple  上传多个文件 -->
         文件：<input type="file" multiple>
         <br><br>

         <!-- value 值 -->
         <input type="submit" value="免费注册">
         <br><br>
         <input type="reset" value="重新填写">
         <br><br>
         <input type="button" value="">

     </form>

button标签

type属性值：

submit 提交按钮

reset 重置按钮

button 普通按钮

谷歌浏览器中button默认是提交按钮

button标签是双标签，更便于包裹其他内容：文字，图片等

<button type="submit">提交按钮</button>
<button>默认提交</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>

select下拉菜单标签

select标签：下拉菜单的整体

option标签：下拉菜单的每一项

selected：下拉菜单的默认选中

<select>
    <option>山东</option>
    <option>杭州</option>
    <option selected>重庆</option>
    <option>四川</option>
</select>

textarea文本域标签

属性:

cols:规定文本域内可见宽度

rows:规定文本域内可见行数

文本域可下拉

<textarea cols="60" rows="10">中间不能换行</textarea>

label标签

用于绑定内容与表单标签的关系

使用方法1：

1.使用label标签把内容（如：文本）包裹起来

2.在表单标签上添加id属性

3.在label标签的for属性中设置对应的id属性值

使用方法2：

1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来

2.需要吧label标签的for属性删除即可

性别：<input type="radio" name="sex" id="nan"> <label for="nan">男</label> 
     <label><input type="radio" name="sex" checked>女</label>

4、无语义标签

页面布局

div标签独占一行，可以嵌套任意标签

span标签一行可以显示多个

5、有语义标签（常用于手机端）

<body>
    <header>网页头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>网页侧边栏</aside>
    <section>网页区块</section>
    <article>网页文章</article>
</body>

6、常用字符实体

 空格

<小于

>大于