html5快速复习

通常什么情况下,内容会换行

内容换行主要发生在以下情况：

a) 自动换行：当文本超出其容器宽度时。

b) 强制换行：使用 HTML 标签或 CSS 属性。

c) 段落换行：使用块级元素如

标签。

示例：

<div style="width: 200px; border: 1px solid black;">
  <!-- 1. 自动换行：文本超出容器宽度 -->
  <p>这是一段很长的文本，当它超出div的宽度时会自动换行。</p>
 
  <!-- 2. 强制换行：使用<br>标签 -->
  <p>第一行<br>第二行</p>
 
  <!-- 3. 使用CSS控制换行 -->
  <p style="white-space: pre-line;">
    这行文本
    会在原始换行处换行
  </p>
 
  <!-- 4. 段落换行：每个<p>标签都会新起一行 -->
  <p>第一段</p>
  <p>第二段</p>
</div>复制

img标签作用，常用属性

标签用于在HTML页面中嵌入图像。

<img 
  src="image.jpg" 
  alt="一张示例图片" 
  width="300" 
  height="200" 
  title="鼠标悬停时显示的文字"
  loading="lazy"
  srcset="image-small.jpg 300w, image-large.jpg 1000w"
  sizes="(max-width: 600px) 300px, 1000px"
>复制

属性解释：

• src: 指定图像的URL（必需属性）
• alt: 为图像提供替代文本，用于无法显示图像时或辅助技术
• width: 设置图像宽度（像素）
• height: 设置图像高度（像素）
• title: 鼠标悬停在图像上时显示的工具提示文本
• loading: 设置图像的加载方式，"lazy"表示延迟加载
• srcset: 提供不同分辨率的图像源，用于响应式设计
• sizes: 指定在不同视口大小下应该使用的图像尺寸

a链接作用，常用属性

标签用于创建超链接，将一个页面或资源链接到另一个。

<a 
  href="https://www.example.com" 
  target="_blank" 
  rel="noopener noreferrer"
  title="访问示例网站"
  download="filename.pdf"
  hreflang="en"
>
  点击这里
</a>复制

属性解释：

• href: 指定链接的目标URL（必需属性）
• target: 指定打开链接的方式（"_blank"在新窗口打开）
• rel: 指定当前文档与链接文档的关系
• title: 提供链接的额外信息，鼠标悬停时显示
• download: 指示浏览器下载URL而不是导航到它，可以指定下载文件名
• hreflang: 指定链接文档的语言

iframe有什么用,和a链接如何配合

<!-- iframe定义 -->
<iframe 
  src="about:blank" 
  name="myFrame" 
  width="600" 
  height="400"
  frameborder="0"
  sandbox="allow-scripts allow-same-origin"
  loading="lazy"
></iframe>
 
<!-- 在iframe中打开链接 -->
<a 
  href="https://www.example.com" 
  target="myFrame"
  rel="noopener"
>在iframe中打开链接</a>复制

属性解释：

• src: 指定要嵌入的文档的URL
• name: 给iframe命名，用于target属性
• width: 设置iframe的宽度
• height: 设置iframe的高度
• frameborder: 是否显示边框（0为不显示）
• sandbox: 对iframe中的内容启用额外的限制
• loading: 指定iframe的加载方式（"lazy"表示延迟加载）

什么是列表，无序，有序，定义列表怎么用

HTML提供了三种类型的列表：

无序列表 (

• ):

<ul style="list-style-type: disc;">
  <li>项目1</li>
  <li>项目2</li>
</ul>复制

有序列表 (

1. ):

<ol type="1" start="3" reversed>
  <li>第三步</li>
  <li>第四步</li>
</ol>复制

定义列表 (

):

<dl>
  <dt>术语1</dt>
  <dd>定义1</dd>
  <dt>术语2</dt>
  <dd>定义2</dd>
</dl>复制

属性解释：

• style: 在
  • 中用于设置列表项标记的样式
• type: 在
  1. 中指定编号类型（1, A, a, I, i）
• start: 指定有序列表的起始数字
• reversed: 反转有序列表的顺序

文字倾斜，加粗标签

<p>
  这是<em>强调的</em>文字，这是<i>斜体</i>文字。
  这是<strong>重要的</strong>文字，这是<b>加粗的</b>文字。
</p>复制

标签解释：

