标签：段落 这是 一个 标签 基础 效果图 HTML nbsp
## 思维导图在开始学习前端时，先搞清楚网页结构，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> 标签一样，用于强调文本，
但它强调的程度更强一些。**
标签：段落,这是,一个,标签,基础,效果图,HTML,nbsp 来源： https://blog.csdn.net/weixin_45476607/article/details/118960422
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。