HTEL5+CSS3——>HPH

黑马程序视频

目的:能够复刻各种页面，并且能够快速过度到PHP

1.Web标准的构成

结构：HTML 没毛的鸟

表现：CSS 有毛的鸟

行为动作：JS 会飞的有毛鸟

文章目录

  • HTEL5+CSS3——>HPH
    • 1.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.图片标签

属性 属性值 说明
scr 图片路径 必要的属性
alt 文本 在图像的旁边备注文字（只有在图片加载不出来，损坏的时候文字才会出现）
title 文本 当鼠标碰到图像的时候，提示文字
width 像素 设置图像的宽（横着）
height 像素 设置图像的高（竖着）
border 像素 设置图像的边框粗细（外围） 
  <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="https://ys.mihoyo.com/" target="_blank">原神 _blank</a> <br>_blank是在新的窗口打开<a href="https://ys.mihoyo.com/" target="_parent">原神 _arent</a> <br>
<a href="https://ys.mihoyo.com/" target="_self">原神 _self</a><br>
<a href="https://ys.mihoyo.com/" 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="https://ys.mihoyo.com/" 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.特殊字符

特殊字符 描述 字符代码
空格 &nbsp; 要几个空格,就输几个这个
< 小于号 &lt
> 大于号 &gt
上标 &sup1 &sup2

目前就搞那么多啦 下面是用法

<h4>这是空格&nbsp; &nbsp;&nbsp;&nbsp;这是空格</h4>
<h4>这是&lt;p&gt;段落符号</h4>
<h4>这是上标 我是个好人&sup1;; </h4>