HTML5(七)-SVG基础入门

明：SVG 虽然也是标签，但它不是 HTML5，标题加了 HTML5 只是为了与 canvas 放到一起。

一、为什么要学 SVG ?

SVG 意为可缩放矢量图形（Scalable Vector Graphics），使用 XML 格式定义矢量图形。其他的图像格式都是基于像素的，但是 SVG 没有单位的概念，它的20只是表示1的20倍，所以 SVG 绘制的图形放大或缩小都不会失真。

与其他图像比较，SVG 的优势有以下几点：

SVG 可以被多个工具读取和修改。
SVG 与其他格式图片相比，尺寸更小，可压缩性强。
SVG 可任意伸缩。
SVG 图像可以随意地高质量打印。
SVG 图像可以添加文本和事件，还可搜索，适合做地图。
SVG 是纯粹的 XML，不是 HTML5。
SVG是W3C标准

二、SVG 形状元素

2.1、svg 标签

SVG 的代码都放到 svg 标签呢，SVG 中的标签都是闭合标签，与html中标签用法一致。svg的属性有：

有width和height，指定了svg的大小。

eg：画一条直线，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body style="height:600px;">
 <svg width="300" height="300">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>    
 </svg> 
</body>
</html>

上述 svg 设置的宽高没有带单位，此时默认是像素值，如果需要添加单位时，除了绝对单位，也可以设置相对单位。

viewBox 属性

使用语法：<svg viewBox=" x1,y1,width,height "></svg>

四个参数分别是左上角的横纵坐标、视口的宽高。表示只看SVG的某一部分，由上述四个参数决定。

使用 viewBox 之后，相当于svg整体大小不变，只能看到 viewBox 设置部分，视觉上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代码可以直接嵌入到 html 页面中，也可以通过 html 的embed、object、iframe嵌入到html中。嵌入的时候嵌入的是 SVG 文件，SVG 文件必须使用 .svg 后缀。分别介绍各种方法如何使用？

2.2.1、embed 嵌入：

使用语法：<embed src="line.svg" type="image/svg+xml"></embed>

src是SVG文件路径，type 表示 embed 引入文件类型。

优点：所有浏览器都支持，并允许使用脚本。

缺点：不推荐 html4 和 html 中使用，但 html5 支持。

2.2.2、object 嵌入：

使用语法：<object data="line.svg" type="image/svg+xml"></object>

data 是 SVG 文件路径，type 表示 object 引入文件类型。

优点：所有浏览器都支持，支持 html、html4 和 html5。

缺点：不允许使用脚本。

2.2.3、iframe 嵌入：

使用语法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>

src是 SVG 文件路径，width、height、frameborder 设置的大小和边框。

优点：所有浏览器都支持，并允许使用脚本。

缺点：不推荐 html4 和 html 中使用，但 html5 支持。

2.2.4、html中嵌入：

svg 标签直接插入 html 内容内，与其他标签用法一致。

2.2.5、连接到svg文件：

使用 a 标签，直接链接到 SVG 文件。

使用语法：<a href="line.svg">查看SVG</a>

三、SVG形状元素

3.1、线 - line

使用语法：
<svg width="300" height="300" >  
 <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>

使用line标签创建线条，(x1,y1)是起点，(x2,y2)是终点，stroke绘制黑线，stroke-width是线宽。

3.2、矩形 - rect

//使用语法：
<svg width="300" height="300" >
<rect 
 width="100" height="100"  //大小设置
 x="50" y="50"  //可选 左上角位置，svg的左上角默认(0,0)
 rx="20" ry="50" //可选 设置圆角
 stroke-width="3" stroke="red" fill="pink" //绘制样式控制
></rect>
</svg>

上述参数 width、height是必填参数，x、y是可选参数，如不设置的时候，默认为(0,0)，也就是svg的左上角开始绘制。rx、ry是可选参数，不设置是矩形没有圆角。fill定义填充颜色。

3.3、圆形 - circle

// 使用语法
<svg width="300" height="300" >
 <circle 
  cx="100" cy="50" // 定义圆心 ，可选
  r="40" // 圆的半径
  stroke="black" stroke-width="2" fill="red"/> //绘制黑框填充红色
</svg>

