html+css基础

一、WEB前端标记的类型与特点

单标记:

1. 某些标记称为"单标记"，因为它只需要单独使用就能完整地表达意思
2. 记的语法如下：<标记名称/>；最常用的单标记是<br/>，它表示换行。

双标记:

1. 双标记由"始标记"和"尾标记"两部分构成，必须成对使用。
2. 语法如下：<标记>内容</标记>；最常见的就是<div></div>，它表示一个区块。

标记属性:

1. 许多单标记和双标记的始标记内可以包含一些属性
2. 语法如下：<标记名字 属性1 属性2 属性3……>
3. 各属性之间无先后次序，属性也可以省略。
4. 所有标签都具有id（唯一名）、class（类名）、title（标题）、style（行内样式）属性

标记须知：

1. 双标签必须有开始也有结束
2. 双标签可以嵌套不可以交叉。嵌套时，内部的标签称为子元素，外部的标签称为父元素；非嵌套时，两个同级的标签称为兄弟元素
3. 浏览器会对部分错误进行纠错，但我们要养成良好的编码习惯，尽量做到不用浏览器的纠错

二、WEB前端HTML和CSS

标签书写规范：

1. 新项目先保存在一个文件夹中
2. 程序员的机器上必须显示后缀名
3. 把实时存档当成一种习惯
4. 所有文件名务必使用英文或者以英文开头的英文数字的组合
5. html全部使用小写字母来书写
6. 在书写代码的同时做好注释的习惯

标签类名常用命名：

1. 页头：header；标志：logo；侧栏：aside；广告：banner；导航：nav；菜单：menu；搜索：search
2. 滚动：scroll；页面主体：main；内容：content；列表：list；标题：title；服务：service；热点：hot
3. 新闻：news；下载：download；注册：regsiter；合作伙伴：partner；按钮：btn；页脚：footer

常用标签：

1. 段落标签：<p>
2. 图片标签：<img>
3. 文本标签：<font>
4. 标题标签：<h1>~<h6>
5. 粗体/加重标签：<b>/<strong>
6. 斜体/着重标签：<i>/<em>
7. 上标/下标标签：<sup>/<sub>
8. 下划线标签：<u>
9. 预先格式化标签：<pre>
10. 强制换行：<br/>
11. 列表：ol>li(有序列表)  ul>li（无序列表） 作用：制作菜单、标题栏  备注：列表可嵌套
12. 水平线：<hr/>
13. a链接：<a>  超级链接方式：跳转的路径、当前页面的锚标记、跨页面跳转
14. 特殊符号的插入方式：&
15. form表单元素：<form>   action表示表单提交的路径；表单的对象type分为单文本标签（text、password）、多选框（checkbox）、单选框（radio）、按钮（button、reset、submit）
16. 下拉菜单：select>option
17. 多行文本框：<textarea>
18. table表单：tr>th  tr>td  注意：行列的合并
19. 分块标签：<div>
20. 文本标签：<span>

CSS的由来：

1. 最早的样式是通过标签（如b、del等标签）添加的，结果不同的浏览器（网景和IE）为了抢用户设置除了很多不同的标签制作效果，并且它们并不兼容，程序员则需要大量的兼容代码来为他们不同的浏览器做页面。
2. 接着W3C组织对HTML标签进行了统一，但HTML1.0功能不足，各个浏览器依然出了很多不同的新标签，于是从1.0直到4.0一直在进行更新，但是规范依然不够，毕竟它只是个标准，并没有去实现样式。
3. 最后W3C又出了一个新标准XHTML1.0，这个标准要求非常严格（借鉴了XML的语法），而且废弃了很多（带有样式的）标签和属性，因为他们在不停的破坏页面的结构（内容和表现在一起而且修改困难），于是css诞生了，html页面的内容和表现终于分开了。

文字样式：

1. 文字字体：font-family:"微软雅黑" //最常用的既是“微软雅黑”；Heiti SC,Heiti SC Light,"Open Sans", Arial, "Hiragino Sans GB" //其他字体（在第一个字体在本机没有时，使用后续的字体）
2. 文字大小样式：font-size:12px（px作为WEB常用单位，既是彩屏设备中的像素）
3. 文本对齐方式：text-align（left（左）, right（右）, center（居中）, justify（两端对齐））
4. 文本缩进：text-indent:2em（em是使用当前元素父元素的字体大小（font-size）的倍数计算的单位，2em就是2倍父元素    

    css盒子模型（重点）：

       1. content（内容） 可以是文字或图片 属性：width height overflow

       2.padding（内边距） 用于定义内容与边框之间的距离，也常称为“补白” padding-top/bottom/left/right  

       3.margin（外边距） 用于定义页面中元素与元素之间的距离  margin-top/bottpm/left/right      

       4.border（边框） 元素边框  border-width/color/style