html5中常用的结构标签
article 文章
header 头部
nav 导航
section 区域
aside 侧边栏
hgroup 区块的相关信息
figure 定义一组内容及标题
figcaption 定义figure元素的标题
footer 底部
dialog 对话框
使用习惯:
header/section/footer > aside/article/figure/hgroup/nav > div
embed可插入flash文件,但flash已经逐渐被淘汰,不建议使用
meter状态标签,可以定义电压
optimum是标准状态
low与high之间呈现绿色,其余呈现黄色
<meter value=”220” min=”20” max=”380” low=”200” high=”240” optimum=”220”>meter>
自动计算百分比
<meter value="0.75">75%meter>
有步长的进度条
<progress value="30" max="100">progress>
不断加载的进度条
<progress max="100">progress>
datalist为input定义下拉列表
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demotitle>
head>
<body>
<input placeholder="请选择手机品牌" list="phoneList">
<datalist id="phoneList">
<option value="iphone">iphoneoption>
<option value="samsung">samsungoption>
<option value="huawei">huaweioption>
<option value="oppo">oppooption>
<option value="htc">htcoption>
datalist>
body>
html>
details定义元素的详细内容,配合summary
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demotitle>
head>
<body>
<details>
<summary>HTML5summary>
<p>HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。 [1-2] p>
details>
body>
html>
ruby和rt进行拼音的注释
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demotitle>
head>
<body>
我们来<ruby>夼<rt>kuangrt>ruby>一个话题
body>
html>
兼容浏览器的写法:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demotitle>
head>
<body>
我们来<ruby>夼<rp>(rp><rt>Kuangrt><rp>)rp>ruby>一个话题
body>
html>
mark黄色选中效果
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demotitle>
head>
<body>
<p>妈妈叫我回家的时候顺路买一盒<mark>牛奶mark>,需要很新鲜的那种。p>
body>
html>
output表单计算
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demotitle>
head>
<body>
<form oninput="sum.value=parseInt(num1.value)*parseInt(num2.value)">
<input type="number" id="num1">*
<input type="number" id="num2">=
<output name="sum" for="num1 num2">output>
form>
body>
html>
date pickers在移动端效果比较好
week兼容性不好
datetime兼容性不好,推荐用datetime-local
time用来设置时间(小时和分钟);
month用来设置年和月;
date用来设置年月日;
datetime用来设置年月日和时间;
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demotitle>
head>
<body>
email:<input type="email" name="email"><br>
url:<input type="url" name="url"><br>
tel:<input type="tel" name="tel"><br>
number:<input type="number" name="number"><br>
date:<input type="date" name="date"><br>
month:<input type="month" name="month"><br>
week:<input type="week" name="week"><br>
time:<input type="time" name="time"><br>
datetime:<input type="datetime" name="datetime"><br>
datetime-local:<input type="datetime-local" name="datetime-local"><br>
range:<input type="range" name="range" min="1" max="10"><br>
search:<input type="search" name="search"><br>
color:<input type="color" name="color"><br>
body>
html>
autocomplete属性规定form或input域拥有自动完成功能,该属性适用于