36个问题快速复习HTML5

Java全栈的牛马

于 2024-08-08 11:28:55 发布

阅读量288

点赞数 18

文章标签： html5 前端 html

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

版权

什么是HTML?

HTML(HyperText Markup Language)是用于创建网页的标准标记语言。它描述了网页的结构,通过各种标签来定义内容的含义和布局。

HTML文档结构是怎样的,分别有什么作用?

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>
    <!-- 页面内容 -->
</body>
</html>

: 声明文档类型为HTML5
: 根元素,包含整个页面内容
: 包含元数据,如字符集、视口设置、标题等
: 包含可见的页面内容

什么是注释,HTML注释怎么写,快捷键?

注释是用来解释代码的文本,不会显示在页面上。HTML注释的语法:

<!-- 这是一个HTML注释 -->

常用的快捷键(以VS Code为例):

Windows: Ctrl + /
Mac: Cmd + /

标题标签,水平线,段落

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<!-- h1到h6共6个级别 -->

<hr> <!-- 水平线 -->

<p>这是一个段落</p>

什么情况下,内容会换行?

块级元素(如 < p>, < div >)会自动换行
使用< br>标签强制换行
在pre标签中,保留原有的换行和空格

img标签作用,常用属性

img标签用于在页面中插入图片。

<img src="image.jpg" alt="描述文本" width="300" height="200">

常用属性:

src: 图片源文件路径
alt: 替代文本,图片无法显示时显示
width/height: 设置图片尺寸

a链接作用,常用属性

a标签用于创建超链接。

<a href="https://www.example.com" target="_blank">点击这里</a>

常用属性:

href: 链接目标URL
target: 指定链接打开方式(_blank为新窗口打开)

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

iframe用于在页面中嵌入另一个页面。可以与a链接配合,在iframe中显示链接内容。

<iframe src="about:blank" name="myFrame"></iframe>
<a href="https://www.example.com" target="myFrame">在iframe中打开</a>

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

列表用于组织和展示相关项目。

无序列表:

<ul>
    <li>项目1</li>
    <li>项目2</li>
</ul>

有序列表:

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

定义列表:

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

文字倾斜,加粗标签

<em>倾斜文本</em> <!-- 语义化,表示强调 -->
<i>倾斜文本</i> <!-- 仅视觉效果 -->

<strong>加粗文本</strong> <!-- 语义化,表示重要 -->
<b>加粗文本</b> <!-- 仅视觉效果 -->

HTML元素分为哪3类，分别有什么特点？

HTML元素可以分为以下三类：
a) 块级元素（Block-level elements）
特点：

独占一行
可以设置宽高
可以包含其他块级元素和内联元素

b) 内联元素（Inline elements）
特点：

不会独占一行，与其他内联元素在同一行
宽高由内容决定，无法直接设置
只能包含其他内联元素

c) 内联块元素（Inline-block elements）
特点：

不会独占一行
可以设置宽高
可以包含其他元素

不同种类元素举例

<!-- 块级元素 -->
<div>这是一个块级元素</div>
<p>这也是块级元素</p>
<h1>标题是块级元素</h1>

<!-- 内联元素 -->
<span>这是内联元素</span>
<a href="#">链接是内联元素</a>
<strong>加粗文本是内联元素</strong>

<!-- 内联块元素 -->
<img src="image.jpg" alt="图片是内联块元素">
<input type="text" placeholder="输入框是内联块元素">

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

div和span都是无语义的容器元素，主要用于分组和应用样式。

div：

块级元素
通常用于划分页面结构或创建布局

span：

内联元素
通常用于对文本的一部分应用样式

与其他语义化标签（如 header, nav, article 等）的区别在于，div和span没有特定的语义，更加灵活。

如何显示一个按钮

可以使用 button 元素或 input 元素创建按钮：

<!-- 使用 button 元素 -->
<button type="button">点击我</button>

