文档章节

我所了解的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
高级程序员
私信 提问
分享最好的HTML5编码教程和参考手册

原文:queness.com 编译:GBin1.com 今天我们介绍相关HTML5的参考手册,演讲稿,电子书和教程。 HTML5是新兴的web技术,虽然不是完全的新技术但是已经有很多的相关文章介绍HTML5,特别是当我...

gbin1
2011/10/21
1K
3
分享6个实用的HTML5本地存储(Local Storage)教程

日期:2011/12/12 来源:GBin1.com HTML5 中最强大并且最具有魅力的特性在于本地存储,使用本地存储可以大大的节约服务器端的压力,并且可以有效的利用客户端的计算性能。使用HTML5可以在客户...

gbin1
2011/12/12
2.9K
1
WEB前端开发学习HTML5到底有多厉害?

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

web前端小辰
05/23
0
0
推荐10款非常优秀的HTML5开发工具

HTML5发展如火如荼,随着各大浏览器对HTML5技术支持的不断完善以及HTML5技术的不断成熟,未来HTML5必将改变我们创建Web应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助...

长平狐
2012/10/09
156
0
现在就开始使用 HTML5 的十大原因

日期:2011/12/05 来源:GBin1.com 你 难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因;它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码。HTML5是w...

gbin1
2011/12/07
4.1K
31

没有更多内容

加载失败,请刷新页面

加载更多

Eos如何删除钱包

在使用Eos的keosd钱包软件时,如果要删除EOS中指定名称的钱包,最简单的办法是直接删除钱包文件,不过在删除钱包之前,需要先停止钱包软件的运行。 学习EOS应用开发要选这个:【EOS智能合约与...

geek12345
3分钟前
0
0
js操作时间

获取当前时间 function getSystemDate(){ var systemDate = new Date(); // 获取当年 var year = systemDate.getFullYear(); // 获取当月 (月+1是因为js中......

简心
10分钟前
0
0
区块链开发教程推荐

区块链的重要性已经毋庸置疑,但对大多数跃跃欲试的开发者而言,去中心化思想、非对称加密、共识算法等技术点的理解和运用,都是入门区块链开发的挑战。合适的区块链开发教程可以极大地缩短区...

笔阁
10分钟前
0
0
菜单menuView总结

1、FTPopOverMenu

_____1____
21分钟前
2
0
MyEclipse教程:Web开发——部署和测试Web项目

MyEclipse 在线订购年终抄底促销!火爆开抢>> MyEclipse最新版下载 本教程向用户展示了使用关联的Web项目创建Web片段项目的机制。用户还可以获得要检查的示例项目。在本教程中,用户将学习如...

电池盒
37分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部