html与css标签及属性

项七

于 2023-07-09 20:59:14 发布

阅读量406

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/jxl20010909/article/details/131627360

版权

head标签

head里面主要是源信息标签
作用是，设置网站的源信息
charset 属性，用来定义文本的编码格式
1. UTF-8 万国码，目前开发中最常用
2. GB2312：中文码
3. 通常都把 charset 的值设置成UTF-8 ，如果不设置 charset 属性，可能会导致页面乱码，解决方案是设置成utf-8即可
author 属性，用来定义网站的作者，一般是公司的名字
keywords 属性，用来定义网站的关键字，如果有多个关键字用英文逗号隔开，关键字最好不要超过10个
1. 精准的keywords 值，更加有利于SEO（搜索引擎优化）
description 属性，用来简单的描述网站的内容，不要超过100字，有利于SEO
meta的另一种写法
>
title 标签，他是一个双标签，他的SEO权重很大，因此需要谨慎书写里面的内容
head标签里的内容，不会渲染在页面中
body 标签里面的内容，会渲染在页面的可视区域

标签分为行属性标签和块属性标签

块属性标签

div 标签
- 没有任何意义的标签，通常用来进行页面的布局
h 系列标签
- h1-h6标题
- 在一个页面中，h1 最多只能出现1次，h2 最多出现20次，h3-h6 次数不限
- h1的用法：
  1. logo处
  2. 资讯详情页的大标题
- 由于h1的权限较大只能出现在以上两个地方
p 标签，段落标签，它里面一般包含一段文字
分割线
无序列表
ul>li
- 可以设置他的 list-style-type 属性
  1. square :实心方块
  2. circle :空心圆
  3. dotted 实心圆
  4. none :取消列表样式
  5. disc：高版本系统下的默认样式
有序列表
ol>li
- 可以设置他的 list-style-type 属性
  1. lower-alpha ：小写字母
  2. upper-alpha ：大写字母
  3. lower-roman ：小写罗马文
  4. upper-roman ：大写罗马文
  5. ol,ul,li 都是块属性标签
- li 是列表项,并且 ol，ul 的子元素，必须是 li标签
定义列表
dl>dt
dl>dd
1. dl：块标签，定义列表的父元素
2. dt：块标签，定义列表的标题项
3. dd：块标签，定义列表的列表项
address 地址标签，一般的，他的内容是一个地址
blockquote 引用标签，一般引用的是一段文字，他的 cite 属性表示改文字引用的文献名目

不要使用html 官方没有的标签，虽然也会被浏览器渲染，但是不符合w3c 规范

行标签

sapn 标记标签，没有实际意义，通常用来渲染文字
a 标签
- href 属性: 用来设置超链接的地址
- target 属性: 设置标签页的打开方式
  1. _blank 在新标签页打开,指向,打开新页面,分页
  2. _self 默认值,在当前页面打开
    作用：
1. 设置一个超链接
2. 设置锚点
  
  最常用的效果是回到顶部
  如果在开发中需要设置 a 标签点击没有效果，则可以设置 href 属性为 ## 即是： href=“##”
  如果需要设置回到顶部则 herf=“#”
  不要设置 href 为空，这样会导致页面刷新
下载文件
- a. 如果设置的下载文件是，音频、视频、图片、文档等，都需要经过压缩之后，再在href上设置文件的路径
- b. 如果是文本类型的文件，可以直接那文件路径设置在href属性上，直接由浏览器打开
strong 强调标签
em 强调并且斜体
b 文本加粗（不常用，H5中即将废弃）
i文本斜体
var 文本斜体（不常用，H5中即将废弃）
q 标签，引用标签，他引用的内容都比较简短
pre 标签，格式化输出
code 标签，一般是嵌套代码使用
1. <在html中渲染为<
2. >在html中渲染为>
3. 在html中渲染为空格
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{自挂东南枝&}*n 创建n个内容为"自挂东南枝"+序号的 E 标签，&表示序号，从1开始
箭头 > 表示的是下一个层级元素（子元素）
E>a 在 E 标签中添加子元素 a 标签
加号 + 表示同级
E+p 同时创建兄弟元素E和p，不相互嵌套
^表示上一级？
E>p^div 创建 div 标签和 E 标签同级，也就是创建 p 标签的上一级
使用[]设置属性

标签嵌套规则

块标签可以作为一个布局标签，嵌套所有的标签
行标签不能嵌套块标签
以下标签不能相互嵌套
1. p 标签，h1-h6都不能相互嵌套，并且他们也不能嵌套块元素
2. a 标签不能相互嵌套

css样式表

css 层叠式样式表，他是用来给html结构添加样式的

设置类名
- .类名{
  样式内容
  }
- text-align: 文本排布，一般放在块标签上，用来控制块标签中行标签和文本的对齐位置
  值：
  1. left：左对齐（默认）
  2. center:居中对齐
  3. right：右对齐

css引入方式

行间引入，在标签上，设置style属性，在style中设置样式
内部样式表，在head中设置style标签，在标签中设置样式

link 和 @import 引入 css的区别

@import 是css2.1之后才推出的，因此可能存在兼容问题，link不存在兼容问题
link 不仅可以引入 css，也可以引入其他类型的文件，功能更加强大,推荐使用link
例:引入网站小图标

css文本操作

border 属性