上述(cx,xy)定义圆心的位置，是可选参数，如果不设置默认圆心是（0,0）。r是必需参数，设置圆的半径。

3.4、椭圆 - ellipse

椭圆与圆相似，不同之处在于椭圆有不同的x和y半径，而圆两个半径是相同的。

// 使用语法
<svg width="300" height="300" >
 <ellipse 
  rx="20" ry="100" //设置椭圆的x、y方向的半径
  fill="purple" // 椭圆填充色
  cx="150" cy="150" //设置椭圆的圆心 ，可选参数
 ></ellipse>
</svg>

上述椭圆的两个rx、ry两个方向半径是必须参数，如果rx=ry就表示是圆形，（cx,cy）是椭圆的圆心，是可选参数，如果不设置，则默认圆心为（0,0）。

3.5、折线 - polyline

// 使用语法
<svg width="300" height="300" style="border:solid 1px red;">
  <!-- 绘制出一个默认填充黑色的三角形 -->
 <polyline 
  points=" //点的集合
   0 ,0, // 第一个点坐标
   100,100, // 第二个点坐标
   100,200 // 第三个点坐标
    " 
  stroke="green" 
 ></polyline>
<!-- 绘制一个台阶式的一条折线 -->
 <polyline 
  points="0,0,50,0,50,50,100,50,100,100,150,100,150,150" 
  stroke="#4b27ff" fill="none"
 ></polyline>
</svg>

上述代码执行结果如图所示：

需要注意的是 points 中包含了多个点的坐标，但不是一个数组。

3.6、多边形 - polygon

polygon 标签用来创建不少于3个边的图形，多边形是闭合的，即所有线条连接起来。

// 使用语法
<svg width="300" height="300" style="border:solid 1px red;">
 <polygon 
  points="
    0,0,   //多边形的第一点
   100,100,  //多边形的第二点
    0,100  //多边形的第三点
  " 
	stroke="purple"
	stroke-width="1"
	fill="none"
 ></polygon>
</svg>

polygon绘制的时候与折线有些类似，但是polygon会自动闭合，折线不会。

3.7、路径 - path

path 是SVG基本形状中最强大的一个，不仅能创建其他基本形状，还能创建更多其他形状，如贝塞尔曲线、2次曲线等。

点个关注，下篇更精彩！

/准备echarts脚本文件

官网下载最新版本：https://echarts.apache.org/zh/download.html

开源库下载：https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js

//5.33改成最新版本的版本号就可以下载最新版本了

下载第三方水球库插件：https://github.com/ecomfe/echarts-liquidfill

打开软件新建一个页面添加一个容器组件用于绑定图表对象组件名称随便填写后面要用到

2.添加一个事件来加载图表脚本，我用的的页面加载时，也可以添加后台服务组件，通过后台服务组件事件：服务响应时来调用脚本可以很方便的绑定数据

3.添加刚才下载echarts脚本文件

添加第三方水球插件：

引入脚本

一个简单的例子

要创建液体填充图表，您需要有一个类型为'liquidFill'. 一个基本选项可能是：

option = { series: [{ type: 'liquidFill', data: [0.6] }] };

多波

很容易创建一个带有多个波浪的液体填充图表，或者表示多个数据，或者提高图表的视觉效果。

option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3]}]};

这将在 60%、50%、40% 和 30% 的位置创建一个带有波浪的图表。

颜色和不透明度

要为液体填充图表系列设置颜色，请设置color为颜色数组。要设置不透明度，请使用itemStyle.opacity和itemStyle.emphasis.opacity用于普通样式和悬停样式。

option = { series: [{ type: 'liquidFill', data: [0.5, 0.4, 0.3], color: ['red', '#0f0', 'rgb(0, 0, 255)'], itemStyle: { opacity: 0.6 }, emphasis: { itemStyle: { opacity: 0.9 } } }] };

您还可以通过以下方式设置单个数据项的颜色和不透明度：

option = { series: [{ type: 'liquidFill', data: [0.5, 0.4, { value: 0.3, itemStyle: { color: 'red', opacity: 0.6 }, emphasis: { itemStyle: { opacity: 0.9 } } }] }] };

静波

为了防止波浪向左或向右移动，您可以简单地设置waveAnimation为false。要禁用波浪上升的动画，请将animationDuration和设置animationDurationUpdate为 0。

