HTML重要标签梳理学习

ops/2024/10/25 14:35:37/

1、HTML文件的框架

使用VS Code编码时，输入!选中第一个！就可以快速生成一个HTML文件框架。

2、标签 

    <hr>                       <!--下划线-->

    <br>                       <!--换行-->

    <strong>加粗</strong>

    <sub>上标</sub>

    <sup>下标</sup>

    <ins>定义插入字</ins>

    <del>定义删除字</del>

    <small>定义小号字</small>

    <i>斜体字</i>

    <b>加粗</b>

    <em>着重文字</em>

    <p><abbr title="你好，HTML">你好</abbr></p>         <!-- abbr标签的作用是缩写 -->

    <bdo dir="rtl">定义文本方向</bdo>

    <blockquote>定义长引用</blockquote>

    <q>定义短引用</q>

    <dfn>定义项目</dfn>

    <!--标题标签--><h1>标题标签1</h1><h2>标题标签2</h2><h3>标题标签3</h3><h4>标题标签4</h4><h5>标题标签5</h5><h6>标题标签6</h6><!--段落标签--><p>这是段落标签</p><!--链接标签--><a href="https://www.baidu.com">百度一下</a><div style="width: 500px;height: 300px;overflow: hidden;"><!--图像标签--><img src="study.png" alt="" style="max-width: 100%;max-height: 100%;"></div>

 标签有双标签也有单标签，要注意使用双标签时，注意标签闭合。

<p></p>就是一个双标签，要填写的内容要在<p></p>之中，即<p>内容</p>。

<img>是一个单标签，不用注意标签闭合。

HTML 标签对大小写不敏感：<P> 等同于 <p>。

1、属性

属性是 HTML 元素提供的附加信息。

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name="value"。
  • 属性和属性值对大小写不敏感。
class为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id定义元素的唯一id
style规定元素的行内样式（inline style）
title描述了元素的额外信息 (作为工具条使用)

2、链接 

1、超链接标签                                             <a href=""></a>

2、图像链接标签                                         <img src="" alt="">            

HTML 中创建链接的基本语法和属性：<a> 元素：创建链接的主要HTML元素是<a>（锚）元素。<a>元素具有以下属性：

  • href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
  • target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。
  • title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
  • rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。

3、头部 

 <title> 标签定义了不同文档的标题

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

<link> 标签定义了文档与外部资源之间的关系，<link> 标签通常用于链接到样式表

<style> 标签定义了HTML文档的样式文件引用地址，在<style> 元素中你也可以直接添加样式来渲染 HTML 文档

meta标签描述了一些基本的元数据，<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析

<script>标签用于加载脚本文件，如： JavaScript

4、HTML CSS 

CSS 可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用"style" 属性
  • 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
  • 外部引用 - 使用外部 CSS 文件

5、图像标签 

图像由<img> 标签定义，<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

使用源属性（src），src 指 "source"。源属性的值是图像的 URL 地址。

alt 属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的，用于图像无法显示的情况。

<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。

<area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像），<area> 元素始终嵌套在 <map> 标签内部。

6、表格 

 表格由 <table> 标签来定义。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

  • tr：tr 是 table row 的缩写，表示表格的一行。
  • td：td 是 table data 的缩写，表示表格的数据单元格。
  • th：th 是 table header的缩写，表示表格的表头单元格。

7、列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记，无序列表使用 <ul> 标签

有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签，列表项使用数字来标记

自定义列表不仅仅是一列项目，而是项目及其注释的组合，自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

8、区块

 大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）

内联元素在显示时通常不会以新行开始。

HTML <div> 元素，定义文档区域

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

HTML <span> 元素，组合行内元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

在HTML中，可以使用<div>、<span>、<table>进行布局。

9、表单 

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

  • <form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
  • <label> 元素用于为表单元素添加标签，提高可访问性。
  • <input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
  • <select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

 10、框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

iframe语法:        <iframe src="URL"></iframe>

frameborder 属性用于定义iframe表示是否显示边框，设置属性值为 "0" 移除iframe的边框

iframe 可以显示一个目标链接的页面，目标链接的属性必须使用 iframe 的属性

 11、脚本

JavaScript 使 HTML 页面具有更强的动态和交互性

<script> 标签用于定义客户端脚本，比如 JavaScript。

<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容

3、HTML5

1、HTML5 Canvas

<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形，在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字

<canvas>HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

2、HTML5 SVG

SVG 定义为可缩放矢量图形。

HTML5 支持内联 SVG。

HTML <svg> 元素是 SVG 图形的容器。

SVG 有多种绘制路径、框、圆、文本和图形图像的方法

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

 3、HTML5 MathML

MathML 元素，对应的标签是 <math>...</math> 。

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

 4、HTML5 Video

标签描述
<video>定义一个视频
<source>定义多种媒体资源,比如 <video> 和<audio>
<track>定义在媒体播放器文本轨迹

