一 、HTML5基础知识介绍
1.1 什么是HTML5?
- 2014年完成HTML5标准的制定，历时8年
- 移动先行
1.2 为什么要用HTML5?
- 跨平台
- 只要有浏览器，就能运行HTML5
1.3 如何使用HTML5？
- 自己编写大量的HTML5代码
- 成熟的第三方框架
- sencha-touch
- phoneGap
- jQuery Mobile
1.4 手机APP开发的模式
- 原生（纯OC、纯swift）
- 纯HTML5
- 原生+HTML5
1.5 为什么要学习HTML5？
- 未来的趋势
- 增加面试、开发竞争力
- Android程序员 Java、服务器、HTML5
1.6 公司职位划分？
- 平面设计师:作图、切图、HTML、CSS
- 前端工程师:HTML5、CSS3、JavaScript、模板技术
- 后台工程师:服务器（Java、PHP、.net）、数据库开发
- 移动工程师:手机UI界面（OC、HTML5）、跟服务器交互
1.7 开发工具？
- Andriod:eclipse、MyEclipse、Andriod studio
- iOS:XCode
- HTML5:eclipse、MyEclipse(后端喜爱),DreamWaver(美工喜爱),WebStorm(大神编辑器、前端喜爱)
1.8 Web开发新时代
- Web1.0:主流技术：HTML+CSS
- Web2.0:主流技术：Ajax(JavaScript/DOM/异步数据请求)
- Web3.0:主流技术：HTML5+CSS3，HTML5亮点：Canvas、HTML5音视频、Web存储、GeoLocation、Works多线程，CSS3亮点：设计动画、2D变形、N多新特性
二、常用的HTML标签
2.1 网页的组成
- HTML:网页的具体内容和结构
- CSS:网页的样式
- JavaScript:网页的交互效果、比如对用户鼠标事件作出相应,
- 参考网址：http://www.w3cschool.com
2.2 HTML
- 什么是HTML？超文本标记语言
- HTML的组成？N个标签（节点、元素、标记）组成
2.3 常见的HTML标签
- 标题标签: h1、h2、h3、h4、h5...规律:h1-h6(依次由大到小, 例如：
<h1>我是H1</h1>
<h2>我是H2</h2>
<h3>我是H3</h3>
<h4>我是H4</h4>
<h5>我是H5</h5>
<h6>我是H6</h6>
<h1>我是H1</h1>
<h2>我是H2</h2>
<h3>我是H3</h3>
<h4>我是H4</h4>
<h5>我是H5</h5>
<h6>我是H6</h6>
- 段落标签:p, 例如：
<!--段落标签-->
<p>我是段落标签</p>
<p>我是段落标签</p>
- 换行标签:br, 例如
<input placeholder="1111"><br>
- 容器标签:div、span 相同点:相当于OC中的UIView 不同点:div是块级标签,span是行内标签, 例如：
<div>我是div</div>
我是div
- 表格标签:table、tr、td 例如：
- 列表标签：ul、ol、li ol是有序列表,ul是无序列表开发中常用ul，例如：
<!--列表标签-->
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
<div>ddddd</div>
</ul>
<ol type="A" reversed>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
<ol type="A" reversed>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
- 图片标签:img src(引入的资源) alt(文字描述图片), 例如：
1111
- 表单标签:input type:类型,(color,file,date...) value:input 元素的,链接标签
<!--表单标签-->
<input placeholder="1111"><br>
<input type="color "value="222222"> <br>
<input type="button"> <br>
<input type="date"> <br>
<input type="file"> <br>
input
- a :target(规定在何处打开链接文档), href(规定链接指向的页面的 URL)
<a href="http://www.baidu.com" target="_blank">
</a>
- 横线标签:hr
- 按钮标签:button,type(按钮的类型button,reset,submit),value(规定按钮的初始值)
2.4 注意事项
href和src的区别
<p>href是引用,相当于iOS中的import,不是必需的.(比如<link>) </p>
<p> src是引入,是必需的,没有这个资源,标签就用不起来.(比如<audio>,<video>) </p>双标签和单标签
<p>双标签(首尾呼应,内部可以层层嵌套)<HTML中大部分是双标签></p>
<p>单标签(<meta>,...)</p>
三、HTML5新增的标签
- 结构性标签
<p>article:规定独立的自包含内容</p>
<p>header:标签定义文档的页眉（介绍信息）</p>
<p>footer:文档或节的页脚,页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等</p>
<p>section:标签定义文档中的节,章节、页眉、页脚或文档中的其他部分</p>
<p>nav:标签定义导航链接的部分</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个papi酱，老总讲了又讲，丽人丽妆咋这么急？</title>
</head>
<body>
<article>
<header>
<h2>一个papi酱，老总讲了又讲，丽人丽妆咋这么急？</h2>
<h4>分类 :互联网</h4>
</header>
<section>
<div>丽人丽妆快炒过头了。从上海西南一家非常安静的公司突变为娱乐小子，后续一定会有负面作用，尤其是财经PR上。</div>
<div>看它借助PAPI酱炒作用心，除了这类人物具有爆款价值外，可能还有借机传播公司价值、后续融资、IPO的用意。当然，阻击对手的用心似乎也在流露。</div>
</section>
<footer>
<div>
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
</div>
</footer>
</article>
</body>
</html>
- 级块性标签
<p>aside</p>
<p>figure:标签规定独立的流内容（图像、图表、照片、代码等等）</p>
<p>code:不建议使用,建议使用样式表</p>
<p>dialog:行内语义性标签</p>
<p>meter:标签定义已知范围或分数值内的标量测量,磁盘用量、查询结果的相关性，等等</p>
<p>time:目前所有主流浏览器都不支持 <time> 标签</p>
<p>progress:标签标示任务的进度（进程）,结合 <progress> 标签与 JavaScript 一同使用，来显示任务的进度。注意:<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）。如需表示度量衡，请使用 <meter> 标签代替</p>
<p>video:src(要播放的视频的 URL),controls(向用户显示控件,比如播放器),oop(当媒介文件完成播放后再次开始播放),preload(视频在页面加载时进行加载，并预备播放,默认值是autoplay),audio,同上</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<meter value="30" max="100" min="20">9999</meter>
<progress max="100" value="40"></progress>
<audio src="../image/music.m4a" controls="controls"></audio>
<video src="../image/BigBuck.m4v" controls="controls"></video>
</body>
</html>
- 交互性标签
<p>detail</p>
<p>datagrid</p>
<p>menu:所有主流浏览器均不支持 menu 元素</p>
<p>command:目前只有 Internet Explorer 支持 <command> 标签</p>
四、CSS样式简介
- 行内样式:内联样式）直接在标签的style属性中书写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="background-color: aqua">
<div style="color: blue; font-size: 18px ; background-color: antiquewhite">iiiiii</div>
<p style="background-color: beige; font-size: 28px; border: 5px dashed azure">我是段落</p>
<div>rongqi</div>
<p>pppppp</p>
</body>
</html>
- 页内样式:在本网页的style标签中书写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>业内样式</title>
<style>
div{
color: aquamarine;
font-size: 30px;
border: red solid;
}
p{
color: blue;
font-size: 80px;
background-color: azure;
}
</style>
</head>
<body>
<div>rongqi</div>
<p>pppppp</p>
</body>
</html>
- 外部样式:在单独的CSS文件中书写，然后在网页中用link标签引用
<p>css</p>
div {
color: aquamarine;
font-size: 30px;
border: red dashed;
}
p{
color: blue;
font-size: 80px;
background-color: azure;
}
<p>html</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<link rel="stylesheet" href="./css/01-index.css">
</head>
<body>
<div>rongqi</div>
<p>pppppp</p>
</body>
</html>
css
五、CSS选择器
- 标签选择器:根据标签名找到对应的标签
- 类选择器:根据类名找到对应的标签
- id选择器:根据id名找到对应的标签
- 并列选择器:用于多个标签之间有相同的样式
- 复合选择器:用于精准的定位
- 后代选择器:用于标签嵌套标签
- 直接后代选择器:格式: div>a
- 相邻兄弟选择器:格式:div+p
- 属性选择器:格式:div[name]
- 伪类:格式:div:hover
- 伪元素:格式:div:after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
并列选择器
div, span{
color: red;
}
标签选择器
p{
color: green;
}
类选择器
.high{
color: grey;
}
id选择器
#main{
color: blue;
}
复合选择器
div.test {
color: orange;
}
后代选择器
div p{
background-color: brown;
}
直接后代选择器
div.test>p{
background-color: blue;
}
属性选择器
div[name]{
color: red;
}
div[name="111"]{
color: black;
}
伪类选择器
input:focus {
outline: none;
width: 400px;
height: 60px;
font-size: 30px;
}
input:hover{
outline: none;
width: 200px;
height: 30px;
font-size: 20px;
}
</style>
</head>
<body>
<div>并列选择器</div>
<span>并列选择器</span>
<p>标签选择器</p>
<p class="high">类选择器</p>
<div id="main">id选择器</div>
<div class="test">复合选择器</div>
<div class="test">
<p>直接后代选择器</p>
<div>
<p>后代选择器</p>
</div>
</div>
<div name="0000">属性选择器</div>
<div name="111">属性选择器</div>
<input placeholder="请输入密码"><br>
</body>
</html>
CSS选择器
六、CSS选择器的优先级别
- 选择器的针对性越强，它的优先级就越高
<p>important > 内联 > id > 类 | 伪类 | 伪元素 | 属性选择 > 标签> 通配符 > 继承</p> - 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优先级别</title>
<style>
div{
font-size: 20px;
color: black;
}
.main{
font-size: 10px;
color: grey;
}
.test{
font-size: 5px;
color: blue;
}
*{
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<div class="main test">77777</div>
</body>
</html>
<p>结果：blue</p>
七、HTML的标签类型
块级元素具有以下特点： ①总是在新行上开始，占据一整行； ②高度，行高以及外边距和内边距都可控制； ③宽带始终是与浏览器宽度一样，与内容无关； ④它可以容纳内联元素和其他块元素。<\div>、<p>、<\h1>、<\h6>、<\ol>、<\ul>、<\dl>、<\table>、<\address>、<\blockquote> 、<\form>
行内元素的特点： ①和其他元素都在一行上； ②高，行高及外边距和内边距部分可改变； ③宽度只与内容有关； ④行内元素只能容纳文本或者其他行内元素,<\a>、<\span>、<\br>、<\i>、<\em>、<\strong>、<\label>、<\q>、<\var>、<\cite>、<\code>
行内-块级标签:多个行内-块级标签可以显示在同一行,能随时设置宽度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
#test1 {
display: inline;
}
#test2 {
display: inline-block;
color: orangered;
}
#test3 {
display: block;
}
</style>
</head>
<body>
<!--行内-->
<div id="test1">000000</div>
<div id="test1">111111</div>
<!--行内-块级-->
<div id="test2">
222222
<div>3333</div>
<div>4444</div>
</div>
<div id="test2">333333</div>
<!--块-->
<input type="text" placeholder="44444" id="test3">
<input type="text" placeholder="55555" id="test3">
</body>
</html>
display
八、CSS属性
- 可继承属性:父标签的属性值会传递给子标签,一般是文字控制属性
- 不可继承属性:父标签的属性值不能传递给子标签,一般是区块控制属性
九、盒子模型
- 内容(content)
- 填充(padding) :上左下右 或 (上下)(左右)
- 边框(border）：border-width(边框宽度) border-style(边框样式) border-color(边框颜色)
- 边界(margin)：上左下右 或 (上下)(左右)
- RGBA透明度
- 块阴影与文字阴影：box-shadow，text-shadow
*圆角：border-radius - 形变：transform transform-origin transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
*{
margin: 0px;
}
div{
width: 300px;
height: 300px;
padding: 10px 20px 30px 40px;
border:10px solid;
margin: 20px 60px 40px 100px;
background-color: rgba(255,0,0,0.5);
display: inline-block;
border-radius: 20px;
box-shadow: 10px 20px 10px green;
text-shadow: 10px 20px 1px green;
}
</style>
</head>
<body>
<div>这是一个盒子!></div>
</body>
</html>
盒子
盒子
十、标签的居中
- 水平居中:
<p>行内标签 行内-块级标签text-align:center</p>
<p>块级标签 margin:0 auto</p> - 垂直居中 line-height == height
- 定位
<p>父position:relative 子position:absolute</p>
<p>top:50%;left:50%;</p>
<p>transform:translate(-50%, -50%)</p>
<p> 居中</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
#test0 {
background-color: red;
width: 600px;
height: 200px;
/*块级标签水平居中*/
margin: 0 auto;
/*块级标签行内居中*/
text-align: center;
}
/*行内*/
#test1 {
display: inline;
background-color: orange;
text-align: center;
/*行内标签设置高度和宽度无效,高度和宽度根据内容而定*/
width: 200px;
height: 100px;
}
/*行内-块级标签*/
#test2 {
display: inline-block;
color: orangered;
background-color: orange;
/*行内-块级标签设置高度和宽度无效,高度和宽度根据内容而定*/
width: 200px;
height: 100px;
}
/*块级标签*/
#test3 {
display: block;
margin: 0 auto;
background-color: orange;
}
/*块级标签*/
#test4 {
/*标签水平居中*/
margin: 0 auto;
/*内容水平居中*/
text-align: center;
width: 200px;
height: 200px;
background-color: #2b669a;
/*垂直居中*/
line-height: 200px;
}
</style>
</head>
<body>
<div id="test0">
<!--行内-->
<div id="test1">test1-a</div>
<div id="test1">test1-b</div>
<!--行内-块级-->
<div id="test2">
test2-a
<div>test2-b</div>
<div>test2-c</div>
</div>
<div id="test2">test2-d</div>
</div>
<!--块-->
<input type="text" placeholder="test3-a" id="test3">
<input type="text" placeholder="test-b" id="test3">
<div id="test4">test4</div>
</body>
</html>
居中
<p>定位</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
#test1 {
width: 300px;
height: 200px;
background-color: grey;
/*相对距离*/
position: relative;
margin: 60px 140px;
}
.test2 {
width: 200px;
height: 100px;
background-color: red;
/*绝对距离*/
position: absolute;
/*相对父类test1的距离*/
left: 30px;
top: 70px;
}
</style>
</head>
<body>
<div id="test1">
test1
<div class="test2">test2</div>
</div>
</body>
</html>
