一、html5基本骨架更简单
<html lang="en"> <head> <meta charset="utf-8"> <title>document</title> </head> <body>
</body> </html> 1 |
二、html5语言特性
单标签可以不使用 / 结束
<img src="./images/0.jpg" alt=""> <input type="text"> 1 |
html属性值可以不再使用双引号进行包裹
<input type=button value="我就不加双引号"> 1 |
标签名大小写都合法
<button>我是大写的button 我们没有什么不同</button> 1 |
所有的type都不用写了
<script></script> <style> button{ border: solid 4px red; } </style> <link rel="stylesheet" href=""> 1 |
布尔型属性，可以不用写布尔值
三、html5中可以用来替换div的语义化新标签
<!-- html5中的新标签 header footer section nav -->
<!-- 头部标签header 可以用来标识页面的头部或者是页面中某个区域的头部 --> <header class="">header部分</header>
<!-- 导航标签nav 一般用来标识页面中的导航部分 --> <nav class=""> <!-- logo部分 --> <h1 class="logo"></h1> nav部分 </nav>
<!-- banner部分 --> <div class="banner">banner部分</div>
<!-- 页面中主要内容区域部分section标识 --> <section class=""> section部分 <!-- 设置边栏 aside --> <aside></aside> <!-- 文章，微博评论等等 artical --> <artical> <!-- 文章可能会有大标题 和 多个副标题 那么我们会将他们作为一个群组 hgroup --> <hgroup> <!-- 标题群组部分 --> </hgroup> <div class="content"> 内容区域 图文结合 <!-- 独立的流内容 设置图片 表格 表单等等 --> <figure> <img src="./images/1.jpg" alt=""> <figcaption>给独立的流内容添加标题</figcaption> </figure> </div> </artical> </section>
<!-- 脚部标签footer 可以用来标识页面的脚部或者是页面中某个区域的脚部 --> <footer> <div class="ft-top"></div> <div class="ft-copy"></div> </footer> 1 |
四、html5中其它语义化标签的介绍
time 修饰时间
mark 高亮显示
details和summary
<details> 标签用于描述文档或文档某个部分的细节。<summary> 元素包含 details 元素的标题，<details>元素用于描述有关文档或文档片段的更多详情。
<!-- 普通文本 --> 黄河之水天上来 <!-- 高亮显示 --> <mark>疑是银河落九天</mark> <!-- details 描述细节 summary类似与总结，details的标题 一般情况下两个配合使用--> <details> <summary>静夜思</summary> <p>窗前明月光</p> <p>低头思故乡</p> <p>举杯邀明月</p> <p>对影成三人</p> </details> 1 |
四、html5中的表单新特性
4.1 form与控件的关联 在不包含控件的情况下，可以给控件form属性与表单id属性关联
4.2 label标签可以直接包裹控件
4.3 表单中新增type类型
date
month
week
time
search
tel
email 自动验证功能 需要包含@
url 自动验证功能 http:// 或 https:// 开头
color
number
range
注意：以上需要考虑浏览器兼容性，部分浏览器部分效果不兼容
<form action="get" target="_blank" id="des"> <label>请输入关键字</label> <input type="search" ><br > <label for="username">用户名</label> <input type="text" id="username" name="username"> <div> <label>性别：</label> <label><input type="radio" name="sex" id="">男</label> <label><input type="radio" name="sex" id="">女</label> </div> <div>入职日期：<input type="month"></div> <div>公司成立的第几周：<input type="week"></div> <div>公司邮箱：<input type="email"></div> <div>公司网址：<input type="url"></div> <div>你喜欢的颜色：<input type="color"></div> <div>你喜欢的数字：<input type="number"></div> <div>滚动条：<input type="range"></div> <input type="submit"> </form> <h2>隔开</h2> <p>隔开</p> <label for="date">出生日期：</label> <input type="date" id="date" name="date" form="des">
1 |
4.4 表单新增属性
placeholder 信息提示文本
autofocus 自动获取焦点 提示：如果有多个，默认以第一个为准
required 必填项
disabled 禁用
readonly 只读
multiple 多选
size 页面显示数量
<form action="" method="get" target="_blank"> <input type="search" placeholder="请输入查找内容" autofocus> <button>点击查找</button><br> 用户名：<input type="text" required><br> 密码：<input type="password" name="pass" value="123456" disabled><br> 公司名称：<input type="text" name="com" value="爱创课堂" readonly><br> <input type="submit"> </form> 1 |
完整笔记、web前端视频教程，请添加微信“haomei0452”免费领取
关注微信公众号“icketang”，获取最新前端资讯，学习资料
B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战
