整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML详细介绍1

tml概述和基本结构

html概述

HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。

html基本结构

一个html的基本结构如下:

<!DOCTYPE html>
<html lang="en">
 <head> 
 <meta charset="UTF-8">
 <title>网页标题</title>
 </head>
 <body>
 网页显示内容
 </body>
</html>

第一行是文档声明,第二行“”标签和最后一行“”定义html文档的整体,“”标签中的‘lang=“en”’定义网页的语言为英文,定义成中文是’lang=“zh-CN”’,不定义也没什么影响,它一般作为分析统计用。 “”标签和“”标签是它的第一层子元素,“”标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏,“”内编写网页上显示的内容。

HTML文档类型

目前常用的两种文档类型是xhtml 1.0和html5

xhtml 1.0

xhtml 1.0 是html5之前的一个常用的版本,目前许多网站仍然使用此版本。

此版本文档用sublime text创建方法: html:xt + tab

文档示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title> xhtml 1.0 文档类型 </title>
</head>
<body>
</body>
</html>

html5

pc端可以使用xhtml 1.0,也可以使用html5,html5是向下兼容的

此版本文档用sublime text创建方法: html:5 + tab 或者 ! + tab

文档示例:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> html5文档类型 </title>
</head>
<body>
</body>
</html>

两种文档的区别

1、文档声明和编码声明

2、html5新增了标签元素以及元素属性

html注释:

html文档代码中可以插入注释,注释是对代码的说明和解释,注释的内容不会显示在页面上,html代码中插入注释的方法是:

<!-- 这是一段注释 -->

html标题标签

通过

,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系,比如说:

用作主标题,其后是

,再其次是

,以此类推。搜索引擎会使用标题将网页的结构和内容编制索引,所以网页上使用标题是很重要的。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

html段落标签、换行标签与字符实体

html段落标签

标签定义一个文本段落,一个段落含有默认的上下间距,段落之间会用这种默认间距隔开,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>段落</title>
</head>
<body>
 <p>HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超
 文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的
 标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。
 </p>
 <p>一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方
 式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网
 页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>

html换行标签

代码中成段的文字,直接在代码中回车换行,在渲染成网页时候不认这种换行,如果真想换行,可以在代码的段落中插入

来强制换行,代码如下:

<p>
一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

html字符实体

代码中成段的文字,如果文字间想空多个空格,在代码中空多个空格,在渲染成网页时只会显示一个空格,如果想显示多个空格,可以使用空格的字符实体,代码如下:

<!-- 在段落前想缩进两个文字的空格,使用空格的字符实体: -->
<p>
 一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。</p>

在网页上显示 “<” 和 “>” 会误认为是标签,想在网页上显示“<”和“>”可以使用它们的字符实体,比如:

<!-- “<” 和 “>” 的字符实体为 < 和 > -->
<p>
 3 < 5 <br>
 10 > 5
</p>

html块标签、含样式的标签

html块标签

1、

标签 块元素,表示一块内容,没有具体的语义。

2、 标签 行内元素,表示一行中的一小段内容,没有具体的语义。

含样式和语义的标签

1、 标签 行内元素,表示语气中的强调词

2、 标签 行内元素,表示专业词汇

3、 标签 行内元素,表示文档中的关键字或者产品名

4、 标签 行内元素,表示非常重要的内容

语义化的标签

语义化的标签,就是在布局的时候多使用有语义的标签,搜索引擎在爬网的时候能认识这些标签,理解文档的结构,方便网站的收录。比如:h1标签是表示标题,p标签是表示段落,ul、li标签是表示列表,a标签表示链接,dl、dt、dd表示定义列表等,语义化的标签不多。

html图像标签、绝对路径和相对路径

html图像标签

标签可以在网页上插入一张图片,它是独立使用的标签,它的常用属性有:

src属性 定义图片的引用地址

alt属性 定义图片加载失败时显示的文字,搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片,所以此属性非常重要。

<img src="images/pic.jpg" alt="产品图片" />

绝对路径和相对路径

像网页上插入图片这种外部文件,需要定义文件的引用地址,引用外部文件还包括引用外部样式表,javascript等等,引用地址分为绝对地址和相对地址。

