当前位置: 首页 > news >正文

前端基础-2day

前端基础

这里写目录标题

  • 前端基础
    • div和span标签
      • div 标签
      • span标签
    • 列表
      • 有序列表
      • 无序列表
      • 自定义列表
    • 图片
    • 超链接标签
    • 表格 table
        • 表格合并
    • 表单标签
        • 表单控键属性

div和span标签

div 标签

没有具体的含义,用于划分页面区域,独占一行 快捷键:div={}*3

span标签

文本独立,需要修饰,独立修饰,由里面的内容决定宽度和高度,内容多宽,结果就多宽。

列表

有序列表


形式: 
<ol><li></li>
</ol>

有序列表的1,2,3…都是自动生成
《li》中间可以放任意标签,但是ol当中只能放li 标签

< ol>的属性

  1. type= “1”;“a”;“A”;“i”;“I” 表示选择的排序的方式
  2. start = “2”… 表示从那个开始哦排序

无序列表

 形式:  <ul> <li></li> </ul>

但是ul当中只能放li 标签
前面的符号默认为黑色的实心圆

《ul》的属性
type = “disc”(黑色实心圆) ;”cicle“(空心圆) ”square(正方形)“ ‘none(什么都没有,用的最多)’

自定义列表

自定义列表多用于图文混排的现象

 形式: <dl> <dt> 我是图片</dt>  <dd>  我是文字</dd> </dl>

图片

标签:img

形式: <img  src = ''>

图片标签的属性

  1. src = "‘图片的路径
  2. ’title =鼠标悬停在上面的提示信息
  3. alt =图片不显示后的提示信息
  4. width 宽度
  5. height 高度
    注意:高度和宽度会等比例运算

超链接标签

标签:a

形式: <a href = '路径' title = ""> </a>

超链接标签的属性

  1. href :路径
  2. title 鼠标悬停的提示
  3. target 规定在新窗口还是当前窗口打开页面 新窗口(blank),默认是当前窗口打开页面

表格 table

标签:table

形式: 
< table>< tr>< td>< td>< /tr>
</table>

tr 表示的是行 ,td 表示的是列。
表格的属性

  1. width 宽度
  2. height 高度
  3. border 边框
  4. bgrdercolor 边框颜色
  5. bgcolor 背景颜色
  6. align 水平对齐
  7. cellspacing 单元格与单元格之间的间距
  8. cellpadding 单元格和内容之间的空隙
tr 的属性 td的属性
height 行高 行高
bgcolor 背景颜色 背景颜色
align 文字对齐 文字对齐
valign 文字垂直对齐 文字垂直对齐

表格合并

  1. colspan 所需要合并的单元格的列数
  2. rowspan 所需要合并的单元格的行数

表单标签

形式:
<form menthod = '' action = ''>#框框
<input type = 'text'/>#按键
</form>

实例:

<form action="form_action.asp" method="get">First name: <input type="text" name="fname" />Last name: <input type="text" name="lname" /><input type="submit" value="Submit" />
</form>

表单控键属性

type

  1. text 文本框
  2. password 密码框
  3. submit 提交框
  4. button 按钮框
  5. reset 重置框
    placeholder 输入前提示
    name 必须设置,否则不会发送给服务器
    value 校验
http://www.lryc.cn/news/10537.html

相关文章:

  • 在线一键JS混淆还原
  • Java基本语法
  • 什么表单设计工具能快速提升办公效率?
  • SystemVerilog——Axi4Lite_To_Localbus
  • 硬件_IMX6ULL的LCD控制器
  • ICLR 2022—你不应该错过的 10 篇论文(下)
  • 国内外优秀程序员的私域博客大全
  • 【C++ Primer Plus】第六章:分支语句和逻辑运算符
  • 堡垒机的主要功能是什么?为什么需要堡垒机?
  • 记录spring中Transactional事务注解失效的六个场景
  • 【23种设计模式】行为型模式详细介绍(下)
  • dbeaver工具连接达梦数据库
  • 比Teambition、Worktile 更适合研发团队的几大工具盘点
  • matlab图像处理常用功能以及函数
  • eBPF 之 ProgramType、AttachType和InputContext
  • C++运行时类型识别RTTI
  • idea多时编辑多行-winmac都支持
  • BI是报表?BI是可视化?BI到底是什么?
  • Python基础-数据类型之元组
  • 大数据面试小抄
  • Vue:(三十一)Vue封装的过度与动画
  • 文本处理:字符串替换
  • python 调用 dll 出现精度问题
  • STL讲解——模拟实现string
  • CDH 6.3.2 升级Hive 2.3.9
  • 距离不是拦截我们前进的主因,与社科院杜兰金融硕士一起奔赴山海
  • 【SpringBoot】MyBatis-plus 报错 sqlSessionFactory sqlSessionTemplate 最新解决办法
  • jsp诊疗预约系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
  • 详解 APISIX Lua 动态调试插件 inspect
  • #科研筑基# python初学自用笔记 第五篇 函数