织梦网站首页,做街舞网站的素材,深圳十大广告公司,云南网站建设公司有哪些HTML定义
HTML超文本标记语言——HyperText Markup Language。
超文本是什么#xff1f; 链接标记是什么#xff1f; 标记也叫标签#xff0c;带尖括号的文本 标签分类
单标签:只有开始标签#xff0c;没有结束标签(br换行 hr水平线 img 图像标…HTML定义
HTML超文本标记语言——HyperText Markup Language。
超文本是什么 链接标记是什么 标记也叫标签带尖括号的文本 标签分类
单标签:只有开始标签没有结束标签(br换行 hr水平线 img 图像标签)双标签:成对出现的标签(但凡需要包裹内容的都是双标签 因为需要包裹内容需要开头和结束 )标签成对出现中间包裹内容里面放英文字母(标签名)结束标签比开始标签多/ HTML基本骨架 html整个网页head网页头部用来存放给浏览器看的信息例如CSS title网页标题
body网页主体用来存放给用户看的信息例如图片、文字
VS Code快速生成骨架
在HTML文件(.html)中!(英文)配合Enter/Tab键 标签关系
作用明确标签的书写位置让代码格式更整齐
父子关系嵌套关系 兄弟关系并列关系) * 代码格式 父子关系子级标签换行且缩进Tab键兄弟关系兄弟标签换行要对齐 注释
作用:对代码的解释说明,能提高代码的可读性.(学习和工作中,关键代码都需要加注释)
!-- 这是注释不显示在浏览器 --
在 VS Code 中添加 / 删除注释的快捷键Ctrl / .
标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等等。 标签名:h1~h6(双标签)
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbody!-- h1标签在一个网页中只能使用一次用来放新闻标题或者网页logo --!-- h2~h6没有使用次数限制 --h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6
/body
/html
显示特点
• 文字加粗
• 字号逐渐减小
• 独占一行换行 tips:
h1 标签在一个网页中只能用一次用来放新闻标题或网页的 logoh2 ~ h6 没有使用次数的限制 段落标签
一般用在新闻段落、文章段落、产品描述信息等等 标签名p双标签
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbody!-- 段落之间有空隙 --!-- p标签 段落的意思 --p段落/pp段落/pp段落/pp段落/pp段落/pp段落/pp段落/pp段落/p
/body/html
显示特点
• 独占一行
• 段落之间存在间隙 换行和水平线
换行br单标签
浏览器不识别代码中的 Enter 键换行 水平线hr单标签 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbody!-- br强制换行 --p天苍苍野茫茫 br我是隔壁的老王/p!-- hr 水平线 了解即可 --hr
/body/html
文本格式化标签
作用为文本添加特殊格式以突出重点。常见的文本格式加粗、倾斜、下划线、删除线等。 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbody!-- strong 加粗 --!-- i经常用于制作小图标 icon--!-- del 删除线 --strong加粗/strongb加粗/bem倾斜/emi倾斜/iins下划线/insu下划线/udel删除线/dels删除线/s
/body
/html
strong、em、ins、del 标签自带强调含义语义。
important:
strong 加粗i经常用于制作小图标 icondel 删除线
*图像标签
作用在网页中插入图片.
img src图片的URL
src用于指定图像的位置和名称是 img 的必须属性。 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbody!-- 元素标签 --!-- 属性alt src... --!-- 属性值 引号里面的内容 --!-- 属性属性值 键值对 --!-- src 图片的路径 --img srctupian.jpg
/body/html
图片标签的其他属性 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title图片其他属性/title
/headbody!-- src 图片路径 --!-- alt图片加载失败时替换的文本 --!-- title 鼠标悬停在图片上显示的文本 --!-- width 宽度当写一个值的时候另一个会等比缩放 --!-- height高度当写一个值的时候另一个会等比缩放 --img title图片 srctupian.jpg alt这是一张图片 width500 height500h1 title真不错我/h1!-- title是属性时属性值是鼠标悬停在图片上显示的文本 --!-- title是标签/元素时title是网页名 --
/body/html 属性名属性值属性写在尖括号里面标签名后面标签名和属性之间用空格隔开不区分先后顺序
路径
路径指的是查找文件时从起点到终点经历的路线 路径分类
相对路径从当前文件位置出发查找目标文件 绝对路径从盘符出发查找目标文件(Windows 电脑从盘符出发 Mac 电脑从根目录出发)
*相对路径---从当前文件位置出发查找目标文件 . /表示当前文件所在文件夹
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyimg src./images/tupian.jpg alt
/body/html
.. /表示当前文件的上一级文件夹
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyimg src../images/tupian.jpg alt
/body/html
不能跨盘符找文件
绝对路径 -从盘符出发查找目标文件
应用场景:友情链接 Windows 电脑从盘符出发Mac 电脑从根目录/出发 img srcC:\images\tupian.jpg
Windows 默认是 \ 其他系统是 /建议统一写为 /文件的在线网址https://www.itheima.com/images/logo.png
*超链接
作用点击跳转到其他页面。
href 属性值是跳转地址是超链接的必须属性。
超链接默认是在当前窗口跳转页面添加 target_blank 实现新窗口打开页面
链接分类:
外部链接,注意要添加协议(https://等)
!-- 跳转到百度 --
a hrefhttps://www.baidu.com百度/a
内部链接,注意路径问题 a href./04.段落标签.html跳转到段落标签/a
空链接 #(或者空格) 点击完会回到页面顶部(不确定跳转地址) a href#空链接/ah1跳转/h1h2跳转/h2h2跳转/h2h2跳转/h2h2跳转/h2h2跳转/h2h2跳转/h2h2跳转/h2h2跳转/h2h2跳转/h2h2跳转/h2h2跳转/h2h2跳转/h2h2跳转/h2
死链接 点击后没有任何效果(适用于不确定跳转地址) a hrefjavascript:;死链接/a
*图片标签
a hrefhttps://www.baidu.comimg src./tupian.jpg alt
/a
下载
a href下载文件路径下载/a
在新窗口打开页面 a hrefhttps://www.itcast.cn target_blank传智播客/aa href图片路径 target_blank图片标签/a
音频标签
audio src音频的 URL/audio
常见属性: !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbody!-- src 路径 --!-- controls 控制面板--!-- loop 循环播放 --!-- autoplay 自动播放 一般浏览器会禁止自动播放 --!-- 书写 HTML5 属性时如果属性名和属性值相同可以简写为一个单词 --audio src./media/music.mp3 controls loop autoplay/audio!-- 以下是为了以前照顾兼容性写法 现在不需要了 --audiosource src./media/music.mp3source src./media/music.oggsource src./media/music.wav你的浏览器版本也太low了赶紧更新一个吧 a href点我啊/a/audio
/body/html
视频标签
video src视频的 URL/video
常见属性: !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbody!-- muted 静音 可以用来设置视频的自动播放 搭配 autoplay --video src./media/vue.mp4 controls loop autoplay muted width500/video
/body/html
案例一:
目的:制作如下网页(tips:网页制作思路从上到下先整体再局部逐步分析制作
分析内容 → 写代码 → 保存 → 刷新浏览器看效果) !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh1尤雨溪/h1hrp尤雨溪前端框架a hrefjavascript:;Vue.js/a的作者a hrefjavascript:;HTML5/a版Clear的打造人独立开源开发者。曾就职于GoogleCreative Labs和MeteorDevelopmentGroup。由于工作中大量接触开源的项目a href JavaScript/a最后自己也走上了开源之路现全职开发和维护a hrefjavascript:;Vue.js/a。/pimg src./photo.jpg alth2 学习经历/h2p尤雨溪毕业于上海复旦附中在美国完成大学学业本科毕业于Colgate University后在Parsons设计学院获得Design Technology艺术硕士学位任职于纽约Google Creative Lab。/ph2主要成就/h2p尤雨溪strong大学专业并非是计算机专业/strong在大学期间他学习专业是室内艺术和艺术史后来读了美术设计和技术的硕士 ins正是在读硕士期间他偶然接触到了JavaScript从此被这门编程语言深深吸引开启了自己的前端生涯 。/ins/pp2014年2月开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。/ph2社会任职/h2p2016年9月3日在南京的JSConf上Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime整合目标是让大家能用Vue 的语法跨三端。/p
/body/html
案例二
目的:实现图片页面跳转(tips:实现图片页面跳转需要用到img标签和a标签 两者结合即可完成) 解答详情步骤:
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbody!-- 可以先建一个超链接页面,里面先放空链接(因为此时我们还不确定跳转地址) --a href#搜索/aa href#目录/aa href#详情/aa href#登录/a
/body/html
先建一个超链接页面,里面先放空链接(因为此时我们还不确定跳转地址,浏览器显示画面如下,此时我们点击链接没有任何变化 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodya href#img src图片路径/aa href#/aa href#/aa href#/a
/body/html
2. 再建一个搜索图片界面,之后我们返回第一个建的页面,将图片界面文件路径加到刚才我们填的空链接(a href#搜索/a),点击发现能够实行跳转 3.再建一个目录图片界面,之后我们返回第一个建的页面,将目录图片文件路径加到刚才我们填的空链接(a href#目录/a),点击发现能够实行跳转(剩下两个界面也是如此) 完整代码如下(需要分为五个文件,第一个文件用来做跳转页面首页,剩下四个分别是各自的超链接图片标签):
文件一:
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodya href./work2.html target_blank搜索/aa href./work3.html target_blank目录/aa href./work4.html target_blank详情/aa href./work5.html target_blank登录/a
/body/html
文件二:
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodya href#img src../images/index.png/aa href#/aa href#/aa href#/a
/body/html
文件三:
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodya href#/aa href#img src../images/list.png/aa href#/aa href#/a/html
文件四:
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodya href#/aa href#/aa href#img src../images/details.png/aa href#/a/body/html
文件五:
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodya href#/aa href#/aa href#/aa href#img src../images/login.png/a/body/html
大家快去试试吧!
