[HTML、CSS]知识点

简介: 本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。

【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)
https://developer.aliyun.com/article/1635461
出自【进步*于辰的博客

注:本文中“子级”指子级盒子或子级标签;“逻辑位置”指根据理论推断的所在位置,“实际位置”指实际显示的所在位置。

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(<弧度>)

修改刻度的width、height:

注:刻度的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. 定义定时器(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。

  5. 隐藏多余部分;

  6. 动态height
    当子级个数未知时,无法确定父级的height(注意:此时子级肯定设置了浮动float),设置父级overflow: hidden可实现动态height。当然,实现动态height还有一种方法:position: aboslute/fixed,但若使用此方法,则无法使用margin: 0 auto进行盒子水平居中,而overflow: hidden可以;
  7. 解决外边距塌陷问题。

    5、动态 height

    参考笔记一,P8.9。、

实现动态height的前两种方法上文已阐述。

方法3:伪选择器。

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

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

原理:由于after是为父级创建盒子,故此盒子的“逻辑位置”在所有子级的最后。因为此盒子清除了浮动,则不再受其他子级影响,故此盒子的“实际位置”在最后一个子级后面。因此,父级只能扩展height来保证能“容纳”此盒子,即动态height。为什么清除浮动?因为其他子级都设置了浮动,而此盒子未设置浮动,故此盒子会因其他盒子浮动而向上移动。因此,需要清除浮动来消除影响使其停留在原位置。

说明示例:
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设置盒子样式的一个基础函数。

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

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

本文中的例子是为了方便大家理解和阐述知识点而简单举出的,旨在阐明知识点,并不一定有实用性,仅是抛砖引玉。

本文持续更新中。。。

相关文章
|
2月前
|
机器学习/深度学习 前端开发 JavaScript
|
11天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
23 6
|
28天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
42 1
[HTML、CSS]细节与使用经验
|
2月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
25天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
48 12
|
21天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
87 1
|
26天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
40 3
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
98 6
|
2月前
|
前端开发
CSS网页布局综合练习(涵盖大多CSS知识点)
CSS网页布局综合练习(涵盖大多CSS知识点)