head标签
作用是:设置网站的源信息
charset属性:用来定义文本的编码格式
UTF-8:万国码,目前开发中最常用
gb2312:中文码
author属性:用来定义网站的作者,一般是公司的名字
keywords属性:用来定义网站的关键字,如果有多个关键字,用英文逗号隔开,关键字最好不要超过10个
description属性:用来简单的描述网站的内容
块属性标签
1.div标签:没有意义,通常用来进行页面的布局
2.h标签(h1-h6)
在一个页面中,h1最多只能出现一次,h2最多只能出现20次,h3-h6次数不限。
h1的用法:
1.logo处
2.资讯详情页的大标题
3.p标签段落标签,里面一般包含一端文字
4.分割线 hr br换行符
5.ul>li 无序列表
可以设置它的list-style-type属性
square:实心方块
circle:空心圆
dotted:实心圆
none:取消列表样式
disc:高版本系统下的默认样式
6.ol>li 有序列表
可以设置它的list-style-type属性
lower-alpha:小写字母
upper-alpha:大写字母
lower-roman:小写的罗马文
upper-roman:大写的罗马文
ol,ul,li都是快属性标签,li是列表项并且ol,ul,li的子元素必须是li标签
7.dl>dt dl>dd 定义列表
dl:块标签,定义列表的父元素
dt:块标签,定义列表的 标题项
dd:块标签,定义列表的 列表行
8.address 地址标签一般的,他的内容是一个地址
9.blockquote 引用标签 一般引用的是一段文字,它的cite属性表示该文字引用的文献名目
行标签
1.span 标记标签 没有实际意义,通常用来渲染文字
2.a标签
作用:
- 设置一个超链接
- 设置锚点
最常见的效果是 回到顶部
如果在开发中需要设置a标签点击没有效果,则可以设置href
属性为## 即是: href=“##”
如果需要设置回到顶部 则 href=“#”
不要设置href为空,这样会导致页面刷新 - 下载文件
a.如果设置的下载文件是音频、视频、图片、文档等,z都需要经过压缩之后,在再href上设置文件的路径
b.如果是文本类型的文件,可以直接把文件路径设置在href属性上,直接由浏览器打开
href 属性:用来设置超链接的地址
target 属性:设置标签页的打开方式
_blank :在新标签页打开
_self :默认值,在当前页面打开
3. strong 强调标签
em 强调并且斜体
b 文本加粗(不常用,h5中即将废弃)
i 文本斜体
var 文本斜体
4. q 标签,引用标签,他引用的内容都比较简短的
pre 标签,格式化输出,
code 标签,一般是嵌套代码使用
<在html中渲染为<
>在html中渲染为>
在html中渲染为 空格img
5.img标签,是一个单标签
src属性:用来设置图片的资源路径(资源路径:网络路径,绝对路径,相对路径)
a.网络路径
图片的网络地址
b.绝对路径
从服务根目录开始直到找到需要的文件的整个路径,一般不使用
c.相对路径
相对于当前文件所在的资源路径
./ 代表的是当前目录
…/ 代表的是上一级目录
相对路径开发当中最常用
alt属性,用来解释图片的内容
作用:
1.当图片没有被加载出来的时候,会显示alt的内容
2.通过alt属性,告诉浏览器当前图片的内容
width/height 设置图片的宽和高,在实际的开发当中,一般只设置单个的宽或者高,另一侧会根据比例进行显示大小。
1.块属性标签
a.独占一行,支持宽和高的设置,设置完宽和高以后,仍然独占一行
b.支持上下padding和上下margin
2.行属性标签
a.不会独占一行,从左到右横向排列
b.无法设置宽高,它的宽高由内容撑开
c.不支持上下padding和上下margin
emmet语法
E代表标签名
E*n 创建n个E标签
E{内容}*n 创建n个内容E标签
E{内容KaTeX parse error: Expected 'EOF', got '}' at position 1: }̲*n 创建n个内容为“内容”+…表示序号,从1开始
>表示的下一个层级元素(子元素)
E>a 在E标签中添加子元素a标签
+ 表示同级
E+p 同时创建兄弟元素E和p
^ 表示上一级
E>^div 创建div标签和E标签同级,也就是创建p标签的上一级
使用[]设置属性
嵌套规则
标签嵌套规则
1.块标签可以作为一个布局标签,嵌套所有的标签
2.行标签不能嵌套块标签
以下标签不能嵌套:
1.p标签,h1-h6都不能相互嵌套,并且他们也不能嵌套块标签
2.a标签不能相互嵌套
CSS样式表
/* 设置类名
.类名{
样式内容
}
text-align:文本排布,一般放在块标签上,用来控制块标签中行标签和文本的对齐位置
值:
left:左对齐(默认)
center:居中对齐
right:右对齐
css 层叠式样式表,它是用来给html结构添加样式的
引入方式:
1.行间样式
在标签上设置style属性,在style中设置样式
2.内部样式表
CSS的引入方式
<link rel=“stylesheet” href=“./css/style.css”
/* 使用@import导入css */
@import url(‘./css/goods.css’)
css 层叠式样式表
css 引入方式
1.行间引入
2.内部方式表
3.外部样式表(开发的时候常用)
link和@import引入css的区别
1.@import是css2.1之后才推出的,因此可能存在兼容问题,link不存在兼容问题
2.link不仅可以引入css,也可以引入其他类型的文件,功能更加强大,推荐使用link
CSS文本操作
border 属性
border-width 设置border的宽度
border-color 设置border的颜色
border-style 设置border的样式
他们三个也可以和写:
border:width style color;
可以给单独某一个边设置border
border-top 设置上边
border-left 设置左边
border-bottom 设置下边
border-right 设置右边
常用的border-style 的值
1.solid 实线
2.dotted 圆点虚线
3.dasshed 短线虚线
4.none 隐藏border
5.dobble 双实线(一下不常用)
6.groove 3d凹槽(3d边框)
7.gridge 3d凸槽(3d边框)
8.inset 内嵌(3d边框)
9.outset 外嵌(3d边框)
color属性:设置文本颜色
值:
1.英文单词
2.十六进制颜色 0-F ,#后面跟6位表示颜色的数字,前两位表示红色,中间两位表示绿色,后面两位表示蓝色 #aabbcc
如果两两相等,则可以简写为#abc
3.rgb(),rgba()设置颜色
()中设置对应位置的数字是0-255,0表示黑色,255表示白色
rgb(255,0,0)红色
rgba中的a表示透明度,取值范围是0-1,0表示完全透明,1表示完全不透明
文本的修饰 text-decoration
值:
1.underline 下划线
2.overline 上划线
3.line-through 删除线(中划线)
4.none 去掉线(没有文本修饰线)
文本的转化 text-transform
值:
1.lowercase 全部小写
2.uppercase 全部大写
3.capitalize 单词的首字母大写
标记文本