HTML5基础知识
1.HTML5基础知识介绍
1.1什么是HTML5
1.HTML5是超文本标记语言
2.2014年才定制完HTML5的标准，历时8年
3.HTML5的设计目的是为了在移动设备上支持多媒等功能
1.2为什么要用HTML5
1.跨平台
利用HTML5编写的UI界面能运行在所有拥有浏览器的平台
HTML5的运行平台：浏览器
2.HTML5的新增了很多的功能，比如video、audio和canvas...
3.但是HTML5不能完成一些特定的功能，比如：拍照、访问相册....
1.3如何使用HTML5
1.自己编写大量的HTML5代码
2.使用现成的HTML5框架
sencha-touch: 基于JavaScript编写的Ajax框架,该框架是世界上第一个基于HTML5的Mobile App框架
phoneGap: 是一个基于HTML，CSS和JavaScript的Mobile App框架，是创建移动跨平台移动应用程序的快速开发平台。业界很多主流的移动开发框架均源于PhoneGap。较著名的有Worklight、appMobi、WeX5等
jQuery mobile: 是jQuery 框架的一个组件（而非jquery的移动版本）。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台
Bootstrap: 是目前最受欢迎的前端框架（移动先行）。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷
1.4手机APP的开发模式
1> 原生（ 纯 Object C / Java ）
2> 纯HTML5
3> 原生+HTML5
4> React Native
1.5为什么要学习HTML5
1>跨平台：运行的环境是浏览器
2>目前的一种趋势：移动web时代
3> 增加面试、开发竞争力
1.6公司职位的划分
1> 平面设计师 作图、切图、HTML、CSS
2> 前端工程师HTML、CSS、Javascript、模板技术
3> 后台工程师 服务器（Java、.Net、PHP）、数据库 、WEB
4>移动工程师（iOS/android）: 手机UI界面（OC、Java、HTML5）、跟服务器交互
1.7开发工具
1>Android
eclipse 、android studio
2>iOS
3>HTML5
1）.后端：eclipse、MyEclipse
2）.美工：Dreamweaver
3）.前端：WebStorm 神器,默认集成各种各样的插件,配置完美
1.8Web开发新时代
1.Web1.0 主流技术:HTML+CSS
2.Web2.0 主流技术:HTML+CSS +Ajax ( JavaScript/DOM/异步数据请求 )
3.Web3.0 主流技术:HTML5+CSS3
-
HTML5亮点: Canvas 、HTML5音视频 、Web存储 、多线程处理...
-
CSS3 亮点: 设计动画、 2D变形、 N多新特性...
2.HTML常用的标签
2.1网页的组成
一个功能完整的网页，一般由3部分组成
-
HTML 做网页的具体内容和结构
-
CSS 做网页的样式（美化网页最重要的一块）
-
JavaScript 做网页的交互效果，比如对用户鼠标事件做出响应HTML\CSS\JavaScript
2.2HTML..
-
什么是HTML
HTML的全称是HyperText Markup Language，超文本标记语言,其实它就是文本。
由浏览器负责将它解析成具体的网页内容。
比如，浏览器会将左边的HTML源代码代码 转换为右边的网页内容
-
HTML的组成跟XML类似，HTML由N个标签（节点、元素、标记）组成
-
HTML语法非常松散，目前的最新版是5.0，也就是HTML 5
-
网页输出HelloWord
<!--根标签--> <html> <!--头部--> <head> <!--网页的标题--> <title>Hello World ! 你好</title> <!--编码：UTF-8 GBK GB2312--> <meta charset="utf-8"> </head> <!--身体--> <body> <div>Hello World !</div> </body> </html>
2.3*常见的HTML标签
-
标题：h1、h2、h3、h4、h5、h6
-
段落：p
-
表单：input
-
图片：img
-
链接：a
-
换行：br
-
列表：ul、ol、li
-
容器：div、span（用来容纳其他标签）
-
横线：hr
-
表格：table、tr、td
学习资料：http://www.w3school.com.cn/
-
1.标题：h1、h2、h3、h4、h5、h6
<h1>我是H1标签</h1> <h2>我是H2标签</h2> <h3>我是H3标签</h3> <h4>我是H4标签</h4> <h5>我是H5标签</h5> <h6>我是H6标签</h6>
-
2.段落：p
<p>我是段落我是段落我是段落我是段落我是段落我是段落</p> <p>我是段落我是段落我是段落我是段落我是段落我是段落</p> <p>我是段落我是段落我是段落我是段落我是段落我是段落</p>
-
3.表单：input
<!--表单标签：输入框--> <input > <input placeholder="默认的占位符"> <input value="我是默认的文字"> <input type="color" > <input type="text" > <input type="checkbox" > <input type="file" >
-
4.图片：img
<!--图片标签--> <!-- src: 相对路径：图片资源来自于项目: ./ ../ ../../ 绝对路径：图片资源来自于网络：http:// file:// ftp:// alt: 图片加载失败时显示的文字 --> <img src="https://www.baidu.com/img/bd_logo1.png" alt="加载失败" width="100px"> <img src="image/0.jpg" alt="加载失败" width="50%">
-
5.链接：a
<!--a标签--> <!-- href 链接的地址 target 打开页面的方式:_blank 使用新的窗口打开;_self 使用当前窗口打开; _parent 在父亲窗口中打开; _top 回到网页的顶部 --> <a href="http://www.baidu.com" target="_blank">我是超链接</a>
-
6.换行：br
<br>
-
7.列表：ul、ol、li
<!--列表标签--> <ul> <li>我是无序列表</li> <li>我是无序列表</li> <li>我是无序列表</li> <li>我是无序列表</li> </ul> <ol type="A"> <li>我是有序列表</li> <li>我是有序列表</li> <li>我是有序列表</li> <li>我是有序列表</li> </ol>
-
容器：div、span（用来容纳其他标签）
<!--容器标签--> <div>我是容器标签</div> <div>我是容器标签</div> <div>我是容器标签</div> <span>我是容器标签</span> <span>我是容器标签</span> <span>我是容器标签</span>
-
横线：hr
<hr> -
表格：table、tr、td
单标签：不是容器 格式: <>
双标签：是容器 格式：< > </>
3.HTML5新增的标签.
HTML5新增了27个标签,废弃了16个标签.
3.1*结构性标签
负责Web上下文结构的定义，确保HTML文档，包括：
article 文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件)
header 标记头部区域内容, 注意：与 head 不一样
footer标记脚部区域内容
section 区域章节表述
nav菜单导航,链接导航
案例:新闻详情页面练习
<!--一篇新闻--> <article> <!--新闻的头部--> <header> </header> <!--内容部分--> <div> <!--第一章节--> <section> </section> <!--第二章节--> <section> </section> </div> <!--尾部--> <footer> </footer> </article>
3.2块级性标签
完成Web页面区域的划分，确保内容的有效分隔，包括：
aside注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容，例如：
figure对多个标签组合并展示,常与figcaption联合使用, 例如：
code表示一段代码
dialog人与人之间对话,包含dt和dd两个组合元素（dt用于表示说话者、dd用于表示说话者的内容）
3.3行内语义性标签
完成Web页面具体内容的引用和表述，丰富展示内容，包括：
meter特定范围内的数值，如工资、数量、百分比
time时间值
progress进度条，可用max、value进行控制
video视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式
audio音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式
3.4交互性标签
功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础，包括：
details表示一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示 , 例如：
datagrid控制客户端数据与显示，可用于动态脚本及时更新
menu用于交互菜单
command用来处理命令按钮
4.CSS样式简介
4.1什么是CSS
-
它用来控制HTML标签的样式，在美化网页中起到非常重要的作用
4.2CSS的编写格式
键值对形式，比如:
<!-- 单值 -->
color: red;
background-color: blue;
font-size: 20px;
<!-- 复合值 -->
border:3px solid red;冒号:左边的是属性名，冒号:右边的属性值
CSS属性值：1）单值 ; 2）复合值。
4.3*CSS的3种书写形式..
-
行内样式：（内联样式）直接在标签的style属性中书写
<!-- 给body标签设计样式 --> <body style="color: red;"> </body>
-
页内样式：在本网页的style标签中书写。style标签一般放在head标签中
<!-- style是样式的标签，一把放在header标签中 --> <style> body { color: red; } </style>
-
外部样式：在单独的CSS文件中写，然后在网页中用link标签引用。link标签一般在放在head标签中
<!-- rel 默认值是stylesheet。代表引用的文件与网页的关系（也可以说是引用文件的格式） href 引用CSS的文件 --> <link rel="stylesheet" href="index.css">
-
CSS的属性遵循的规律
1）叠加原则（例如：外部样式和页内样式叠在一起）
2）就近原则（例如：当外部样式和页内样式出现同样的样式时，就使用最近的样式）
5.CSS选择器..
5.1CSS的两大重点
-
选择器 通过选择器
找到对应的标签设置样式
-
属性 通过属性的复杂叠加才能
做出漂亮的网页
5.2*选择器
作用：选择对应的标签，为之添加样式
1.标签选择器
根据标签名找到标签，为之添加样式, 比如：
2.类选择器
根据标签 中的类名找到标签，为之添加样式, 比如：
3.id选择器
根据标签中的id找到标签，为之添加样式, 比如：
4.并列选择器
为多个标签添加同样的样式, 比如：
5.复合选择器
根据指定标签中的[类名]找到标签，为之添加样式, 比如：
6.后代选择器
找到指定标签中所有指定的子标签，为之添加样式, 比如：
7.直接后代选择器
找到指定标签中指定的直接子标签，为之添加样式, 比如：
8.相邻兄弟选择器
根据指定标签中找到相邻的标签，为之添加样式, 比如：
9.属性选择器
根据标签中指定的属性找到标签，为之添加样式, 比如：
图1：
图2：
图3：
10.伪类选择器
为某个标签添加伪类选着器，为之添加样式, 比如：
格式: 选择器:属性{} , 如下：
xxx:focus{
}
11.伪元素选择器
为某个标签添加伪元素选着器，为之添加样式, 比如：
格式: 选择器:属性{} , 如下：
xxx:first-letter{
}
注意：如果效果不出来，就是选择器写错了
6.CSS选择器的优先级别..
-
同一个级别选择器的针对性越强，它的优先级就越高
复合选着器: 权值=等于各个权值相加
原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
-
优先级排序
important（1000） > 行内样式（999）> id > 类 > 标签 | 伪类 | 属性选择 |伪元素 > 通配符 > 继承
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04-CSS选着器优先级别</title> <style> /*通配符选着器:0*/ *{ color: red; } /*标签选着器:1*/ div{ color: green; } /*复合选着器：1+100=101*/ div#main{ color: blue; } /*类选择器:10*/ .test1{ color: yellow; } /*属性选着器：10*/ div[class]{ color: purple; } /*权值最高选着器：1000*/ div{ color: antiquewhite !important; } </style> </head> <body> <div id="main" class="test1">测试优先级别</div> </body> </html>
7.HTML的标签类型..
7.1标签显示的类型
HTML有N多标签，根据显示的类型，主要可以分为3大类
1块级标签
块级标签独占一行的标签能随时设置宽度和高度（比如div、p、h1、h2、ul、li）
2行内标签（内联标签）
行内标签（内联标签）多个行内标签能同时显示在一行
, 宽度和高度取决于内容的尺寸（比如span、a、label）
3行内-块级标签
行内-块级标签（内联-块级标签）多个行内-块级标签可以显示在同一行
, 能随时设置宽度和高度（比如input、button、img）
7.2修改标签显示的类型
CSS中有个display属性，能修改标签的显示类型：
none：隐藏标签
block：让标签变为块级标签,主要针对行内标签和行内-块级标签
inline：让标签变为行内标签,主要针对块级标签
inline-block：让标签变为行内-块级标签（内联-块级标签）
主要针对块级标签 和行内标签
注意：
行内-块级标签只能改变成块级标签
8.CSS标签中的属性..
CSS有N多属性，根据继承性，主要可以分为2大类：
-
可继承属性: 父标签的属性值会传递给子标签一般是
文字控制属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>可继承属性</title> <style> div{ background-color: red; width: 300px; height: 350px; /*下面的两个属性会被p标签继承*/ font-size: 40px; color: white; } p{ background-color: green; } </style> </head> <body> <div> 我是div标签 <p>我是p标签</p> </div> </body> </html>
-
不可继承属性: 父标签的属性值不能传递给子标签一般是
区块控制属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>可继承属性</title> <style> div{ background-color: red; /*不可给子标签继承的属性*/ width: 300px; height: 300px; margin-top: 50px; } p{ background-color: green; } </style> </head> <body> <div> 我是div标签 <p>我是p标签</p> </div> </body> </html>
8.1可继承属性
可继承属性:父标签的属性值会传递给子标签一般是文字控制属性
-
所有标签可继承父亲下面属性：
-
内联标签可继承父亲下面属性：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif , Arial;
-
块级标签可继承父亲下面属性：
-
列表标签可继承父亲下面属性：
list-style、list-style-type、list-style-position、list-style-image
8.2不可继承属性
不可继承属性: 父标签的属性值不能传递给子标签一般是区块控制属性
display、margin、border、padding、background、background-size
height、min-height、max-height、width、min-width、max-width
overflow、position、left、right、top、bottom、z-index
table-layout、vertical-align
page-break-after、page-bread-before
unicode-bidi
9.盒子模型..
9.1盒子模型
网页上的每一个标签都是一个盒子, 比如:（div , p , h1 , a , img ....）
每个盒子都有四个属性:
-
内容（content）
盒子里装的东西网页中通常是指
文字和图片 -
填充（padding，内边距）
怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料
-
边框（border）：
盒子本身
-
边界（margin，外边距）
盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出
9.2IE盒子模型
结论：
-
默认
盒子的大小=内容+填充+边框
9.3标准盒子模型
结论：
-
默认
盒子的大小=内容( 默认的box-sizing : content-box ; )
思考：ie盒子与标准盒子的大小计算方式不一样？怎样做适配？
手动指定盒子大小计算的标准：
盒子大小统一使用：盒子大小=内容+填充+边框
标准盒子模型的解决方法：改 盒子box-sizing
的值
1.box-sizing 默认值为content-box ,盒子的大小=内容
2.将box-sizing设计为‘border-box’,盒子的大小=内容+填充+边框
9.4盒子（标签）CSS属性
网页上的每一个标签都是一个盒子, 比如:（div , p , h1 , a , img ....）
1.控制内容（content）
2.控制填充（padding, 内边距）
图1-属性：
图2-例子：
3.控制边框（border）
-
border: 设计边框的width，style，color
-
border-width
-
border-style
-
border-color
简写例子：
p{ border：red 5px solid }
4.控制边界（margin, 外边距 )
图1-属性
图2-例子：
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01-盒子模型</title> <style> /*给所有的标签设计*/ *{ margin: 0; padding: 0; } div{ background-color: red; /*盒子的大小*/ width:300px; height:300px; /*内边距*/ padding: 20px 0 0 20px; /*边框*/ border: 4px solid green; /*边界*/ margin: 30px 0px 0px 50px; /*改变盒子大小计算方式*/ box-sizing: border-box; /*控制盒子最大值和最小值*/ max-width: 300px; min-width: 100px; } </style> </head> <body> <div> 我是一个盒子 </div> </body> </html>
10.CSS3新增特性..
-
RGBA透明度
RGB(红色R+绿色G+蓝色B),
RGBA则在其基础上增加了Alpha通道，可用于设置透明值(0 - 1)块 -
阴影
box-shadow text-shadow
-
圆角
border-radius
-
边框图片 border-image
-
动画 transform:
-webkit-transition 过度效果
-webkit-transform-origin 参照坐标
-webkit-transform 动画效果
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02-CSS3新增特性</title> <style> /*标签的高度*/ div{ /*盒子的大小*/ width:150px; height:60px; margin: 10px 0; /*圆角效果*/ border-top-left-radius: 100px; border-bottom-right-radius: 100px; } /*设计渐变*/ .test1{ background-color: rgba(255,0,0,1.0); } .test2{ background-color: rgba(255,0,0,0.8); } .test3{ background-color: rgba(255,0,0,0.6); } .test4{ background-color: rgba(255,0,0,0.4); } .test5{ background-color: rgba(255,0,0,0.2); } div:hover{ /*透明度：0完全不透明 1完全透明*/ opacity: 0.5; /* * 设计块阴影 * box-shadow: 10px 10px; 右边和底部有阴影 * box-shadow: -10px -10px; 左边边和顶部有阴影 * box-shadow: -10px -10px blue; 阴影的颜色为蓝色 * box-shadow: -10px -10px 30px blue; 阴影边界模糊30px */ box-shadow: -10px -10px 30px blue; /*圆角效果*/ border-radius: 70px; } p{ font-size: 100px; color: orange; /*文字阴影*/ text-shadow: -2px -2px 10px blue; } </style> </head> <body> <div class="test1">1</div> <div class="test2">2</div> <div class="test3">3</div> <div class="test4">4</div> <div class="test5">5</div> <P>Android 大神班</P> </body> </html>
13.总结：
-
常见的HTML标签：
-
HTML5新增的标签：
-
CSS的3种书写方式：
-
CSS的选着器 , 选着器的优先级别：
-
HTMl的标签类型：
-
HTML常用的CSS属性：
-
盒子模型：
-
CSS3新增的属性：
上一篇： HTML5基础知识回顾