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>

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

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