文档章节

我所了解的HTML5

行走迪拜
 行走迪拜
发布于 2016/03/02 18:58
字数 1798
阅读 8
收藏 0


1> 什么是HTML 5 ?

HyperText Markup language 超文本标记语言  -  网页的本质就是超文本标记语言


2> HTML 5 的作用是什么 ?

UI界面跨平台写一份HTML 5 的代码,这个界面就可以运行到任何手机平台


3> HTML 5 怎么使用 ?

运行平台 : 浏览器


4> HTML 5 什么时候使用 ?

1. HTML 5 之前的版本是专门为PC准备的 (非手持设备)

2. HTML 5 新概念 : 移动先行优先考虑移动端


5> 手机APP的开发模式有哪两种 ?

1. 原生 : 访问手机相册\打电话\拍照

2. 原生 + HTML 5  - 网易新闻案例


6> 一个有具体功能的完整网页,一般由哪3部分组成的呢 ?

  • λ HTML  网页的具体内容和结构

  • λ CSS  网页的样式 (美化网页最重要的一块)

  • λ JavaScript  网页的交互效果,比如对用户鼠标事件作出响应  


7> 工程师大致有几种分工类型  ?

  • λ 前端工程师 (HTML + JS) 将动态数据渲染到静态页面

  • λ 后台工程师 (服务器 + 数据库) : 动态数据

  • λ 平面设计师 (HMTL + CSS) : 静态页面

  • λ 移动工程师 (iOS, Android) UI界面 + 服务器交互 



补充 : HTML5HTML4的区别

HTML5标准取代HTML4标准的一个重要目标就是 ,让浏览器摆脱需要安装各种插件才能显示或播放不同格式文件的情况.







1> 第一个HTML程序

首先创建一个新项目 --> New -> HTML File

// 新创建html文件,自动生成代码如下 :


<!DOCTYPE html>  文档类型

<html>  剩下的全部为html内容, html里面还有两个标签,一个为head,另一个为body.

<head>  head标签内部一般放一些CSSJS

    <meta charset="UTF-8">  字符集编码 (HTML5中定义文字的编码)

    <title></title>  网页的标题

</head>

<body>  body标签里面会放html(网页) 的具体内容


</body>

</html>


常见的HTML标签

  • ν 标题:h1h2h3h4h5....

  • ν 段落:p

  • ν 换行:br

  • ν 容器:divspan(用来容纳其他标签)[div标签没有任何具体意义的标签,其功能相当于OC中的UIView控件]

  • ν 表格:tabletrtd

  • ν 列表:ulolli

  • ν 图片:img

  • ν 表单:input

  • ν 链接:a


<body>

<p>这里是第一段</p>

<p>这里是第二段</p>

<p>这里是第三段</p>

</body>



<body>

<div>这里是第一段</div>

<div>这里是第二段</div>

<div>这里是第三段</div>

</body>



<body>

<span>这里是第一段</span>

<span>这里是第二段</span>

<span>这里是第三段</span>

</body>



其它需要使用到的一些标签


<input type="button" value="我是按钮">

<a href="http://www.baidu.com" target="_blank">百度</a>

<img src="01.png">



2> 什么是CSS ?

  • λ CSS的全称是Cascading Style Sheets,层叠样式表

  • λ 它用来控制HTML标签的样式,在美化网页中起到非常重要的作用

  • λ CSS的编写格式是键值对形式的,比如 :

color: red;

background-color: blue;

font-size: 20px;


冒号: 左边的是属性名,冒号: 右边的属性值






3> CSS有哪三种书写形式 ?

  • λ 行内样式:(内联样式)直接在标签的style属性中书写

<body>

<a href="http://www.baidu.com" target="_blank" style="font-size: 50px;">百度</a>

<p style="color: red; font-size: 20px; background: blue;">这里是第一段</p>

<p style="color: blue;">这里是第二段</p>

<p>这里是第三段</p>

</body>




  • λ 页内样式:在本网页的style标签中书写

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>  // 特别注意 : head标签内部创建一个style标签,这叫做页内样式

        p {

            color: red;

            font-size: 40px;

            background: orange;

        }

        a {

            font-size: 10px;

        }

    </style>

</head>

<body>

<a href="http://www.baidu.com" target="_blank" style="font-size: 50px;">百度</a>

<a>谷歌</a>

<p>这里是第一段</p>

<p>这里是第二段</p>

<p>这里是第三段</p>

</body>

</html>




  • λ 外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用

首先创建一个New  -->  File 文件 名称叫做 common.css 

div {

    color: red;

    font-size: 50px;

    border: 5px solid blue;

    border-redius: 10px;

    text-align: center;

}

其次创建一个second.html 文件

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="common.css">

</head>

<body>

    <div>second</div>

</body>

</html>


再然后创建一个third.html 文件

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="common.css">

</head>

<body>

    <div>second</div>

</body>

</html>








CSS的两大核心内容  属性 和 选择器  (待完善)








