html相关前端注意点

1、一个网页中只含有一个h1标签（用来放网站重要logo）
2、最好不要在HTML中修改样式（因为HTML告诉浏览器语义，而不是起到修饰作用）
3、br hr之类标签不推荐使用（无语义），可以用css中border等设置
4、对于img标签width和height一般指定一个就好（否则可能引起原图变形）
5、引用路径使用相对路径（可移植性好）
6、假链接：1、#（点击跳转头部）2、javascript:;（点击不会跳转）
7、b u s i不推荐使用（无语义），可用strong ins del em（重要强调 插入 删除 强调）代替
8、常用字符实体：&nbsp；（空格）&lt；（<）&gt；（>）&copy；（©版权符号）
9、对于font-family，由于中文包含英文 而英文不包含中文，所以设置时英文一般放前面
10、标签分类
容器级标签：div h ul ol dl li dt dd…(可嵌套其他所有标签)
文本级标签：span p buis strong em ins del…(只可嵌套文字 图片 超链接)
块级元素：容器级标签+p（可设置宽高 独占一行）
行内元素：文本级标签-p（不可设置宽高 不独占一行）
行内块级标签：img（可设置宽高 不独占一行）
11、尽量使用css雪碧图：降低服务器压力，减少请求次数（一般配合bg和bgp使用）
12、对于图片多的网页 图片可以以webp格式上传（体积小）
13、盒子中以文字左边内边距（pd）为准 右边有误差，而顶部要减去文字行高
14、网页制作步骤：
（1）站点文件夹建立（使用英文命名）

• css
• images
• html
• js
• source
• fonts

（2）重置所有默认样式和设置一些全局样式
（3）从上至下 由外而内编写
（4）重点的注释不要忘记

15、命名中class用-连接而id用_连接
16、id：大结构、外围、js使用
class：小结构、内部使用
17、有时css样式无反应可用！important提升优先级
18、a标签最好占满li
19、当fl产生溢出问题 父标签可设置overflow：auto
20、语义化

名称	作用
title	简短、描述性、唯一（提升搜索引擎排名）
header	页眉通常包括网站标志、主导航、全站链接以及搜索框
nav	标记导航，仅对文档中重要的链接群使用
main	页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能
section	具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条（举例：如果一本书是一个article的话，那么每个章节就是section）
aside	指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表
footer	页脚，只有当父级是body时，才是整个页面的页脚
article	一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者新闻文章
address	地址
blockquote	引述其他人或来源的长篇幅的内容（段落），建议通过cite特性添加来源地址。注意：<blockquote>元素的默认样式为引述的段落左右添加缩进40px
cite	指明引用或者参考，如图书的标题，歌曲、电影、等的名称，演唱会
small	指定细则，输入免责声明、注解、署名、版权
strong	表示内容重要性
mark	突出显示文本（yellow），提醒读者
video	定义视频（内嵌元素）<video width="320" height="240" ><source src="movie.ogg" type="video/ogg" />Your browser does not support the video tag.</video>
audio	定义声音内容（内嵌元素）