<!-- 使用 input 元素 -->
<input type="button" value="点击我">

table表格组成和作用

表格用于展示结构化数据，由以下元素组成：

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

table: 定义整个表格
caption: 表格标题
thead: 表头部分
tbody: 表格主体
tfoot: 表格脚注
tr: 表格行
th: 表头单元格
td: 数据单元格

table合并单元格

使用 colspan 和 rowspan 属性来合并单元格：

<table border="1">
    <tr>
        <td rowspan="2">合并两行</td>
        <td>普通单元格</td>
    </tr>
    <tr>
        <td>普通单元格</td>
    </tr>
    <tr>
        <td colspan="2">合并两列</td>
    </tr>
</table>

table边框，单元格内外边距

可以使用 CSS 来控制表格边框和单元格边距：

<style>
    table {
        border-collapse: collapse; /* 合并边框 */
    }
    td {
        border: 1px solid black; /* 单元格边框 */
        padding: 5px; /* 内边距 */
    }
    table {
        border-spacing: 2px; /* 单元格间距，需要 border-collapse: separate; */
    }
</style>

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

Emmet是一种快速编写HTML和CSS的工具。它使用简写语法来生成完整的代码结构。例如：

div>ul>li*3

会生成：

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

Emmet大大提高了编码效率。

什么是回显

回显是指在表单中显示已有的数据。通常用于编辑或查看现有记录时。

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

<!-- 普通输入框 -->
<input type="text" value="预填充的值">

<!-- 密码框 -->
<input type="password" value="预设密码">

<!-- 回显示例（假设从服务器获取的数据存储在变量中） -->
<input type="text" value="<?php echo $username; ?>">

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

<form>
    <!-- 提交按钮 -->
    <input type="submit" value="提交表单">
    
    <!-- 重置按钮 -->
    <input type="reset" value="重置表单">
    
    <!-- 使用 button 元素，可以包含更复杂的内容 -->
    <button type="submit">
        <img src="submit-icon.png" alt="提交">
        提交表单
    </button>
</form>

复选，单选，回显

<!-- 复选框 -->
<input type="checkbox" name="hobby" value="reading" id="reading" <?php echo ($hobby == 'reading') ? 'checked' : ''; ?>>
<label for="reading">阅读</label>

<!-- 单选框 -->
<input type="radio" name="gender" value="male" id="male" <?php echo ($gender == 'male') ? 'checked' : ''; ?>>
<label for="male">男</label>
<input type="radio" name="gender" value="female" id="female" <?php echo ($gender == 'female') ? 'checked' : ''; ?>>
<label for="female">女</label>

form表单作用，action、method属性作用

form 表单用于收集用户输入并将数据提交到服务器。

action 属性：指定表单数据提交的 URL
method 属性：指定提交数据的 HTTP 方法（GET 或 POST）

<form action="/submit-data" method="post">
    <!-- 表单内容 -->
</form>

单、双标签的语法是怎样的

双标签：有开始和结束标签
```
<p>这是一个段落</p>
```

单标签：自闭合标签

<img src="image.jpg" alt="图片">
<br>

标签的属性如何设置

属性在开始标签中设置，格式为 属性名="属性值"：

<a href="https://www.example.com" target="_blank" title="打开示例网站">
    点击这里
</a>

控制标签样式用什么属性，具体语法是什么

使用 style 属性来设置内联样式：

<p style="color: blue; font-size: 16px; margin-top: 10px;">
    这是一个带样式的段落
</p>

文本框，密码框，复选、单选框：使用、回显

<!-- 文本框 -->
<input type="text" name="username" value="<?php echo $username; ?>">

<!-- 密码框 -->
<input type="password" name="password" value="<?php echo $password; ?>">

<!-- 复选框 -->
<input type="checkbox" name="subscribe" value="yes" <?php echo ($subscribe == 'yes') ? 'checked' : ''; ?>>

