前端
<!-- 这是HTML注释格式 -->
前端：三大技术
HTML：负责显示页面内容（文字、按钮、输入框等）CSS：负责页面内容的布局和样式JavaScript：负责实现功能。
前端文件的后缀名：html、htm、shtml
html现在最常用的前端文件后缀名。htm和html相等，从前DOS操作系统后缀名存在限制，文件后缀名长度<=3shtml:内置了脚本命令的html文件
HTML页面基本结构框架
HTML文件可理解为是一个<html标签>，<html>标签内包含<head>标签和<body>标签。
<head>标签存放页面部分配置项，<body>标签显示页面内容
<html>标签分为双标签（一般标签）、单标签（自闭合标签）
双标签：<标签名 属性1=属性值1 属性2=属性值2 .....>内容</标签名>单标签：<标签名 属性1=属性值1 属性2=属性值2 .....><标签名 属性1=属性值1 属性2=属性值2 ..... />
属性=属性值-> 固定写法，用于修改标签的内容或样式
标签名-> 固定写法，不同的标签用于显示不同的内容，用法是固定的。
html语法和Markdown语法属于同一类。
<!DOCTYPE html><!-- 声明这是一个html5文件，防止浏览器出现浏览器解析出现乱码 --><html><!--根标签,只能有一个html标签--><head><!--存放元信息，不会显示--><meta charset="utf-8"><!--解析，charset用于页面指定编码--><title>这是一个HTML页面</title><!-- 页面的标题 --></head><style><!--css内容都在这里此标签中写入 --></style><body><!--所写的内容，和呈现的内容--></body></html>
文本标签
标题标签：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
段落标签：<p>
标题标签和段落标签会自动换行（一个标签代表一行或者一段，写下一个标签时自动另起一行）
文字倾斜标签：<i>，<em>文字加粗标签：<b>，<strong>换行标签：<br>水平线标签：<hr>行内文本标签：<span>
html页面敲任意多个空格恒等于一个空格
html中一个空格可以用下列两种方式表示： 或者 
表示一个像素（px）单位的空格 表示一个汉字的宽度一个 = 16 —> 1em = 16px
<!DOCTYPE html><html><head><meta charset="utf-8"><title>这是一个HTML页面</HTML></title></head><body><!-- 标题标签：<h1>、<h2>、<h3>、<h4>、<h5>、<h6> --><h1>我国人均预期寿命提高到77.93岁</h1><h2>我国人均预期寿命提高到77.93岁</h2><h3>我国人均预期寿命提高到77.93岁</h3><h4>我国人均预期寿命提高到77.93岁</h4><h5>我国人均预期寿命提高到77.93岁</h5><h6>我国人均预期寿命提高到77.93岁</h6><!-- 段落标签：<p> --><p>  中新网7月5日电 国家卫健委5日就健康中国行动实施以来进展与成效举行发布会，健康中国行动推进委员会办公室副主任、国家卫生健康委规划司司长毛群安在会上介绍称，目前，我国人均预期寿命提高到77.93岁，主要健康指标居于中高收入国家前列，《“健康中国2030”规划纲要》阶段性目标总体如期实现，健康中国行动主要目标提前实现，健康中国建设开局起步良好、进展顺利，为我国全面建成小康社会、推动“十四五”经济社会发展发挥了重要作用。</p><p>毛群安指出，健康中国行动实施取得了明显的阶段性成效：</p><!-- 标题标签和段落标签会自动换行（一个标签代表一行或者一段，写下一个标签时自动另起一行） --><i><b>文字倾斜又加粗</b></i><b><i>文字倾斜又加粗</i></b><em>文字倾斜</em><strong>文字加粗</strong><!-- 换行标签：br --><br><!-- 水平线标签：hr --><hr><span>一 二</span><br><span>一 二</span><!-- 行内文本标签：span --><span>我的京东</span> | <span>京东会员</span> | <span>登陆 注册</span></body></html>
超链接和图片标签
图片标签：<img>
src=
可以写入链接。
可以写本地图片路径
title=鼠标放到图片上可以提示文字
alt=当图片不显示时，显示文字
width=、height=能够修改图片、标签盒子等的显示宽度和高度
超链接标签：<a>
href=引入在线链接。可以引入本地文件(html文件)可以引入id选择器target=_self:当前标签页跳转（默认）_blank:新的标签页跳转
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><h1 id="top">顶部</h1><img src="/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"alt="百度" title="点击一下，了解更多"><img src="./img/1.jpg" alt="" width="100pxpx" height="250px"><a href="" target="_blank">百度一下</a><a href="./01-文本标签.html">文本标签</a><!-- 将图片变为可点击的超链接 --><a href="/act/2890/axz/index.html" target="_blank"><img src="/images/ulink/act/2890/axz/bg-kv1.jpg" alt="" width="100px" height="50px"><p>一人之下手游</p></a><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p id="mid"></p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><p>“高三压力太大，起得比鸡早,睡得比狗晚,干得比牛多!我都想大哭一场。”</p><!-- 页面跳转 --><!-- id属性如何调用：使用#调用id属性 --><a href="#top">返回顶部</a><a href="#mid">返回中部</a></body></html>
列表和内联框架
<iframe>内联框架
<iframe>经常被用在登录、注册页面
列表
列表中的内容放在<li>
列表在网站中主要被用来做下拉菜单和展示同一类内容
有序列表<ol>无序列表<ul>
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><iframe src="/"width="1300px"height="400px" ></iframe><ul><p>千峰成都校区学科一览</p><li>Java</li><li>前端</li><li>Python</li><li>UI</li><li>物联网</li></ul><ol><p>千峰成都校区学科一览</p><li>Java</li><li>前端</li><li>Python</li><li>UI</li><li>物联网</li></ol></body></html>
