文档章节

我所了解的HTML5

行走迪拜
 行走迪拜
发布于 2016/03/02 18:58
字数 1798
阅读 8
收藏 0
点赞 1
评论 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

HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员 ⋅ 04/25 ⋅ 0

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

Chrome将在年底前彻底屏蔽Adobe Flash

各家软件厂商对于Adobe Flash的态度越来越强硬,包括谷歌在内。现在谷歌拿出了目前最强硬的手段来遏制Adobe Flash的继续推行,那就是屏蔽Adobe Flash内容。 谷歌日前计划在今年年底之前将HTM...

玄学酱 ⋅ 05/18 ⋅ 0

Safari无痕模式下,storage被禁用问题

前言 Safari开启无痕模式后,localStorage和sessionStorage为空,对其进行set操作也会报错,也就是说这种情况下,storage是被禁止使用了。接下来说一下解决方法。 解决方案 我们项目框架上的...

ITgecko ⋅ 05/02 ⋅ 0

H5本地存储一

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可...

刘梓航 ⋅ 2014/10/27 ⋅ 2

前端新人关注的Web前端饱和性分析?前端面试必知必会的十点!

现在前端市场是不是已经饱和了?巴巴巴巴巴...... 还有:XXX行业是否已经饱和? angular1.5是不是已经被淘汰? 前端还有前途吗? bootstrap为什么被称为垃圾框架?等等等 不是博主不友好,只...

web前端05 ⋅ 06/15 ⋅ 0

html5-web本地存储

在html5中为我们提供了一种本地缓存机制,它将取代我们的cookie,并且它是不会随浏览器发会我们的服务器端的。我们可以采用js在客户端自由的操作本地缓存。html5中缓存主要有localStorage,和...

zting科技 ⋅ 2017/01/10 ⋅ 0

HTML5 Web 存储

HTML5 web 存储,一个比cookie更好的本地存储方式。 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据。 早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速...

wybo521 ⋅ 2016/01/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

磁盘管理—逻辑卷lvm

4.10-4.12 lvm 操作流程: 磁盘分区-->创建物理卷-->划分为卷组-->划分成逻辑卷-->格式化、挂载-->扩容。 磁盘分区 注: 创建分区时需要更改其文件类型为lvm(代码8e) 分区 3 已设置为 Linu...

弓正 ⋅ 9分钟前 ⋅ 0

Spring源码解析(六)——实例创建(上)

前言 经过前期所有的准备工作,Spring已经获取到需要创建实例的 beanName 和对应创建所需要信息 BeanDefinition,接下来就是实例创建的过程,由于该过程涉及到大量源码,所以将分为多个章节进...

MarvelCode ⋅ 29分钟前 ⋅ 0

a href="#"

<a href="#">是链接到本页,因为你有的时候需要有个链接的样式,但是又不希望他跳转,这样写,你可以把这个页面去试试

颖伙虫 ⋅ 36分钟前 ⋅ 0

js模拟栈和队列

栈和队列 栈:LIFO(先进后出)一种数据结构 队列:LILO(先进先出)一种数据结构 使用的js方法 1.push();可以接收任意数量的参数,把它们逐个推进队尾(数组末尾),并返回修改后的数组长度。 2....

LIAOJIN1 ⋅ 36分钟前 ⋅ 0

180619-Yaml文件语法及读写小结

Yaml文件小结 Yaml文件有自己独立的语法,常用作配置文件使用,相比较于xml和json而言,减少很多不必要的标签或者括号,阅读也更加清晰简单;本篇主要介绍下YAML文件的基本语法,以及如何在J...

小灰灰Blog ⋅ 44分钟前 ⋅ 0

IEC60870-5-104规约传送原因

1:周期循环2:背景扫描3:自发4:初始化5:请求6:激活7:激活确认8:停止激活9:停止激活确认10:激活结束11:远程命令引起的返送信息12:当地命令引起的返送信息13:文件传送20:响应总召...

始终初心 ⋅ 57分钟前 ⋅ 0

【图文经典版】冒泡排序

1、可视化排序过程 对{ 6, 5, 3, 1, 8, 7, 2, 4 }进行冒泡排序的可视化动态过程如下 2、代码实现    public void contextLoads() {// 冒泡排序int[] a = { 6, 5, 3, 1, 8, 7, 2, ...

pocher ⋅ 今天 ⋅ 0

ORA-12537 TNS-12560 TNS-00530 ora-609解决

oracle 11g不能连接,卡住,ORA-12537 TNS-12560 TNS-00530 TNS-12502 tns-12505 ora-609 Windows Error: 54: Unknown error 解决方案。 今天折腾了一下午,为了查这个问题。。找了N多方案,...

lanybass ⋅ 今天 ⋅ 0

IDEA反向映射Mybatis

1.首先在pom文件的plugins中添加maven对mybatis-generator插件的支持 ` <!-- mybatis逆向工程 --><plugin><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-ma......

lichengyou20 ⋅ 今天 ⋅ 0

4.10/4.11/4.12 lvm讲解 4.13 磁盘故障小案例

准备磁盘分区 fdisk /dev/sdb n 创建三个新分区,分别1G t 改变分区类型为8e 准备物理卷 pvcreate /dev/sdb1 pvcreate /dev/sdb2 pvcreate /dev/sdb3 pvdisplay/pvs 列出当前的物理卷 pvremo...

Linux_老吴 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部