• : 表示强调，通常显示为斜体
• : 表示与周围文字不同的文本，通常显示为斜体
• : 表示重要文本，通常显示为粗体
• : 表示需要引起注意的文本，通常显示为粗体

html元素分为行内元素，块级元素，行内块级元素，分别有什么特点。并对这三种元素举例

<style>
  .inline { background: yellow; }
  .block { background: lightblue; width: 200px; height: 100px; }
  .inline-block { background: lightgreen; width: 100px; height: 50px; }
</style>
 
<!-- 行内元素 -->
<span class="inline">行内元素1</span>
<a href="#" class="inline">行内元素2</a>
 
<!-- 块级元素 -->
<div class="block">块级元素1</div>
<p class="block">块级元素2</p>
 
<!-- 行内块级元素 -->
<input type="text" class="inline-block" value="行内块级元素1">
<button class="inline-block">行内块级元素2</button>复制

特点：

• 行内元素：不会独占一行，宽高由内容决定，不可设置宽高
• 块级元素：独占一行，可以设置宽高
• 行内块级元素：不会独占一行，但可以设置宽高

div和span标签作用，和别的标签区别

<div style="border: 1px solid black; padding: 10px;">
  这是一个 <span style="color: red;">div</span> 容器
</div>
<p>这是一个段落，包含一个 <span style="font-weight: bold;">span</span> 元素</p>复制

区别：

• : 块级容器元素，用于组织和布局页面内容
• : 行内容器元素，用于标记文本的一部分
• 可以包含任何元素，而 通常只包含文本或其他行内元素

如何显示一个按钮

<!-- 使用button元素 -->
<button type="button" onclick="alert('Button clicked!')">点击我</button>
 
<!-- 使用input元素 -->
<input type="button" value="也点击我" onclick="alert('Input button clicked!')">
 
<!-- 样式化的链接按钮 -->
<a href="#" class="button" style="display: inline-block; padding: 10px; background-color: #4CAF50; color: white; text-decoration: none;">链接按钮</a>复制

table表格组成与作用

<table border="1" cellpadding="5" cellspacing="0">
  <caption>表格标题</caption>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">表格脚注</td>
    </tr>
  </tfoot>
</table>复制

组成：

• : 定义整个表格
• : 表格标题
• : 表格头部
• : 表格主体
• : 表格脚注
• : 定义表格行
• : 定义表头单元格
• : 定义普通单元格

属性：

• border: 设置表格边框宽度
• cellpadding: 设置单元格内边距
• cellspacing: 设置单元格之间的间距

table合并单元格

<table border="1">
  <tr>
    <td colspan="2" rowspan="2">跨两列两行的单元格</td>
    <td>普通单元格</td>
  </tr>
  <tr>
    <td>普通单元格</td>
  </tr>
  <tr>
    <td>普通单元格</td>
    <td>普通单元格</td>
    <td>普通单元格</td>
  </tr>
</table>复制

属性解释：

• colspan: 指定单元格横跨的列数
• rowspan: 指定单元格纵跨的行数

table边框，单元格内外边距

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>
 
<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>复制

CSS属性解释：

• border-collapse: collapse;: 合并表格边框
• padding: 设置单元格内边距
• border: 设置单元格边框

什么是emmet语法，有什么作用

Emmet是一种快速编写HTML和CSS的工具。它使用简写语法来生成代码。

示例：

输入 table>tr2>td2 然后按Tab键，会生成：

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>复制

什么是回显

回显是指在表单中预先填充或显示已有的数据。这通常用于编辑现有数据或显示用户之前输入的信息。

普通输入框，密码框，回显

<!-- 普通输入框 -->
<input type="text" name="username" value="预填充的用户名" placeholder="请输入用户名" required>
 
<!-- 密码框 -->
<input type="password" name="password" value="预设密码" placeholder="请输入密码" minlength="6">复制

属性解释：

• type: 指定输入框类型
• name: 为表单控件命名，用于服务器端处理
• value: 设置默认值或回显值
• placeholder: 显示输入提示
• required: 标记为必填字段
• minlength: 设置最小输入长度

提交，重置按钮，修改按钮文本

<form action="/submit" method="post">
  <input type="submit" value="提交表单">
  <input type="reset" value="重置表单">
  <button type="button" onclick="alert('自定义操作')">自定义按钮</button>
</form>复制

属性解释：

• type=“submit”: 创建提交按钮
• type=“reset”: 创建重置按钮
• type=“button”: 创建普通按钮
• value: 设置按钮显示的文本
• onclick: 指定点击事件的处理函数

