HTML5 元素
HTML5 文档元素
HTML5 头部元素
-
<head>
-
<title>
-
<link>
-
<meta>
-
<style>
项目开发：首页头部设置
-
Index.html
-
网页头部设置
-
设置搜索关键词、内容、标题等
HTML5 主体元素
HTML5内容元素
-
<p>
-
<hr>
-
<pre>
-
<div>
-
<span>
HTML5列表
-
Ol 有序列表
-
ul 无序列表
-
li列表项
HTML5链接
-
a: 锚元素
-
建立超链接起始点URI：
<a href=“目标链接”>链接</a> -
建立超链接目标点识别名称：
<a name=“识别名称”>链接</a>
-
项目开发：增加链接
-
index.html和login.html
-
<a href=“app/auth/login.html”>登录</a> <a
href=“app/auth/findpass.html”>找回密码</a> <a
href=“app/auth/reg.html”>注册</a> -
<a href=“http://www.ybao.org” target="_blank"
><b>© 广州源宝网络有限公司</b></a>
HTML5 图片
- <img src=“imgFile” width=“300” height=“300” >
- <img
src=“data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAYAGQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD3+uT8TfEHR/Dv2q23/aNTg2f6Jh03bsH7+0qPlOf0rrK5P4mf8k91T/tl/wCjUpxtfUuCTkkzW8M63/wkXh611X7P9n8/f+6379u1yvXAz0z0rWrk/hn/AMk90v8A7a/+jXrG+L/9sf8ACOx/Yv8AkF8/b/uf34/L6/N97P3fxqlG8+UU1aTSPRaK8Y8IapZ2vxVbT/DM23Qr3GU2k79kDN1cbxh93p+Vez0ThyuxIVU1TVLPRtOlv7+bybWLG99pbGSAOACepFW6861y08Yf8LEg1a20v+0dLsN32SL7RDD9+IK/J+b73PIPTilFXZUIpvU1/BHjf/hMvt//ABLvsf2Ty/8Alt5m7du/2RjG39a66vGPgzcXkeo6jDDY+day+X9ouPOC+RgSFflPLbjxx0r0D4h/8iLqX/bL/wBGpTqpRk7DrpQbsWtO8ZaBq1/HZWV/5txLnYnkyLnAJPJUDoDW7Xjul32lf2FoNp4m0f8A4l3+kfZ777U394lv3ac/e2rz9a9irNO5hTm5LUKKKKZoFc9qfgbw5rGoS39/p3nXUuN7+fIucAAcBgOgFFFNNrYabWwaZ4G8OaPqEV/Yad5N1FnY/nyNjIIPBYjoTSeL7fxJJpyzeGb7ybqLObfyY28/JUfefhdo3H3oopqTvcG29znND8Maxf8AxEn8WatZ/wBl7NvlWvmpP5mYjGfnU8YwDyOc47V6LRRRKTkIKKKKkDI0Pwxo/hzz/wCybP7P5+3zP3rvu25x94nH3j0q7qOnWurWEllexebby43puK5wQRyCD1AooobvuD13OOtfhx/x4W+p6r9u06y8zy7X7P5X3+T86tn72D36Yru6KKSViYwUdgoooplH/9k=”>
项目开发：增加背景图片
-
index.html
-
图片存放路径：assets/img/login
-
bg1.jpg bg2.jpg
-
<body background=“assets/img/login/bg2.jpg”>
HTML5 表格元素
项目：表格重构login.html 布局
-
红线是一个表格table1，3行1列
-
绿线是内嵌入table1第二行第一列一个表格：table2，5行1列
HTML5 表单元素
-
form: 建立表单
-
input: 表单输入域
-
button: 按钮
-
select: 选择列表
-
option: 选择列表的项目
-
textarea: 多行文本框
-
label: 表单区域标签
项目开发：login.html 增加表单
-
login.html
-
表单：form
-
账号：text
-
密码：password
-
记住：复选框 checkbox
-
登录：按钮 button type=submit
HTML5 视频元素
HTML5 音频元素
HTML5 Canvas元素
HTML5 SVG元素
本章项目源码
URL：https://gitee.com/yuanbaonet/master_web/tree/baoai_html5_v3/
对应版本：baoai_html5_v3