最近闲着没有事,就学了一点H5的知识,现在可以写一些简单点的页面了,下面就是我总结的一些H5的知识。
一:网页的组成
1.HTML 网页的具体内容和结构
2.CSS 网页的样式
3.JavaScript 网页的交互效果,比如对用户鼠标事件作出响应。
二.常见的HTML标签
1.标题: h1,h2,h3,h4,h5…
2.段落:p
3.换行:br
4.容器:div,scan(用来容纳其他标签)
5.表格:table,tr,td
6.列表:ul,ol,li
7.图片:img
8.表单:input
9.链接:a
三:H5新增标签新增了27个标签元素,包括结构性标签,级块性标签,行内语义性标签, 交互性标签。下面是用的比较多的一些属性
1.article:文章主题内容
2.header:标记头部区域内容
3.footer:标记脚部区域内容
4.section:区域章节表述
5.nav:菜单导航,链接导航行内语义性标签
6.meter:特定范围内的数值,如工资,数量,百分比
7.time:时间值
8.progress:进度条,可用max,min,step进行控制,完成对进度的表示和监听
9.video:视频元素,用于视频播放,支持缓冲预载和多种视频媒体格式
10.audio:音频元素,用于音频播放,支持缓冲预载和多种音频媒体格式
四:CSS
A:什么是CSS? 它是用来控制HTML标签的样式,在美化网页中起到非常重要的作用。
B:CSS的3种书写形式
1.行内样式
2.页内样式
3.外部样式
C:CSS的两大重点
1.属性通过属性的复杂叠加才能做出漂亮的网页
2.选择器通过选择器找到对应的标签设置样式
3.CSS选择器
a. 标签选择器
b.类选择器
c.id选择器
d.并列选择器
e.复合选择器
f.后代选择器
g.直接后代选择器
h.相邻兄弟选择器
i.属性选择器
4. 选择器的作用 选择对应的标签,为之添加样式
5.选择器的优先级 选择器的针对性越强,他的优先级越高
6.选择器的权限
通配选择符:0
标签:1
类:1
属性:10
伪类:10
伪元素:10
id:100
important:1000
7.原则:选择器的权值加到一起,大的优先,如果权值相同,后定义的优先。
important >内联 >id >类>标签|伪类|属性选择>伪元素>通配符>继承
五:HTML标签类型主要分为三大类型:
1.块级标签:独占一行的标签,能随时设置宽度和高度(比如:div,p,h1,h2,ul,ui)
2.行内标签(内联标签)多个行内标签能同时显示在一行,宽度和高度取决于内容的尺寸(比如span,a,label)
3.行内-块级标签(内联-块级标签)多个行内-块级标签可以显示在同一行,能随时这只宽度和高度(比如input,button)
六:修改标签的显示类型 CSS中有个display属性,能修改标签的显示类型
none:隐藏标签
block:让标签变成块级标签
inline:让标签变为行内标签
inline-block:让标签变为行内—块级标签
七:盒子模型网页上的每一个标签都是一个盒子。每个盒子都有四个属性
1.内容:content
2.填充:padding (内边距) 例:padding:10px 5px 15px 20px (上右下左)边框
3.边框:border 例:border属性border:border-width ,border-style,border-color
4.边界:margin(外边距) 例:margin:10px 5px 15px 20px (上右下左)
八:CSS3新增属性
1.RGBA透明度
2.块阴影与圆角阴影 box-shadow,text-shadow
3.圆角 border-radius
4.边框图片:border-image
5.形变:transform
九:CSS布局默认情况下,所有的网页标签都在标准流布局中从上到下,从左到右脱离标准流的方法有:
1.float属性 left:脱离标准流,浮动在父标签的最左边。 right:脱离标准流,浮动在父标签的最右边
2.position属性和left,right,top,bottom属性
position属性:fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
absolute与relative结合使用(子绝父相)
十:HTML中标签的居中
水平居中 行内标签和行内-块级标签:text-align:center
块级标签:margin:0px auto
垂直居中:line-height
十一:JavaScript的书写方式
1.业内样式
<script type="text/javascript"></script>
2.外部JS
<script src=“index.js”></script>
好了,暂时就这么多吧,感觉比较乱,这些都是我边学边整理的,有错误的话欢迎大家指正。