绝对地址:相对于磁盘的位置去定位文件的地址

相对地址:相对于引用文件本身去定位被引用的文件地址

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件,相对路径就没有这个问题。相对路径的定义技巧:

“ ./ ” 表示当前文件所在目录下,比如:“./pic.jpg” 表示当前目录下的pic.jpg的图片,这个使用时可以省略。

“ …/ ” 表示当前文件所在目录下的上一级目录,比如:“…/images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

html链接标签

标签可以在网页上定义一个链接地址,它的常用属性有:

href属性 定义跳转的地址

title属性 定义鼠标悬停时弹出的提示文字框

target属性 定义链接窗口打开的位置

target="_self" 缺省值,新页面替换原来的页面,在原来位置打开

target="_blank" 新页面会在新开的一个浏览器窗口打开

页中添加滚动字幕效果

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>滚动字体的设置</title>

</head>

<body>

<canvas id="canvas1" width="600" height="600" style="border:1px solid #000000"></canvas>

<script type="text/javascript">

var canvas1 = document.querySelector("#canvas1") // 1.找到画布对象

var ctx = canvas1.getContext("2d") // 2.上下文对象(画笔)


ctx.shadowBlur = 10; // 阴影距离

ctx.shadowColor = "red" // 阴影颜色

ctx.shadowOffsetX = 30 // 阴影偏移

ctx.shadowOffsetY = 30 // 阴影偏移


ctx.font = "150px 楷体"


ctx.fillText("你好!", 20,150)


ctx.fillText("你好!", 20,350)


ctx.strokeText('你好!',23, 153)


ctx.strokeText('你好',23, 553)


canvas绘制文字



var x = 600

setInterval(function(){

if(x > -350){

//清空画布

ctx.clearRect(0,0,600,600)

ctx.strokeText('你好!',x, 153)

ctx.fillText("你好!", x,350)


ctx.font = "50px 宋体"

ctx.strokeText('每天学习一点点',x, 553)


x -= 3

}else{x=590}



}, 16)


</script>


</body>

</html>


用html标签使用介绍

本文主要记录常用的html标签使用说明,用起来的时候偶尔查查。

常用html标签列表

标签

英文全拼

作用

特点

​<html></html>​

html

网页的根标签

所有的标签都要写在这一对根标签里面

​<head></head>​

head

网页的头标签

包括完档的属性和信息

​<body></body>​

body

网页的主题

包含文档的所有内容

​<div></div>​

division

定义一个区域

浏览器通常会在​​<div>​​前后放置一个换行符

​<!-- 注释 -->​

-

注释

单标签

​<br>或<br/>​

break

换行

单标签,不会在其前后创建空白行

​<hr>或<hr/>​

horizontal rule

添加水平线

单标签

​<img src="">​

image

添加图片

单标签

​<embed src="">​

embed

嵌入外部应用

单标签

​<meta>​

meta

提供有关页面的元信息

单标签,​​<meta>​​​标签通常位于​​<head>​​区域内

​<link>​

link

定义文档与外部资源的关系

单标签,​​<link>​​​标签只能存在于​​<head>​​区域内,不过它可出现任何次数。

​<p></p>​

paragraph

定义段落

自动在其前后创建空白行

​<h1> to <h6>​

Header 1 to Header 6

定义标题

h1在一个页面里只能出现一次

​<strong></strong>​

strong

文本加粗

加粗标记该文本

​<b></b>​

bold

文本加粗

加粗显示文本,不推荐使用

​<em></em>​

emphasize

文本倾斜

倾斜标记文本

​<i></i>​

italic

文本倾斜

倾斜显示文本,不推荐使用

​<del></del>​

delete

文本添加删除线

-

​<s></s>​

strike

文本添加删除线

不推荐使用

​<ins></ins>​

insert

文本添加下划线

-

​<u></u>​

underline

文本添加下划线

不推荐使用

​<a href="">填写内容</a>​

anchor

添加超链接

最好使用CSS来改变链接的样式

​<ul></ul>​

unordered list

定义无序列表

通常与​​<li>​​标签一起使用

​<ol></ol>​

ordered list

定义有序列表

通常与​​<li>​​标签一起使用

​<li></li>​

list item

创建列表项

可与各种列表定义标签一起使用

