html5快速复习

Java全栈的牛马

于 2024-08-08 10:23:36 发布

阅读量399

点赞数 5

文章标签： html5

本文链接：https://blog.csdn.net/qq_51263863/article/details/141019938

版权

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

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

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链接如何配合

用于在当前HTML文档中嵌入另一个文档。它可以与标签配合，让链接在iframe中打开。

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

有序列表 (

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

标签的作用是创建一个HTML表单，用于收集用户输入。

属性解释：

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：搜索引擎可以更好地理解页面内容
提高可维护性：代码更易读、更易理解

例如，使用

Java全栈的牛马

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html5快速复习

它提供了一个空白的绘图区域，可以用来创建动画、游戏图形、数据可视化等。这通常用于编辑现有数据或显示用户之前输入的信息。html元素分为行内元素，块级元素，行内块级元素，分别有什么特点。等标签可以清晰地表示页面结构，而不是全部使用无语义的。标签的作用是创建一个HTML表单，用于收集用户输入。: 表示与周围文字不同的文本，通常显示为斜体。: 表示需要引起注意的文本，通常显示为粗体。: 块级容器元素，用于组织和布局页面内容。什么是列表，无序，有序，定义列表怎么用。: 行内容器元素，用于标记文本的一部分。
复制链接

扫一扫