HTEL5+CSS3------>HPH
黑马程序视频
目的:能够复刻各种页面,并且能够快速过度到PHP
1.Web标准的构成
结构:HTML 没毛的鸟
表现:CSS 有毛的鸟
行为动作:JS 会飞的有毛鸟
文章目录
HTEL5+CSS3------>HPH1.Web标准的构成2.语法规范1.单标签2.双标签3.包含关系4.并列关系------->一些解释<---------3.常用标签1.标题标签2.段落和换行标签3.标签格式化4.盒子标签5.图片标签6.图像路径6.1相对路径6.2绝对路径7.链接8.注释 (快捷键:**ctrl+/** )------->分割线<---------4.特殊字符2.语法规范
1.单标签
<br/>
2.双标签
<html></html>
3.包含关系
<html><title></title></html>
4.并列关系
<html><head><title></title></head><body></body> </html>
------->一些解释<---------
<!DOCTYPE html> //告诉html的类型 这个是html5<html lang="en"> //lang语言定义当前文档显示的语言//"en"是英文网页//"zh-CN"是中文网页<meta charset="UTF-8">//字符集
3.常用标签
1.标题标签
<h1>————<h6>用法<h1>这里写第一标题的内容,并且独占一行</h1>
2.段落和换行标签
<p>这里写段落,也是放在Body里面</p><br>换行强制
3.标签格式化
<h1>格式化标签的使用</h1>这是一个<strong>加粗</strong>-这是一个<em>倾斜</em>这是一个<del>删除线</del>这是一个<ins>下划线</ins>
4.盒子标签
<div>这是一个大盒子 独占一行</div><span>小盒子 可以在div里面</span>
5.图片标签
<img src="9.jpg" width="300" height="300" alt="胡桃" title="胡桃" border="15">src必须放在最前面 后面的没顺序
6.图像路径
6.1相对路径
<img src="9.jpg" width="300">//同级路径<img src="image/13.png " width="300">//下一级的路径 <img src="下一级文件名/13.png "> 下一级文件就是本文件夹中包含的一个文件夹,类似套娃<img src="../9.jpg" width="300"> <img src="../../9.jpg" width="300"> //读取上级文件夹的图片 ../ 多少个../就是返回多上个上级文件夹
6.2绝对路径
没啥好讲的 知道有这么个东东 格式和相对路径一样,至于属性值直接复制图片所在位置就好了,不过vscode目前打不开从本地计算机复制的图片
7.链接
<a herf="http://" ></a> 属性herf是必要的,“属性值”放链接,其实现在的http:// 这个东东我个人认为可以不用了,复制链接的时候一起复制上去就好了啦<a href="/" target="_blank">原神 _blank</a> <br>_blank是在新的窗口打开<a href="/" target="_parent">原神 _arent</a> <br><a href="/" target="_self">原神 _self</a><br><a href="/" target="_top">原神 _top</a><br>在没有盒子的情况下 _self,_parent,_top 是在原窗口打开---------------------------------------------------------------------------------------------------------空链接<br><a href="#">原神</a><br>下载压缩文件<br><a href="image.zip">原神</a><br>打开内部链接<br>就是用我们自己写的东西当成链接<a href="day002.html"> 原神</a><br>通过图片音频等打开链接<br><a href="/" target="_blank"><img src="9.jpg" width="300"></a>锚点这个锚点不局限于一下的例子嗷 可拓展性很高 主要的就是 `<a herf="#自定义名称"></a>` 与`<a id="自定义名称"></a>`>>>其中嗷 id不一定是要存在与<a></a>里的,他可以用于<h1 id="自定义名称"></h1>也可以是<p id="自定义名称"></p>
8.注释 (快捷键:ctrl+/)
------->分割线<---------
4.特殊字符
目前就搞那么多啦 下面是用法
<h4>这是空格 这是空格</h4><h4>这是<p>段落符号</h4><h4>这是上标 我是个好人¹; </h4>