01、行属性标签
1. span 标记标签
没有实际意义,通常用来渲染文字
2. a 标签
href 属性:用来设置超链接的地址
target 属性:设置标签页的打开方式
_blank:在新标签页打开
_self:默认值,在当前页打开
作用:
1.设置一个超链接
2.设置锚点
最常用的效果是 回到顶部
如果在开发中需要设置a标签点击没有效果,则可以设置为href属性为 ## 既是:href="##"
如果需要设置回到顶部 则 href="#"
不要设置 href为空,这样会导致页面刷新
3.下载文件
a. 如果设置的下载文件是 音频、视频、图片、文档等,都需要经过压缩之后,再在href上设置文件的路径
b.如果是文本类型的文件,可以直接把文件路径设置在href属性上,直接由浏览器打开
iframe 框架
src="需要显示的页面地址"
height="设置高度"
width="设置宽度"
3.strong 强调标签
em 强调并且斜体
b 文本加粗(不常用,H5中即将废弃)
i 文本斜体
var 文本斜体(不常用,H5中即将废弃)
4.q 标签,引用标签,他引用的内容比较简短
pre 标签,格式化输出
code 标签,一般是嵌套代码使用
%lt; 在Html中渲染为 <
> 在Html中渲染为 >
%nbsp; 在Html中渲染为 空格
02、图片
1.img 标签,是一个单标签
src 属性:用来设置图片资源的路径
文件资源路径 分为三种
a.网络路径
图片的网络地址
b.绝对路径
从服务器的根目录开始直到找到需要的文件的整个目录,一般不使用
c.相对路径
相对于当前文件所在的资源路径
./ 代表的是当前目录
../ 代表的是上一级目录
相对路径是开发中最常用的
alt 属性:用来解释图片的内容
作用:
1.当图片没有被加载出来的时候,会显示 alt 的内容
2.通过 alt 属性,告诉浏览器当前图片的内容
width/height 设置图片的宽和高,在实际的开发当中,一般只设置单个的宽或者高,另一侧根据比例自适应
03、总结
1.块属性标签
a.独自占据一行空间,支持宽和高的设置,设置完宽高以后,仍独占一行
b.支持上下 padding 和 上下 margin
2.行属性标签
a.不会独自占用一行空间,从左至右横向排列
b.无法设置宽高,他的宽和高由内容撑开
c.不支持支持上下 padding 和 上下 margin
04、emment语法
E 代表标签名
E(标签名)*n 创建n个 E 标签
E{内容}*n 创建n个内容为 '自挂东南枝' 的 E 标签
E{内容$}*n 创建n个内容为 '自挂东南枝'+序号 的 E 标签, $表示序号,从1开始
> 表示的是下一层级元素(子元素)
E>a 在 E 标签中添加子元素 a 标签
+ 表示同级
E+p 同时创建兄弟元素 E 和 p(二者不相互嵌套)
^ 表示上一级
E^div
使用[] 设置属性
04、嵌套
标签嵌套规则
1.块标签可以嵌套所有的标签
2.行标签不能嵌套块标签
以下标签不能相互嵌套
1.p 标签, h1-h6 都不能相互嵌套,并且他们也不能嵌套块标签
2.a 标签不能相互嵌套
06、css样式表
设置类名
.类名 {
样式内容
}
text-align: 文本排布,一般放在块标签上,用来控制块标签中 行标签 和 文本的对齐位置:
left:左对齐(默认)
center: 居中对齐
right: 右对齐
css 层叠式样式表,他是用来给Html结构添加样式的
样式表的引入方式:
1.行间样式
在标签上,设置style属性,在style中设置样式
2.内部样式表
在head中设置 style 标签,在标签中设置样式