web前端第三节html-标签

tml标签是组成页面的基本元素

声明：元素和标签其实是一样的，不同的叫法而已!

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。

标签的结束方式有半闭式标签和全闭式标签

半闭式标签比如<meta/><br/><hr/>，由于这些标签不需要有内容或者所传递信息已经表达过，因此，结束方式是直接在标签末尾以/结束

全闭式标签比如：<title></tiltle>,<p></p>,<h1></h1>,他们需要在标签内填写内容，为区别内容所属标签，因为需要<标签>内容</标签>全闭式标签来表示

Html5元素我们暂不涉及，因为牵涉到兼容性问题，并非所有的浏览器都支持html5元素，win7系统在全球依然占据着，而win7默认的浏览器是IE 9(通常，不计较各种sp版本)，IE9对html5支持并不友好

块级元素：

div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre

块级元素默认占据空间的一行

例如:

<!DOCtype html>
<html>
<head>
	<title>web前端实战教程html标签</title>
</head>
<body>
<div>我是第一个div</div>
<div>我是第二个div</div>
</body>
</html>

浏览器效果如下:

dispaly:block

内联元素占据了元素的实际占用空间而非整个空间的一行

我们将上面2个div元素换成a元素，浏览器效果如下：

display:inlien

我们从firebug盒模型属性出可以看出，a标签是一个内联元素，占据了一定的宽度和高度，如果它是一个块状元素，那么它占用的宽度就是100%,因此，在实战环境中，特别是制作按钮菜单和图文块的时候，我们可以把a标签的display属性设置为block,来保证整个链接区域的宽度被100%占用。

为什么使用语义化标签？

我们知道html标签有很多，比如：title,h1,p,span,div,strong,em,form,input等等，我可以使用<div>content</div>显示内容为content，使用<span>content</span>可以达到同样的效果啊。使用语义化标签原因有两点：

特殊的元素有特别的功能：比如a标签，它可以通过标签属性href=”XXX”实现链接功能，form标签可以实现表单提交功能等。
为了页面结构清晰，浏览器在解析页面的时候，是根据不同的元素类型来解析网页的，我们肉眼看到的显示效果，仅仅是效果。一个合适使用标签元素布局结构清晰生产的网页，对爬虫来说是非常友好的，SEO提高的同时大大利于我们的网页排名！

通常标签 <strong> 替换加粗标签 <b> 来使用， <em> 替换 <i>标签使用。

然而，这些标签的含义是不同的： <b> 与<i> 定义粗体或斜体文本。 <strong> 或者 <em> 意味着你要呈现的文本是重要的，所以要突出显示。

现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。更多的时候,我们把i标签使用成背景icon的元素来使用，比如：

些事HTML5培训认为在学习HTML5前应该做好的准备，欢迎参考指正：

为什么学习HTML5？
软硬件环境
介绍HTML5
环境搭建
常见问题解决
掌握技能需求
为什么学习HTML5？
1：自从2010年HTML5正式推出以来，立即收到了世界各大浏览器的支持，根据直接各大知名媒体的评论，新的web时代，HTML5时代马上就要到来。
2：跨平台运行
3：硬件要求低
4：flash之外的选择
软硬件环境
1：硬件：双核、2G内存
2：软件：windows、Mac OS X、Linus
HTML5
HTML是用来描述网页的一种语言
超文本标记语言（Hyper Text Markup Language）
HTML不是编程语言、是一种标记语言
HTML5新特性：
用于绘画的canvas标签
用于媒介回放的video和audio元素
对本地离线储存的更好支持
新的特殊内容元素
如：article、footer、header、nav、section
新的表单控件
如：canlender、date、time、email、url、search
浏览器的支持
Safari、Chrome、Firefox、Opera、IE9等等基本支持了HTML5
环境搭建
常用：WebStorm、notepad++、Eclipse、text sublime、Dreamweaver等等
推荐：Intellij IDEA
常见问题解决方式：
1：寻求问题根源
2：查看参考文档
W3C标准
3：参考示例
4：常见问题通过搜索引擎搜索
5：问题反馈
掌握技能需求
HTML5
XHTML
CSS3
javascript
jQuery:
jQuery-UI
jQuery-Mobie

HTML5培训认为相对其他例如iOS开发，HTML5前端相对还是简单的，有兴趣的朋友可以到蓝鸥郑州HTML5培训试听。

原文：http://hn.lanou3g.com/2016/lo_news_0108/877.html

、什么是 HTML5？

HTML5 是最新的 HTML 标准；
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件；
HTML5 拥有新的语义、图形以及多媒体元素；
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建；
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行；

二、HTML5的一些新特性

用于绘画的 canvas 元素；
用于媒介回放的 video 和 audio 元素；
对本地离线存储的更好的支持；
新的特殊内容元素，比如article、footer、header、nav、section；
新的表单控件，比如 calendar、date、time、email、url、search；

