HTML基础知识（部分）：

学习目录：

标签
路径
超链接
列表

1. 标签

1.1 单标签

注释标签 Ctrl + /
例：
换行标签 
例：蒋丞选手很优秀 向丞哥学习
水平线标签 < hr/>
例：<hr />

1.2 双标签

段落标签 
“千金难买我愿意。”

特点：段落上下自动生成空白行。 换行不会生成空白行。
标题标签 h1-h6

<h1>向丞哥学习</h1>
<h2>向丞哥学习</h2>
<h3>向丞哥学习</h3>
<h4>向丞哥学习</h4>
<h5>向丞哥学习</h5>
<h6>向丞哥学习</h6>

在这里插入图片描述
注意：h1在一个页面只能出现一次

文本标签
文本格式化标签
文本加粗标签 
文本倾斜标签 
删除线标签 < del>< /del> < s>< /s>
下划线标签 < ins>< /ins> 
注意：为了使代码更加具有语义化，尽量使用 
< del>< /del> < ins>< /ins>
图片标签 <img src="qa.jpg" alt="丞哥" title="大飞" width="200" height="200">

src 图片的来源（必写）
alt 替换文本图片不显示的时候显示的文字
title 提示文本鼠标放到图片上显示的文字
width 图片宽度
height 图片高度

注意：图片没有定义高度的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。

2. 路径

2.1 相对路径

文件和图片在同一个目录（文件夹）。< img src=“图片名”>。

<img  src="qa.jpg">

图片在文件下一级目录里。< img src=“文件夹/图片名”>。

<img  src="文件名/qa.jpg" >

图片在文件上一级目录里。< img src="…/图片名">。

<img  src="../qa.jpg" >

图片在文件的上一级的其他目录里。< img src="…/文件名/图片名">

<img  src="../图片/qa.jpg" >

总结：找到下一级目录（文件夹）的图片用/，跳出当前目录使用…/

2.2 绝对路径

(一般不使用）

<img  src="D:\guo\aaa\图片/qa.jpg" >

3. 超链接

<a href="JiangChenXuanShou.html"  title="提示文本" target="_self">蒋丞选手</a>

在这里插入图片描述
href 去往的路径，跳转的页面（必写）
title 提示文本鼠标放到链接上显示的字
target="_self" （默认值）在自身页面打开，覆盖原页面
target="_blank" 重新打开一个新页面，原页面依旧存在，不被覆盖

注意：让所有超链接都在新窗口打开，可将< base target="_blank">写于< head>< /head>中

3.1 锚链接

1.先定义一个锚点

<p id="aa">

2.超链接到锚点

<a href ="#aa">回到顶部</a>

总结：实现本页面内的各方位跳转。例如：导航栏。

3.2 空链

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

总结：不知道链接到什么页面时可用空链，利于后期加入

4. 列表

4.1 无序列表

<ul type="circle">
    <li>列表内容</li>
    <li>列表内容</li>
    <li>列表内容</li>
    <li>列表内容</li>
 </ul>

在这里插入图片描述
type=“square” 小方块
type=“disc” 实心小圆圈（默认）
type=“circle” 空心小圆圈

4.2 有序列表

<ol type="1" start="3">
    <li>列表内容</li>
    <li>列表内容</li>
    <li>列表内容</li>
    <li>列表内容</li>
 </ol>

在这里插入图片描述
type=“1” 决定有序列表类型,其值可以为1,a,A,i,I
start=“3” 决定有序列表开始的位置。

4.2 自定义列表

<dl>
	<dt>列表标题</dt>
	<dd>列表内容</dd>
	<dd>列表内容</dd>
	<dd>列表内容</dd>
</dl>

在这里插入图片描述

自定义中的< dt>< /dt> 会缩进

HTML基础入门知识