HTML和CSS属性的正确书写规范

news/2024/7/3 14:28:51

网页的重要性评级:

  1. 网页的排名。
  2. 标签的语义化,正确的标签做正确的事情。
  3. 提升网页的加载速度。1. CSS代码优化,代码的正确排列顺序,不正确的代码会导致浏览器解析代码回流,会拖慢浏览器的加载速度。
    1. 减少图片服务器的请求数量,可以用雪碧图来减少。
  4. 重排,代码属性使用不正确,会导致浏览器解析代码重排。
  5. javascript脚本的优化,前提是有一定的功底。
  6. 网页的效果。
  7. http:/ /www.i is7.co m/b/zhizhu/
    详情可查看HTML标签权重分值表。

h1~h6的使用,h1用于网站logo,h1~h3用于网站的首页,h4~h6用于网站的附页。
display:flex,开启弹性盒模型
flex-wrap:wrap,强制换行
justify-content:space-between,弹性子元素水平均分
align-items:center,弹性子元素竖直均分,要和弹性盒模型的高度一样,在子元素中用margin:auto,也可以水平竖直均分。

CSS属性书写顺序

  1. 布局定位属性 如:display / list-style / position(相应的 top,right,bottom,left) / float / clear / visibility / overflow
  2. 自身属性 如:width / height / margin / padding / border / background
  3. 文本属性 如:color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他(CSS3) 如:content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient

转载于:https://blog.51cto.com/13941970/2174585


http://www.niftyadmin.cn/n/2205208.html

相关文章

Redis进阶实践之十六 Redis大批量增加数据

2019独角兽企业重金招聘Python工程师标准>>> Redis进阶实践之十六 Redis大批量增加数据 一、介绍 有时候,Redis实例需要在很短的时间内加载大量先前存在或用户生成的数据,以便尽可能快地创建数百万个键。这就是所谓的批量插入&…

LINUX-centos7tomcat安装教程

1.yum install -y tomcat (jdk,依赖自动给装好了)2.systemctl start tomcat(打开tomcat)3.ps -aux | grep tomcat(查询是否打开)4.systemctl stop firewalld.service(关闭防火墙)5.systemctl disable firew…

动画效果

显示动画 方式一: $("div").show(); 解释:无参数,表示让指定的元素显示出来。其实这个方法的底层就是通过display:block;实现 方式二: $("div").show(3000); 解释:通过控制…

FFmpeg 拉取rtsp 做hls切片

2019独角兽企业重金招聘Python工程师标准>>> ./ffmpeg -i rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov -fflags flush_packets -max_delay 1 -an -flags -global_header -hls_time 1 -hls_list_size 3 -hls_flags delete_segmentsomit_endlist -vcodec co…

路透社:欧盟将无条件批准微软 75 亿美元收购 GitHub

北京时间10月8日晚间消息,路透社今日援引两位知情人士的消息称,欧盟将无条件批准微软 75 亿美元收购 GitHub 的交易。GitHub 是全球领先的代码托管平台,拥有 2800 多万开发者用户。微软今年6月宣布,将以价值 75 亿美元的股票收购 …

Dell 14G服务器通过BIOS配置RAID

1.开机&#xff0c;根据界面提示按<F2>进入<System Setup>管理界面&#xff1b;2.选择<Device Settings>&#xff1b;3.选择<Dell PERC<PERC H730P Adapter>Configuration Utility>&#xff1b;4.选择<Configuration Management>&#xff…

python全栈-基础知识练习题(一)

1.执行Python脚本的两种方式 ①在控制台直接输入python,进入python模式逐行运行 ②在控制台直接输入python 文件名&#xff08;包含完整的路径&#xff09; 2.简述位、字节的关系 一个字节等于8个位 3.简述ascii、unicode、utf-8、gbk的关系 先出现ascii码&#xff0c;之后出…

openmp学习心得(一)

主要在vs2015下使用OMP&#xff0c;写一些自己omp的学习心得&#xff1a; 一、在VS2015下OpenMP的使用&#xff1a; 1、VS2015也仅仅支持OpenMP2.0版本&#xff0c;VS对OpenMP的支持并不太好。 2、在VS下使用OPenMP需要在项目设置中找到&#xff0c;项目-->语言-->OpenMP…