有趣的前端知识（二）

推荐阅读

智能化校园：深入探讨云端管理系统设计与实现（一）
智能化校园：深入探讨云端管理系统设计与实现（二）

文章目录

  • 推荐阅读
      • HTML元素
        • 元素
        • 属性
        • 头部元素
        • 列表元素
        • 区块元素
        • 表单元素
      • 颜色
      • 字符实体

在这里插入图片描述

HTML元素

元素

元素语法：

  • 元素以开始标签起始，以结束标签终止。
  • 元素内容是开始标签与结束标签之间的内容。
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 不少元素具有空内容。
  • 大多数元素可以嵌套其他元素。
<p>这是一个段落。</p>，这一整个就是元素。

标签加属性加内容为元素
image.png

<html><body>
<p>hello</p>
</body></html>

属性
  • 元素中可以设置属性
  • 属性一般添加到开始标签中
  • 属性总是以名称或者值对的形式出现，例如：name="value"或者name=‘value’
  • 属性和属性值对大小写都行。
  • 属性值始终被包括在引号内，双引号或单引号皆可。

在某些个别的情况下，比如属性值本身就含有双引号，那么就必须使用单引号，例如：
name='hello “bob” ’

 <div style="color: antiquewhite">hello</div>

头部元素
元素包含了所有的头部标签元素。在 元素中声明元信息，指示浏览器在何处可以找到样式表，包含的脚本等等。
可以添加在头部区域的元素标签为: ** ,

元素
标签定义了不同文档的标题。<br/>在HTML/XHTML文档是必需的。<br/><title> 元素:

  1. 定义了浏览器工具栏的标题
  2. 当网页添加到收藏夹时，显示在收藏夹中的标题
  3. 显示在搜索引擎结果页面的标题
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head><body>
文档内容......
</body></html>

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

<head>
<base href="http://www.baidu.com" target="_blank">
</head>

元素
标签定义了文档与外部资源之间的关系。
标签通常用于链接到样式表。

<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>


<head>
<style type="text/css">
body{background-color:red;
}
</style>
</head>

元素
meta标签描述了一些基本的元数据。
标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
常用属性：content、http-equiv、charset

//为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
//为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="ktrol">
每30秒钟刷新当前页面
<meta http-equiv="refresh" content="30">

列表元素

无序列表使用

  • 标签，有序列表使用
    1. 标签。 

<ul>
<li>A</li>
<li>B</li>
</ul><ol>
<li>C</li>
<li>D</li>
</ol>

image.png
自定义列表以

标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以
开始。
image.png

区块元素

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

,

,

  • , 。
    内联元素显示时通常不会以新行开始， ,
    , , 。
    独立成行的元素为块元素，行内元素不能独立成行。
    image.png
    image.png

<p>区块元素</p>
<div style="color:red"><h3>这是一个在 div 元素中的标题。</h3><p>这是一个在 div 元素中的段落。</p>
</div>
<br>
<p>内联元素</p>
<p>北京<span style="color: blue">北京大学</span><p>
<p>北京<b>北京大学</b></p>
<p>北京<u>北京大学</u></p>

image.png

表单元素

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

标签描述
定义供用户输入的表单
定义输入域
定义文本域 (一个多行的输入控件)
定义了 元素的标签，一般为输入标题
定义了一组相关的表单元素，并使用外框包含起来
定义了 元素的标题
定义了下拉选项列表
定义选项组
定义下拉列表中的选项
定义一个点击按钮
指定一个预先定义的输入控件选项列表
定义了表单的密钥对生成器字段
定义一个计算结果

表单元素（声明表单范围，声明数据信息提交到服务器的范围)
表单控件（用来给用户输入数据）

  1. input元素，输入类型由type属性决定。

  • 文本框

    value ：默认输入的值，maxlength：最大长度 ，readonly：设置只读。

  • 密码框

  • 文件框

  • 隐藏框

  • 单选框

     name ：组名，同组radio互斥，checked:设置默认选中

  • 复选框

    checked 设置默认选中

  • 提交按钮

    method属性，用来定义表单数据的提交方式

  • post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
  • get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.baidu.com/?page=1，这里的 page=1 就是 get 方法提交的数据。
  • 重置按钮
  • 普通按钮
  1. 其他元素（3个）

label:用来管理表单中的文本,可以将文本和控件联系在一起。
select:下拉选,selected 默认选中
textarea 文本域,cols 指定最大列数,rows 指定指定最大行数,readonly

<form action="https://www.baidu.com"><p>账号:<input type="text"value="baidu"maxlength="12"></p><p>密码:<input type="password"3. maxlength="16"></p><p>头像：<input type="file"/></p><p><input type="hidden" value="kk"/></p><p>性别：<input type="radio" name="sex" checked/>男<input type="radio" name="sex"/>女</p><p>兴趣:<input type="checkbox" checked/>music<input type="checkbox"/>reading<input type="checkbox"/>football</p><p><input type="submit" value="注册"/><input type="reset" value="重置"/><input type="button" value="试试"/><p/><p><input type="checkbox" id="a"/><label for="a">I agree</label></p><p>城市：<select><option>请选择</option><option> beijng</option><option>shanghai</option><option>guangzhou</option><option>changsha</option></select></p><p>简介：<textarea cols="5" rows="5">想啥呢</textarea></p>
</form>