border-width 设置border的宽度
border-color 设置border的颜色
border-style 设置border的样式
他们三个也可以合写:
- border: width style color;
border 可以单独给某一个边设置border
1. border-top 设置上边
2. border-left 设置左边
3. border-bottom 设置下边
4. border-right 设置右边
常用的 border-style 值
1. solid 实线
2. dotted 圆点虚线
3. dashed 短线虚线
4. none 隐藏border
5. double 双实线（不常用）
6. 3D边框
  - groove 3d凹槽
  - ridge 3d凸槽
  - inset 内嵌
  - outset 外嵌

color 属性，设置文本颜色

值：

英文单词
16进制颜色 0-f ，# 后面跟6位表示颜色的数字，前两位表示红色，中间两位表示绿色，后两位表示蓝色，#aabbcc，如果两两相等，则可以简写为 #abc
rgb（），rgba（）设置颜色，括号当中设置对应的数字，0-255 , 0 表示黑色，255 表示白色，rgb（255,0,0）红色，rgba 中的a 表示透明度，取值范围是0-1,0表示完全透明，1表示完全不透明

文本修饰（text-decoration）

值：

underline 下划线
overline 上划线
line-through 中划线（删除线)
none 去掉线（没有文本修饰线）

文本转化 (text-transform)

值：

lowercase 全部小写
uppercase 全部大写
capitalize 单词的首字母大写

行高 (line-height)

对于单行文本，line-height 设的高度如果和标签高度相同，则可以做 垂直居中效果，如果是多行文本，可以理解为行间距

direction 设置文字方向

ltr 默认，从左到右
rtl 从右向左

text-indent 首行缩进，他的值是具体的数值
word-spacing：设置两个单词之间的距离
letter-spacing：设置两个字符之间的距离（中文属于字符）

overflow 属性

处理子级内容超出当前容器的部分，主要是对父级元素添加该属性
值：
1. hiden 超出部分隐藏
2. scrool 滚动查看超出的部分
3. auto 自动渲染超出的部分
4. overflow-x 控制x轴方向的超出部分
5. overfloe-y 控制y轴方向的超出部分
white-space 属性，设置文本的格式
1. nowrap 强制不换行
2. normal 强制换行
text-overflow: 对超出的文本的内容剪裁
1. ellipsis 超出的内容变为省略号
2. clip 直接裁掉超出的文本内容
单行文本超出添加省略号
1. overflow:hidden;
2. white-space: nowrap;
3. text-overflow: ellipsis;

字体设置

font-style 设置字体的样式
值：
1. italic 设置字体为斜体
2. normal 字体正常
font-weight 设置字体是否加粗
值：
1. normal 默认
2. bold 加粗
3. bolder 相对bold加粗
4. 他的值也可以是具体的整百数字，范围是100-900
  1. 400->normal
  2. 700->bold
  3. 900->bolder
font-size 设置所修饰的字体的大小
1. 目前浏览器默认大小是 16px
2. PC浏览器的最小字体大小可以设置为 12px
font-family 设置文字的字体
1. 可以同时设置多个字体，形如：font-family：‘A’,‘B’,‘C’…;
  含义是在客户端的设备上匹配 A字体，如果没有A字体，则继续匹配B字体，依次进行匹配，知道匹配成功即可显示匹配到的字体
2. 通用字体
  1. serif 有衬线（类似锐化）
  2. sans-serif 无衬线
font 也是一个复合型 css属性，可以按照下面的顺序书写
font：style weight size family；
**注意:**style 和weight 不是必须写入的内容，如果简写必须要有 font-size 和 font-family
font:size family；

背景

background 设置标签元素的背景
background-color 设置背景色
- 他的值可以是：
  1. 英文单词
  2. 16进制表示颜色
  3. rgb（）表示颜色
background-image 设置背景图
- background-image：url（背景图地址）
background-repeat 背景图的平铺方式
值：
1. repeat 默认，x轴y轴都平铺
2. repeat-x 沿x轴平铺
3. repeat-y 沿x轴平铺
4. no-repeat 不平铺
background-position 设置背景图方位
background-position：x轴方向的值 y轴方向的值；

值可以是：
1. 具体的数值
2. 方位名词组合：left top right bottom center
background-attachment 设置背景图固定定位
- background-attachment:
  值：
1. scroll 默认值，背景图片在跟着页面一起滚动
2. fixed 根据浏览器可视区域，固定在具体的位置，他的定位参考点是浏览器可视区域
background 是一个复合型属性，可以写在一起，他的顺序是
background：color image repeat position attachment;
可以单独写
background:color;
background:image;

diaplay属性

隐藏一个标签元素
display: none;
display 属性，可以用来控制标签元素的显示属性
值：
1. block 把元素转化为块属性标签
2. inline 把元素转化为行属性标签
3. none 隐藏标签元素

项七

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html与css标签及属性

head里面主要是源信息标签作用是，设置网站的源信息charset 属性，用来定义文本的编码格式author 属性，用来定义网站的作者，一般是公司的名字keywords 属性，用来定义网站的关键字，如果有多个关键字用英文逗号隔开，关键字最好不要超过10个description 属性，用来简单的描述网站的内容，不要超过100字，有利于SEOmeta的另一种写法title 标签，他是一个双标签，他的SEO权重很大，因此需要谨慎书写里面的内容head标签里的内容，不会渲染在页面中。
复制链接

扫一扫