html开发笔记03- 标题标签

、标题标签：

使用 <h1> </h1> 一对标签来表示，标签标签有大有效h后的数字越小字体越大。

二、标题标签使用方法：

三、标题的特性：

1、标题标签是 <h2> 这类的，都是标题，这个叫语义。

2、标题从 h1 至 h...7 等，有很多个，数字越小字体越大。

3、标题文字在网页中会独占一行，，且字体自动加粗。

4、标题的标签同样是以 <> 开头，</> 结尾。

5、无论是否和正文写在一起都是自动独占一行。

6、不是标题的文字，不要乱用标题标签。

四、源代码演示：

<!DOCTYPE html>

<head>

<title>我的第二个网页</title>

</head>

这是正文和标题混合写的效果<h5>这是h5标题</h5>

</body>

</html>

果想开发一个网站，除了要精通后端开发语言（如：php）外，还要精通HTML代码。那么，什么是HTML呢？HTML是一种超文本标记语言，它包含有众多的标签，我们可以通过这些标签，把不同的internet资源（如：文字、图片、视频、音频、表单等等）整合在一个统一的文档中，这就形成了我们可以看得见的网页。那么，HTML都有哪些常用的标签呢？

一、文档类型声明。

html5文档类型声明：<!doctype html>

html4文档类型声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主标签。

这个标签是html最外层的标签，所有其它的HTML标签都要放在这个标签的内部。

<html>

</html>

三、双标签和单标签。

在HTML标签中，有的标签是成双成对的，如：<html></html>（如下图）；而有的标签是单个的，如：<hr>横线标签。

四、head头部标签。

head头部有以下几种常用标签：

meta：主要提供有关页面的元信息。

link：用来定义文档与外部资源的关系，最常用的是调用CSS样式文件。

title：页面标题的标签。

script：用来调用JS文件或JS代码。当然，script标签也可以在body主体中使用。

五、body主体标签。

1、块级标签。

块级标签的特性是：独自占有一行；标签的高与宽、边距可以修改；没有设置宽与高时，默认继承父标签。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端页面显示的效果如下图：

常用的块级标签有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、内联标签。

内联标签与块级标签不同，它不能独自占有一行，会与其它内联标签在同一样展示；内联标签的高与宽、上下边距是不能修改的，它里面的文字或图片有多高，它就是多高。例如如下代码：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS样式代码跟块级标签的例子是一样的，而显示的效果就不一样了，宽与高、上下边距没有效果。如下图：

常用的内联标签有：span、a、b、strong、i、em 。

3、内联块级标签。

内联块级标签，既有一些内联标签的特性，也有一些块级标签的特点：它不能独自占有一行，但是可以修改它的宽度和高度。例如下面这段代码：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS样式代码跟块级标签的那个例子仍然是一样的，图片的宽和高、上下边距修改成功，而2个图片不能独自占有一行，而是在同一行。如下图：

常用的内联块级标签有：img、input、textarea。

4、区域标签。

所谓区域标签，就是主要用来划分布局页面区域的。如：头部、主体内容、侧边栏、底部。这样划分的好处是：让页面布局更加清晰明了。

常用的区域标签有：header（头部）、footer（底部）、nav（导航）、aside（侧边栏）、section（主体）、article（独立内容）。

5、表单标签。

这个表单标签我们也是会经常用到的，如：登录网站的时候、提交数据的时候。如下图的评论表单：

?表单常用的标签有：form、input、select、option、textarea 。

以上就是我们开发网页时，会常用到的HTML标签。当然，HTML标签远不止这些，尤其是html5出来后，新增了许多的新标签。但是，有些标签在我们开发中很少用到，所以，这里就没有做相应的介绍。

录：

HTML5新结构标签

HTML5新其他标签

HTML5新input类型

HTML5新属性

HTML5高级应用

html4和html5对比：

Html4代表示例：

</div>

Html5代码示例：

</section>

HTML5新结构标签：

<header></header>页头

<footer></footer>页脚

<nav></nav>导航

<section></section>内容区块

<article></article>文章区块

<aside></aside>article之外的信息

<hgroup></hgroup>标题组

<figure></figure>数据组

<figcaption></figcaption>数据组标题

<header></header>用法

</header>

</header>

<p>文章正文内容</p>

</article>

<footer></footer>用法

文章主体

文章脚注

</footer>

</article>

<ul>

</ul>

</footer>

<nav></nav>用法

<nav>

<ul>

</ul>

</nav>

<section></section>用法

</section>

<article></article>用法

</header>

</footer>

</article>

<aside></aside>用法

</article>

<hgroup></hgroup>用法

</hgroup>

</header>

</article>

<figure></figure>用法

</figure>

新元素标签追加样式：

说明：因为很多浏览器还未支持html5新元素，须对新元素追加如下说明

//追加block说明

article,aside,dialog,figure,footer,header,legend,nav,section{display:block}

另：ie8前的浏览器不支持css方法追加，须用如下方法：

document.createElement(“header”);

document.createElement(“nav”);

document.createElement(“article”);

document.createElement(“footer”);

</script>

HTML5新其他标签：

<video></video>视频

<audio></audio>音频

<mark></mark>标记

<time></time>时间

<wbr></wbr>软换行

<canvas></canvas>绘图

<video></video>用法

<audio></audio>用法

<embed></embed>用法

<mark></mark>用法

<p>谢谢您光临本站 <mark>段先生</mark>。</p>

<time></time>用法

<wbr></wbr>用法