image.png

颜色

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 **“alpha” **通道，运行对颜色值设置透明度，该透明度的设置范围为0-1。
可以去该网站进行颜色对比。
HTML颜色代码表🎨

字符实体

HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。

不间断空格
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用   字符实体。

实体名称对大小写敏感！

显示结果描述实体名称
空格 
<小于号<
>大于号>
&和号&
"引号"
’撇号' (IE不支持)
￠分¢
£镑£
¥人民币/日元¥
€欧元€
§小节§
©版权©
®注册商标®
™商标™
×乘号×
÷除号÷

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/234182.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

OpenHarmony之hdc

OpenHarmony之hdc

OpenHarmony之hdc 简介 hdc&#xff08;OpenHarmony Device Connector&#xff09;是 OpenHarmony 为开发人员提供的用于调试的命令行工具&#xff0c;通过该工具可以在Windows/Linux/MacOS等系统上与开发机或者模拟器进行交互。 类似于Android的adb&#xff0c;和adb类似&a…
阅读更多...
BlogPark测试报告

BlogPark测试报告

目录 一&#xff0c;项目背景 二&#xff0c;项目功能 三&#xff0c;测试计划 3.1 测试用例的设计 3.2 功能测试 1.正常登录 2.正常写博客测试 &#xff08;输入完整的标题和内容&#xff09; 3.发布博客之后跳转到详情页观察是否有刚发布的博客 4.删除博客观察列表的…
阅读更多...
Linux下从sqlite3源码编译出sqlite3库及相关可执行程序

Linux下从sqlite3源码编译出sqlite3库及相关可执行程序

目录 1. 下载sqlite3源码并编译 2. 下载Tcl库并编译 3. 再次编译sqlite源码 1. 下载sqlite3源码并编译 打开SQLite Download Page&#xff0c;滚动到页面的下面&#xff0c;找到源码量最大的那个&#xff08;其它的估计也行&#xff0c;但源码最大的本人感觉功能最全&#…
阅读更多...
【unity小技巧】FPS游戏实现相机的偏移震动、武器射击后退和后坐力效果

【unity小技巧】FPS游戏实现相机的偏移震动、武器射击后退和后坐力效果

最终效果 文章目录 最终效果前言相机偏移震动相机震动脚本换弹节点震动 武器射击后退效果武器后坐力效果完结 前言 关于后坐力之前其实已经分享了一个&#xff1a;FPS游戏后坐力制作思路 但是实现起来比较复杂&#xff0c;如果你只是想要简单的实现&#xff0c;可以看看这个&…
阅读更多...
软件测试|Python对JSON的解析和创建详解

软件测试|Python对JSON的解析和创建详解

简介 JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;已经成为当今互联网应用中广泛使用的数据格式之一。Python提供了内置的模块来解析和创建JSON数据&#xff0c;使得在Python中处理JSON变得非常简单。本文将详细介绍Python…
阅读更多...
GB28181视频汇聚平台EasyCVR级联后，部分通道视频无法播放是什么原因？

GB28181视频汇聚平台EasyCVR级联后，部分通道视频无法播放是什么原因？

GB28181协议智慧安防平台EasyCVR是基于各种IP流媒体协议传输的视频汇聚和融合管理平台。视频流媒体服务器EasyCVR采用了开放式的网络结构&#xff0c;支持高清视频的接入和传输、分发&#xff0c;平台提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制…
阅读更多...
Python 网络爬虫的常用库汇总（建议收藏）

Python 网络爬虫的常用库汇总（建议收藏）

Python 在编写网络爬虫常常用到的一些库。 Python爬虫网络库主要包括&#xff1a;urllib、requests、lxml、fake-useragent、bs4(BeautifulSoup)、grab、pycurl、urllib3、httplib2、RoboBrowser 、MechanicalSoup、mechanize、socket、Unirest for Python、hyper、PySocks、t…
阅读更多...
Spring MVC的RequestMapping注解、controller方法返回值

Spring MVC的RequestMapping注解、controller方法返回值

1.使用说明 作用&#xff1a;用于建立请求URL和处理请求方法之间的对应关系。 出现位置&#xff1a; 类上&#xff1a; 请求 URL的第一级访问目录。此处不写的话&#xff0c;就相当于应用的根目录。写的话需要以/开头。它出现的目的是为了使我们的 URL 可以按照模块化管理&…
阅读更多...
Realm Management Extension领域管理扩展之安全状态

Realm Management Extension领域管理扩展之安全状态

RME基于Arm TrustZone技术。TrustZone技术在Armv6中引入，提供以下两个安全状态： 安全状态（Secure state）非安全状态（Non-secure state）以下图表显示了在AArch64中的这两个安全状态以及通常在每个安全状态中找到的软件组件： 该架构将在安全状态运行的软件与在非安全状态运…
阅读更多...
UV贴图和展开初学者指南

