HTML上-CSDN博客

本文链接：https://blog.csdn.net/memery_key/article/details/106050988

HTML标签上

基础语法

设置格式

html5格式

<!DOCTYPE html>

设置语言以及html主标签

<html lang="en"> <html/>

head头部标签

<head><head/>

body主体标签

<body><body/>

h标题标签

<h1>我真帅</h1>  
<h2>我真帅</h2>

p段落标签以及文字属性设置

<p><strong>加粗</strong>我粗了</p>
<p><em>倾斜</em>我歪了</p>
<p><del>删除线</del>我腰斩了</p>
<p><ins>下划线</ins>我滑翔了</p>

或者这样，推荐用上面的

<p><b>加粗</b>我粗了</p>
<p><i>倾斜</i>我歪了</p>
<p><s>删除线</s>我腰斩了</p>
<p><u>下划线</u>我滑翔了</p>

div以及span仓库标签

<div>一个div标签，只能一个人独占一行</div>123
<span>百度</span>
<span>搜狗</span>
<span>一个span标签，能好多人占一行</span>

img图像标签以及图像属性设置

<img src="1.jpg"/> <p>图片标签，必须带src属性</p>
<h4>alt替换文本，图像显示不出来的时候用文字替换</h4>
<img src="1.jpg" alt="我是我"/> 
<h4>title，鼠标放图像上显示文字</h4>
<img src="1.jpg" alt="我是我" title="我是思密达"/> 
<h4>width设置宽度</h4>
<img src="1.jpg" alt="我是我" title="我是思密达" width="500"/> 
<h4>height设置高度，一般高度，宽度只要一个</h4>
<img src="1.jpg" alt="我是我" title="我是思密达" height="500"/> 
<h4>height设置边框粗细</h4>
<img src="1.jpg" alt="我是我" title="我是思密达" height="500" border="15"/>

图像标签注意点：

1、图像可以有多个属性，必须在标签名后面

2、不分先后，空格分开

3、采取键值对的形式，即key=“value”，属性=“属性”

图像标签与路径

目录文件夹：就是普通文件夹，存放作页面的相关素材

vscode打开文件夹

文件夹拖到vscode里

路径

相对路径

同一级路径    <img src="1.jpg" />
下一级路径	 <img src="image/1.jpg" />
上一级路径	 <img src="../1.jpg" />

绝对路径

盘符路径：<img src="C:\Users\19674\Desktop\1.jpg" />
网络路径：<img src="https://www.baidu.com/1.jpg" />

超链接标签

<a></a>

#属性
href  必须写，用于指定目标的url路径

target 规定打开连接的方式，其中_self为默认值，在当前窗口打开，_blank为在新窗口中打开的方式

链接分类

1、外部链接

<a href="https://www.baidu.com" target="_blank"></a>
<a href="https://www.baidu.com" target="_self"></a>

2、内部链接

<a href="1.html" target="_blank"></a>
<a href="1.html" target="_self"></a>

3、空连接

<a href="#" ></a>

4、下载连接

<a href="img.zip" ></a>

5、网页元素连接

<a href="www.baidu.com" ><img src="1.jpg"/></a>

6、锚点连接

可以快速定位到页面某个位置

设置属性值为#名字的形式

找到目标标签，需要加一个id属性=刚才的名字

链接标签<a href="#two">第二即集</a>
目标标签<h3 id="two">第二集介绍</h3>

注释标签

给程序员看的，不会显示

<!--我累了-->
快捷键  ctrl+/

特殊字符(常用)

空格		   &nbsp;
<			&lt;
>			&gt;