网站代码优化调整,图片二维码生成器在线制作,网站备案号怎么添加,成品网站w灬源码1688永久网站VS code 如何快速生成HTML骨架注释是什么#xff1f;为什么要写注释#xff1f;注释的标签是什么#xff1f;标题标签段落标签换行标签与水平线标签 (都是单标签#xff09;文本格式化标签图片标签超链接标签音频标签视频标签 #x1f698;正片开始
VS code 如何快速生成…VS code 如何快速生成HTML骨架注释是什么为什么要写注释注释的标签是什么标题标签段落标签换行标签与水平线标签 (都是单标签文本格式化标签图片标签超链接标签音频标签视频标签 正片开始
VS code 如何快速生成HTML骨架 如上先输入然后再按回车或者table即可生成如下html骨架
注释是什么
注释注释就是对代码的解释和说明其目的是让人能够更加轻松地了解代码并且注释的内容是不会显示在网页中的。注释是编写程序时写程序的人给一个语句程序段函数等的解释或提示能够提高代码的可读性
为什么要写注释
写注释方便理解方便查找或方便项目组里的其他程序员了解你的代码而且可以方便以后你对自己代码进行修改。
注释的标签是什么
//这个只能注释每一行或者多行不能注释某行中某部分内容
!--内容-- //即可注释某部分内容又可注释多行以及一行
/*内容*/在VS Code中快速添加与删除注释的快捷加ctrl/
标题标签
h1一级标签/h1
h2二级标签/h2
h3三级标签/h3
h4四级标签/h4
h5五级标签/h5
h6六级标签/h6用法展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title我是一个网页/title
/head
bodyh1我是一级标签/h1h2我是二级标签/h2h3我是三级标签/h3h4我是四级标签/h4h5我是五级标签/h5h6我是六级标签/h6
/body
/html标题标签效果展示 标题标签的显示特点
文字有加粗效果每次使用完不需要使用换行标签标题标签自带换行效果使标题独占一行一级标题标签字号最大随着级数增大字号逐渐减小
注因为一级标题是重要标题一级标题标签在一个网页中一般只会使用一次如我们所看见的新闻的标题或者是淘宝的logo 段落标签
p内容/p用法展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title我是一个网页/title
/head
bodyp君不见黄河之水天上来奔流到海不复回。君不见高堂明镜悲白发朝如青丝暮成雪。人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。岑夫子丹丘生将进酒杯莫停。/p
/body
/html效果展示
观察代码中p标签的内容明明我每一句诗都是换行了的可是为什么展示到网页中就成一行了呢所以我们可以肯定你在代码中使内容换行是不会影响网页的效果的。要想使它们真正的换行还需要使用换行标签后面我会介绍。
刚刚是一个标签的使用我们现在看看多个段落标签使用的情况
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title我是一个网页/title
/head
bodyp淘宝网是中国深受欢迎的网购零售平台拥有近5亿的注册用户数每天有超过6000万的固定访客同时每天的在线商品数已经超过了8亿件平均每分钟售出4.8万件商品。随着淘宝网规模的扩大和用户数量的增加淘宝也从单一的C2C网络集市变成了包括C2C、团购、分销、拍卖等多种电子商务模式在内的综合性零售商圈。已经成为世界范围的电子商务交易平台之一。/pp2024年2月有多名网友发现部分淘宝订单可直接跳转至微信支付进行付款。淘宝客服表示微信支付目前仅针对部分用户逐步开放且仅支持购买部分商品时可选择。/p
/body
/html效果展示 特点段落标签之间是自带换行效果的。
换行标签与水平线标签
换行标签
br用法展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title我是一个网页/title
/head
bodyp君不见黄河之水天上来奔流到海不复回。br君不见高堂明镜悲白发朝如青丝暮成雪。br人生得意须尽欢莫使金樽空对月。br天生我材必有用千金散尽还复来。br烹羊宰牛且为乐会须一饮三百杯。br岑夫子丹丘生将进酒杯莫停。/p
/body
/html效果展示 之前我们是在代码中按回车使p标签的内容换行结果发现网页中的内容并没有按照我们预期想的换行而是全部堆在了一行上面现在我们使用了br标签之后网页的内容发生了换行当程序执行的br标签之后会自动跳到下一行这就是br标签的作用
水平线标签
hr用法展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title我是一个网页/title
/head
bodyp君不见黄河之水天上来奔流到海不复回。brhr君不见高堂明镜悲白发朝如青丝暮成雪。brhr人生得意须尽欢莫使金樽空对月。brhr天生我材必有用千金散尽还复来。brhr烹羊宰牛且为乐会须一饮三百杯。brhr岑夫子丹丘生将进酒杯莫停。hr/p
/body
/html效果展示 特点在hr标签的下面的内容会换行到下一行填写
文本格式化标签
文本格式化标签的作用
为文本添加特殊格式以突出重点。常见的文本格式化加粗倾斜删除线 下划线。
标签名用法效果strong/bstrong我被加粗啦/strongb我被加粗啦/b我被加粗啦em/iem我被倾斜啦/emi我被倾斜啦/i我被倾斜啦ins/uins我添加下划线啦/insu我添加下划线啦/u我添加下划线啦del/sdel我使用了删除线/dels我使用了删除线/s我使用了删除线
图片标签
在介绍图片标签前首先我们需要先准备几张素材图片图片的位置尤为重要。接下来我会给大家介绍两种图片路径第一种是相对路径第二种就是绝对路径了。
用相对路径 将图片放在html文件旁边 图片标签
img src 图片路径图片标签不仅仅只要rsc属性还有其他属性我将其他属性做成表格展示给大家看
属性作用说明alt替换文本图片无法显示的时候显示的文字title提示文本鼠标悬停在图片上面的时候显示的文字width图片的宽度值为数字,没有单位height图片的高度值为数字没有单位
接下来我会逐一对这些属性使用一遍
alt属性的使用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title我是一个网页/title
/head
bodyimg src./m.jpg alt这是一张动漫图片
/body
/html效果展示 可以看见当图片没有加载出来时则会显示文字告诉用户这张图片是什么。
title属性的使用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title我是一个网页/title
/head
bodyimg src./dm.jpg title我是个漂亮的妹子
/body
/html展示效果
width和height属性的使用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title我是一个网页/title
/head
bodyimg src./dm.jpg width300 height400
/body
/html展示效果 将图片改成了宽300高400当如果我们只更改width和height中的其中一个属性另一个属性则会等比例更改
当只更改宽图片没有变形则证明了等比例缩放的效果
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title我是一个网页/title
/head
bodyimg src./dm.jpg width150
/body
/html展示效果
超链接标签
超链接当你点击某个文字或者图片时会跳转到另一个网页
超链接的标签
a herf路径 target_blank这里可以输入内容或者使用其他标签也可以/a当使用该属性 arget_blank 时点击超链接打开的新网页不会在该窗口直接打开而是创建一个新窗口再打开。
这样说肯定不好理解还是实践出真知吧。
用法展示
当我不用 target 属性时
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodya hrefhttps://www.baidu.com/跳转到百度/a
/body
/html展示效果 当我点击这个超链接时 它直接在我当前网页打开了百度并没有新建窗口打开如果我也想要之前的网页那岂不是还得点回退键才能退回去这样岂不是很麻烦所以我们在使用超链接时基本会用target属性。
当使用了target属性时的效果
创建了个新窗口打开了百度。
小知识当超链接路径是以后缀为exe结尾的话点击该超链接会下载对应的exe程序
用法展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodya hrefhttps://dldir1.qq.com/qqfile/qq/QQNT/Windows/QQ_9.9.15_240925_x64_01.exe target_blank下载QQ/a
/body
/html效果展示 此时我已经点击了超链接它直接帮我开始下载QQ了。
音频标签
audio src音频路径/audio属性表格
属性作用特殊说明src必须属性指明音频路径支持格式MP3Ogg,Wavcontrols显示音频控制面板无loop循环播放无autoplay自动播放为了提升用户体验浏览器一般会禁用自动播放该属性无意义
接下来只介绍一下controls属性的用法其他属性用法相同
controls属性用法
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyaudio src./纯音乐.mp3 controls /audio
/body
/html细心的朋友肯定会发现controls 属性没有被赋值耶这是咋回事每个人都有偷懒的时候当然设计者也不列外当 controls 属性被赋值的内容和属性名一样时可简写成 属性名controlscontrols。
效果展示
出现了一块音频控制板块
视频标签
video src音频路径 /video属性表格
属性作用特殊说明src必须属性指明视频路径支持格式MP4Ogg,WebMcontrols显示视频控制面板无loop循环播放无muted静音播放无autoplay自动播放使用该属性时必须有静音播放属性否则不生效
用法展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyvideo src./dm.mp4 controls /audio
/body
/html效果展示 完结
