HTML+CSS-标签、链接标签target属性、图片标签、有语义的布局标签——手机端、绝对路径、相对路径(常用)、三种引入方式、选择器、文本缩进、水平居中、文本修饰、行高、颜色取值

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使用

选择器

  1. 标签选择器
  2. 类选择器——.class;名字可以重复
  3. id选择器——#id;名字唯一;配合js使用
  4. 通配符选择器——*,一般与margin、padding一起使用

文本缩进

属性名:text-indent

取值:

  • 数字+px
  • 数字+em(1em=当前标签的font-size的大小;动态调整字体,随font-size的大小变化,而变化)

水平居中

水平居中的元素有 :文本、span标签、a标签、input标签、img标签

注: 如果需要让以上元素水平居中,text-align:center 需要给以上元素的 父元素 设置

属性名取值效果
text-aligncenter居中对齐

让div、p、h(大盒子)水平居中: margin:0 auto; (上下边界为0,左右自适应相同值)

文本修饰

属性名取值效果
text-decorationunderline / none下划线 / 清除下划线

行高

line-height:1 取消上下间距

行高和 font 连写 注意 点:

font : style weight size/line-height family;
font:  倾斜   加粗   字号/行高          字体;

颜色取值

属性名:
文字颜色:color
背景颜色:background-color

属性值:

颜色表示方式表示含义属性值
关键词预定义的颜色名red、green
rgb表示法红绿蓝三原色。每项取值范围:0~255rgb(0,0,0)、rgb(255,255,255)
rgba表示法红绿蓝三原色+a表示透明度,取值范围0~1rgba(255,255,255,0.5)、rgba(255,255,0,0.8)
十六进制表示法#开头,将数字转换成十六进制表示#000000、#ff0000
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值