option = { series: [{ type: 'liquidFill', waveAnimation: false, animationDuration: 0, animationDurationUpdate: 0, data: [0.6, 0.5, 0.4, 0.3] }] };

静止波

您可以将设置amplitude为 0 以产生静止波。

option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], amplitude: 0, waveAnimation: 0 }] };

在这种情况下建议设置waveAnimation为 false 以禁用动画以考虑性能。

改变单个波

要更改单个波形，请覆盖数据项中的选项。

option = { series: [{ type: 'liquidFill', data: [0.6, { value: 0.5, direction: 'left', itemStyle: { color: 'red' } }, 0.4, 0.3] }] };

背景样式

您可以使用 backgroundStyle 选项来设置背景形状的笔触、填充样式。

option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], backgroundStyle: { borderWidth: 5, borderColor: 'red', color: 'yellow' } }] };

轮廓样式

要隐藏轮廓，只需设置outline.show为false。

option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], outline: { show: false } }] };

形状

水填充图表的形状。有可能：

//默认形状：'circle',圆形 'rect'正方形, 'roundRect'圆角正方形, 'triangle'三角形, 'diamond'菱形, 'pin'气球形, 'arrow'多边三角形;
'container'：完全填满容器的形状。
'path://'以.开头的 SVG 路径

options = [{ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], shape: 'diamond' }] }];

option = {
    series: [{
        type: 'liquidFill',
        data: [0.5, 0.4, 0.3, 0.2],
        shape: 'container',
        outline: {
            show: false
        }
    }]
};

option = { series: [{ type: 'liquidFill', data: [0.6, 0.55, 0.4, 0.25], radius: '60%', outline: { show: false }, backgroundStyle: { borderColor: '#156ACF', borderWidth: 1, shadowColor: 'rgba(0, 0, 0, 0.4)', shadowBlur: 20 }, shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z', label: { position: ['38%', '40%'], formatter: function() { return 'ECharts\nLiquid Fill'; }, fontSize: 40, color: '#D94854' } }] };

动画

一般来说，液体填充图表中有两种类型的动画。
第一种是初始动画，具有升浪的效果。此动画的缓动方法由控制，animationEasing其持续时间由控制animationDuration。
第二种是更新动画，通常在数据变化、波高变化时使用。它们由animationEasingUpdate和控制animationDurationUpdate。
例如，要禁用提升动画并将更新动画时间设置为 2 秒cubicOut，可以使用以下选项：

var mytubiao = echarts.init(document.getElementById("mytb"))

option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
animationDuration: 0,
animationDurationUpdate: 2000,
animationEasingUpdate: 'cubicOut'
}]
};
mytubiao.setOption(option);
setTimeout(function () {
mytubiao.setOption({
series: [{
type: 'liquidFill',
data: [0.8, 0.6, 0.4, 0.2]
}]
})
}, 3000);

更改文本

默认情况下，液体填充图表的文本标签显示第一个数据的百分比。例如，对于带有 data 的图表[0.6, 0.5, 0.4, 0.3]，默认文本是60%.

要更改文本，您可以使用label.formatter，它可以设置为字符串或函数。

如果是字符串，{a}则表示系列名称、{b}数据名称和{c}数据值。

option = { series: [{ type: 'liquidFill', name: 'Liquid Fill', data: [{ name: 'First Data', value: 0.6 }, 0.5, 0.4, 0.3], label: { formatter: '{a}\n{b}\nValue: {c}', fontSize: 28 } }] };
此示例的标签文本为'Liquid Fill\nFirst Data\nValue: 0.6'.

formatter这与作为函数使用的结果相同：

option = { series: [{ type: 'liquidFill', name: 'Liquid Fill', data: [{ name: 'First Data', value: 0.6 }, 0.5, 0.4, 0.3], label: { formatter: function(param) { return param.seriesName + '\n' + param.name + '\n' + 'Value:' + param.value; }, fontSize: 28 } }] };
文本位置默认在中心。label.position可以设置为'inside', 'left', 'right', 'top', 'bottom', 或水平和垂直位置，例如['10%', '20%']，表示'10%'向左（由控制label.align，可以是'left'、'center'或'right'）和'20%'顶部（由控制label.baseline，可以是'top'、'middle'或'bottom'）。
阴影
默认情况下，波浪和轮廓上有阴影。以下是如何更改它们。

