当前位置：首页 > 行业动态 > 正文

html写基础网页

HTML基础网页需包含DOCTYPE声明、html/head/body结构，使用h1-h6定义标题，p标签编写文本，a标签创建链接，img插入图片，注意语义化标签和W3C

HTML基本结构

HTML文档由<!DOCTYPE html>声明开头，定义文档类型为HTML5，核心结构包括<html>根元素，内部分为<head>和<body>两部分：

  • <head>：包含元数据（如标题、字符集、样式表链接等）。
  • <body>：包含网页可见内容（文本、图片、链接等）。

示例代码：

html写基础网页 第1张

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">示例页面</title>
</head>
<body>
    <h1>欢迎学习HTML</h1>
    <p>这是一个基础网页示例。</p>
</body>
</html>

常用标签与元素

标题标签 <h1>~<h6>

定义网页层级标题，<h1>为最高级别，<h6>为最低。

<h1>一级标题</h1>
<h2>二级标题</h2>

文本标签

  • 段落<p>：块级元素,自动换行。
  • 换行<br>：强制换行。
  • 水平线<hr>：插入一条水平分割线。 
    <p>这是第一段文字。</p>
<br>
<hr>

文本格式标签

  • 加粗<strong> 或 <b>
  • 斜体<em> 或 <i>
  • 下划线<u>
    <p><strong>重要内容</strong> 需强调显示。</p>

列表与表格

无序列表 <ul> 和有序列表 <ol>

  • 无序列表：使用<ul>包裹，项用<li>定义。
  • 有序列表：使用<ol>包裹，项用<li>定义。 
    <ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>
<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

表格 <table>

作用 示例
<table> 定义表格 <table border="1">
<tr> 定义行 <tr><td>单元格</td></tr>
<th> 表头单元格（加粗） <th>姓名</th>
<td> 普通单元格 <td>张三</td>

完整表格示例：

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
</table>

链接与图片

超链接 <a>

  • 语法：<a href="目标URL">链接文本</a>
  • 特殊链接：
    • 邮件链接：<a href="mailto:example@test.com">联系邮箱</a>
    • 下载链接：<a href="file.pdf" download>下载PDF</a>

图片 <img>

  • 语法：<img src="图片路径" alt="描述文本" />
  • 注意：必须指定alt属性（替代文本）。 
    <img src="image.jpg" alt="风景图" />

多媒体与表单

音频/视频 <audio><video>

  • 音频：<audio src="music.mp3" controls></audio>
  • 视频：<video src="movie.mp4" controls></video>
  • 多源兼容：通过<source>标签指定多种格式。 
    <video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持视频播放。
</video>

表单 <form>

作用 示例
<form> 定义表单 <form action="submit.php">
<input> 输入框 <input type="text" />
<textarea> 多行文本域 <textarea rows="5"></textarea>
<button> 提交按钮 <button type="submit">提交</button>

表单示例：

<form action="submit.php" method="post">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    <button type="submit">登录</button>
</form>

问题与解答

问题1：HTML5有哪些新特性？

解答：

  1. 语义化标签：如<header>、<footer>、<article>等,提升可读性。
  2. 本地多媒体支持：直接使用<audio>和<video>标签嵌入媒体。
  3. Canvas绘图：通过<canvas>实现动态图形渲染。
  4. 更严格的语法：如<a>、<li>等标签必须闭合。

问题2：如何让网页在不同设备上自适应？

解答：

  1. 使用响应式设计：通过CSS媒体查询（@media）调整布局。
  2. 百分比宽度：如<div style="width: 80%">。
  3. 视口设置：在<head>中添加<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML
0

相关文章