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;
今天小编就写到这吧,希望以上知识点能够对大家有所帮助,有喜欢的小伙伴可以给主播点点关注哦

浙公网安备 33010602011771号