前端入门第二天

目录

一、列表、表格、表单

二、列表(布局内容排列整齐的区域)

 1.无序列表(不规定顺序)

2.有序列表(规定顺序)

3.定义列表(一个标题多个分类)

三、表格

1.表格结构标签

2.合并单元

四、表单

1.input 标签基本使用(type)

2.input 标签占位文本(placeholder)

3.radio 单选框(name checked)

4.file 多文件上传(multiple)

5.下拉菜单(select option)

6.文本域(textarea)

7.label标签

方法一:

方法二:

8.按钮(butoon)

9.无语义的布局标签

10.字符实体

五、综合案例


一、列表、表格、表单

示例:(嵌套关系)

二、列表(布局内容排列整齐的区域)

分类:无序列表、有序类别、定义列表(一个标题多个分类)

 1.无序列表(不规定顺序)

  • ul中只能包含li
  • li中可以包含任何内容

2.有序列表(规定顺序)

  • ol中只能包含li
  • li中可以包含任何内容

3.定义列表(一个标题多个分类)

 

  • dl中只能包含dt和dd
  • dt和dd中可以包含任何内容

三、表格

  • th:默认加粗、居中
  • 表格默认没有边框线,border="1"添加边框一像素宽

1.表格结构标签

把内容划分区域

2.合并单元

将多个单元格合并成一个单元格,以合并同类信息

合并单元格的步骤:

  •  不能跨结构标签合并

四、表单

收集用户信息(注册登录搜索)

1.input 标签基本使用(type)

  • text外其他快捷输入,重新打""

2.input 标签占位文本(placeholder)

3.radio 单选框(name checked)

4.file 多文件上传(multiple)

5.下拉菜单(select option)

  • name="" id="" 发送数据
  • value=""发送数据

  • 默认显示第一个,通过selected设置默认显示

6.文本域(textarea)

多行输入文本的表单空间

  • 用CSS设置尺寸
  • 右下角的拖拽功能将禁用

7.label标签

方法一:

方法二:

8.按钮(butoon)

  • 配合 form 标签使用action数据发送地址

9.无语义的布局标签

10.字符实体

  • 在网页中只识别一个空格

五、综合案例

  • 体育新闻(列表)
  • 注册信息(表单)

相关推荐

  1. 自学前端第一

    2024-02-01 11:16:03       32 阅读
  2. 学习前端第二十七(字符串、数组)

    2024-02-01 11:16:03       30 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-01 11:16:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-01 11:16:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-02-01 11:16:03       87 阅读
  4. Python语言-面向对象

    2024-02-01 11:16:03       96 阅读

热门阅读

  1. 【深度学习】SDXL TensorRT Dockerfile Docker容器

    2024-02-01 11:16:03       57 阅读
  2. Vue-Router: 如何使用异步组件来实现路由懒加载

    2024-02-01 11:16:03       55 阅读
  3. C++调用yolo模型有哪些方法

    2024-02-01 11:16:03       53 阅读
  4. Codeforces Round 922 (Div. 2)(A~D)补题

    2024-02-01 11:16:03       57 阅读
  5. Docker部署Tomcat

    2024-02-01 11:16:03       57 阅读
  6. Socket.D v2.3.9 发布(增加 node.js server 适配)

    2024-02-01 11:16:03       57 阅读