04_CSS入门

• 相对地址/绝对地址
• 列表
• 表单
• 表格

1、相对地址/绝对地址

** 相对地址**

• “ ./ “表示当前文件所在目录下
  • 一般可以省略不写
• “../”表示当前文件所在目录下的上一级目录

** 绝对地址**

• ** **不推荐使用，项目迁徙易出问题 2、列表标签

---

列表一般应用在布局中的新闻标题列表和文章列表以及菜单，它是含有语义的。

• List-style 去掉列表项的小圆点。list-style:none

标签结构如下

<ul>
  <li>列表标题一</li>
  <li>列表标题二</li>
  <li>列表标题三</li>
</ul>

3、html表单

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成。

相关标签及属性用法如下：

01、<form> 标签： 定义整体的表单区域

• 容器，类似于div
• action属性
  • 定义表单数据提交地址
    • 后台专门解析数据的地址
  • 默认提交到当前页
• method属性
  • 定义表单提交的方式
    • 一般由“get”和“post”方式

**02、<label>标签 ： **

• ** 为表单元素定义文字标注**

03、<input>标签：

• 定义通用的表单元素

• type 属性

  • **type=“text” **
    • 定义单行文本输入框
  • **type=“password” **
    • 定义密码输入框
  • **type=“radio” **
    • 定义单选框
  • **type=“checkbox” **
    • 定义复选框
  • **type=“file” **
    • 定义上传文件
  • **type=“submit” **
    • 定义提交按钮
      • 提交以键值对的形式，提交到后台
      • **<input type=”text” name=”username”>

• *

     * **name属性就是键值对中的key**
  

  • **type=“reset” **
    • 定义重置按钮
  • **type=“button” **
    • 定义一个普通按钮——js绑定函数

• value属性 定义表单元素的值

• name属性 定义表单元素的名称，此名称是提交数据时的键名

**04、<textarea>标签 **

• 定义多行文本输入框

05、<select>标签 ** **

• ** 定义**下拉表单元素

06、html表单——常用样式、属性及示例

• outline 设置input框获取焦点时，是否显示凸显的框线，一般设置为没有，比如：outline:none
• placeholder:设置input输入框的默认提示文字

07、html表单布局实例

4、html表格

** 读取数据库的数据，从前端显示出来。**

• <table>标签
  • 声明一个表格
• <tr>标签
  • 定义表格中的一行 ** —–row行**
• <td>和<th>标签
  • 定义一行中的一个单元格
    • td 代表普通单元格
    • th 表示表头单元格 ——head表头

表格相关样式属性

• border-collapse 设置表格的边线合并。
  • border-collapse:collapse

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： 梁俊可
• 本文链接： http://ljk3d.com/2021/10/19/webNote/htmlAndCss/03_HTML基础/
• 版权声明： 梁俊可工作室