1 标题标签

    <h1>1级标题</h1>
    <h2>1级标题</h2>
    <h3>1级标题</h3>

2 段落标签

<p>前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。</p>
<p>前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。”</p>

3 换行标签

<br>

4 水平线标签

<hr>

5 文本格式化标签

	<b>加粗</b>
	<u>下划线</u>
	<i>倾斜</i>
	<s>删除线</s>

6 图片标签

示例引用图片格式，图片需要和HTML文件在同一路径下！

  <img src="头像.png" alt="图片加载失败">

7 图片标签

示例引用图片格式，图片需要和HTML文件在同一路径下！

    <img src="头像.png" title="这是一个头像图片" alt="图片加载失败" width="500" height="500">

8 路径

8.1 绝对路径

    <img src="D:\文件夹\图片\CPP.jpg" title="这是一个头像图片" alt="图片加载失败" width="500" height="500">

8.2 相对路径-下级目录

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

8.3 相对路径-上级目录

    <img src="../文件夹\图片\11.png">

9 音频标签

    <!-- 
        controls:显示播放控件
        autoplay:自动播放
        loop    :循环播放
     -->
	<audio src="D:\文件夹\音乐/金玟岐 - 岁月神偷 (Demo).mp3" controls autoplay loop></audio>

10 视频标签

    <!-- 
        controls:显示播放控件
        autoplay:自动播放
        loop    :循环播放
     -->
	<video src="D:\电视剧\爱情公寓第一部\爱情公寓 (1).mp4" controls></video>

11 连接标签

<!--
    target="_self" :当前页面跳转-默认
    target="_blank":新标签页打开
-->
     <a href="https://www.bilibili.com/" target="_blank">bilibili官网</a>
     <a href="#/" target="_blank">空链接</a>

12 列表标签

12.1 无序列表

     <ul>
         <p>这是一个水果标签</p>
         <li>苹果</li>
         <li>桃子</li>
         <li>榴莲</li>
         <li>西瓜</li>
         <li>香蕉</li>
     </ul>

12.2 有序列表

     <ol>
         <p>这是一个有序标签</p>
         <li>苹果</li>
         <li>桃子</li>
         <li>榴莲</li>
         <li>西瓜</li>
         <li>香蕉</li>
     </ol>

12.3 自定义列表

     <dl>
         <p>自定义标签</p>
         <dt>帮助中心</dt>
         <dd>联系我们</dd>
         <dd>购物指南</dd>
         <dd>官方商城</dd>
     </dl>

13 表格标签

     <!-- 
         border:表格边框
         width:宽度
         heigh:高度
      -->
      <!-- caption:表格单元格 -->
      <!-- th:表头单元格 -->
     <table border="1" width="300" heigh="200"> <caption>学生成绩单</caption>
        <!-- 表格的表头 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>名次</th>
                <th>科目</th>
            </tr>            
        </thead>
        <!-- 表格的身体 -->
        <tbody>
            <tr>
                <td>小明</td>
                <td>99</td>
                <td>1</td>
                <!-- 跨行合并单元格 -->
                <td rowspan="2">语文</td>
            </tr>
            <tr>
                <td>小华</td>
                <td>97</td>
                <td>2</td>
            </tr>    
        </tbody>
        <!-- 表格的底部 -->
        <tfoot>
                <tr>
                    <td>平均值</td>
                    <!-- 夸列合并单元格 -->
                    <td colspan="2">98</td>
                </tr>    
        </tfoot>
     </table>

14 input标签

14.1 标签属性

     名称:<input type="text"> <br>
     密码:<input type="password"> <br>
     性别:<input type="radio">男 <input type="radio">女  <br>
     爱好:<input type="checkbox"> 敲代码

tepe属性值	说明
text	文本框，用于输入单行文本
password	密码框，用于输入密码
radio	单选框
checkbox	多选框
file	文件选择，用于选择文件后上传文件
submit	提交按钮
reset	重置按钮
button	普通按钮

14.2 文本/密码输入标签介绍

     名称:<input type="text" placeholder="请输入昵称" value="大帅哥" name="变量名称"> <br>
     密码:<input type="password" placeholder="请输入密码"> <br>

14.3 单选框输入标签介绍

	<!-- name：同一个name为同一组单选框 checked：默认选择项-->
	 性别:<input type="radio" checked name="性别">男 <input type="radio" name="性别">女  <br>

14.4 多选框输入标签介绍

爱好:<input type="checkbox" checked> 敲代码

14.5 文件输入标签介绍

    <!--multiple：多文件选择  -->
     文件选择<input type="file" multiple>

14.6 按钮输入标签介绍

    <form>
        名称:<input type="text" placeholder="请输入昵称" value="大帅哥" name="变量名称"> <br>
        密码:<input type="password" placeholder="请输入密码"> <br>
        <!-- name：同一个name为同一组单选框 checked：默认选择项-->
        性别:<input type="radio" checked name="性别">男 <input type="radio" name="性别">女  <br>
        爱好:<input type="checkbox" checked> 敲代码 <br>
        <!--multiple：多文件选择  -->
        文件选择<input type="file" multiple> <br>

        <input type="reset">
        <input type="submit">
        <input type="button" value="普通按钮">
    </form>

15 下拉菜单标签

    所在城市: 
    <select>
        <option>北京</option>
        <option selected>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>

16 文本域标签

    <!-- cols：规定了文本域的可见宽度 -->
    <!-- rows：规定了文本域的可见高度 -->
    <textarea cols="30" rows="10">这里可以输入多行文本</textarea>

17 lable标签

	<!-- 通过lable便签的for属性可以将包裹起来的文本和单选框关联起来 -->
    性别:<input type="radio" checked name="性别" id="one">
    <label for="one">男 </label>
    <input type="radio" name="性别" id="two"> 
    <label for="two">女 </label>

18 无语意布局标签

    <!-- div标签可以自动换行 -->
    <div>我是一个div标签</div><div>我是一个div标签</div><div>我是一个div标签</div>
    <!-- span标签同行显示 -->
    <span>我是一个span标签</span>
    <span>我是一个span标签</span>
    <span>我是一个span标签</span>

19 有语意标签

    <header>网页的头部</header>
    <nav>网页的导航</nav>
    <footer>网页的底部</footer>
    <aside>网页的侧边栏</aside>
    <section>网页的区块</section>
    <article>网页的文章</article>

20 常见字符实体

实体名称	显示结果	描述
	空格
<	小于号	<
>	大于号	>
&	和号	&
"	引号	"
'	撇号(IE不支持)	’

   请你离我远点
                 
                 
                 
                 
                 
                 
                 
                 
    好的