HTML5新增标签
HTML5新增标签
作者: 严孝孝
目录
- 1.html5新标签
- 2.html5新input类型
- 3.html5新input属性
- 4.html5shiv库
课程内容
1.html5新标签
q.html5 新标签有哪些？
header，footer，section，nav， aside， article 语义化标签
details， summary 详情和摘要
dialog
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title>
<style>
#d{
border: none;
background-color: lightblue;
}
style>
head>
<body>
<header>
header意思头部， 页面上方， 区域的上方
header>
<nav>
nav表示导航， 网站导航按钮放在这里面
nav>
<section>
放页面主体内容
<nav>
nav>
<div>
<article>
article表示文章， 放页面的数据
article>
div>
<aside>
aside表示边， 作为侧边栏
aside>
section>
<footer>
footer表示底部， 放友情链接， 帮助中心， logo， 版权
footer>
<button onclick="dealOpen()">打开/关闭button>
<script type="text/javascript">
var d = document.querySelector("dialog")
function dealOpen(){
var o = d.getAttribute("open")
if(o == null){
d.setAttribute("open","")
}else{
d.removeAttribute("open")
}
}
script>
body>
html>
q.为什么使用这些标签， 好处?
标签是有语义， 利于代码的可阅读性
便于搜索引擎SEO
q.details， summary作用？
实现文本展开和隐藏的功能， 评论
<details>
<summary>
XX评论： 今天天气不错
summary>
<div>
今天天气不错，风和日历
div>
details>
q.dialog作用？
实现对话框功能， 注意属性open加上现实， 去掉不显示
<dialog id="d" >
瓶子，棋子，傻子
dialog>
2. html5新input类型
q. 有哪些新类型？
color 颜色
date，日期
datetime 日期时间
datetime-local 本地时间
month 月
time 时间
range滑动条
week 周
email 邮件
search 搜索
tel 电话
url 网址
datalist 配合输入框
output元素用于不同类型的输出，比如计算或脚本输出
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title>
head>
<body>
<form action="">
<input type="color" onchange="dealChange(this)"><br>
<input type="time">
<input type="date">
<input type="datetime-local">
<input type="week">
<input type="month"><br>
email： <input type="email"><br>
number: <input type="number" min="1" max="100" step="2"><br>
tel: <input type="tel"><br>
url : <input type="url"><br>
search: <input type="search" list="keys"><br>
<datalist id="keys">
3.html5新input属性
placeholder 空白提示
required 必须输入
min，max，step 数字输入
multiple 多选
pattern 控制输入
autofocus 焦点
autocomplete规定 form 或 input 域应该拥有自动完成功能。
form overrides
(formaction, formenctype, formmethod, formnovalidate, formtarget)表单重 写
height 和 width
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
list属性适用于以下类型的
标签：text, search, url, telephone, email, date pickers, number, range 以及 color。
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title>
head>
<body>
<form action="">
<input type="text" required=""><br>
<input type="number" min="1" max="10" step="2"><br>
<select name="food" multiple value="rice">
<option value="rice">米饭option>
<option value="tea">茶option>
<option value="noodle">面条option>
select><br>
<input type="text" pattern="[A-z]{3}"><br>
<input type="text" autofocus="autofocus"><br>
<hr>
<input type="submit" name="" id="" value="提交" />
form>
body>
html>
q. 修改input框里面字体颜色
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title>
<style>
.s1{
color:red;
background-color:gray;
font-size: 24px;
}
input::-webkit-input-placeholder{
color:red;
}
style>
head>
<body>
<input type="text" placeholder="你好啊">
<header>
header
header>
<section>
section
<article class="s1">
woshi neirong
article>
section>
<footer>
footer
footer>
body>
html>
4.html5shiv库
q.作用是什么
让低版本浏览器，或者ie支持html5新标签
1. HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
3. (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n\[a\[o\]\];b||(b={},h++,a\[o\]=h,n\[h\]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache\[a\]?c.cache\[a\].cloneNode():r.test(a)?(c.cache\[a\]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
4. a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\[\\w\-\]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")\[0\]||d.documentElement;c.innerHTML="x";
5. c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="