wordpress无广告视频网站,52种新颖的促销方式,湖南建设工程信息网站,wordpress发送文章链接过期day44
JavaEE 学习过程#xff1a;前端—数据库—服务器端 前端的VUE在框架阶段学习 JavaEE学习过程图
HTML 前端#xff1a;展示页面、与用户交互 — HTML 后端#xff1a;数据的交互和传递 — JavaEE/JavaWeb 1. 前端开发的工作模式 开发输出htmlcssjs 理解前端—数据库—服务器端 前端的VUE在框架阶段学习 JavaEE学习过程图
HTML 前端展示页面、与用户交互 — HTML 后端数据的交互和传递 — JavaEE/JavaWeb 1. 前端开发的工作模式 开发输出htmlcssjs 理解图—UI像素—程序员编写页面 2. 运行环境–浏览器 现阶段主要是本地直接通过浏览器打开后期我们再将网页放置到服务器上通过http协议来访问我们需要的资源 一般小项目服务器租用成本更低 谷歌、火狐浏览器等下载几个来运行代码 浏览器解析代码—右键检查或查看页面源代码 3. 安装HBuilder 官方下载地址http://www.dcloud.io/注意版本【本人使用HTML5】 其实eclipse也可以进行这方面的开发工作只是提示方面做得不太好 项目结构理解图 提供一个懒人压缩包解压后HBuilder.exe发送到桌面快捷方式即可使用还有一个离线版的w3school 注意注册才能改变工作空间 三个模式开发视图直接敲代码边看边改是内嵌一个服务器顾名思义团队是局域网互看互改 新建一个目录写html规整 4. 网页的组成部分(HTMLCSSJAVASCRIPT) HTML页面结构 CSS页面样式表现 JavaScript交互行为 理解页面结构HTML优化字体边框按钮格式等由CSS[层层叠加]交互【ps点击或者什么做出什么反映】 5. HTML简介 HTML英文Hyper Text Markup Language的缩写中文译为“超文本标记语言”主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。 HTML提供了许多标记如段落标记p、标题标记 h1-h6、超链接标记 a、图片标记 img等网页中需要定义什么内容就用相应的HTML标记描述即可。 6. HTML基本结构 理解需要什么内容使用什么标签即可 文档声明不同版本长得不一样 HTML基本结构图 根标签里面包含内容最多 标签简化【没有内容时】…/ 练习HTML的百度一下 设置网页标题网页主体显示中文信息 !DOCTYPE html
htmlheadmeta charsetutf-8 /title百度一下你就知道/titlelink relshortcut icon hrefimg/favicon.ico //headbody你知道了吗/body
/html加图标前后 检查百度的网页源代码可以找到其图标代码 它的图标是网络路径链接获取我们也可以下载来放在img下用本地资源路径方式获取 link relshortcut icon hrefhttps://www.baidu.com/favicon.ico typeimage/x-icon7. 常用的标签
a) 标题 注意如果使用无效标签比如h7会按照文本内容在页面展示 这里也可以看到注释使用 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbody!--知识点标题标签标签h1~h6--h1一级标签/h1h2二级标签/h2h3三级标签/h3h4四级标签/h4h5五级标签/h5h6六级标签/h6h7七级标签/h7花开花落花无悔/body
/html
运行
b) 段落 标签p !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbody!--知识点段落标签标签p--p花开花落花无悔/pp缘来缘去缘如水/p/body
/html
运行
c) 文本 标签 span – 文本标签 br – 换行标签 hr – 分割线标签 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodyspan花开花落花无悔/spanbr/span缘来缘去缘如水/spanhr //body
/html
运行可见标题、段落、文本的行间距不同
d) 图片 img - 图片标签 src图片资源路径 width宽度 height高度 alt图片加载失败后显示的文本内容 注意 100px – 100像素 30% ---- 占页面宽度的百分比 img只有资源src没有内容像素【固定】或者百分比【适配变化即页面变大图片也相应变大】 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodyimg src../img/星空一花.jpg width100px height100px/br /img src../img/星空一花.jpg width30% height30% /br /img srchttp://img.duoziwang.com/2020/02/06242324110320.jpg width100px height100px /br /img srchttp://img.duoziwang.com/2020/02/xxx.jpg width100px height100px alt图片加载失败 //body
/html
运行
e) 列表- 无序列表 ul - 无序列表 type - 展示类型circle-空心圆 discs-实心圆 square-实心方块 li - 列表项 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodyul typesquare lixxx/liliyyy/lilizzz/li/ul/body
/html
运行
f) 列表-有序列表 ol - 有序列表 type - 展示类型1-阿拉伯数字 a-小写英文字母 A-大写英文字母 i-小写罗马数字 I-大写罗马数字 li - 列表项 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodyh3注册流程/h3ol type1li填写基本信息/lili绑定银行账号/lili绑定手机号/lili注册成功/li/ol/body
/html
运行
g) 列表-定义列表 知识点定义列表 dl - 定义列表 dt - 列表头 dd - 列表体 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodydldth2奇男子/h2img src../img/星空一花.jpg width60px //dtddp2222年2月出生于四川当时雷霆击碎黑暗四川峨眉山金顶惊现佛光/pp奇男子从小就爱钻研互联网相关技术/pp5岁精通HTML/pp9岁精通Java/pp15岁精通数据库/pp17岁能够独立完成大型分布式微服务项目/pp20岁时因不满老板压榨员工一怒之下删库跑路至今下落不明.../p/dd/dl/body
/html
运行
h) 嵌套列表案例 注意HTML标签可以无限层嵌套 有序列表、无序列表、两者嵌套都可 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodyullih3荤菜/h3olli回锅肉/lili仔姜鸭丝/lili爆炒腰花/lili宫保鸡丁/lili小鸡炖蘑菇/li/ol/lilih3素菜/h3olli清炒空心菜/lili鱼香茄子/lili土豆炒洋芋/lili西红柿炒番茄/li/ol/lilih3汤类/h3olli翡翠蛋花汤/lili皮蛋黄瓜汤/lili胡豆瓣酸菜粉丝汤/lili开水白菜/li/ol/li/ul/body
/html
运行
i) 超链接 超链接可以是一个字一个词或者一组词也可以是一幅图像您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当您把鼠标指针移动到网页中的某个链接上时箭头会变为一只小手。 我们通过使用 标签在 HTML 中创建链接。 有两种使用 标签的方式 通过使用 href 属性 - 创建指向另一个文档的链接 通过使用 name 属性 - 创建文档内的书签 掌握href属性跳转到另一个文档Target属性_top_parent不常用 链接到不同目录的文件时如何处理 【…/退回上一级同级才能获取】 制作图像链接 a - 超链接 href - 链接地址 target - 跳转目标_self在当前卡页跳转_blank在新增卡页跳转 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodya hrefhttp://www.baidu.com target_self百度一下/abr /a hrefhttp://www.baidu.com target_blank百度一下/abr /a href08_列表案例.html target_blank跳转本地页面/abr /a href08_列表案例.html target_blankimg src../img/星空一花.jpg width50px//a/body
/html
运行 未点击把鼠标放在上面是显示一个小手 点击跳转前卡页跳转新增卡页跳转【文字、图像链接】 j) 锚链接 掌握name属性创建锚链接 下锚点a然后链接定位跳转 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodya href#new01法治/a!--定位到锚点处--a href#new02国际/a!--定位到锚点处--a href#new03娱乐/a!--定位到锚点处--a namenew01/a!--下锚点--h1法治新闻 - 为何半夜母猪频频惨叫/h1h1法治新闻 - 为何八旬老太以外怀孕/h1h1法治新闻 - 是人性的溟灭/h1h1法治新闻 - 是道德的沦丧/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1a namenew02/a!--下锚点--h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1a namenew03/a!--下锚点--h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1/body
/html 小结 1.了解前端和后端的区别 2.HMTL、CSS、JavaScript 3.安装HBuilder 4.常用的标签
