02-HTML基础

HTML基础

一、HTML标签

1、列表标签

• 无序列表（ul + li ）：没有顺序

  注意: ul里面只能有li, li里面可以放任意元素。

• 有序列表（ol + li）：有数字顺序

​ 注意: ul里面只能有li, li里面可以放任意元素。

• 自定义列表（dl > dt+dd）：dt表示自定义列表的主题（标题）； dd表示自定义列表中的每一项解释说明，dd会自动缩进

  注意: dl里面只能放dt和dd, dt和dd里面可以放任意元素；一个dl里面可以有多组dt+dd

2、表格标签

• 表格的基本标签：table表示表格的整体；caption表格整体的大标题 ；th表格的表头单元格，表格一列的小标题；tr表示表格的每一行 ；td表示表格的单元格 。
• 表格的结构标签：thead：表示表格的头部；tbody：表示表格的主体；tfoot：表示表格的底部。
• 表格的属性：border (边框) 这里只能设置边框宽度；align(水平位置)：left/right/center 自动居中；width/height宽高会自动等比例分类给每一行和列；cellspacing控制单元格外部的距离。
• 合并单元格：1、确定要合并的几个格子；2、保留左上角的格子, 其他被合并的要删掉；3、添加colspan或者rowspan, 合并几列或者几行就写数字几。

3、input系列标签

• 表单标签: 收集用户信息与用户交互使用;
• input标签: 最常用的表单标签, 类型（type）很多;

//placeholder: 占位符;  name: 标签的名字;  checked: 默认选中;  multiple: 多文件上传; value: 标签的值。   
//form 表单域  包裹住所有的表单元素 
<form action="abc.php">
       // 1. type="text" 文本框
        <input type="text" placeholder="占位符" name="username"> 

      // 2. type="password" 密码框
        <input type="password" placeholder="请输入至少8位" name="psd">

      // 3. type="radio" 单选按钮  一组单选必须配合相同的name值才能实现单选互斥效果 
        <input type="radio" name="sex" checked value="男">男
        <input type="radio" name="sex" value="女">女
        
      // 4. type="checkbox" 
        <input type="checkbox" name="hobby" checked value="唱">唱
        <input type="checkbox" name="hobby" value="跳">跳
        <input type="checkbox" name="hobby" value="rap">rap
        <input type="checkbox" name="hobby" value="篮球">篮球
        <input type="checkbox" name="hobby" value="全选">全选 

      // 5. type="file" 文件域   配合multiple可以多文件上传 
        提交简历: <input type="file" multiple> 

      // 6. type="submit" 提交按钮   外面一定要有form表单域 
        <input type="submit">

      // 7. type="reset" 重置按钮   外面一定要有form表单域 
        <input type="reset">

      // 8. type="button" 普通按钮   没有功能, 需要使用value设置名字
        <input type="button" value="我是一个按钮">
</form>

4、botton系列标签

<form action="abc">
        <!-- button  也可以设置不同类型, 提交和重置也需要配合form表单域使用, 两个标签中间的内容就会显示在button上 -->
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
        <button type="button">普通按钮</button>

        <!-- 不设置类型默认是提交按钮 -->
        <button><img src="./images/up.jpg" alt=""></button>

</form>

5、下拉表单和文本域

• 下拉表单: select > option, 默认选中设置selected。

所在城市：<select>
            <option>上海</option>
            <option selected>北京</option>
            <option>广州</option>
            <option>深圳</option>
        </select>

• 文本域

<!-- 文本域  输入多行文本 cols控制列数(宽度), rows控制行数(高度), 也可以使用高宽 -->
  <textarea name="" id="" cols="50" rows="10" placeholder="请输入反馈信息"></textarea>

6、label标签

<!-- label绑定表单元素扩大点击范围 -->
    <!-- 方法一 for属性查找id-->
    <label for="username"> 请输入姓名:</label> <input type="text" id="username">
    <!-- 方法二  直接使用label包裹住文本和元素, 去掉for属性-->
    <label> 请输入密码: <input type="password"></label> 

7、语义化标签

• 没有语义的标签：div： 独占一行；span：一行多个

<!-- 以下六个标签与div用法一致, 但是有语义有固定使用位置 -->
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <article>article</article>
    <section>section</section>
    <footer>footer</footer>

8、实体字符

空格的字符实体： 
小于号：<
大于号：>

二、案例分析