5、HTML5 Audio 

<audio>定义了声音内容
<source>规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用

6、语义元素 

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分

<article> 标签定义独立的内容

<nav> 标签定义导航链接的部分，<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏），aside 标签的内容应与主区域的内容相关

<header>元素描述了文档的头部区域，<header>元素主要用于定义内容的介绍展示区域

<footer> 元素描述了文档的底部区域，<footer> 元素应该包含它的包含元素，一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签定义 <figure> 元素的标题.

<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

7、HTML5 Web存储

客户端存储数据的两个对象为：

  • localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
  • sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

  • 保存数据：localStorage.setItem(key,value);
  • 读取数据：localStorage.getItem(key);
  • 删除单个数据：localStorage.removeItem(key);
  • 删除所有数据：localStorage.clear();
  • 得到某个索引的key：localStorage.key(index);
  •  键/值对通常以字符串存储

8、HTML5 Web SQL 数据库

规范中定义的三个核心方法：

  1. openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
  2. transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
  3. executeSql：这个方法用于执行实际的 SQL 查询。

9、HTML5 应用程序缓存

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

  1. 离线浏览 - 用户可在应用离线时使用它们
  2. 速度 - 已缓存资源加载得更快
  3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

 


http://www.ppmy.cn/ops/8360.html

相关文章

LR查看偏移量

LR查看偏移量

核心代码 手动关联 char str_temp[] ""; // 手动关联web_reg_save_param("sessionID","LB<input typehidden nameuserSession value","RB>\n","OrdALL", //后续参数要sessionID_1LAST);登录检查点 lr_start_tra…
阅读更多...
开盘啦即将涨停接口，风向标接口，竞价，涨停接口涵盖实时接口和历史接口

开盘啦即将涨停接口，风向标接口，竞价，涨停接口涵盖实时接口和历史接口

最近遇到个客户的需求&#xff0c;如图所示 即将涨停的接口如下所示 然后我用代码接口验证&#xff0c;如图所示 开盘啦所有的接口&#xff0c;50多个接口&#xff0c;涵盖涨停概念&#xff0c;概念板块&#xff0c;赚钱效应&#xff0c;效应历史&#xff0c;实时大单&#xf…
阅读更多...
基于springboot+vue+Mysql的房产销售平台

基于springboot+vue+Mysql的房产销售平台

开发语言&#xff1a;Java框架&#xff1a;springcloudJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a…
阅读更多...
vsCode 配置 用户代码

vsCode 配置 用户代码

适当配置自己的代码片段 , 减少coding 时间 &#xff0c; 释放copy双手 小白值得学习 配置方法 左下脚设置 --》 用户代码片段 -- 》 输入你需要配置的文件(比如输入jsx/vue) &#xff0c;回车 编辑 -- 》 编辑示例参数 以及坑点 {"Print to console": {// &q…
阅读更多...
【信号处理】心电信号传统R波检测定位典型方法实现（matlab）

【信号处理】心电信号传统R波检测定位典型方法实现（matlab）

关于 心电信号中QRS波检测是一个非常重要的步骤&#xff0c;可以用于实现重要波群的基本定位&#xff0c;在定位基础上&#xff0c;可以进一步分析心电信号的特征变化&#xff0c;从而为医疗诊断提供必要的参考。 工具 MATLAB ECG心电信号 方法实现 ECG心电信号加载 ecg …
阅读更多...
第二章：c语言中的表达式和运算符

第二章：c语言中的表达式和运算符

三、表达式和运算符 理解&#xff1a;表达式由字面值、变量、运算符组成的式子&#xff0c;通常有一个结果。算术运算符 运算符含义举例结果正号运算符aa的值-符号运算符-aa的负数值加法运算符aba和b相加-减法运算符a-ba和b相减*乘法运算符a*ba和b的乘积/除法运算符a/ba除以b%…
阅读更多...
web自动化系列-selenium的3种弹框操作(十二)

web自动化系列-selenium的3种弹框操作(十二)

在进行功能测试时 &#xff0c;经常会遇到出现各种的弹出的提示 &#xff0c;比如删除数据给出提示 、做某个操作时也会弹框给出一些友好提示 &#xff0c;因为这些弹框都是做web操作时的一些常用组件 &#xff0c;所以&#xff0c;selenium就不得不支持这些组件 。 1.弹框介绍…
阅读更多...
小球反弹（蓝桥杯）

小球反弹（蓝桥杯）

文章目录 小球反弹【问题描述】答案&#xff1a;1100325199.77解题思路模拟 小球反弹 【问题描述】 有一长方形&#xff0c;长为 343720 单位长度&#xff0c;宽为 233333 单位长度。在其内部左上角顶点有一小球&#xff08;无视其体积&#xff09;&#xff0c;其初速度如图所…
阅读更多...
最新文章

Copyright @ 2022~2023