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>
码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践
更多推荐
15
0- 0
已为社区贡献6条内容
所有评论(0)