h5基础概念（一）

1.web标准(前端的三大组成部分)：

 　　　　结构（html）+表现（css）+行为（js）

2.相关组织：

　　　　W3C: html+css的语法基础

　　　 ECMA: js语法基础

　　　 WHATWG: 推动h5

3.html相关概念：

　　　　HTML指的是超文本标记语言

　　　 XHTML指可扩展超文本标记语言(标识语言)是一种置标语言，表现方式与超文本语言类似，不过与发行更加严格

4.标签

　　1. 单标签 （空标签）

 

　　

　　2. 双标签 （ 常规标签）

　　4.1常用标签

　　　　div    最常用的标签，一般当做容器

　　　　 p      段落文字

　　　　h1-h6    标题（h1-h3本身对搜索引擎比较友好）

　　　　　　h1  最多使用1次  常用于logo

　　　　　　h2  最多使用3次

　　　　　　h3  无限次

　　　　br 　 强制换行

　　　　ul　　无序列表

　　　　a        超链接

　　　　strong   强调加粗

　　　　span     无意义标签

　　　　del        删除

　　4.2 块元素和行内元素

　　　　块元素：块元素会在页面中独占一行，默认宽度是父元素的全部，默认高度是块元素撑开

　　　　　　div、li、p、ul.......

　　　　行内元素：不会独占一行，只占自身大小，如果一行之中不能容纳所有的行内元素则换到第二行继续排列

　　　　　　a、button、img、span、input.......

 

---

CSS

　　1. CSS概念

　　　　 层叠样式表（层叠的含义是样式重复时的权重或者优先级的问题）

　　  2.CSS创建方式

　　　　行内样式表（内嵌样式/内联样式）------优先级别最高

　　　　

 　　　　内部样式表

　　　　

 　　　　外部样式表引入

　　　　

 　　　　外部样式表导入

　　·　　

　　　　2.1 link和@import的区别

　　　　　　link　　　　html    同时加载　　无兼容　　可以被js控制

　　　　　　@import 　  css　　后加载　　   IE5-　　　无法被js控制

 　　3.CSS属性　　　　

　　　　布局属性

　　　　　　width   宽度

　　　　　　height  高度

　　　　　　float     浮动

　　　　　　margin  外边距

　　　　　　padding  内边距

　　　　　　border   边框

　　　　文本属性

　　　　　　color    颜色

　　　　　　fonr-size　 字体大小

　　　　　　line-height   行高

　　　　　　text-align     文字对齐方式

　　　　　　text-indent   文字缩进

　　　　　　font-weight   字体粗细

　　　　　　font-style     字体样式

　　　　　　letter-spacing   字符间距

　　　　　　text-decoration   文本修饰

　　　　背景属性

　　　　　　background-color  背景颜色

　　　　　　background-image　背景图片

　　　　列表属性

　　　　　　list-style   列表样式

　　4.margin的用法

              

　　　　在使用margin时常常会使用margin：0 auto;实现div元素水平居中，这时很多小伙伴就会问了margin-left：auto;margin-right：auto不是也可以实现水平居中嘛，他们两者有什么区别呢——年轻人不讲武德，耗子尾汁

　　　　

 

　　　效果图：

　       

 

 

   　　　

　　　　效果图：

　　　　　　从以上两个效果图不难看出后者可以把原先设置的margin-top覆盖掉

　　5.form表单

　　

      

　　6. 父子元素之间的传递问题

　　我相信不少小伙伴在撸代码的时候难免会出现以下情况，当我需要将棕色色块向下移动时，却没想到红色色块也跟着一起移动了

　　

 

　　当然我们更希望是下面这种情况

　   　

 

　  　　　　碰到这一问题，小伙伴应该如何解决这个bug呢，今天小编来说几个解决办法吧

　　　　　　　　　　　　　　　　　　父元素添加 　  overflow：hidden；

　　　　　　　　　　　　　　　　　　　　　　　　　padding-top：1px；

　　　　　　　　　　　　　　　　　　　　　　　　　border:1px solid red;

 

---

 　　今天小编就写到这吧，希望以上知识点能够对大家有所帮助，有喜欢的小伙伴可以给主播点点关注哦