UV贴图和展开初学者指南

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 介绍 这正是本文的主题——UV贴图——登上舞台的时候。大多数 3D 建…
阅读更多...
Transformer 的双向编码器表示 (BERT)

Transformer 的双向编码器表示 (BERT)

一、说明 本文介绍语言句法中&#xff0c;最可能的单词填空在self-attention的表现形式&#xff0c;以及内部原理的介绍。 二、关于本文概述 在我之前的博客中&#xff0c;我们研究了关于生成式预训练 Transformer 的完整概述&#xff0c;关于生成式预训练 Transformer (GPT) 的…
阅读更多...
基于神经网络的手写汉字提取与书写评分系统研究

基于神经网络的手写汉字提取与书写评分系统研究

相关源码和文档获取请私聊QQ:3106089953 论文目录结构 目 录 摘 要 I Abstract II 目 录 IV 第1章 绪论 1 1.1. 研究背景与意义 1 1.2. 国内外研究现状 2 1.2.1. 文本定位技术研究现状 2 1.2.2. 手写汉字识别研究现状 3 1.2.3. 汉字书写质量评价方法研究现状 4 1.3. 本文所做工…
阅读更多...
Qt pro文件

Qt pro文件

1. 项目通常结构 2.pri文件 pri文件可定义通用的宏&#xff0c;例如创建一个COMMON.pri文件内容为 COMMON_PATH D:\MyData 然后其它pri或者pro文件如APPTemplate.pro文件中通过添加include(Common.pri) &#xff0c;QtCreator就会自动在项目结构树里面创建对应的节点 3.变量…
阅读更多...
3D人体姿态估计

3D人体姿态估计

3D人体姿态估计是指通过算法对输入的图像或视频进行分析&#xff0c;推断出人体的三维姿态信息。该技术可以应用于许多领域&#xff0c;如虚拟现实、运动分析、人机交互等。 1. 算法原理&#xff1a; 3D人体姿态估计利用深度学习模型作为算法的核心&#xff0c;通过网络学习人…
阅读更多...
【web】springboot3 生成本地文件 url

【web】springboot3 生成本地文件 url

文章目录 流程效果静态资源访问ServiceServiceImplController 流程 avatar_dir&#xff1a;请求图片在服务端的存放路径user.dir&#xff1a;项目根目录 效果 静态资源访问 application.yml 设置静态文件存储路径custom:upload:avatar_dir: ${user.dir}/avatar_dir/avatar_d…
阅读更多...
GO语言笔记2-变量与基本数据类型

GO语言笔记2-变量与基本数据类型

变量使用步骤 声明赋值使用 package main import "fmt" func main(){var age int //声明一个 int类型的变量叫ageage 18 //给变量用 赋值fmt.Println(age) //使用变量 输出变量的值 } 编译运行输出变量值 变量的四种使用方式 package main import "fmt&q…
阅读更多...
金和OA C6 HomeService.asmx SQL注入漏洞复现

金和OA C6 HomeService.asmx SQL注入漏洞复现

0x01 产品简介 金和网络是专业信息化服务商,为城市监管部门提供了互联网+监管解决方案,为企事业单位提供组织协同OA系统开发平台,电子政务一体化平台,智慧电商平台等服务。 0x02 漏洞概述 金和OA C6 HomeService.asmx接口处存在SQL注入漏洞，攻击者除了可以利用 SQL 注入漏洞…
阅读更多...
MiniTab的正态性检验结果的分析

MiniTab的正态性检验结果的分析

正态性检验概述 可使用 正态性检验 确定数据是否不服从正态分布。 执行菜单&#xff1a;要执行正态性检验&#xff0c;请选择统计 > 基本统计 > 正态性检验。 正态性检验 的假设 对于正态性检验&#xff0c;进行如下假设。 H0&#xff1a;数据服从正态分布。H1&…
阅读更多...
【VUE】无法加载文件 \node\vue.ps1，因为在此系统上禁止运行脚本。问题解决

【VUE】无法加载文件 \node\vue.ps1，因为在此系统上禁止运行脚本。问题解决

问题描述 在VS Code中输入vue create -p dcloudio/uni-preset-vue uniapp-demo命令时报错 无法加载文件 D:\address\node\vue.ps1&#xff0c;因为在此系统上禁止运行脚本。有关详细信息&#xff0c;请参阅 https:/go.microsoft.com/fwlink/?LinkID135170 中的 about_Executi…
阅读更多...
数据结构之B树和B+树

数据结构之B树和B+树

数据结构可视化演示链接&#xff0c;也就是视频中的网址 文章目录 一、B-Tree二、BTree(B-Tree变种) 一、B-Tree 样例图 叶节点具有相同的深度&#xff0c;叶节点的指针为空所有索引元素不重复节点中的数据索引从左到右递增排列 二、BTree(B-Tree变种) 样例图 非叶子节…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023