有趣的前端知识（二）

推荐阅读

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

文章目录

  • 推荐阅读
      • 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.mzph.cn/news/608143.shtml

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

相关文章

知识点整理[（GraphGeo）RELATED WORK]

知识点整理[（GraphGeo）RELATED WORK]

2 RELATED WORK 2.1 IP Geolocation 问题一：IP定位预测方法之一：Data mining-based methods 回答： 依赖于在公开的资源中挖掘位置线索来对目标IP（target IP）进行地理定位。其中一些数据分析了来自与IP相关的数据库，如WHOIS数据库和DNS的数据。 （1）例如，Moore等…
阅读更多...
neo4j图数据库的简单操作记录

neo4j图数据库的简单操作记录

知识图谱文件导出 首先停止运行sudo neo4j stop然后导出数据库 导出格式为&#xff1a; 具体命令如下sudo neo4j-admin database dump --to-path/home/ neo4j最后重启sudo neo4j start知识图谱外观修改 在网页点击节点&#xff0c;选中一个表情后点击&#xff0c;可修改其颜…
阅读更多...
Python+Flask+MySQL的图书馆管理系统【附源码，运行简单】

Python+Flask+MySQL的图书馆管理系统【附源码，运行简单】

PythonFlaskMySQL的图书馆管理系统【附源码&#xff0c;运行简单】 总览 1、《图书馆管理系统》1.1 方案设计说明书设计目标需求分析工具列表 2、详细设计2.1 登录2.2 注册2.3 程序主页面2.4 图书新增界面2.5 图书信息修改界面2.6 普通用户界面2.7 其他功能贴图 3、下载 总览 …
阅读更多...
【sklearn练习】preprocessing的使用

【sklearn练习】preprocessing的使用

介绍 scikit-learn 中的 preprocessing 模块提供了多种数据预处理工具&#xff0c;用于准备和转换数据以供机器学习模型使用。这些工具可以帮助您处理数据中的缺失值、标准化特征、编码分类变量、降维等。以下是一些常见的 preprocessing 模块中的功能和用法示例&#xff1a; …
阅读更多...
【CSS】CSS中的BFC，是什么？

【CSS】CSS中的BFC，是什么？

一、常见定位方案 普通流默认&#xff0c;从上而下&#xff0c;行内元素水平排列&#xff0c;行满换行&#xff0c;块级元素渲染成一个新行。 浮动先按普通流位置出现&#xff0c;然后根据浮动方向偏移。 绝对定位元素具体位置由绝对定位坐标组成。二、什么是BFC BFC&#xff…
阅读更多...
适合小微企业的记账软件有哪些？

适合小微企业的记账软件有哪些？

“涉及了很多的库存管理、进销存和记账&#xff0c;最好是这个软件可以随时看到我们公司的财务数据&#xff0c;且一定要安全&#xff01;” 进、销、存、财……进销存财管理就像是企业的大管家&#xff0c;管着货物、资金、成本、收入&#xff0c;保证一切有序运转。这些管理…
阅读更多...
ISIS基本概率与配置（HCIP完整版）

ISIS基本概率与配置（HCIP完整版）

目录 一、ISIS协议基础 1、ISIS概述&#xff08;认识ISIS&#xff09; 2、ISIS的应用 4、ISIS的工作过程 5、ISIS路由器的类型 6、ISIS区域 7、ISIS报文 8、ISIS基础配置 9、进程号&#xff1a; 10、NET地址 11、ISIS邻居关系 二、邻居表分析 1、ISIS邻居表字段解析…
阅读更多...
Oracle11.2.0.4从RMAN备份中快速恢复单个表的方法

Oracle11.2.0.4从RMAN备份中快速恢复单个表的方法

文章目录 前言一、查询所要恢复的表所涉及的表空间二、创建用于恢复的数据库三、恢复步骤1.恢复控制文件2.修改redo日志名称3.表空间恢复4.表空间recover5.查询数据 前言 由于用户误操作导致某表中的数据错乱&#xff0c;导致业务不能正常使用&#xff0c;现需要将该表恢复到一…
阅读更多...
【FPGA】分享一些FPGA数字信号处理相关的书籍

【FPGA】分享一些FPGA数字信号处理相关的书籍

在做FPGA工程师的这些年&#xff0c;买过好多书&#xff0c;也看过好多书&#xff0c;分享一下。 后续会慢慢的补充书评。 【FPGA】分享一些FPGA入门学习的书籍【FPGA】分享一些FPGA协同MATLAB开发的书籍 【FPGA】分享一些FPGA视频图像处理相关的书籍 【FPGA】分享一些FPGA高速…
阅读更多...
更改邮箱发件人

更改邮箱发件人

更改邮箱发件人 未更改前发件人显示为发件人的邮箱地址 这里以outlook邮箱为例&#xff0c;进行邮箱发件人的更改 1.点击左上角“文件”选项 2.打开“账户设置”下拉菜单中的“账户设置” 3.选择“电子邮件”&#xff0c;点击该栏下的“更改”选项 4.在弹出页面中修改你…
阅读更多...
机器学习原理到Python代码实现之NaiveBayes【朴素贝叶斯】