​<dl></dl>​

definition list

定义描述列表

通常与​​<dt>​​​和​​<dd>​​一起使用

​<dt></dt>​

definition term

定义条目

定义描述列表的项目

​<dd></dd>​

definition description

定义描述

对描述列表中的项目进行描述

​<table></table>​

table

定义HTML表格

尽可能通过样式改变表格外观

​<tr></tr>​

table row

定义表格的行

一个​​<tr>​​​标签包含一个或多个​​<th>​​​或​​<td>​​标签

​<th></th>​

table headline

定义表格每一列的标题

该标签的文本通常呈现为粗体且居中

​<td></td>​

table data

定义表格中的单元格数据

该标签的文本呈现为普通且左对齐

​<caption>表格标题</caption>​

caption

定义整个表格的标题

​<caption>​​​标签必须直接放在​​<table>​​标签后

​<input type="">​

input

定义输入控件

输入字段可通过多种方式改变,取决于type属性

​select​

select

定义下拉列表

​<select>​​​中的​​<option>​​标签定义了列表中的可用选项

​<option></option>​

option

定义下拉列表中的可用项

​<option>​​标签不可自由定义宽高

​<optgroup></optgroup>​

options group

定义选项组

​<optgroup>​​标签用于把相关的选项组合在一起

​<textarea></textarea>​

textarea

定义多行的文本输入控件

文本的默认字体是等宽字体

​<form></form>​

form

定义表单

​<form>​​可以包含多个元素

​<fieldset></fieldset>​

field set

定义围绕表单中元素的边框

​<legend>​​​为​​<fieldset>​​定义标题

​<legend></legend>​

legend

为​​<fieldset>​​定义标题

​<legend>​​通过css设定样式

​<progress></progress>​

progress

定义运行中的任务进度

​<progress>​​​是HTML5中的新标签,​​<progress>​​标签不适合用来表示度量衡

​<meter></meter>​

meter

度量衡

​<meter>​​​是HTML5的新标签,​​<meter>​​标签不适合用来表示进度条

​<audio></audio>​

audio

添加音频

​<audio>​​标签是HTML5的新标签

​<video></video>​

video

添加视频

​<video>​​标签是HTML5的新标签

​<source>​

source

定义媒介资源

​<source>​​标签是HTML5中的新标签

常用标签使用说明

  • 常用写法:​​<img src="" alt="" title=""width="" height=""​​>
  • src:图片的来源(必写属性)
  • alt:图像不显示时的替代文本
  • title:鼠标在移动到元素上的文本提示
  • width/height:图片宽高,没有定义宽高的时候,图片按照百分之百比例显示,更改图片的宽度或者高度,图片等比例缩放

普通用法

  • 常用写法:​​<a href="" title="" target="">填写内容</a>​
  • href:去往的路径(必写属性)
  • title:鼠标在移动到元素上的文本提示
  • target:规定在何处打开路径
  • _blank:新页面打开
  • _parent:在父窗口中打开链接
  • _self:当前页面跳转(默认值)
  • _top:在当前窗体打开链接,并替换当前的整个窗体
  • 当href的值为javascript:void(0); 或 javascript:; ,表示超链接不做任何事情,不做任何跳转
  • 当href的值为#,表示超链接为空链接,点击此链接时会跳转到页首的位置

锚点链接

锚点链接通过点击超链接,自动跳转到我们设置锚点的位置,类似于word的目录导航。建立锚点的元素必须要有id或name属性,最好两个都有。这里只跳转本页面元素,其他页面跳转自行搜索。
具体做法如下:

  1. 给目标元素设置id值,如​​<p id="id1"></p>​
  2. 设置锚点超链接,锚点的超链接路径一定包含"#",后面紧跟元素的id或者name,如​​<a href="#id1"></a>​

示例如下。为了显示效果,通过使用lorem自动生成随机文本(具体使用方法搜索,一般直接输入就行),lorem*50表示重复lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超链接全局设置

在页面head中写入代码可以设置超链接的全局跳转设置

<head>
  <!-- 让页面所有的超链接新页面打开 -->
  <base target="_blank">  
</head>

