前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Html&Css 基础总结(基础好了才是最能打的)一

Html&Css 基础总结(基础好了才是最能打的)一

作者头像
胖虎哥
发布2024-04-26 10:01:28
850
发布2024-04-26 10:01:28
举报

Html&Css 基础学习回顾总结

前言

作者在求学期间自学了前端界面相关的,算是有一些基础, 但是在工作中前端知识一直没有用武之地,导致前端的知识七零八落的不成体系,所以痛腚思痛,这篇专栏主要是回顾学习之前的知识,同时跟随B站黑马程序员的视频,边看边学 视频在这里~ @B站黑马程序员视频

视频共15天,作者会以天为粒度,来分散到不同文章中,有兴趣的小伙伴可以关注一下,谢谢你 书中错误在所难免,如果有小伙伴发现的话恳请斧正,在此先谢过咯~

开始啦

Html 骨架
代码语言:javascript
复制
    <html>
    <head>
    <title>这是网页的title</title>
    </head>
    <body></body>
    </html>

其中,html是整体的,表达这是一个html; head则是直译过来的头部; title标题要放在head中; 再就是body, 正如直译的意思所说,这就是主体可以放很多东西;

Html 基本标签
H1-H6标签

H1-H6标签, H1 一般只用一次, 便于seo查找; ps: 所以vue是没有h1这个标题,所以不好做seo的吗?

代码语言:javascript
复制
<h1>你好,我是h1</h1>
段落标签

独占一行,如果超出一行不会分割,直到结束后,下面再单独列一行;

通常跟 在一起,独占一行, dev也是独占一行

换行标签

是单独换一行 并且浏览器不识别代码中的回车键换行

水平线标签

水平线(横杠) 也同样是单标签;

#### 文本格式化标签 可以给文字添加特殊标签: 例如,加粗,倾斜,下划线,删除线等

代码语言:javascript
复制
<strong> 加粗</strong>
<em>倾斜</em>
<ins>下划线</ins>
<del>删除线</del>
图像标签

是但标签, 一行显示, 其中src=“xxx.img” src是img的必须属性, 用于指定图像的位置, 且给予属性的时候, src是不加引号的,只有值才给引号 例如:

代码语言:javascript
复制
<img src="../images/a.img">

还有其他的属性, 例如: out 属性, 用于替换图片时无法显示的文本; alt属性, 用于替换网速慢导致图片无法加载时, 使用alt替换的文字; title 属性, 用于提示文本, 鼠标悬停时图片上显示;

代码语言:javascript
复制
<img src="../images/a.img" out="你好" alt ="hello" title ="这是个图片">

相信你已经看到了,属性都是写在尖括号里面,标签的属性之间以空格分割的, 单引号双引号都可以,取决于你的选择和外部的单双引号~

小tips:浏览器缩放图片默认是等比例缩放;

相对路径&绝对路径 和音频

推荐: 本地主张使用相对路径 相对路径&绝对路径其实已经很清晰了,就不再展开讲了~

音频标签是双标签,即拥有开始&结束

代码语言:javascript
复制
<audio>我是一个音频标签</audio>

其中Src也是必须属性, 用于指定音频的来源,支持的有mp3等文件

代码语言:javascript
复制
<audio src="./audios/a.mp3">我是一个音频标签</audio>

其中还有几个属性也是一样的: controls 属性,用于控制是否展示音频控制面板, 默认不显示; 又因为contorls的值就是controls,所以可以简写成 contrlos; loop 属性, 用于控制是否自动播放, 因为值跟属性名是一样的,所以也可以简写; autoplay 属性, 用于控制是否自动播放, 它的值也跟属性名一样,所以也可以简写; 但是一般会被禁用(你也不想一进网页就咔咔放音乐吧哥们)

代码语言:javascript
复制
<audio src="./audios/a.mp3" controls loop autoplay>我是一个音频标签</audio>
视频标签

视频标签也是双标签;

代码语言:javascript
复制
 <video src ="./videos/a.mp4"  controls loop autoplay></video>

视频&音频 有相同的属性, 但是视频播放的属性多一个muted

代码语言:javascript
复制
   <video  src="xx" controls loop autoplay muted></video>`

muted 属性, 用于控制是否静音播放,但是有一点要确定的是, 视频支持在静音状态下自动播放哦~

超链接标签

超链接标签也是双标签, 其中属性href 是必须属性,表示点击后跳转到具体地址 地址必须由http://开头~

代码语言:javascript
复制
 <a href="http://www.baidu.com" target="_self">自身跳转</a>
 <a href="www.baidu.com" target="_blank">新开节目</a>

相信大家已经看到了,他们多出来一个属性叫做target; target属性, 用于控制跳转界面时的形式, 值为_self时表示从当前界面跳转, 如果是_blank 时则是打开新界面跳转; ps: 我喜欢打开新界面跳转~

总结

第一天的内容就止步于此了,希望大家都可以有所收获,明天见~

本文参与?腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2024-04-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客?前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Html&Css 基础学习回顾总结
  • 前言
  • 开始啦
    • Html 骨架
      • Html 基本标签
      • 总结
      相关产品与服务
      视频理解
      视频理解是基于腾讯领先的 AI 技术和丰富的内容运营经验,对视频内容输出涵盖人物、场景、物体、事件的高精度、多维度的优质标签内容。通过对视频内容进行细粒度的结构化解析,应用于媒资系统管理、素材检索、内容运营等业务场景中。其中一款产品是媒体智能标签(Intelligent Media Label Detection)
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
      http://www.vxiaotou.com