前端入门2

最新推荐文章于 2024-10-23 11:28:29 发布

早餐要吃奥利奥

最新推荐文章于 2024-10-23 11:28:29 发布

阅读量210

点赞数

分类专栏： html+css 文章标签： html css

本文链接：https://blog.youkuaiyun.com/choOREO/article/details/113683387

版权

html+css 专栏收录该内容

3 篇文章

订阅专栏

web前端入门（二）

html5+css3

5.1定位（position)

（重点）设定元素在文档中的位置。会将标签（元素）转换为块级。

定位分类（属性值）

1）static:静态定位
默认值，没有定位，不能设置偏移值(left/top/right/bottom)，占用标准流（文档流）
2）relative:相对定位
占用标准流（文档流），它会出现在文档流中它该出现的位置。可以通过设置偏移值改变其位置。它相对于自身所占的位置做偏移。
3）absolute:绝对定位
脱离文档流，相对于body做偏移。
绝对定位一般与相对定位结合使用，它相对的父级是relative定义的元素做偏移。relative的元素必须是absolute的父级。
在项目开发中，一般用relative+absolute结合使用。
4）fixed:固定定位
脱离文档流，相对于浏览器窗口左上角（0，0）做偏移，它与relative设定的对象没有关系，也就是说，它跟父级的定位没有任何关系。
一般在开发中用来固定导航栏。

z-index:

当多个元素添加绝对定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次。
文档流默认的z-index的值为0。可正可负。用在static和relative元素上将无效。

5.BFC&IFC

FC:Fomatting Context(格式上下文)。它是CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

分为：BFC和IFC。
1）BFC：块级格式上下文
a）形成BFC的条件
i) 浮动元素（float除none以外的值）
ii）定位元素（position(absolute/fixed))
iii）display（值为inline-block/table-cell/table-caption时）
iv）overflow（值为hidden/auto/scroll时）
b）BFC特性（规则）
i)内部的盒子会在垂直方向上一个接一个的放置
ii)垂直方向上的距离会叠加，值由最大margin值决定（如果不要叠加，就需要将该盒子变成一个独立的盒子）
iii)BFC的区域不会float元素区域重叠
iv)计算BFC的高度时，浮动元素也参与计算
v)BFC就是页面上的一个独立的容器，容器里面的子元素不会影响到外面的元素
c）BFC的作用
i)解决margin重叠的问题（添加独立BFC）
ii)解决浮动高度塌陷的问题（在父级添加overflow:hidden）
iii)解决侵占浮动元素的问题（添加overflow:hidden清除浮动）
2）IFC：内联（行级）格式上下文
a）形成IFC的条件
i)font-size
ii)line-height
iii)height
iv)vertical-align
b）IFC特性（规则）
i)IFC的元素会在一行中从左至右排列
ii)在一行上的所有元素会在该区域形成一个行框
iii)行宽的高度为包含框的高度，高度为行框中最高元素的高度
iv)浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度
v)行框的宽度容纳不下子元素时，子元素会换下一行显示，并且会产生新行框
vi)行框的元素内遵循text-align和vertical-align
6.容器的高度：
height = line-height + vertical-align

6.2 HTML5网页标准结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XHEyEs7U-1612493418463)(前端入门2/image-20210131162346437.png)]

header:页首
nav:导航栏
aside:侧边栏
main:主体,唯一的
section:区块
article:文章
footer:页尾

语义化标签

1)mark:高亮显示(行级)
2)details(描述)与summary(摘要):一般用于名词解释或用于封装一个区块等
3)meter:定义度量衡
属性:value/min/max
4)progress:进度条
属性:value/min/max
5)dialog:对话框或窗口
6)figure:用于对元素进行组合（一般用来组合一张图的标题、图片和图片描述等）

HTML5多媒体

1)audio
播放音乐或音频。IE9以下的版本不支持。

a)支持的格式
.mp3/.ogg/.wav
b)属性
src:文件路径
autoplay:自动播放
loop:循环
controls:控制条
muted:静音
preload:预加载（当使用autoplay时，preload自动失效）
2)video
加载视频。IE9以下的版本不支持。

a)支持的格式
.mp4/.ogg/.webm
b)属性
src:文件路径
autoplay:自动播放
loop:循环
controls:控制条
muted:静音
preload:预加载（当使用autoplay时，preload自动失效）
width:宽度
height:高度
poster:海报
3)embed
嵌入内容或加载插件。

属性:
src:文件路径
width:宽度
height:高度
type:类型
4)canvas
画布。是一个容器元素。
注意：
a.单独使用canvas没有什么意义，它必须结合Javascript使用。它的具体功能体现是通过
Javascript体现现来的。
b.canvas的宽高最好不要通过css实现，而是直接使用标签属性width和height实现。

HTML5常用属性

1）contentEditable
将标签转换为可编辑状态。可用于所有标签。它的值有true/false。
2）hidden
对元素进行隐藏。一般用来传值或当某个条件成立，执行内容显示。默认值为hidden。
3）data-*
用于存储页面或应用程序的私有自定义数据。一般用于传值。
4）multiple
规定输入域中可选择多个内容。用于表单组件中，如file/select。
5）required
约束表单元互在提交前必须输入值。用于表单组件中，需要结合提交按钮使用。
6）pattern
用于验证输入字段的模式。用于表单组件中，需要结合提交按钮使用。

