pink老师html5+css3day01
文章目录
- 标题段落标签
- 强调与注释
- 块内元素和行内元素
- 图片标签
- 视频标签
- 超链接
- 布局标签
- 列表标签
- 表格标签
- 表单控件
- 综合案例
标题段落标签
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>这是一个标题</h1><h2>这是一个二级标题</h2><h3>这是一个三级标题</h3><h4>这是一个四级标题</h4><h5>这是一个五级标题</h5><h6>这是一个六级标题</h6><p>这是一个段落</p>
</body></html>
强调与注释
crtl+/是注释
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!-- crtl+/ -->
<!-- 注释内容 --><body><h2>有语义的 </h2><strong>这是一个强调的标题</strong><em>这是一个斜体的标题</em><ins>这是一个下划线的标题</ins><del>这是一个删除线的标题</del><h2>无语义的 </h2><b>这是一个加粗的标题</b><i>这是一个斜体的标题</i><u>这是一个下划线的标题</u><s>这是一个删除线的标题</s>
</body></html>
块内元素和行内元素
图片标签
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h2>图片</h2><img src="image/1.jpg" alt="这是一张图片" title="这是一张图片">
</body></html>
视频标签
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h2>SU7</h2><!-- 静音才能自动播放 --><!-- <video src="video/top.mp4" controls muted loop poster="image/su7.jpg" width="500"></video> --><!-- 兼容性写法 --><video width="500" controls muted loop poster="image/su7.jpg"><source src="video/top.mp4" type="video/mp4"><source src="video/top.webm" type="video/webm"><p>您的浏览器不支持 video 标签。</p></video><h2>音频</h2><!-- 音频也可像视频那样兼容 --><audio src="audio/1.mp3" controls muted loop></audio>
</body></html>
超链接
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h2>超链接</h2><!-- 内部链接 --><a href="06-视频.html" target="_blank">音视频</a><!-- 外部链接 --><a href="https://www.baidu.com" title="打开百度" target="_blank">百度</a><!-- 下载链接 --><a href="image/su7.jpg" download>下载图片</a><!-- 邮箱链接 --><a href="mailto:123@qq.com">发送邮件</a><a href="#">空链接</a>
</body></html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>锚点链接</title><style>html {scroll-behavior: smooth;}</style>
</head><body><h1>什么是超级链接？</h1><p>超链接是互联网提供的最令人兴奋的创新之一，它们从一开始就一直是互联网的一个特性，使互联网成为互联的网络。</p>超链接主要包含：<p><a href="#1">1. 内部链接</a> <br>2. 外部链接 <br>3. 空链接 <br>4. 下载链接 <br><a href="#2">5. 邮件链接</a> <br></p><h2 id="1">1. 内部链接</h2><p>超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分，我们可以在一个简单的网址上提供应用程序。几乎任何网络内容都可以转换为链接，点击（或激活）超链接将使网络浏览器转到另一个网址（URL）。</p>例如：<a href="./11-音视频标签.html">音视频</a>如果有需要作为链接的图片，使用 a元素来包裹要引用图片的 img 元素。下面的示例使用相对路径来引用本地存储的 SVG 图像文件。<h2>2. 外部链接</h2>例如：<a href="https://www.deepseek.com/" title="deepseek" target="_blank">deepseek</a>你可能要添加到你的链接的另一个属性是 title。这旨在包含关于链接的补充信息，例如页面包含什么样的信息或需要注意的事情。<h2>3. 空连接 </h2><p>在 HTML 中，空连接（Empty Link）通常指的是没有指定 href 属性或 href 属性值为空的 a标签。空连接的 href 属性值为空字符串（""）或 # 字符。</p>例如：<a href="">点击跳转到顶部</a><p>空链接点击默认会跳到当前页面的顶部。</p><p>空连接的作用是为了提供一个占位符，用于在页面的特定位置创建一个目标，以便其他链接或脚本可以跳转到该位置。这在页面布局中非常有用，尤其是当你需要在页面的不同部分之间创建导航链接时。</p><h2>4. 下载链接 </h2><a href="./download.zip">下载软件</a><p>下载链接是一种特殊类型的链接，用于将文件从服务器下载到用户的计算机上。当用户点击下载链接时，它会触发浏览器的下载功能，将文件保存到用户的本地存储中，而不是直接在浏览器中显示文件内容。</p><p>下载链接通常用于提供软件、文档、图片或视频等可下载资源，以便用户可以离线使用或分享给他人。</p><h2 id="2">5. 邮件链接 </h2><p>当点击一个链接或按钮时，可能会开启新的邮件的发送而不是连接到一个资源或页面。这种场景可以使用 <a> 元素和 mailto: URL 协议实现。</p><p> 其最基本和最常用的使用形式为一个指明收件人电子邮件地址的 mailto: 链接。例如：</p><a href="mailto:123@qq.com">联系我们</a></body></html>
布局标签
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h2>网页结构标签</h2><header>头部标签</header><nav>导航栏</nav><main><aside>侧边栏</aside><article>主要内容标签</article></section></main><footer>页脚标签</footer><section>章节标签</section><h2>div和span</h2><div>我是div</div><div>我是div</div><span>我是span</span><span>我是span</span>
</body></html>
列表标签
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h2>无序列表</h2><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul><h2>有序列表</h2><ol><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol><h2>自定义列表</h2><dl><dt>名词解释</dt><dd>名词解释的详细内容</dd><dt>动词解释</dt><dd>动词解释的详细内容</dd></dl>
</body></html>
表格标签
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h2>表格标签</h2><table border="1"><thead><tr><!-- th可以居中加粗常常用在第一行或第一列 --><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><tbody><tr><td>张三</td><td>18</td><td>男</td></tr><tr><td>李四</td><td>20</td><td>女</td></tr></tbody></table>
</body></html>
表单控件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action=""><ul><li><label>用户名：<input type="text" name="loginname" autocomplete="off" placeholder="请输入用户名"></label></li><li><label>密码：<input type="password" name="loginpwd" autocomplete="off" maxlength="12" placeholder="请输入密码"></label></li><li>性别：<input type="radio" name="gender" value="1" checked id="male"><label for="male">男</label><input type="radio" name="gender" value="0" id="female"><label for="female">女</label></li><li>爱好：<label><input type="checkbox" name="hobby" value="1">足球</label><label><input type="checkbox" name="hobby" value="2">篮球</label><label><input type="checkbox" name="hobby" value="3">跑步</label></li><li>头像：<input type="file" name="file" multiple accept=".exe,.jpg,.png,.gif"></li><li><label>留言：<textarea name="message" cols="30" rows="10" placeholder="请输入留言"></textarea></label></li><li>地址：<select name="address"><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option></select></li><li><button disabled>登录</button></li></ul></form>
</body></html>
综合案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>科技日报首页</title><style>html {scroll-behavior: smooth;}</style>
</head><body><header id="1"><h1><a href="#">科技日报</a></h1>探索未来科技，传递创新力量<!-- 导航栏 --><nav><ul><li><a href="#">首页</a></li><li><a href="#">科技动态</a></li><li><a href="#">国际科技</a></li><li><a href="#">科技论坛</a></li><li><a href="#">今日要闻</a></li></ul></nav></header><main><h2>今日要闻</h2><h3>1.量子计算机取得突破性进展</h3><div>这次中国自主量子计算机“本源悟空”全球首次运行十亿级AI微调大模型，标志着国内已经开始通过量子-经典混合框架，将大模型参数优化转化为量子退火问题，实现量子计算机对AI大模型任务的协助。</div><br><div>这将有助于国产AI大模型的技术落地。同时，由于量子计算机的算力优势，一旦相关的技术壁垒被攻克，国产算力的发展将不再受制于美西方的芯片管制措施。除此之外，量子计算还会优先处理高维参数优化、注意力机制等计算密集型任务，与经典算力形成互补。</div><br><div>结合国内现有的AI芯片产业，两者就可以发挥出1+1大于2的能力。但就目前而言，国用量子计算机在商用领域仍需要解决诸多问题。比如，需将量子比特数从72提升至千级规模，同时将量子门保真度从99.5%提高至99.99%，涉及超导材料、误差校正等关键技术攻关。</div><br><div>量子计算需与经典体系深度耦合，推动编译器、开发工具链等生态成熟，降低应用门槛等。但就目前而言，国内在量子计算机领域的确已经开始领先全球，叠加美方近段时间的关税措施，其综合研发实力已经大不如之前。<br></div><br><div><img src="image/1.webp" alt=""></div><span>人工智能在医疗领域的最新应用</span><h3>2. AI辅助诊断准确率突破95%</h3><div>近日，美国科技公司DeepHealth宣布，其研发的AI医疗诊断系统在乳腺癌筛查中的准确率超过95%，远超人类医生的平均水平。该系统通过深度学习技术，能够快速分析医学影像，识别早期癌症病变，并提供诊断建议。</div><br><div>目前，DeepHealth的AI系统已在美国多家医院试点应用，未来有望在全球范围内推广。专家表示，AI技术的引入将极大提高医疗诊断的效率和准确性，为患者带来更好的治疗效果。</div><br><div><img src="image/2.webp" alt=""></div><div>这是医疗AI发展的里程碑</div><div>— 引自《科技报告》主编WSWW</div><h3>3.行业数据</h3><table border="1"><thead><tr><th>领域</th><th>投资额（亿美元）</th><th>增长率</th></tr></thead><tbody><tr><td>人工智能</td><td>580</td><td>+42%</td></tr><tr><td>量子计算</td><td>120</td><td>+215%</td></tr><tr><td>生物科技</td><td>80</td><td>+120%</td></tr><tr><td>机器人</td><td>100</td><td>+150%</td></tr><tr><td>VR/AR</td><td>20</td><td>+100%</td></tr><tr><td>自动驾驶</td><td>10</td><td>+120%</td></tbody></tr></table><form action=""><h3>4.读者互动</h3>您最关注的科技领域是？<ul><li><label><input type="radio" name="科技领域" id="">人工智能</label></li><li><label><input type="radio" name="科技领域" id="">量子科技</label></li><li><label><input type="radio" name="科技领域" id="">生物科技</label></li><li><label><input type="radio" name="科技领域" id="">机器人</label></li></ul>留下您的观点：<div><textarea name="您的观点" cols="30" rows="10"></textarea></div><div><button type="submit">提交</button></div></form><h3>5.科技大讲堂</h3><div><video src="image/video.mp4" controls muted poster="image/poster.jpg" width="600"></video></div></main><footer><div>《未来十年科技趋势》讲座节选</div><div>© 2025 科技日报社 版权所有</div><div>京ICP备20250001号-1</div><div>联系我们： <a href="mailto:123@qq.com">123@qq.com</a></div><div>地址：北京市大厦</div><div><a href="#1">返回内容顶部</a></div></footer>
</body></html>