charset编码

  • 常用写法: ​​<meta charset="UTF-8">​
  • charset:定义文档的字符编码
  • ASCII/ANSI/Unicode:英语
  • GBK:亚洲通用字符集
  • GB2312:中文简体
  • Big5:台澳港繁体
  • UTF-8:世界通用字符集

name

  1. 关键字
  • 常用写法: ​​<meta name="keywords" content="">​
  • 描述:告诉搜索引擎网页的关键字,尽量将重要的关键词放在前面
  1. 网页描述
  • 常用写法: ​​<meta name="keywords" content="">​
  • 描述:告诉搜索引擎网页的主要内容
  1. 作者
  • 常用写法: ​​<meta name="author" content="">​
  • 描述:告诉搜索引擎网页的作者
  1. 文件检索
  • 常用写法: ​​<meta name="robots" content="all | none | index | noindex | follow | nofollow">​
  • 描述:有时候会有一些站点内容,不希望被ROBOTS抓取而公开。为了解决这个问题,ROBOTS开发界提供了两个办法:一个是robots.txt,另一个是The Robots META标签。
  • content: 文件检索方式
  • all:文件将被检索,且页面上的链接可以被查询 (默认值)
  • none:文件将不被检索,且页面上的链接不可以被查询
  • index:文件将被检索;
  • noindex:文件将不被检索,但页面上的链接可以被查询
  • follow:页面上的链接可以被查询
  • nofollow:文件将不被检索,页面上的链接可以被查询

网页自动跳转

  • 常用写法: ​​<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />​
  • 描述:网页5秒后自动跳转到谷歌主页
  • url:为空则刷新本页
  • 常用写法:
  • 描述:规定当前文档与被链接文档/资源之间的关系
  • rel:定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写(必写属性)
  • type:规定被链接文档的类型
  • href:链接的文件路径
  • 示例:
  • 链接外部样式表:​​<link rel="stylesheet" type="text/css" href="a.css">​
  • 设置网页icon图标:​​<link rel="icon" href="a.ico">​

列表

无序列表

无序列表使用粗体圆点进行标记。简单示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用数字进行标记,我们可以通过整数值start指定列表编号的起始值。简单示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通过描述列表自定义列表,列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。简单示例如下。

<dl>
        <dt>A</dt> <!-- 小标题 -->
            <dd>A1</dd> <!-- 解释标题 -->
            <dd>A2</dd> <!-- 解释标题 -->
        <dt>B</dt> <!-- 小标题 -->
            <dd>B1</dd> <!-- 解释标题 -->
            <dd>B2</dd> <!-- 解释标题 -->
    </dl>

表格

基础表格

  • 常用写法:​​<table width="" height="" border="" cellspacing="" cellpadding=""></table>​
  • width:表格宽度
  • height:表格高度
  • border:边框宽度
  • cellspacing:单元格间距
  • cellpadding:内容与边框间距

简单示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格标题</caption> <!-- 定义表格标题 -->

<tr>
    <!-- 定义表格的行 -->
    <td>A1</td> <!-- 定义表格该行第一列中的数据 -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定义表格的行 -->
    <th>A</th> <!-- 定义表格每一列的标题 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

单元格合并

  • 常用写法:​​<td colspan=“” rowspan=“”></td>​
  • 描述:告诉表格该单元格可以横跨colspan列,纵跨rowspan行

简单示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格标题</strong></caption> <!-- 定义表格标题 -->
<tr height="100">
    <!-- 定义表格的行 -->
    <td colspan="2">A1</td> <!-- 定义该行可以横跨两列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定义该行可以横跨两行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

对于​​<input>​​不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

文本输入框

  • 常用写法:​​<input type="text" name="" maxlength="" readonly="" disabled="" value="">​
  • type:规定输入字段的类型
  • name:输入框的名字
  • maxlength:输入文本长度
  • readonly:输入框是否只读
  • disabled:输入框是否未激活
  • value:输入框默认值

简单示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用户名">

密码输入框

  • 常用写法:​​<input type="password" name="">​
  • type:规定输入字段的类型
  • name:输入框的名字
  • 密码输入框的其他参数和文本输入框一样

简单示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密码">

