[HTML、CSS]知识点

简介: [HTML、CSS]知识点

1、其他知识点链接

  1. 细节、经验
  2. 特效实现

2、标签

2.1 video

参考笔记一,P4.2/4。

  1. <video>标签引入视频默认不会自动播放,需设置属性autoplay: muted
  2. <video>不同于<img>,比例不能随意改变,需设置属性object-fit: cover进行拉伸。

2.2 input

参考笔记一,P8.11、P9.14。

属性:

  1. autofocus:自动聚集;
  2. pattern:设置正则表达式;
  3. novaliable:取消提交表单时对整个表单的验证;
  4. autocomplete = "on/off"设置表单是否打开自动完成功能;
    注:“自动完成功能”指将表单过去输入过的信息、在选中时自动填充。

2.3 画布 Canvas

推荐一篇博文《学习HTML5 Canvas这一篇文章就够了》(转发)。

参考笔记一,P4.9/10/12。

注:下文中的“canvas1”是Canvas标签,代码是在js中执行。

2.3.1 属性设置

  1. 修改参考点:即修改坐标原点。canvas1.translate(x, y)
  2. 旋转坐标轴:canvas1。rotate(<弧度>)

修改刻度的 w i d t h 、 h e i g h t : \color{green}{修改刻度的width、height:}修改刻度的widthheight

注:刻度的width、height与Canvas标签的width、height(用css修改)不是一个概念。

方法1、内嵌式修改width、height属性。

<Canvas id="canvas1" width="500" height="500" ></Canvas>

方法2、js修改width、height属性。

canvas1.width = 500;
canvas1.height = 500;

2.3.2 示例:画动态时钟

思想:

  1. 通过旋转坐标轴的方法画出刻度和时分秒针;
  2. 定义定时器 \color{blue}{定时器}定时器(interval),时隔1s,先画出刻度,再根据时分秒针转动联系画出时分秒针。注意:先擦除(覆盖),再画。

转动联系:

  1. 秒针转动一圈,分针转动π/30
  2. 分针转动一圈,时针转动π/6

2.4 选项列表 datalist

笔记一,P9.12/13。

需要与<input>连用,用于存放<input>的可选值。

示例:

country:<input type="text"list="list1">
<datalist id="list1">
  <option value="China" />
  <option value="American" />
</datalist>

2.5 折叠列表 details

<summary>是列表的标题。

示例:

<details>
  <summary>country</summary>
  <p>China</p>
  <p>American</p>
</details>

3、关于 margin

参考笔记一,P8.1/7。

  1. 相邻同级盒子的margin会相互覆盖;
  2. 若父级设置了border,则不会受子级的margin影响,即使子级的margin大于父级的margin;
  3. 若父级未设置border,则子级和父级的margin会相互覆盖。其中,若子级的margin大于父级的margin,父级会被“挤开”,这种现象称为外边距塌陷 外边距塌陷外边距塌陷;(解决方法:第2点)
  4. 若父级设置了定位方式,则不会受子级的margin影响。

4、关于overflow: hidden的用法

参考笔记一,P8.2。

  1. 隐藏多余部分;
  2. 动态 h e i g h t \color{purple}{动态height}动态height
    当子级个数未知时,无法确定父级的height(注意:此时子级肯定设置了浮动float),设置父级overflow: hidden可实现动态height。当然,实现动态height还有一种方法:position: aboslute/fixed,但若使用此方法,则无法使用margin: 0 auto进行盒子水平居中,而overflow: hidden可以;
  3. 解决外边距塌陷问题。

5、关于动态 height

参考笔记一,P8.9。、

实现动态height的前2种方法(看上面)。

方法3:伪选择器 \color{red}{伪选择器}伪选择器

伪选择器after的作用:创建一个子级,此子级的“逻辑位置”在所有子级的最后。

操作:

为父级用:after创建一个盒子,再清除此盒子的相应浮动(clear: xx)。

原理:

由于after是为父级创建盒子,故此盒子的“逻辑位置”在所有子级的最后。因为此盒子清除了浮动,则不再受其他子级影响,故此盒子的“实际位置”在最后一个子级后面。因此,父级只能扩展height来保证能“容纳”此盒子,即动态height。

为什么清除浮动? \color{grey}{为什么清除浮动?}为什么清除浮动?

因为其他子级都设置了浮动,而此盒子未设置浮动,故此盒子会因其他盒子浮动而向上移动。因此,需要清除浮动来消除影响使其停留在原位置。

说明示例: 说明示例:说明示例:

1、演示。

ul:after {
  content: "6";// 设置文本内容是"6"
  clear: left;// 清除左浮动
  display: block;// 设置为块级元素,即默认占一行
  width: 20px;
  height: 20px;
  background-color: gray;
}

从演示效果可以看出,前5个子级都设置了左浮动,故此盒子需要清除左浮动。注意:此盒子必须设置为块级元素display: block(缘由我暂未知,需要大家自行查阅和研究了)。

2、实现动态height。

ul:after {
  content: "";
  clear: left;
  display: block;
}

最后

这些笔记是当年学习前端原生技术时做的,是基于容易忘记、需要注意或新知识点考虑所记录的。做笔记肯定不是原版原抄,而是经个人理解后的精简,故如一些基础知识便不在此列,如:$("#xx").css({}),这是jq设置盒子样式的一个基础函数。

我的发展方向是后端,平日(包括工作)涉及前端都是框架,很少再使用这些前端原生技术。此文章于今年撰写,过去再熟悉平日少接触都会生疏,所以可能有些阐述会略有问题(多担待。。。)。

知识点所涉及的内容,我会斟酌适当地做一些注释,如果大家不理解,只能请大家另寻高见。

本文持续更新中。。。

相关文章
|
14天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0
|
5天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
9天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
9天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
13天前
|
Web App开发 编解码 前端开发
|
16天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
17天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
13 0
|
22天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码
|
1月前
|
数据安全/隐私保护
HTML中常用知识点整理
HTML中常用知识点整理
16 0