余姚网站建设 熊掌号,网络平台营销,宁波市住房和城乡建设部网站,有关网站设计的书HTML认知 文章目录HTML认知语法规范注释标签组成和关系标签的关系标签学习排版系列标签**标题标签****段落标签**换行标签水平线标签文本格式化标签媒体标签图片标签src 目标图片的路径alt 替换文本title 图片的标题width 宽度 / height 高度路径绝对路径相对路径#xff08;常…HTML认知 文章目录HTML认知语法规范注释标签组成和关系标签的关系标签学习排版系列标签**标题标签****段落标签**换行标签水平线标签文本格式化标签媒体标签图片标签src 目标图片的路径alt 替换文本title 图片的标题width 宽度 / height 高度路径绝对路径相对路径常用同级目录下级目录上级目录音频标签视频标签链接标签链接标签链接标签的target属性语法规范注释标签组成和关系标签的关系标签学习排版系列标签**标题标签****段落标签**换行标签水平线标签文本格式化标签媒体标签图片标签src 目标图片的路径alt 替换文本title 图片的标题width 宽度 / height 高度路径绝对路径相对路径常用同级目录下级目录上级目录音频标签视频标签链接标签链接标签链接标签的target属性语法规范
注释
光标选住Ctrl/
标签组成和关系 构成说明
标签由 / 英文单词或字母组成并且把标签中的包括起来的英文单词或字母称为标签名常见标签由两部分组成称之为 双标签前部分叫 开始标签 后部分叫 结束标签。少数标签由一部分组成我们称之为单标签自成一体。
标签的关系 嵌套关系父子 并列关系兄弟
标签学习
排版系列标签
标题标签
代码 h11级标题/h1h22级标题/h2h33级标题/h3h44级标题/h4h55级标题/h5h66级标题/h6选中h6中的数字6按CtrlD可以选中前后标签中的数字可以直接修改
特点
文字都有加粗文字都有变大并且从h1到h6文字逐渐变小独占一行
***注意点**h1标签对于网页尤为重要开发中有特定的使用场景如新闻标签网页的logo部分
段落标签
代码
p段落标签内容/p特点
段落之间存在间隙独占一行
换行标签
代码br
单标签让文字强制换行
水平线标签
代码hr
单标签在页面中现实一条水平线
文本格式化标签
文字加粗、下划线、倾斜、删除线
标签说明b加粗u下划线i倾斜s删除线推荐用下一组 语义更强标签说明:----::----:strong加粗ins下划线em倾斜del删除线
媒体标签
图片标签
代码img src alt
单标签img标签需要展示对应的效果需要借助标签的属性进行设置。 注意点
标签的属性写在开始标签内部标签上可以同时存在多个属性属性之间以空格隔开标签名与属性之间必须以空格隔开属性之间没有顺序之分
src 目标图片的路径
当前网页和目标图片在 同一个文件夹中路径直接写在目标图片的名字即可包括后缀名 ./表示在当前文件夹中
alt 替换文本 当图片加载失败时才显示alt的文本 当图片加载成功时不会显示alt的文本 title 图片的标题
当鼠标悬停时才会显示的文本
注意点
title属性不仅仅可以用于图片标签还可以用于其他标签 width 宽度 / height 高度
如果只设置width或height中的一个另一个没设置的会自动的等比例缩放此时图片不会变形如果同时设置了width和height两个若设置不当此时图片可能会变形 所以width和height只需给出一个属性就行。 路径
绝对路径
指目录下的绝对位置可直接到达目标位置通常从盘符开始的路径
例如
盘符开头D:\day01\images\1.jpg完整的网络地址https://www.itcast.cn/2018czgw/images/logo.gif了解
相对路径常用
概念
当前文件当前的html网页目标文件要找到的图片
相对路径从当前文件夹开始出发找目标文件的过程
相对路径分类
同级目录下级目录上级目录
同级目录
即当前文件和目标文件在同一目录中
代码直接写目标文件的名字即可
方法一img src目标图片.gif方法二img src./目标图片.gif VSC 快捷操作直接敲 ./后会自动提示同级目录中有哪些文件直接选择即可 下级目录
下级目录目标文件在下级目录中
代码
先知道在哪个文件夹里面→文件夹名字进入文件夹→/进入后直接写文件名字 VS Code快捷操作直接敲./后会自动提示当前目录下有哪些文件夹直接一层层选择即可 上级目录
代码 VS Code快捷操作直接敲…/后会自动提示上级目录下有文件直接选择即可 音频标签
代码audio src./music.mp3 controls/audio 音频标签目前支持三种格式MP3、Wav、Ogg
视频标签
代码video srcvideo.mp4 controls/video 视频标签目前支持三种格式MP4 、WebM 、Ogg
链接标签
链接标签
代码a href./目标页面。html超链接/a
如果需要a标签点击之后去指定页面需要设置a标签的href属性
href属性跳到地址 既可以是外部链接也可以是内部链接
当网站开发初期我们还不知道跳转地址的时候href的值可以书写为#(空链接)
链接标签的显示特点了解
a标间默认字体有下划线a标签从未点击过默认文字显示蓝色a标签点击过后文字显示为紫色清楚浏览器历史记录为可恢复蓝色
链接标签的target属性
target为目标网页的打开形式 [# HTML认知
语法规范
注释
光标选住Ctrl/
标签组成和关系 构成说明
标签由 / 英文单词或字母组成并且把标签中的包括起来的英文单词或字母称为标签名常见标签由两部分组成称之为 双标签前部分叫 开始标签 后部分叫 结束标签。少数标签由一部分组成我们称之为单标签自成一体。
标签的关系 嵌套关系父子 并列关系兄弟
标签学习
排版系列标签
标题标签
代码 h11级标题/h1h22级标题/h2h33级标题/h3h44级标题/h4h55级标题/h5h66级标题/h6选中h6中的数字6按CtrlD可以选中前后标签中的数字可以直接修改
特点
文字都有加粗文字都有变大并且从h1到h6文字逐渐变小独占一行
***注意点**h1标签对于网页尤为重要开发中有特定的使用场景如新闻标签网页的logo部分
段落标签
代码
p段落标签内容/p特点
段落之间存在间隙独占一行
换行标签
代码br
单标签让文字强制换行
水平线标签
代码hr
单标签在页面中现实一条水平线
文本格式化标签
文字加粗、下划线、倾斜、删除线
标签说明b加粗u下划线i倾斜s删除线推荐用下一组 语义更强标签说明:----::----:strong加粗ins下划线em倾斜del删除线
媒体标签
图片标签
代码img src alt
单标签img标签需要展示对应的效果需要借助标签的属性进行设置。 注意点
标签的属性写在开始标签内部标签上可以同时存在多个属性属性之间以空格隔开标签名与属性之间必须以空格隔开属性之间没有顺序之分
src 目标图片的路径
当前网页和目标图片在 同一个文件夹中路径直接写在目标图片的名字即可包括后缀名 ./表示在当前文件夹中
alt 替换文本 当图片加载失败时才显示alt的文本 当图片加载成功时不会显示alt的文本 title 图片的标题
当鼠标悬停时才会显示的文本
注意点
title属性不仅仅可以用于图片标签还可以用于其他标签 width 宽度 / height 高度
如果只设置width或height中的一个另一个没设置的会自动的等比例缩放此时图片不会变形如果同时设置了width和height两个若设置不当此时图片可能会变形 所以width和height只需给出一个属性就行。 路径
绝对路径
指目录下的绝对位置可直接到达目标位置通常从盘符开始的路径
例如
盘符开头D:\day01\images\1.jpg完整的网络地址https://www.itcast.cn/2018czgw/images/logo.gif了解
相对路径常用
概念
当前文件当前的html网页目标文件要找到的图片
相对路径从当前文件夹开始出发找目标文件的过程
相对路径分类
同级目录下级目录上级目录
同级目录
即当前文件和目标文件在同一目录中
代码直接写目标文件的名字即可
方法一img src目标图片.gif方法二img src./目标图片.gif VSC 快捷操作直接敲 ./后会自动提示同级目录中有哪些文件直接选择即可 下级目录
下级目录目标文件在下级目录中
代码
先知道在哪个文件夹里面→文件夹名字进入文件夹→/进入后直接写文件名字 VS Code快捷操作直接敲./后会自动提示当前目录下有哪些文件夹直接一层层选择即可 上级目录
代码 VS Code快捷操作直接敲…/后会自动提示上级目录下有文件直接选择即可 音频标签
代码audio src./music.mp3 controls/audio 音频标签目前支持三种格式MP3、Wav、Ogg
视频标签
代码video srcvideo.mp4 controls/video 视频标签目前支持三种格式MP4 、WebM 、Ogg
链接标签
链接标签
代码a href./目标页面。html超链接/a
如果需要a标签点击之后去指定页面需要设置a标签的href属性
href属性跳到地址 既可以是外部链接也可以是内部链接
当网站开发初期我们还不知道跳转地址的时候href的值可以书写为#(空链接)
链接标签的显示特点了解
a标间默认字体有下划线a标签从未点击过默认文字显示蓝色a标签点击过后文字显示为紫色清楚浏览器历史记录为可恢复蓝色
链接标签的target属性
target为目标网页的打开形式 思维导图总结.XMind
