首页 前端知识 html5快速复习

html5快速复习

2024-08-12 10:08:58 前端知识 前端哥 877 737 我要收藏

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

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

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>

有序列表 (

  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>
标签的作用是创建一个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:搜索引擎可以更好地理解页面内容
  • 提高可维护性:代码更易读、更易理解

例如,使用

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15371.html
标签
评论
发布的文章

jQuery3 学习手册(三)

2024-08-18 22:08:04

vue和jQuery有什么区别

2024-04-29 11:04:47

推荐项目:jQuery.Gantt

2024-08-18 22:08:37

jQuery UI 秘籍(一)

2024-08-18 22:08:15

jQuery详解

2024-04-29 11:04:38

echarts饼图点击图例问题

2024-08-18 22:08:48

echarts天气折线图

2024-08-18 22:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!