HTML----＞常用标签&&链接&&特殊符号

本文链接：https://blog.csdn.net/lao_bai_cai/article/details/125961964

本文档详细介绍了从HTML5和CSS3的基础到PHP的过渡过程，涵盖了Web标准的构成，包括HTML作为结构、CSS作为表现以及JavaScript作为行为。讲解了HTML5的常用标签如标题、段落、图片、链接等，以及路径、注释的使用。此外，还涉及了链接的多种目标属性和特殊字符的表示方法，是初学者快速掌握网页制作并过渡到PHP开发的实用教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTEL5+CSS3------>HPH

黑马程序视频

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

1.Web标准的构成

结构：HTML 没毛的鸟

表现：CSS 有毛的鸟

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

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.特殊字符

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

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

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