option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], itemStyle: { shadowBlur: 0 }, outline: { borderDistance: 0, itemStyle: { borderWidth: 5, borderColor: '#156ACF', shadowBlur: 20, shadowColor: 'rgba(255, 0, 0, 1)' } } }] };

工具提示

添加工具提示：
option = { series: [{ type: 'liquidFill', data: [0.6], name: 'Liquid Fill' }], tooltip: { show: true } };

点击事件

要在 wave 上添加点击事件：

chart.setOption(option); chart.on('click', function() { console.log(arguments); // do something useful here });

与任何其他图表类型一样，上述代码只会触发波事件。如果要跟踪整个画布或特定元素上的事件，可以将侦听器添加到 zrender，例如：

chart.getZr().on('click', function() { console.log(arguments); });

不可交互

要使元素（例如，波浪）不可交互，只需设置silent为true.

option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], silent: true }] };

API

液体填充图表的默认选项是：

{

data: [],

color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'],

center: ['50%', '50%'],

radius: '50%',

amplitude: '8%',

waveLength: '80%',

phase: 'auto',

period: 'auto',

direction: 'right',

shape: 'circle',

waveAnimation: true,

animationEasing: 'linear',

animationEasingUpdate: 'linear',

animationDuration: 2000,

animationDurationUpdate: 1000,

outline: {

show: true,

borderDistance: 8,

itemStyle: {

color: 'none',

borderColor: '#294D99',

borderWidth: 8,

shadowBlur: 20,

shadowColor: 'rgba(0, 0, 0, 0.25)'

}

backgroundStyle: {

color: '#E3F7FF'

itemStyle: {

opacity: 0.95,

shadowBlur: 50,

shadowColor: 'rgba(0, 0, 0, 0.4)'

label: {

show: true,

color: '#294D99',

insideColor: '#fff',

fontSize: 50,

fontWeight: 'bold',

align: 'center',

baseline: 'middle'

position: 'inside'

emphasis: {

itemStyle: {

opacity: 0.8

}

数据{(数字|对象)[]}

每个数据项的值应介于 0 和 1 之间。

数据项也可以是配置单个项的选项的对象。

option = {

series: [{

type: 'liquidFill',

data: [0.6, {

value: 0.5,

itemStyle: {

color: 'red'

}

}, 0.4, 0.3]

}]

};

这定义了具有第二波红色的图表。

颜色 {string[]}

波浪颜色。

形状 {字符串}

水填充图表的形状。它可以是默认符号之一：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'. 或者，以 . 开头的 SVG 路径'path://'。

中心{字符串[]}

图表的位置。第一个值是 x 位置，第二个值是 y 位置。每个值都可以是一个相对值，例如'50%'，它是相对于容器宽度和高度的较小值的，也可以是一个绝对值，例如100px。

半径 {字符串}

图表的半径，可以是相对值，如'50%'，相对于容器宽度和高度的较小值，也可以是绝对值，如100px。

幅度{数}

波的幅度，以像素或百分比为单位。如果它是百分比，它是相对于直径的。

波长 {字符串|数字}

波的波长，可以是相对值，例如'50%'，它是相对于直径的，也可以是绝对值，例如'100px'或100。

阶段{编号}

波的相位，以弧度表示。默认情况下'auto'，当每个波的相位Math.PI / 4大于前一个时，它被设置为。

周期 {number|'auto'|function}

向前移动一个波长所需的毫秒数。默认情况下，'auto'当前面的波速度较大时，它被设置为。

它也可以是格式化程序功能。

option = {

series: [{

type: 'liquidFill',

data: [0.6, 0.5, 0.4, 0.3],

radius: '70%',

phase: 0,

period: function (value, index) {

// This function is called four times, each for a data item in series.

// `value` is 0.6, 0.5, 0.4, 0.3, and `index` is 0, 1, 2, 3.

return 2000 * index + 1000;

}

}]

}

方向 {字符串}

波浪移动的方向，应该是'right'或'left'。

waveAnimation {boolean}

是否启用向左或向右移动的波浪。

动画缓动 {字符串}

初始动画的缓动方法，当波浪从底部开始上升时。

animationEasingUpdate {字符串}

其他动画的缓动方法，例如，当数据值改变和波浪位置改变时。

动画持续时间 {数字}

初始动画持续时间，以毫秒为单位。

animationDurationUpdate {数字}

其他动画持续时间，以毫秒为单位。

大纲.show {布尔}

是否显示轮廓。

大纲.borderDistance {number}

边界和内圈之间的距离。

outline.itemStyle.borderColor {字符串}

边框颜色。

outline.itemStyle.borderWidth {number}

边框宽度。

outline.itemStyle.shadowBlur {number}

轮廓阴影模糊大小。

outline.itemStyle.shadowColor {字符串}

轮廓阴影颜色。

backgroundStyle.color {字符串}

背景填充颜色。

backgroundStyle.borderWidth {字符串}

背景描边线宽。

backgroundStyle.borderColor {字符串}

背景描边线宽。

backgroundStyle.itemStyle.shadowBlur {number}

背景阴影模糊大小。

backgroundStyle.itemStyle.shadowColor {字符串}

背景阴影颜色。

backgroundStyle.itemStyle.opacity {number}

背景不透明度。

itemStyle.opacity {number}

波浪不透明度。

itemStyle.shadowBlur {number}

波浪阴影宽度。

itemStyle.shadowColor {字符串}

波浪阴影颜色。

强调.itemStyle.opacity {number}

悬停时波浪不透明度。

标签.show {布尔}

是否显示标签文本。

label.color {字符串}

在背景上显示时文本的颜色。

label.insideColor {字符串}

在波形上显示时文本的颜色。

label.fontSize {数字}

标签字体大小。

标签.fontWeight {字符串}

标签字体粗细。

标签对齐{字符串}

文本对齐，应该是'left', 'center', 或'right'.

label.baseline {字符串}

文本垂直对齐，应为'top'、'middle'或'bottom'。

标签位置 {string|string[]}

文本位置默认在中心。label.position可以设置为'inside', 'left', 'right', 'top', 'bottom', 或水平和垂直位置，例如['10%', '20%']，表示'10%'左侧和'20%'顶部。

么是 HTML5？

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。那什么又是HTML呢？HTML 是用来描述网页的一种语言。HTML的上一个版本诞生于1999年。自从那以后，Web 世界已经经历了巨变。HTML 指的是超文本标记语言： Hyper Text Markup Language。HTML 不是一种编程语言，而是一种标记语言。而标记语言是一套标记标签 (markup tag)。HTML 使用标记标签来描述网页，HTML 文档包含了HTML 标签及文本内容，因此HTML文档也叫做 web 页面。

HTML5 是如何创建的？

HTML5 是 W3C 与 WHATWG 合作的结果。W3C 致的是World Wide Web Consortium，也就是万维网联盟。而WHATWG 致 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年的时候，双方决定进行合作，来创建一个新版本的 HTML。

为 HTML5 建立的一些新规则

新特性基于 HTML、CSS、DOM 以及 JavaScript；减少对外部插件的需求（比如 Flash）；更优秀的错误处理；更多取代脚本的标记；HTML5 应该独立于设备；开发进程应对公众透明。

为 HTML5 建立的一些新特性

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

HTML 编辑器

专业的 HTML 编辑器来编辑 HTML：Adobe Dreamweaver、Microsoft Expression Web、CoffeeCup HTML Editor、Sublime Text 。不过，我们同时推荐使用文本编辑器来学习 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我们相信，使用一款简单的文本编辑器是学习 HTML 的好方法，高手们都是用记事本写的~~~~

而本人使用的是Adobe Dreamweaver（下文中提到简称DW），大家可以自己尝试各种编辑器，再选择自己喜欢的。本教程是实用性类，不会长篇大论阐述理论，会留一些问题供大家去理解，不了解的话百度谷歌。

还需要的软件就是浏览器的准备，大家肯定知道什么是浏览器啦，现在谷歌，微软新版浏览器以及360等众多浏览器都是支持查看网页源代码的。鼠标右键选择查看源代码即可。

学习资料推荐：

在本文中，需要理解的点，在下面讲解中可能会混着讲，所以大家要看完教程之后自己去总结。

HTML文档是什么样
如何新建一个HTML文档
怎么打开HTML文档

首先打开DW，新建一个HTML文件，就是后缀是html结尾的文件。

用DW这样的HTML专业软件有个好处就是新建的文件已经自动写好的一个HTML文件的基本结构。文档标题在页面中间上部的标题处可以修改，也可以保存后自己再修改。

保存名字为教程1，可以看到文件是这样的。

之后，我们尝试用记事本打开这个文件。

用记事本打开的样子。跟DW打开是一样。

在body部分输入文字，内容随意，然后保存。

再用浏览器打开，我这边用的谷歌浏览器。打开之后可以看到如下图所示。相信大家对HTML文件已经有了一点点概念了。

再回到DW打开，可以看到，文件下边是代码，上边是结果。如果只看到代码，这是因为在页面左上角传视图的方式选择。选择拆分即可。

在DW中新建一个文件之后，你其实就已经看到一个HTML的基本结构了，这是我们刚才新建的教程1

红色的矩形框内部的内容，我们称为<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

查看完整网页声明类型 DOCTYPE 参考手册。

<!DOCTYPE> 声明之后就是 <html> .....</html> 中间的那些我们暂时忽略。这两个尖括号之间的内容就告诉了浏览器，这段内容是html页面的内容。

在html页面中，哪些是被显示的，哪些是代码？相信通过第一节大家已经有所认识了，在HTML中，标签是通过"< >"表现的。而每一个标签都以对应的“</ >”来结束，如<html></html>,<head></head>,<title></title>.....。(当然也有例外，之后再说)

接下来就是在 <html> ，</html>之间编辑整个页面的头部和身体了.

头部用<head></head>来表示，之间的内容一般包含meta 和title，meta大家可以自己去了解，如果没有这一块，显示可能会出现乱码。一些预先的设置都会放在头部里，样式表等，就像是C语言程序中的头文件。title标签就是整个网页的标题。

编辑好了头部，就进入页面的身体啦。用body标签来表示很直观，也不需要刻意去记了。在实例1中body的内容很简单，只有一行文字，之后的内容也就是教大家如何将body丰富起来~~

掌握三个标签

1.HTML 标题<h1>-<h6>

2.HTML 段落<p>

3.HTML <br/>

HTML 标题

在 HTML 文档中，标题很重要。

标题是通过 <h1> - <h6> 标签进行定义的.

<h1> 定义最大的标题。 <h6> 定义最小的标题。

看看实例效果

关于查看文件的效果，大家可以保持浏览器打开，当DW中保存过文件以后，在浏览器中刷新一下，就可以看到效果。

HTML 段落

HTML 可以将文档分割为若干段落。段落是通过 <p> 标签定义的。在<p> </p>中输入如下内容，并在浏览器打开看一下效果。

如果我缩小浏览器的宽度，效果如下。

现在大家可以发现，html语言是一种排版语言，他会保证你可以看到内容的全部，随着浏览器的变化，文字排版也会跟着变化。你自己敲的空行，是不会显示出来。那么如何自己定义断行呢？介绍一个新的标签<br/>

<br/>标签

英文brake的缩写，很显然，就是打断的意思。因为这个标签是放在内容的结尾的，所以它的开始就是结束，因此他没有结束标签，所以没有</br>,只有<br/>,大家要记清楚~

这时就能看到断行啦。

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。<hr>标签与<br>标签一样，没有结束标签。所以也可以写成<hr/>.

属性

在设置完水平线之后，我们还可以及设置水平线的宽度。

代码<hr width=50%> 这里的50%是指页面的50%，也可以设置一个具体的数值,比如50，是指50个像素，大家可自行尝试。

这里的width就是这个标签的属性。像这样的属性值，还有，align，size。但不同的效果，大家可以试试。这些效果学了CSS之后，都建议通过CSS样式表来实现。

<hr width=50>设定绝对长度；

<hr align=left>设置左对齐，当然也可以设置右对齐。

<hr size=1>这表示线宽；

曾有有一段时间属性值“=”后面是需要加引号的，<hr width=“50”>，但现在所有浏览器都支持不加引号，大家看到有引号不要觉得是错误的。

<标签名属性名=color> - 指定颜色

比如我可以给水平线设置颜色

在DW中输入color=“之后会弹出颜色选择，可以只选择颜色，DW会自动生成颜色代码。

代码为：

<h3>第四节水平线</h3>
<hr width=90% color=”#FF0000“>
插入一条水平线

效果如下：

字体样式

我们会举例说一些，但是在学习CSS之后，字体样式等于格式有关的功能，都会通过CSS样式表来实现。所以，这里大家只要稍微了解下就好。

举几个例子

加粗<b></b>；斜体<i></i>；下划线<ins></ins>；变小<small></small>；在html中，标签是可以嵌套的。大家可以仔细对比，以下代码，和效果。

短语格式

以下标签的显示结果是由浏览器和样式表决定的，这些标签标识的意思而不是效果。这句话可能有一些难以理解，大家学习久了就会有所体会。

<em>强调</em>；<strong>着重</strong>；<dfn>definition</dfn>；<code>表示这一行是源代码，仅用于小部分代码。</code>；<samp>例子代码</samp>；<kbd>用户输入</kbd>；<bar>变量</bar>；<site>引用</site>

我们试着输入这些代码。

列表

掌握几个标签<ul><li><ol><dl><dt><dd>，标签是可以嵌套的，大家自己可以试一试。

无序列表 <ul>和<li>标签

<ul>un-odered list <li>list item,一项

将 <ul> 标签与 <li> 标签一起使用，创建无序列表。将<ol>标签与<li>标签一起使用，创建有序列表。

代码：

ol和ul可以嵌套自动缩进ul缩进每层标记不一样会有实心和空心等不同的标记。

<dl>、<dd>和<dt>标签

定义：<dl> 标签定义了定义列表（definition list）。<dd> 在定义列表中定义条目的定义部分。<dt> 标签定义了定义列表中的项目（即术语部分）。

用法：<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

举例代码：

<dl>

<dd>用来计算的仪器 ... ...</dd>

<dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

浏览器中的效果如下：

table 标签 -- 代表HTML表格

table标签是成对出现的,以<table>开始,以</table>结束
引用网址:http://www.dreamdu.com/xhtml/tag_table/
属性

Common -- 一般属性

summary -- 代表表格的摘要说明

width-- 代表表格的宽度

border -- 代表表格边框(此属性应该使用CSS实现)

cellspacing -- 代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)

cellpadding -- 代表内容填充的宽度(此属性应该使用CSS实现)

table，中文"表格"的意思

示例

<table width="80%" border="1"> <tr> <th>www.dreamdu.com</th> <th>.com域名的数量</th> <th>.cn域名的数量</th> <th>.net域名的数量</th> </tr> <tr> <td>2003年</td> <td>1000</td> <td>2000</td> <td>3000</td> </tr> <tr> <td>2004年</td> <td>4000</td> <td>5000</td> <td>6000</td> </tr> <tr> <td>2005年</td> <td>7000</td> <td>8000</td> <td>9000</td> </tr> </table>

HTML表格示例 -- 可以尝试编辑

HTML table 标签示例
HTML th 标签示例
HTML cellpadding cellspacing 属性示例
HTML rowspan 属性示例
HTML colspan 属性示例
HTML colgroup col示例

说明

width-- 是表格的宽度,可以使用象素px或者百分比
border-- 是表格的边框的宽度,使用px表示,此属性应该使用CSS实现
tr -- 代表一行
th -- 代表表格头
td -- 代表一个单元格

由于篇幅有限，今天的内容就介绍这么多。如果你有什么想法或者建议，欢迎评论交流！

在线咨询

上一篇：HTML5基础入门
下一篇：Python 抓取公号文章保存成 HTML

您的项目需求

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

整合营销服务商

HTML5(七)-SVG基础入门

一、为什么要学 SVG ?

二、SVG 形状元素

三、SVG形状元素

一个简单的例子

多波

颜色和不透明度

静波

静止波

改变单个波

背景样式

轮廓样式

形状

动画

更改文本

工具提示

点击事件

么是 HTML5？

HTML5 是如何创建的？

为 HTML5 建立的一些新规则

为 HTML5 建立的一些新特性

HTML 编辑器

掌握三个标签

HTML 标题

HTML 段落

<br/>标签

HTML 水平线

属性

字体样式

短语格式

列表

table 标签 -- 代表HTML表格

示例

HTML表格示例 -- 可以尝试编辑

说明

您的项目需求