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

最新推荐文章于 2023-03-10 13:20:22 发布

RealRecall

最新推荐文章于 2023-03-10 13:20:22 发布

阅读量130

点赞数

分类专栏：初学前端开发

本文链接：https://blog.csdn.net/RealRecall/article/details/109254767

版权

初学前端开发专栏收录该内容

46 篇文章 1 订阅

订阅专栏

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挺好用的，可以有输入动画和点击动画。以后用一下。