H5知识小记

最近闲着没有事,就学了一点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>

好了,暂时就这么多吧,感觉比较乱,这些都是我边学边整理的,有错误的话欢迎大家指正。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,697评论 32 459
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 6,582评论 0 8
  • 选择,其实就是另一种生活的开启。 从深圳回到西安,选择了空间和心的距离由远即近,也接受27,28岁结婚的状态。 于...
    给我一点爱的勇气阅读 2,425评论 0 0
  • 现在的父母对孩子的教育越来越重视,对子女的期望越来越高,不惜投入大量的金钱精力,但究竞怎么做,孩子容易成材成功呢?...
    涵妈说育儿阅读 1,579评论 0 5