<p>学好网页设计必须要学会的软件有：

<wbr />photoshop<wbr />dreamweaver<wbr />flash。

</p>

<canvas></canvas>用法

语法：

注：canvas标签只是图形容器，您必须使用脚本来绘制图形。

使用范例：

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

</script>

HTML5新input类型：

<input type=“email” />e-mail地址文本框

<input type=“url” />url地址文本框

<input type=“number” />数值文本框

<input type=“range” />数值范围文本框

日期相关类型：

HTML5新属性：

表单相关属性

链接相关属性

其他属性

全局属性

表单相关属性

autocomplete属性

autofocus属性自动获得焦点属性

placeholder属性提示信息属性

form属性表单声明属性

required属性内容检验属性

链接相关属性

<a><area>新加media属性

<area>新加hreflang属性

<base>新加target属性

其他属性

<ol>新加reversed属性

<menu>新加type和label属性

全局属性

可编辑内容属性contentEditable

页面可编辑属性designMode

隐藏元素属性hidden

拼写检查属性spellcheck

焦点获取属性tabindex

HTML5高级应用

绘图应用canvas

多媒体控制

表单验证

绘图应用canvas

用canvas绘制图形

用canvas绘制渐变色

用canvas绘制变形图形

绘制图像

动画效果

用canvas绘制图形——绘制矩形

获取canvas元素

获取2d图形（获取上下文）

设定绘图样式fillStyle,strokeStyle

设定线宽lineWidth

用canvas绘制图形——绘制路径

获取canvas元素

获取2d图形（获取上下文）

创建路径beginPath()

创建圆形路径arc(x,y,radius,startAngle,endAngle,anticlockwise)

关闭路径closePath()

用canvas绘制图形——绘制圆形

var canvas=document.getElementById("mycanvas");

var ctx=canvas.getContext("2d");

ctx.arc(150,100,100,0,(Math.PI/180)*360,true);

ctx.fillStyle="rgba(255,0,0,0.4)";

ctx.fill();

用canvas绘制图形——绘制三角

方法moveTo（x,y）,lineTo（x,y）：

var obj=document.getElementById("mycanvas");

var context=obj.getContext("2d");

context.strokeStyle="red";

context.moveTo(0,0);

context.lineTo(10,100);

context.lineTo(130,100);

context.lineTo(0,0);

context.stroke();

用canvas绘制图形——绘制弧线

方法bezierCurveTo（cp1x,cp1y,cp2x,cp2y,x,y)）

var obj=document.getElementById("mycanvas");

var context=obj.getContext("2d");

context.strokeStyle="red";

context.moveTo(0,0);

context.bezierCurveTo(10,0,100,0,100,100);

context.stroke();

用canvas绘制渐变色——绘制线性渐变

方法createLinearGradient(xStart,yStart,xEnd,yEnd);

方法addColorStop(offset,color);

var obj=document.getElementById("mycanvas");

var context=obj.getContext("2d");

var objLg=context.createLinearGradient(0,100,500,100);

objLg.addColorStop(0,"red");

objLg.addColorStop(0.5,"green");

objLg.addColorStop(1,"blue");

context.fillStyle=objLg;

context.fillRect(0,0,500,300);

用canvas绘制渐变色——绘制放射渐变

方法createRadialGradient(x0,y0,r0,x1,y1,r1);

方法addColorStop(offset,color);

var obj=document.getElementById("mycanvas");

var context=obj.getContext("2d");

var rg=context.createRadialGradient(50,50,0,50,50,50);

context.createR

rg.addColorStop(0,"red");

rg.addColorStop(1,"green");

context.fillStyle=rg;

context.fillRect(0,0,150,150);

用canvas绘制变形图形——平移

方法：translate(x,y);

var obj=document.getElementById("mycanvas");

var context=obj.getContext("2d");

context.translate(100,150);

context.fillStyle="red";

context.fillRect(0,0,200,200);

用canvas绘制变形图形——缩放

方法：scale(x,y);

var obj=document.getElementById("mycanvas");

var context=obj.getContext("2d");

context.scale(2,2);

context.fillStyle="red";

context.fillRect(0,0,10,10);

用canvas绘制变形图形——旋转

方法：rotate (angle);

var obj=document.getElementById("mycanvas");

var context=obj.getContext("2d");

context.rotate(Math.PI/180*5);

context.fillStyle="red";

context.fillRect(0,0,100,100);

绘制图像

方法：drawImage(image,x,y,w,h)

var obj=document.getElementById("mycanvas");

var context=obj.getContext("2d");

var image=new Image();

image.src="img.jpg";

context.drawImage(image,0,0,500,300);

图像平铺

方法：createPattern(image,type)

var obj=document.getElementById("mycanvas");

var context=obj.getContext("2d");

var img=new Image();

img.src="img.jpg";

var ptrn=context.createPattern(img,"repeat");

context.fillStyle=ptrn;

context.fillRect(0,0,2000,2000);

请私信我回复“666”，为严哥打Call~，还有更多惊喜哦~

....................................................................

我的微信公众号：UI严选 —越努力，越幸运

在线咨询

上一篇：2个方面，带你深入了解电视端焦点运动设计
下一篇：Eclipse安装和安装Python插件

您的项目需求

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

整合营销服务商

html开发笔记03- 标题标签

、标题标签：

二、标题标签使用方法：

三、标题的特性：

一、文档类型声明。

二、html主标签。

三、双标签和单标签。

四、head头部标签。

五、body主体标签。

您的项目需求