复选，单选，回显

<form>
  <!-- 复选框 -->
  <input type="checkbox" name="hobby" value="reading" checked> 阅读
  <input type="checkbox" name="hobby" value="sports"> 运动
 
  <!-- 单选框 -->
  <input type="radio" name="gender" value="male" checked> 男
  <input type="radio" name="gender" value="female"> 女
</form>复制

属性解释：

• type=“checkbox”: 创建复选框
• type=“radio”: 创建单选框
• name: 分组单选框或复选框
• value: 指定选中时的值
• checked: 默认选中状态

form表单的作用，action, method属性作用（续）

<form action="/submit-data" method="post" enctype="multipart/form-data">
  <input type="text" name="username" required>
  <input type="file" name="document">
  <input type="submit" value="提交">
</form>复制

属性解释：

• action: 指定表单数据提交的URL
• method: 指定HTTP请求方法（通常是GET或POST）
• enctype: 指定在提交表单时如何编码数据（特别是在上传文件时使用）

下拉菜单如何使用

<select name="country" id="country">
  <option value="">请选择国家</option>
  <option value="cn">中国</option>
  <option value="us" selected>美国</option>
  <option value="jp">日本</option>
</select>复制

属性解释：

• name: 为下拉菜单命名，用于表单提交
• id: 为元素提供唯一标识符
• selected: 指定默认选中的选项

文本域如何使用

<textarea name="comments" rows="4" cols="50" placeholder="请输入您的评论">
这里是预填充的文本内容
</textarea>复制

属性解释：

• name: 为文本域命名，用于表单提交
• rows: 指定可见的文本行数
• cols: 指定可见的文本列数
• placeholder: 提供输入提示

HTML5新增的表单元素和属性

<form>
  <!-- 日期选择器 -->
  <input type="date" name="birthday">
 
  <!-- 颜色选择器 -->
  <input type="color" name="favorite_color">
 
  <!-- 范围滑块 -->
  <input type="range" name="volume" min="0" max="100" step="1">
 
  <!-- 数字输入 -->
  <input type="number" name="quantity" min="1" max="10">
 
  <!-- 电子邮件输入 -->
  <input type="email" name="user_email" required>
 
  <!-- URL输入 -->
  <input type="url" name="website">
 
  <!-- 搜索输入 -->
  <input type="search" name="search_query">
 
  <!-- 电话号码输入 -->
  <input type="tel" name="phone_number">
 
  <!-- 自动完成 -->
  <input type="text" name="country" list="countries">
  <datalist id="countries">
    <option value="中国">
    <option value="美国">
    <option value="日本">
  </datalist>
</form>复制

新增属性：

• required: 必填字段
• pattern: 使用正则表达式验证输入
• min 和 max: 设置数值或日期范围
• step: 设置数值增减的步长
• placeholder: 输入提示
• autocomplete: 自动完成功能
• autofocus: 页面加载时自动获得焦点

HTML5新增的结构元素

<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
    </ul>
  </nav>
</header>
 
<main>
  <article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </article>
  
  <aside>
    <h3>相关链接</h3>
    <ul>
      <li><a href="#">链接1</a></li>
      <li><a href="#">链接2</a></li>
    </ul>
  </aside>
</main>
 
<footer>
  <p>&copy; 2023 版权所有</p>
</footer>复制

新增元素说明：

• : 定义页面或区块的头部
• : 定义文档的主要内容
• : 定义独立的文章内容
• : 定义与主内容相关的侧边内容

HTML5多媒体元素

<!-- 视频播放器 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持视频标签。
</video>
 
<!-- 音频播放器 -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持音频元素。
</audio>复制

属性解释：

• controls: 显示播放控件
• width 和 height: 设置视频播放器尺寸
• : 指定不同格式的媒体源，浏览器会选择第一个支持的格式

HTML5 Canvas元素

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持Canvas元素。
</canvas>
 
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>复制

元素用于通过JavaScript在网页上绘制图形。它提供了一个空白的绘图区域，可以用来创建动画、游戏图形、数据可视化等。

HTML5 语义化元素的重要性

语义化元素使得HTML更具描述性，有以下好处：

• 提高可访问性：辅助技术可以更好地理解页面结构
• 提高SEO：搜索引擎可以更好地理解页面内容
• 提高可维护性：代码更易读、更易理解

例如，使用