当前位置: 代码迷 >> 综合 >> day9-11学习规范并且制作漂亮的网站
  详细解决方案

day9-11学习规范并且制作漂亮的网站

热度:73   发布时间:2023-12-12 03:57:05.0

2020年10月19日晚-21日-29日早

第九天到第十一天:来做一个漂亮的网站

学习总用时:2小时+3小时10分钟+4小时+1小时30分钟+4小时+25分钟=12小时5分钟

复习时间:1小时40分钟+

先学习规范:

HTML

1.在 HTML5 中, 空的 HTML 元素也不一定要关闭。在 XHTML 和 XML 中斜线 (/) 是必须的。
如果你期望 XML 软件使用你的页面,使用这种风格是非常好的。
2.虽然html5中可以不添加关闭标签,但建议加上。
3.用小写命名标签。
4.在开头声明文档类型“<!doctype html>”。
5.属性值使用引号。
6.图片通常使用 alt 属性。在图片不能显示时,它能替代图片显示。
例:img src=“html5.gif” alt=“HTML5”。
7.推荐等号前后少用空格。
8.使用 HTML 编辑器,左右滚动代码是不方便的。
每行代码尽量少于 80 个字符。
9.不要无缘无故添加空行。
为每个逻辑功能块添加空行,这样更易于阅读。
缩进使用两个空格,不建议使用 TAB。
比较短的代码间不要使用不必要的空行和缩进。
10.html body head可省略但不推荐省略。
11.HTML5 中 title 元素是必须的,标题名描述了页面的主题,卸载head里。
例:
html lang=“zh”
head
meta charset=“UTF-8”
title菜鸟教程/title
/head
12.注释可以写在 !-- 和 – 中(要有><):
13.只有属性值包含空格时才使用引号。

CSS

1.顺序:位置、大小、文字、背景、其他。
2.善用缩写
3.特殊的小数0.8直接写成.8
4.简写命名要让别人能看懂
5.16进制颜色代码缩写
6.长名称或词组可以使用中横线来为选择器命名,
不建议用下划线,因为写下划线麻烦,而且
可能和js中的变量命名混淆。
7.按需使用id,id只能用一次。
8.为选择器添加状态前缀,让语义明了。
9.CSS命名规范(规则)常用的CSS命名规则:
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体佈局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:ho
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签:tags
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
10.25补充
使用定位时,需要绝对定位。不同的定位用于不同的地方。
10.27补充
在父元素中使用text-align让子元素居中后,如果子元素设置了宽度,父亲的命令无效。如果想让子元素在设置宽度的条件下居中,在子元素中添加margin: 0 auto即可。
10.28补充
使用inline-block元素并居中时,如果父元素的子元素中有img元素,该父元素会出现问题,结果是该父元素到下一行。可能是不能用img,那就吧img单分出来吧。
使用inline-block元素并居中时,若父元素间的子元素数量不同,会出现到下一行的问题。我也不知道为啥,暂时不求甚解,不这么用就好了。
10.29补充
今天参考了一下别人的作业,发现html代码中的button和input挺好用的,可以有输入动画和点击动画。以后用一下。