## 思维导图在开始学习前端时，先搞清楚网页结构，HTML结构，css表现，以及js行为
然后开始学习创建项目，尽量可以根据格式简历项目
了解html的基本结构，主要是头部和主体
最后是 一些基础的标签。
1.文本相关的标签
效果图
代码片段
<body>
<!-- 标题标签 h-->
<h1>一级标签</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 段落标签 -->
<p>
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。<i>这是一个段落。</i>这是一个段落。<b>这是一个段落。</b>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</p>
<hr>
<p>
这是一个<i><b>段落</b></i>。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</p>
<!-- 倾斜标签 -->
<i>倾斜1</i>
<em>倾斜2</em>
<!-- 加粗标签 -->
<b>加粗1</b>
<strong>加粗2</strong>
<i><b>加粗倾斜</b></i>
<!--
上标<sup></sup>
下标<sub></sub>
下划线<u></u>
删除线<s></s> <del></del>
-->
<p>这是一个人<u>段落</u>。<sup>[1]</sup>这是一个人段落。[2]这是一个人段落。<sub>[3]</sub>这是一个人段落。[4]这是一个人段落。<s>这是一个人段落</s>。这是一个人段落。这是一个人段落。这是一个人段落。这是一个人段落。这是一个人段落。这是一个人段落。</p>
</body>
2.特殊标签特殊符号
效果图
代码片段`
<body>
<!--
特殊标签：
强制换行<br>
分割线<hr>也可自动换行
特殊符号：
空格
©版权符号
®商标符号
>大于号
<小于号
-->
<p>这是一个段落。aaaaaa
<br>aaaaa。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。<hr>这是一个段落。这是一个段落。这是一个段落。</p>
<hr>
©版权符号
®商标符号
>大于号
<小于号
</body>
3.列表
列表分为 有序列表、无序列表、自定义列表
自定义列表 dl-dt（一般放图片）-dd（对dt的解释说明）
dt下面是可以跟很多dd的，可以有多条解释说明语句
列表符号：
无序列表符号可通过type属性更改：circle是空心圆 square是实心方块 disc是实心圆
效果图
代码片段
<body>
<!-- 有序列表 ol-li（列表项） -->
<ol>
<li>草莓</li>
<li>芒果</li>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</ol>
<!-- 无序列表 ul-li（列表项） -->
<ul>
<li>草莓</li>
<li>芒果</li>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</ul>
<!-- 自定义列表 dl-dt（一般放图片）-dd（对dt的解释说明）
dt下面是可以跟很多dd的，可以有多条解释说明语句
列表符号：
无序列表符号可通过type属性更改：circle是空心圆 square是实心方块 disc是实心圆
-->
<dl>
<dt>11</dt>
<dd>草莓</dd>
<dt>22</dt>
<dd>芒果</dd>
<dt>33</dt>
<dd>苹果</dd>
</dl>
<!-- 扩展 -->
<ol type="A" start="3">
<li>草莓</li>
<li>芒果</li>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</ol>
</body>
4.图片
图片标签img
src:图片路径
alt:当图片加载不出来的时会显示提示信息
title：当鼠标滑过的时候显示的提示信息
效果图
代码片段
<body>
<!--
图片标签img
src:图片路径
alt:当图片加载不出来的时会显示提示信息
title：当鼠标滑过的时候显示的提示信息
-->
<img src="images/1.png" alt="图片显示失败" title="标签">
</body>
5.超链接
超链接 a
href:你要跳转的地址
target:
_self:在当前窗口页打开（默认值）
_blank:在新窗口打开
效果图
代码片段
<body>
<!--
超链接 a
href:你要跳转的地址
target:
_self:在当前窗口页打开（默认值）
_blank:在新窗口打开
-->
<a href="http://www.baidu.com" target="_blank">index</a>
</body>
6.表单
效果图
代码片段
<body>
<!--
表单
作用：用来收集用户信息
表单标签：form
属性：action写你的提交地址的（服务器的地址）
-->
<form action="">
<!-- 文本输入框 -->
用户名：<input type="text" >
<br><br>
<!-- 密码输入框 -->
密码：<input type="password">
<br><br>
<!-- 提交 -->
<input type="submit">
<br><br>
<!-- 重置 -->
<input type="reset">
</form>
</body>
以上都是一些基础的html标签，比较简单，像一些<h></h>标签 或者<p></p>标签以后会常用，
再比如<i></i>标签与<em></em>标签都是对文字的加粗，但是**<em>标签加重语气，表示强调，
搜索引擎优化时会被作为重点。** **<strong> 标签和 <em> 标签一样，用于强调文本，
但它强调的程度更强一些。**
扫一扫
14万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
