学习前端第二天HTML5标签

1.无序列表显示的是无序的，前面有圆点

<ul>
    <li></li>
</ul>

2.有序列表显示出来是1. 2. 3. 4.

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

3.自定义列表

注意：dt和dd是平级的 dt是标题，dd是内容的描述

<dl>
    <dt></dt>
    <dd><dd>
    <dd></dd>
 </dl>

4.表格标签

table是一整个表格；tr表示一行；td表示每个单元格里的内容

表格的属性：边框值：border="1" 宽：width="500" 高：height="500

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

表格的标题：

<!-- caption:表格的标题 -->
<caption>标题</caption>

表头单元格：

<!-- th:表格每一列的小标题 在表格第一行 -->
<th></th>

注意：caption标签书写在table标签内部​ th标签书写在tr标签内部（用于替换td标签）

表格的结构标签：thead：表格头部 tbody：表格主体 tfoot：表格底部

合并单元格步骤：

1.先合并判断合并哪几个单元格

​ 2.上下合并，保留最上边的 左右合并，保留最左边的

​ 3.合并行：rowspan 合并列：colspan

5.input标签

input标签很多属性值要牢记这些属性值

<!-- input 收集用户信息并提交给后台 -->
​
    <!-- 文本框  text属性：  placeholder:占位符 意思就是给个提示
                                只有输入框可以使用placeholer -->
    <!-- value="姐姐"   name="刘佳慧" -->
    昵称：<input type="text" placeholder="请输入您的昵称" /><br /><br />
    <!-- 密码框  如果password后加一个空格，输入密码的时候会把密码显示出来，意思就是看见密码 -->
    密码：<input type="password" placeholder="请输入密码" /><br /><br />
    <!-- 单选框 要想实现单选，必须给name加上属性值
                默认选中属性：checked   多选和单选属性一样都是checked-->
    性别：<input type="radio" name="gender" />男
    <input type="radio" name="gender" checked />女 <br /><br />
    答案：<input type="radio" name="password" />A
    <input type="radio" name="password" />B <br /><br />
    <!-- 复选框 -->
    爱好：<input type="checkbox" />篮球 <input type="checkbox" />游泳
    <input type="checkbox" />画画 <br /><br />
    <!-- 文件框  multiple选择多个文件上传 -->
    <input type="file" multiple /> <br /><br />

input 按钮标签

<!-- form:表单域 按钮要放在form表单域里才能生效 -->
<!-- 提交按钮 数据提交给后台 -->
 <button type="submit">提交按钮</button>
 <!-- 重置按钮 输入的数据清空 -->
 <button type="reset">重置按钮</button>
 <!-- 普通按钮 后期和js搭配使用 -->
 <button type="button">普通按钮</button>

6.select 下拉标签

<!-- 用select搭配option来写
         要想运行结果出来的时候默认显示谁，加上selected -->
    城市：<select>
      <option>北京</option>
      <option selected>上海</option>
      <option>广州</option>
      <option>深圳</option>
      <option>石家庄</option>
      <option>南京</option>
   </select>

7.label 标签 label标签的作用是点击文字可以选择而不是点击按钮

<!-- label标签 增加用户美观性 点击文字可以选择 -->
    <!-- 第一种写法 -->
    <label><input type="radio" name="gender" checked />男</label>
    <input type="radio" name="gender" />女
    <!-- 第二种写法 -->
    <input type="radio" name="gender" checked id="ABC" />
    <label for="ABC">男</label>

8.字符实体

空格： 
小于号：<
大于号：>

9.布局标签

div:  <div>独占一行</div>
span: <span>占整个文字的大小</span>