三、video 元素

<video> 元素提供了播放、暂停和音量控件来控制视频；
<video> 元素也提供了 width 和 height 属性控制视频的尺寸；
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的；

video 元素的三种视频格式：

Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件；
MPEG4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件；
WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件；

video 元素的属性：

src：要播放的视频的 URL；
width：设置视频播放器的宽度；
height：设置视频播放器的高度；
autoplay：自动播放；
controls：如果出现该属性，则向用户显示控件，比如播放按钮；
loop：循环播放；
preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性；

video 元素的方法：

pause()：暂停当前播放的视频；
play()：开始播放视频；
load()：重新加载视频元素；
canPlayType()：检测浏览器是否能播放指定的视频类型；
addTextTrack()：向音频/视频添加新的文本轨道；

四、audio元素

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素；
<audio>元素能够播放声音文件或者音频流；

audio元素的三种音频格式：

MP3：适用于Internet Explorer、Chrome、Safari 等浏览器；
Wav：适用于Firefox、Opera等浏览器；
Ogg：适用于Firefox、IE9、Chrome 浏览器；

audio元素的属性：

src：要播放的音频的 URL；
autoplay：自动播放；
controls：如果出现该属性，则向用户显示控件；
loop：循环播放；
preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性；

audio元素的方法：

pause()：暂停当前播放的音频；
play()：开始播放音频；
load()：重新加载音频；

五、canvas 元素

什么是 Canvas？

HTML5 的 canvas 元素通过 JavaScript 在网页上绘制图像，元素本身并没有绘制能力，它只是图形容器，必须使用脚本来绘制图形；
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法；
创建一个画布

<canvas id="myCanvas" width="200" height="100"></canvas>

Canvas在HTML5 中的新属性有：

height：设置 canvas 的高度；
width：设置 canvas 的宽度；

六、绘制三角形

getElementById()：可返回对拥有指定 ID 的第一个对象的引用；

getContext()：返回一个用于在画布上绘图的环境，2d表示二维绘图；

beginPath()：开始一条路径，或重置当前的路径；

moveTo()：把路径移动到画布中的指定点，不创建线条。

lineTo()：添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）；

closePath()：创建从当前点到开始点的路径；

strokeStyle属性：设置或返回用于笔触的颜色、渐变或模式；

stroke()：会实际地绘制出路径；

fillStyle属性：设置或返回用于填充绘画的颜色、渐变或模式；

fill()：填充当前的图像（路径），默认颜色是黑色；

//空心三角形
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(100,50);
cxt.lineTo(75,100);
cxt.closePath();//填充或闭合 需要先闭合路径才能画
cxt.strokeStyle="red";
cxt.stroke();
//实心三角形
cxt.beginPath();
cxt.moveTo(150,50);
cxt.lineTo(250,50);
cxt.lineTo(200,150);
cxt.closePath();
cxt.fillStyle="#89E1BF"
cxt.fill();

演示图

图1

七、使用Canvas绘制一个空心圆

arc()：创建弧或曲线（用于创建圆或部分圆）；

<body>
 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var can=document.getElementById("myCanvas") 
 var ctx=can.getContext("2d"); //创建context对象
 ctx.beginPath();//标志开始一个路径
 ctx.arc(100,100,50,0,2*Math.PI);//在canvas中绘制圆形
 ctx.stroke()
 </script>

演示图

图2

八、绘制一个实心圆

<body>
 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d"); 
 ctx.beginPath();
 ctx.arc(100,100,50,0,2*Math.PI);
 ctx.fillStyle="#deffff";
 ctx.fill();
 ctx.strokeStyle="red"
 ctx.stroke();
 </script>

演示图

图3

九、绘制一个空心矩形

strokeRect()：绘制矩形（不填色），笔触的默认颜色是黑色；

<body>
 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var can=document.getElementById("myCanvas"); //获得画板数据
 var ctx=can.getContext('2d'); //获得笔刷
 ctx.strokeStyle="blue"; //设置线条颜色
 ctx.strokeRect(100,100,100,100); //线条画矩形
 </script>

演示图

图4

十、绘制一个实心的矩形

fillRect()：绘制“已填色”的矩形，默认的填充颜色是黑色；

<body>
 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas");//获得画板数据
var ctx=can.getContext('2d'); //获得笔刷
 ctx.strokeStyle="blue"; //设置线条颜色
 ctx.fillStyle="#ddedee"; //填充矩形
 ctx.fillRect(100,100,100,100);
 ctx.strokeRect(100,100,100,100);//线条画矩形
 </script>

演示图

图5

在线咨询

上一篇：微信悄悄更新，聊天界面进行调整
下一篇：JSP网站建设表格标记，结合JSP技术实现网站表格标

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商