2020.08.17-2020.08.23学习计划:
(1)完成前端知识积累HTML+CSS+JavaScript(周一至周四)
(2)完成ssm两门课复习(周一至周五)
(3)完成所有已学代码的熟悉与系统整理(周六周日)
(4)系统整理初级java学习知识体系(周六周日)
(5)指定明确目标,有针对性地开展下一步学习(周日)
今日学习:
1、前端知识:HTML
(01)HTML是一种超文本标记语言。页面可以包含文本、图片、链接、音乐、程序等
(02)HTML的基本格式如下:
!DOCTYPE html>
(03)HTML元素指的是从开始标签到结束标签的所有代码
(04)常用标签及部分常用属性
(05)常用文本元素标签
(06)常用标签链接标签:
链接指定网址:百度
链接指定文件:文件
图片链接:
链接邮箱:
下载链接:
(07)特殊符号的使用:
(08)引入样式的三种方式:
外部样式表:
内部样式表:
内联样式表:
(09)内联框架示例:
!DOCTYPE html> 我要自学网 京东官网
(10)table布局
!DOCTYPE html> talbe布局
(11)div布局
块元素:主要特征是会产生换行效果,自动与其他元素分离成两行,通常可以作为容器在内部添加其他元素。如table、ul、ol
内联元素:不会产生换行效果,会和其他元素并联排列。如b/br/i
!DOCTYPE html> div布局
我是标题、头部
我是导航栏
我是内部框架
我是尾部
(12)通用属性值介绍:
(13)HTML5新标签学习(1)
!DOCTYPE html> html5新标签学习 body{height: 708px} header{width: 100%;height: 10%;background: green;} footer{width: 100%;height: 10%;background: blue;} section{width: 100%;height: 80%;background: DarkGray;} aside{width: 20%;height: 80%;background: Aquamarine;float: left;} nav{width: 100%;height: 40px;background: #E0FFFF;text-align: center;} li{display: inline;} a{text-decoration: none;} hgroup{width: 100%;height: 40%;background: blue;}
我是主标题
我是副标题
我是侧边栏 首页 语文 数学 英语 物理 化学 生物 2020年08月17日 2020年08月17日晚上8点 2020年08月17日晚上9点 美国时间2020年08月17日晚8点
作者:preston 邮箱:1270939454@qq.com
美图欣赏
我是脚步
(14)综合实例1:移动页面端学习
!DOCTYPE html> 手机模拟 header{width: 100%;height: 50px;background: yellow;} h4{display: inline;} aside{width: 20%;height: 540px;background: #708090;float: left;} section{width: 80%;height: 540px;background: #D8BFD8;float: left; overflow: auto;} footer{width: 100%;height: 50px;background: green;clear: left;} figure{padding: 0px;} img{max-width: 70%} ul{list-style-type: none;} li{display: inline;}
移动端页面练习
食品/家电
汽车/家居
数码/珠宝
食品/家电
汽车/家居
数码/珠宝
(15)input标签学习
代码示例:
!DOCTYPE html> input学习 用户名: 密 码: 用户名: 只读部分: 提示: 发送邮箱: 输入网址: 输入电话: 时分: 日期: 月份: 星期: 当地时间: UTC时间: 颜色选择输入框: 搜索内容: 文件内容: 复选框:选项1 复选框:选项2 复选框:选项3 单选框:答案1 单选框:答案2 单选框:答案3 属性演示: 属性演示: 属性演示:
结果示例:
(16)HTML新标签学习(2)
代码示例:
!DOCTYPE html> form表单及其它新元素 用户名: 密 码: html5 CAD java C++ phyton html5 CAD java C++ phyton 复选框:选项1 复选框:选项2 复选框:选项3 单选框:答案1 单选框:答案2 单选框:答案3 html5 CAD java C++ phyton 提交 重置 += 用户注册 用户名: 密 码: 账号: 加密: 点击率查看
文章点击率:6000
12345 12345 12345 12345 用户注册
用户名:
密 码:
邮 箱:
手机号:
(17)video和audio实例示例
!DOCTYPE html> 声音视频示例 您的浏览器不支持HTML5的视频格式 您的浏览器不支持HTML5的音频格式
结果示例:
(18)source元素解决浏览器兼容,使用时,video和audio不可以设置src。使用示例:
width= 您的浏览器不支持HTML5的视频格式
(19)Canvas元素学习(1)
介绍:它提供了一套强大额图形API,拥有多种绘制路径、矩形、图形、字符以及添加图像的方法。
代码学习:
直线矩形学习:
canvas学习title>