HTML+CSS
- HTML-结构(超文本标记语言)
-
- 常用标签
-
- 链接标签target属性
- 图片标签
- 有语义的布局标签——手机端
- 绝对路径
- 相对路径(常用)
- CSS-表现(层叠样式表)
-
- 三种引入方式
- 选择器
- 文本缩进
- 水平居中
- 文本修饰
- 行高
- 颜色取值
HTML-结构(超文本标记语言)
标签 | 说明 |
---|---|
b | 加粗 |
u | 下划线 |
i | 倾斜 |
s | 删除线 |
强调语义
标签 | 说明 |
---|---|
strong | 加粗 |
ins | 下划线 |
em | 倾斜 |
del | 删除线 |
常用标签
链接标签target属性
属性名:target
属性值:目标网页打开形式
取值 | 效果 |
---|---|
_self | 默认值,在当前窗口中跳转(覆盖原网页) |
_blank | 在新窗口中跳转(保留原网页) |
图片标签
<!--
src:图片路径
alt:替换文本,当图片不显示时,显示文字;当图片显示时,不显示文字
title:当鼠标悬停时,显示文本-->
<img src="" alt="" title="">
有语义的布局标签——手机端
标签名 | 语义 |
---|---|
header | 网页头部 |
nav | 网页导航 |
footer | 网页底部 |
aside | 网页侧边栏 |
section | 网页区块 |
article | 网页文章 |
绝对路径
绝对路径:指目录下的绝对位置,可直接到达目标位置,通常 从盘符开始 的路径
相对路径(常用)
相对路径:从 当前文件开始 出发找目标文件的过程
相对路径分类:
- 同级目录:当前文件和目标文件在同一目录中【例如:
<img src="cat.jpg"> 或<img src="./cat.jpg">
】 - 下级目录:目标文件在下级目录中【例如:
<img src="images/cat.jpg">
】 - 上级目录:目标文件在上级目录中【例如:
<img src="../cat.jpg">
】
CSS-表现(层叠样式表)
三种引入方式
引入方式 | 书写位置 | 作用范围 | 使用场景 |
---|---|---|---|
内嵌式 | css写在style标签中 | 当前页面 | 小案例 |
外联式 | css写在单独的css文件中,通过link标签引入 | 多个页面 | 项目中 |
行内式 | css写在标签的style属性中 | 当前标签 | 配合js使用 |
选择器
- 标签选择器
- 类选择器——.class;名字可以重复
- id选择器——#id;名字唯一;配合js使用
- 通配符选择器——*,一般与margin、padding一起使用
文本缩进
属性名:text-indent
取值:
- 数字+px
- 数字+em(1em=当前标签的font-size的大小;动态调整字体,随font-size的大小变化,而变化)
水平居中
水平居中的元素有 :文本、span标签、a标签、input标签、img标签
注: 如果需要让以上元素水平居中,text-align:center
需要给以上元素的 父元素 设置
属性名 | 取值 | 效果 |
---|---|---|
text-align | center | 居中对齐 |
让div、p、h(大盒子)水平居中: margin:0 auto;
(上下边界为0,左右自适应相同值)
文本修饰
属性名 | 取值 | 效果 |
---|---|---|
text-decoration | underline / none | 下划线 / 清除下划线 |
行高
line-height:1
取消上下间距
行高和 font 连写 注意 点:
font : style weight size/line-height family;
font: 倾斜 加粗 字号/行高 字体;
颜色取值
属性名:
文字颜色:color
背景颜色:background-color
属性值:
颜色表示方式 | 表示含义 | 属性值 |
---|---|---|
关键词 | 预定义的颜色名 | red、green |
rgb表示法 | 红绿蓝三原色。每项取值范围:0~255 | rgb(0,0,0)、rgb(255,255,255) |
rgba表示法 | 红绿蓝三原色+a表示透明度,取值范围0~1 | rgba(255,255,255,0.5)、rgba(255,255,0,0.8) |
十六进制表示法 | #开头,将数字转换成十六进制表示 | #000000、#ff0000 |