前端html+css笔记

前端

Html:

html标签

  1. < strong >加粗 --文本格式化标签

  2. < em >倾斜

  3. < ins >下划线

  4. < del >删除

  5. < img src="图片的url" >src用于指定图像的位置名称(属性名+属性值=属性)

  • alt 替换文本
  • title 提示文本
  • width 图片宽度
  1. < a href="">链接(段落内空格+
  • target="_blank"跳转新窗口
  1. < audio >音频
  • loop 循环播放
  • autoplay 自动播放 (禁用
  • controls 显示音频面板
  1. < video sec=>视频
  • muted 静音播放
  • 同(7)

9 . 列表

无序列表:< ul > < li >

有序列表:< ol > < li >

定义列表:< dl > < dt(标题)> < dd(描述)>(一个标题对应多个内容

10. 表格

  • < table > < tr(行)> < td(内容)> < th(表头)>
  • < thead > < tbody > < tfoot > (表格结构标签-代码优化)
  • rowspan' colspan' (合并单元格) rowspan ="2"

11. 表单(登录,注册,搜索

  • < input type="">
  • placeholder' (占位文本)
  • radio -name -checked'
  • file -multiple'
  • checkbox -checked'
type属性值 说明
text 文本框,输入单行文本
password 密码框
radio 单选框
checkbox 多选框
file 上传文件

12. 下拉菜单

  • < select > < option > -selected'

13. 文本域

  • < textarea >
  1. < label >
  • 增大点击范围input...id label...for (*直接label包裹)

15. 按钮

type属性值 说明
submit 提交数据到后台(默认
reset 重置
button 普通
  1. < form >表单区域 -action=""

无语义布局标签

  1. < div >独占一行

  2. < span >不换行

CTRL+/==注释

单标签

  1. < hr >水平线
  2. < br >换行

字符实体

  • 空格 - &nbsp;
  • < - &lt;
  • > - &gt;

CSS

引入

外部引入< link rel="stylesheet" href="" >
类选择器

一个标签可用多个类名
文字控制属性

(google默认大小16px

属性 效果
font-family 字体(最后 衬线)
text-indent 文本缩进(em)
text-align 水平对其方式-设置在父级
text-decoration 修饰线
font-weight 加粗'数字
font-style italic倾斜
color RGBA
  • text-decoration line-through'删除线 over...' under...'

选择器

  • 通配<标签<类<id<行内<important

  • div span
  • div > span
  • span,div,p
  • p.box
  • hover:悬停
  • 超链接::hover :link :visited :hover :active

Emment

.box------

bgc------

w500------

背景属性

  • background-image url'
  • background-repeat no-...' ...-x' ...-y'
  • background-position x,y'
  • background-size contain/cover
  • background-attachment

显示模式

  • 块级 block;
  • 行内块 inline-block;
  • 行内 inline;

结构伪类选择器

E:nth-child(N) N------ 2n ;2n+1...
伪元素选择器

E::before / E::after (content'

盒子模型

  • border
  • padding top,right,bottom,left/top,left-right,bottom/top-bottom,left-right
  • 尺寸 box-sizing:border-box
  • margin (0,auto(要有盒子宽度))
  • 元素溢出overflow hidden' scroll' auto' 塌陷问题
  • 塌陷:父级设置 overflow:hidden/border-top;取消子级margin设置父级padding

浮动

块元素水平 添加后脱离标准流

  • 清除浮动 单/双微元素法
相关推荐
郭老二4 小时前
【前端】vue3:编译步骤
前端
不在逃避q5 小时前
Trae/Vs Code/Cursor命令行无法跑npm命令
前端·arcgis·npm
夏殇之殁5 小时前
包中创建自定义列表项。 . 使用自定义列表项进行数据绑定 . 将天气预报数据保存到本地内存表,通过LiveBindings进行显示。 ...
服务器·前端·javascript
The Chosen One9855 小时前
高进度算法模板速记(待完善)
java·前端·算法
陈随易5 小时前
MoonBit抓包模块pcap,查看电脑的每一次联网通信
前端·后端·程序员
新中地GIS开发老师6 小时前
WebGIS开发学生作品|低空航天管理与航线规划系统
前端·javascript·webgis·三维gis开发
用户059540174466 小时前
大模型对话记忆持久化踩坑实录:用 Playwright 自动化测了 300 次,终于揪出会话丢失的真凶
前端·css
丙氨酸長鏈6 小时前
Web前端入门第 问:JavaScript 一个简单的 IndexedDB 数据库入门示例
前端·javascript·数据库
kyriewen7 小时前
面试官让我手写虚拟列表——AI生成的版本,快速滚动几下就白屏了
前端·javascript·面试
IT_陈寒8 小时前
Vite热更新失效?你可能漏了这个配置
前端·人工智能·后端