4> 关于CSS的选择器 ?

  • λ 标签选择器 根据标签名找到标签 作用 : 选择对应的标签,为之添加样式


  • λ 类选择器  书写格式.类名  可以重复和设置多个


  • λ id选择器  书写格式 :  #id  必须保证唯一性


  • λ 并列选择器 书写格式 :  中间使用逗号隔开  分隔不同的选择器


  • λ 复合选择器  书写格式 : 中间没有空格和逗号,相连在一起  表示同一个整体


  • λ 后代选择器  书写格式 : 中间使用空格隔开不同的选择器  后代和子后代都有效果


  • λ 直接后代选择器  书写格式 : 使用 > 分隔  只有直接后代才有效果







  • λ 相邻兄弟选择器  书写格式 : 使用 + 分隔  只有外部相邻的选择器才有效果


  • λ 属性选择器  书写格式 : 使用 [ ] 表示  相同属性的相应标签才有效果




1> 关于CSS选择器的小结

  1. 1> div .tom : 后代选择器,找到div里面class= “tom” 的所有子标签

  2. 2> div > .tom : 直接后代选择器,找到div里面 class= “tom” 的直接子标签

  3. 3> div.tom : 复合选择器,找到class= “tom”div标签

  4. 4> div, .tom : 并列选择器, 找到div标签 或者 class= “tom” 的标签

  5. 5> div + .tom : 相邻兄弟选择器,找到跟div标签相邻的 class= “tom”的标签


2> CSS 选择器的优先级原则是什么

1> ! important 的样式.

2> style属性中的样式 (行内样式)

  1. 3> 先比较选择器的优先级,选择器优先级高的会覆盖优先级低的.

  • λ 针对性越强,(范围越小)的选择器,优先级越高

  • λ 针对性越弱,(范围越大)的选择器,优先级越低

  1. 4> 再比较选择器的先后顺序,后面的会覆盖前面的. 条件: 在选择器优先级相等时.

  2. 5> * , 通配符. 一般都不用,效率低,无意义!

总结概括 : 选择器的针对性越强,它的优先级就越高.


3> HTML有哪三种标签类型

  • λ 块级标签  

特点 : 独占一行的标签  能随时设置宽度和高度 (比如divph1h2ulli)









  • λ 行内标签  

特点 : 多个行内标签能同时显示在一行  宽度和高度取决于内容的尺寸 (比如spanalabel)



  • λ 行内-块级标签 (内联-块级标签)

特点 : 多个行内-块级标签可以显示在同一行  能随时设置设置宽度和高度 (比如inputbutton)







© 著作权归作者所有

共有 人打赏支持
行走迪拜
粉丝 0
博文 2
码字总数 4628
作品 0
高级程序员
WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/23
0
0
HTML5从入门到精通,零基础学员必看

学习html5从入门到精通,零基础新手也能看懂,无论你是唱歌,画画的艺术生,还是学习机械专业的工科生,或者大学读的文学学科。先了解HTML5可以实现的功能有哪儿些? 1. HTML5可以同时在多种...

课工场CC老师
2017/11/08
0
0
主流浏览器CSS3和HTML5兼容性详细清单

天极网软件频道2011-05-26 15:26 分享到:我要吐槽   更多精彩相关文章推荐:   常用浏览器软件HTML5兼容性表现测试   IE和Firefox浏览器CSS兼容性技巧整理   CSS hack定义技巧浏览器...

波利beryl
2014/11/12
0
0
手把手教你开发Chrome扩展三:关于本地存储数据

手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 HTML5中的localStorage localS...

Ryan-瑞恩
2012/12/22
0
0
HTML5——对HTML5的认识

首先非常感谢李刚老师出的这本书《HTML5/CSS3/JavaScript讲义》,今天读了第一章节的内容,趁热打铁,总结一下。 HTML5的时代已经到来,它对所有的前端开发人员来说是一种福音。HTML5致力于解...

武小猪
06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

[Hive]JsonSerde使用指南

注意: 重要的是每行必须是一个完整的JSON,一个JSON不能跨越多行,也就是说,serde不会对多行的Json有效。 因为这是由Hadoop处理文件的工作方式决定,文件必须是可拆分的,例如,Hadoop将在...

Mr_yul
11分钟前
0
0
54:mysql修改密码|连接mysql|mysql常用命令

1、mysql修改密码: root用户时mysql的超级管理员,默认mysql的密码是空的,直接可以连接上去的,不过这样不安全; 注释:为了方便的使用mysql,需要把mysql加入到环境变量里; #后续自己输入mys...

芬野de博客
19分钟前
0
0
鼠标单击复制粘贴标签中的内容

<span ref="spanContentOne" id="spanContentOne" style="font-size: 14px;">或许不是最亮眼,总比瞎买强一点</span><!--<input type="button" @click="copyClick('1')" value="复制" />-......

帝子兮
23分钟前
0
0
使用axel多线程疯狂下载

在Linux中比较常见见的下载工具是curl和wget,但是下载比较大的文件两者都不支持多线程, 断点续传的作用不见得能发挥到最大。今天介绍一个axel工具,开启多线程疯狂下载。 安装 Fedora/Cen...

linuxprobe16
25分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部