前端菜鸟的掉发过程（一）——HTML

HTML标签

标题标签

只有h1 到h6

<h1>我是标题1</h1> 
<h2>我是标题2</h2> 
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5> 
<h6>我是标题6</h6>

段落p

特点：多个段落竖着排列，段落与段落垂直方向有缝隙

段落默认换行是根据浏览器宽度切换

指定换行位置可以添加br进行换行

字体

加粗

font-weight

b 或者 strong

特点：多个b或者strong的时候，默认是横着排列的 水平方向上有缝隙（是因为把回车识别了空格）b和strong的相同和不同点

相同点：都是横着排列的，且视觉效果一样

不同点：b bold单词的简写 bold加粗 b就是单纯直接的加粗 strong 强壮 strong是有强调的意思在

如果想要视觉加粗又想要有突出强调的意思，就用strong

斜体

i em

特点：

1、默认横着排列

2、水平之间有空隙

3、视觉效果是一样的

i和em的相同和不同点

相同点：都是可以让文字倾斜且横着排列

不同点： i 是italic 倾斜，斜体字 只是单纯的倾斜 em 是表示有突出倾斜的意思

删除线 s del strike

下划线 u

图片标签img

<img src="显示的图片的名称"> 
title=" 鼠标在图片上的时候显示的内容" 
alt="设置当图片丢失不显示的时候提示的信息"（ 有利于搜索引擎优化）
width="宽度" height="高度"如果""不写单位,默认单位是像素。单位也可以%，是相对单位相对于最近的父元素,目前最近的父元素是body

 

锚点

a超链接效果是实现一个页面跳转到另一个页面

如果想要实现当前页面不同位置的跳转 也是a 但是需要配合id做锚点

<a href="#id值"></a> <标签 id=""></标签>

id在锚点效果里面，属性值可以随便给

超链接标签a

特点:横着排列，水平之间也是有缝隙，且文字颜色不再是黑色，还有下划线

在写本项目内文件相互跳转的时候，需要先分析在书写代码

1.确定当前文件是谁在哪（当前书写的代码文件）

2.确认目标文件是谁在哪（最终想要跳转的文件）

3.分析当前文件和目标文件之间的关系

（1）如果都在同一目录，那么href中书写的语法href="目标文件的名字.扩展名"

（2）如果当前文件所在文件夹和目标文件所在文件夹在同一目录，那么href="../目标文件所在的 文件夹名字/目标文件的名字.扩展名"

后退一步.. /起到分割的作用 /前面就是第一步操作 /后面就是下一步操作

（3）当前文件和目标文件所在的文件夹在同一目录 href="目标所在的文件夹/目的文件名字.扩展名"

<a href=""></a> 
href="目标地址" （想要正确跳转必须添加http://） 
title="设置鼠标悬停之后的提示信息" 
target="设置超链接的窗口打开方式" _blank 打开新的窗口 _self 本窗口打开（默认值） _search打开新窗口 有检索功能（利于搜索引擎优化的过程中抓取内容） _parent 视觉效果与默认效果一样 可在父框架内容中打开链接文档 _top 顶部 视觉效果与默认一样

无序列表

无序列表 ul li 
默认的列表符号是实心圆 
<ul>
 <li>无序列表</li> 
</ul> 
不想要列表符号 用属性type="none" 
type类型 type="square" square 方形 type="circle" circle 空心圆 type="disc" disc 实心圆

有序列表

有序列表 ol li

默认数字顺序 也可以添加type属性（没有none）和start开始书写

start="数字" 从第几个开始

<ol <li>有序列表</li> </ol> 

type="1" type="A" start="7" type="a" type="I" type="i"

自定义列表

自定义列表 dl dt dd 适合图文混排的效果

官方定义中，dd可以有多个，dt只有1个

<dl>
	<dt>自定义的标题</dt>
	<dd>自定义的描述</dd>
</dl>