代码改变世界

实用指南:pink老师html5+css3day01

2025-10-16 12:26  tlnshuju  阅读(5)  评论(0)    收藏  举报

标题段落标签

在这里插入图片描述

在这里插入图片描述

<!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>