表单组件

1）color：颜色
2）email：邮箱
3）tel：电话号码
4）url：网址
5）number：数字
6）range：范围
7）search：搜索
8）date：日期
9）datetime：日期时间
10）datetime-local：本地日期时间
11）year：年份
12）month：月份
13）time：时间

表单属性

1）formaction:修改action数据提交的地方
2）formenctype:修改表单请求的类型
3）formmethod:修改数据提交的方法
4）form:设置表单元素属于哪个表单
5）novalidate:不验证

input属性

1）autocomplete:自动完成
用来帮助用户输入，每一次输入的内容，浏览器是否保存输入的值，以备将来使用。值有：
on/off，默认为on。
为了保护敏感数据（如用户帐号、密码等），避免本地浏览器对它们不安全存储，一般需要关闭。
2）autofocus:自动获焦
3）step:步长
4）multiple:多选
5）pattern:正则匹配
6）placeholder:输入提示
7）required:必须输入

6.6 HTML5 代码规范

请始终在文档的首行声明文档类型：如果您一贯坚持小写标签，那么可以使用：
```
<!doctype html>
```
使用小写元素名,属性名
注意关闭所有HTML元素，如　
等号前后可以使用空格，但我们推荐：少用空格：
请尽量避免代码行超过 80 个字符。

实例技巧：

nav>ul.navlist>li*5>a[href=#]
自动补全成
<nav>
    <ul class="navlist">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>

4.CSS3选择器[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mhI2GHpy-1612493418465)(前端入门2/1.jpg)]

CSS3文本

语法： text-overflow: clip|ellipsis|string;

属性值：
clip ：修剪文本。
ellipsis : 显示省略符号来代表被修剪的文本。
string ：使用给定的字符串来代表被修剪的文本。

单行文本溢出
div {
white-space: nowrap;/* 为允许折行 */
text-overflow: ellipsis;
overflow: hidden;
}

多行文本溢出
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;/* 行数 */
overflow: hidden;
}

CSS3边框

1）圆角边框（掌握）
border-radius: 1-4 length|% / 1-4 length|%;

四个方位的词：top-left/top-right/bottom-left/bottom-right
2）边框阴影（IE9以上支持）
box-shadow: 水平偏移距离垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] [inset];

inset : 可选。将外部阴影 (outset) 改为内部阴影。

3）边框图片(IE11.0及以后版本支持）
border-image：图片向内偏移距离宽度图像区域超出边框的距离重复效果;

重复效果：round/strech/repeat

CSS3背景

CSS3颜色函数

1）RGBA
rgba(r,g,b,a)
r:红色取值范围：0-255/0-100%
g:绿色取值范围：0-255/0-100%
b:蓝色取值范围：0-255/0-100%
a:不透明度取值范围：0-1的一个小数
2）HSL
hsl(h,s,l)
h:色调取值范围：0-360
s:饱和度取值范围：0-100%
l:亮度取值范围：0-100%
3）HSLA
hsla(h,s,l,a)
h:色调取值范围：0-360
s:饱和度取值范围：0-100%
l:亮度取值范围：0-100%
a:不透明度取值范围：0-1的一个小数

opacity

调整元素的不透明度，大多数情况下用于做元素的遮罩效果。取值范围：0-1的一个小数
IE8及8以下版本不支持opacity，处理兼容的方式，再添加一行代码来处理不透明度：
filter:alpha(opacity=数值）数值的范围：0-100

CSS3渐变

渐变主要用来设置背景或制作三维图。
1）线性渐变
background: linear-gradient(方向或角度, 颜色1 百分比, 颜色2 百分比, …);

方向：
to left:从右向左渐变
to top:从下向上渐变
to top left:从右下角向左上角渐变
角度：
比如45度角，应该表示为：45deg
颜色取值：
1）表示颜色的单词
2）16进制颜色
3）表示颜色的函数（rgb()/rgba()/hsl()/hsla()…)

2）径向渐变(沿半径方向渐变）
background: radial-gradient(形状渐变大小 at 位置,颜色1 百分比, …, 颜色n 百分比);

形状：
ellipse:椭圆径向渐变（默认）
circle:圆径向渐变
渐变大小：
farthest-corner:渐变的半径长度为从圆心到离圆心最远的角（默认）
closest-side:渐变的半径长度为从圆心到离圆心最近的边
closest-corner:渐变的半径长度为从圆心到离圆心最近的角
farthest-side:渐变的半径长度为从圆心到离圆心最远的边
位置：
center:设置圆心在中心位置（默认）
top:设置圆心在顶部位置
bottom:设置圆心在底部位置
at 圆心橫坐标圆心纵坐标: 设定圆心的位置在指定的（橫坐标，纵坐标）处

3）文字渐变
background-image: 线性渐变或径向渐变;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;