机器学习原理到Python代码实现之NaiveBayes【朴素贝叶斯】

Naive Bayes 朴素贝叶斯算法 该文章作为机器学习的第二篇文章&#xff0c;主要介绍的是朴素贝叶斯算法的原理和应用。学习本章内容建议对概率论中的联合概率以及先验概率、后验概率有初步的学习和掌握。 难度系数&#xff1a;⭐⭐⭐ 更多相关工作请参考&#xff1a;Github 算法…
阅读更多...
为什么流不关闭会导致内存泄漏

为什么流不关闭会导致内存泄漏

引言 经常有人告诉你流用完要记得关&#xff0c;不然会导致内存泄漏&#xff0c;但你是否考虑过下面这些问题: 为什么流不关会导致内存泄漏&#xff1f;JVM不是有垃圾回收机制吗&#xff1f;这些引用我用完不就变垃圾了为什么不会被回收呢&#xff1f;流未关闭除了导致内存泄…
阅读更多...
node的下载、安装、配置

node的下载、安装、配置

下载&#xff1a; 官网下载&#xff1a;Node.js 左右两个都可以&#xff1a; 安装&#xff1a; 打开cmd&#xff1a; 输入以下指令&#xff0c;如果出现版本号说明安装成功 node -v npm -v 配置&#xff1a; 1、新建文件夹&#xff1a;node_cache和node_global作为npm“缓…
阅读更多...
前端实现搜索功能

前端实现搜索功能

最近遇到一个需求，用户在输入框输入关键字之后，点击搜索按钮后进行搜索，如下图，选中的数据在下面，上面展现的是搜索后的数据，现在选中了2条数据： 当用户输入KET后点击搜索，搜出的结果有16条，勾选全选选中后，将选中的16条的数据加到之前已选的2条数据里，于是此时已选…
阅读更多...
重磅！大模型框架 LangChain 首个稳定版本终于来了！

重磅！大模型框架 LangChain 首个稳定版本终于来了！

著名的大模型智能体工具&#xff0c;现在有大版本更新了。 不知不觉&#xff0c;LangChain 已经问世一年了。作为一个开源框架&#xff0c;LangChain 提供了构建基于大模型的 AI 应用所需的模块和工具&#xff0c;大大降低了 AI 应用开发的门槛&#xff0c;使得任何人都可以基于…
阅读更多...
oracle角色管理

oracle角色管理

常用角色 CONNECT,RESOURCE,DBA,EXP_FULL_DATABASE,IMP_FULL_DATABASE 1角色可以自定义&#xff0c;语法与创建用户一样 CREATE role role1 IDENTIFIED by 123; 2授权权限给角色 --自定义角色 CREATE role role1 IDENTIFIED by 123; --授权权限给角色 GRANT create view, …
阅读更多...
AI人工智能从业人员《自然语言及语音处理设计开发工程师》证书专项培训（第二期）通知！

AI人工智能从业人员《自然语言及语音处理设计开发工程师》证书专项培训（第二期）通知！

工业和信息化部电子工业标准化研究院联合北京龙腾亚太教育咨询有限公司和北京龙腾智元信息技术有限公司于2024年1月成功在京举办AI人工智能从业人员《自然语言及语音处理设计开发工程师》证书专项培训第一期课程&#xff0c;所有学员成功通过考试。介于学员的良好反应&#xff…
阅读更多...
设置flex布局的元素，其子元素宽度和超过其本身时，其宽度值未被撑起问题

设置flex布局的元素，其子元素宽度和超过其本身时，其宽度值未被撑起问题

如图父元素main-content设置了display:flex. 里面包含了不确定个数的子元素&#xff0c;子元素样式为&#xff1a; flex: 1; min-width: 240px;现在想获取父元素的宽度&#xff0c;发现无论子元素的个数为多少&#xff0c;父元素的宽度都是一样的大小&#xff0c;并没有被子元…
阅读更多...
Docker与微服务实战（基础篇）

Docker与微服务实战（基础篇）

Docker与微服务实战&#xff08;基础篇&#xff09; 1、Docker简介2、Docker安装步骤1.Centos7及以上的版本2.卸载旧版本3.yum安装gcc相关4.安装需要的软件包5.设置stable镜像仓库【国内aliyun】6.更新yum软件包索引--以后安装更快捷7.安装Docker-Ce8.启动Docker9.测试10.卸载1…
阅读更多...
Socket closed 异常解决方案：如何解决 JMeter 压测中的问题

Socket closed 异常解决方案：如何解决 JMeter 压测中的问题

问题描述 JMeter 压测时会报 java.net.SocketException: Socket closed java.net.SocketException: Socket closed at java.net.PlainSocketImpl.socketConnect(Native Method) at java.net.AbstractPlainSocketImpl.doConnect(AbstractPlainSocketImpl.java:350) at java.ne…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023