<!-- 单选框 -->
<input type="radio" name="gender" value="male" <?php echo ($gender == 'male') ? 'checked' : ''; ?>>
<input type="radio" name="gender" value="female" <?php echo ($gender == 'female') ? 'checked' : ''; ?>>

下拉框、多行文本使用、回显

<!-- 下拉框 -->
<select name="country">
    <option value="usa" <?php echo ($country == 'usa') ? 'selected' : ''; ?>>USA</option>
    <option value="uk" <?php echo ($country == 'uk') ? 'selected' : ''; ?>>UK</option>
    <option value="china" <?php echo ($country == 'china') ? 'selected' : ''; ?>>China</option>
</select>

<!-- 多行文本 -->
<textarea name="comment" rows="4" cols="50"><?php echo $comment; ?></textarea>

上传、提交、重置按钮

<form action="/upload" method="post" enctype="multipart/form-data">
    <!-- 文件上传 -->
    <input type="file" name="fileToUpload" id="fileToUpload">
    
    <!-- 提交按钮 -->
    <input type="submit" value="上传文件">
    
    <!-- 重置按钮 -->
    <input type="reset" value="重置表单">
</form>

h5表单邮箱、数字、滑块、日期

<!-- 邮箱输入 -->
<input type="email" name="user_email" required>

<!-- 数字输入 -->
<input type="number" name="quantity" min="1" max="100" step="1">

<!-- 滑块 -->
<input type="range" name="volume" min="0" max="100" step="1">

<!-- 日期选择 -->
<input type="date" name="birthday">

必填校验，忽略校验

HTML5 提供了内置的表单验证功能：

<!-- 必填字段 -->
<input type="text" name="username" required>

<!-- 忽略验证 -->
<form novalidate>
    <input type="email" name="email" required>
    <input type="submit" value="提交">
</form>

required 属性使字段成为必填项。
novalidate 属性可以在 form 标签上使用，以禁用整个表单的 HTML5 验证。

输入框提示语

使用 placeholder 属性为输入框添加提示文本：

<input type="text" name="search" placeholder="请输入搜索关键词">

自动获得焦点

使用 autofocus 属性让输入框在页面加载时自动获得焦点：

<input type="text" name="username" autofocus>

播放视频元素分类、控制栏，循环，静音

HTML5 提供了 <video> 元素用于播放视频：

<video width="320" height="240" controls loop muted>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

controls: 显示播放控制栏
loop: 循环播放
muted: 静音播放

视频缩略图，自动播放，preload作用

<video width="320" height="240" controls autoplay poster="thumbnail.jpg" preload="auto">
    <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持 video 标签。
</video>

poster: 设置视频缩略图
autoplay: 自动播放
preload: 指定如何加载视频
- auto: 页面加载时加载整个视频
- metadata: 仅加载元数据
- none: 不预加载视频

播放音频，元素分类，重要属性

HTML5 提供了 <audio> 元素用于播放音频：

<audio controls autoplay loop>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持 audio 元素。
</audio>

重要属性：

controls: 显示播放控制栏
autoplay: 自动播放
loop: 循环播放
muted: 静音播放
preload: 预加载设置（同视频）

<audio> 元素可以包含多个 <source> 元素，以提供不同格式的音频文件，浏览器会选择第一个支持的格式。

Java全栈的牛马

关注

18
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
36个问题快速复习HTML5

HTML(HyperText Markup Language)是用于创建网页的标准标记语言。它描述了网页的结构,通过各种标签来定义内容的含义和布局。与其他语义化标签（如 header, nav, article 等）的区别在于，div和span没有特定的语义，更加灵活。属性可以在 form 标签上使用，以禁用整个表单的 HTML5 验证。注释是用来解释代码的文本,不会显示在页面上。元素，以提供不同格式的音频文件，浏览器会选择第一个支持的格式。div和span都是无语义的容器元素，主要用于分组和应用样式。
复制链接

扫一扫