单选框

  • 常用写法:​​<input type="radio" name="" checked="checked">​
  • type:规定输入字段的类型
  • name:输入框的名字
  • checked:设定该输入框被预先选定
  • 想要多个单选框只能有一个被选中,设置所有单选框的name值相同即可实现

示例一,两个单选框都可以被选中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二,两个单选框只能有一个被选中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

​<select>​

  • 常用写法:​​<select multiple=""></select>​
  • multiple:当该属性为true时,可选择多个选项。

​<optgroup>​

  • 常用写法:​​<optgroup label=""></optgroup>​
  • label:设定选项组的描述。

​<option>​

  • 常用写法:​​<option value="" selected="">选项值</option>​
  • value:定义送往服务器的选项值。
  • selected:当该属性为true时,该选项被默认选择。

示例一,单选下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默认选中 -->
  </select>

示例二,带组合的单选下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三,带组合的多选下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多选框

  • 常用写法:​​<input type="checkbox" checked="">​
  • type:规定输入字段的类型
  • checked:设定该输入框被预先选定

简单示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

  • 常用写法:​​<textarea cols="" rows="" placeholder=""></textarea>​
  • cols:控制可见文本的列数
  • rows:控制可见文本的行数
  • placeholder:提示字符

简单示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上传控件

  • 常用写法:​​<input type="file" accept=""/>​
  • accept:规定提交的文件的类型

简单示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他类型按钮

<input type="submit">文件提交按钮
  <input type="button" value="">普通按钮
  <input type="image" src="">图片按钮
  <input type="reset">重置按钮
  <input type="url">网址控件
  <input type="date">日期控件 
  <input type="time">时间控件
  <!--email提供了邮箱的完整验证,必须包含@和后缀,如果不满足验证,会阻止表单提交-->
  <input type="email">邮件控件
  <input type="number" step="3">数字控件
  <input type="range" step="100">滑块控件
  <input type="color">颜色控件

表单

示例一,普通表单

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二,带分组信息表单

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

​<progress>​​​与​​<meter>​​主要区别和用法见​​HTML5 progress和meter控件​​

​<progress>​

  • 常用写法:​​<progress value="" max=""></progress>​
  • value:规定进程的当前值
  • max:规定需要完成的值

简单示例如下。

<progress value="60" max="100"></progress>

​<meter>​

  • 常用写法:​​<meter min="" low="" high="" max="" value="" optimum=""></meter>​
  • value:规定度量的当前值
  • max:规定被界定为高的值的范围
  • min:规定被界定为低的值的范围
  • low:规定被界定为低的值的范围
  • high:规定被界定为高的值的范围
  • optimum:规定度量的最优值
  • 具体使用见meter标签改变颜色规则

简单示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒体资源

​<audio>​

  • 常用写法:​​<audio src="" controls autoplay loop></audio>​
  • src:规定音频文件的url
  • controls:如果出现该属性,显示音频播放器的控制面板(比如播放/暂停按钮)
  • autoplay:如果出现该属性,自动播放音频
  • loop:如果出现该属性,循环播放音频

简单示例如下

<audio src="demo.mp3" controls autoplay></audio>

​<video>​

  • 常用写法:​​<video src="" width="" height="" poster="" controls autoplay loop></video>​
  • src:规定视频文件的url
  • width:设置视频播放器的宽度(pixels)
  • height:设置视频播放器的高度(pixels)
  • poster:设置视频未播放时展示的画面
  • controls:如果出现该属性,显示音频播放器的控制面板(比如播放/暂停按钮)
  • autoplay:如果出现该属性,自动播放音频
  • loop:如果出现该属性,循环播放音频

简单示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

​<source>​

  • 常用写法:​​<source src="" type="">​
  • src:规定媒体文件的url
  • type:规定媒体文件的类型
  • 因为不同浏览器支持的媒体格式不同,当添加媒体文件时,需要考虑浏览器是否支持它们。我们可以准备多种不同格式的媒体文件,然后使用source 标签,让浏览器从上到下选择支持的媒体格式

简单示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的浏览器不支持video元素。
  </video>

特殊字符

​​HTML特殊字符编码对照表​​

参考

  • ​​HTML基础​​
  • ​​HTML 参考手册​​
  • HTML中标签对应的英文
  • meter标签改变颜色规则
  • HTML5 progress和meter控件