有趣的前端知识（二）

推荐阅读

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

文章目录

  • 推荐阅读
      • 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.hqwc.cn/news/334589.html

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

相关文章

从零学算法17

从零学算法17

17.给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例 1&#xff1a; 输入&#xff1a;digits “23” 输出&#xff1a;[…
阅读更多...
加速科技ST2500 数模混合信号测试设备累计装机量突破500台！

加速科技ST2500 数模混合信号测试设备累计装机量突破500台！

国产数字机&#xff0c;测试中国芯&#xff01;新年伊始&#xff0c;国产半导体测试设备领军企业加速科技迎来了振奋人心的一刻&#xff0c;ST2500 数模混合信号测试设备累计装机量突破500台&#xff01;加速科技凭借其持续的创新能力、完善的解决方案能力、专业热忱的本地化服…
阅读更多...
论文阅读：Making Large Language Models A Better Foundation For Dense Retrieval

论文阅读：Making Large Language Models A Better Foundation For Dense Retrieval

论文链接 Abstract 密集检索需要学习区分性文本嵌入来表示查询和文档之间的语义关系。考虑到大型语言模型在语义理解方面的强大能力&#xff0c;它可能受益于大型语言模型的使用。然而&#xff0c;LLM是由文本生成任务预先训练的&#xff0c;其工作模式与将文本表示为嵌入完全…
阅读更多...
Git将本地项目上传到Gitee仓库

Git将本地项目上传到Gitee仓库

1.右键点击文件&#xff0c;点击Git Bash Here,进入git窗口 2.初始化本地仓库 git init3.将本地仓库与远程仓库建立连接 git remote add origin 远程仓库地址远程仓库地址在gitee仓库复制即可 4.将远程仓库的文件拉到本地仓库中 git pull origin master5.将本地文件全部上传…
阅读更多...
RocketMQ5-03RocketMQ-Dashboard和Java客户端访问示例

RocketMQ5-03RocketMQ-Dashboard和Java客户端访问示例

接上篇02快速部署RocketMQ5.x(手动和容器部署) 已经完成 RocketMQ5.0 环境的部署&#xff0c;就需要对这个环境进行测试&#xff0c;查看集群、写入消息、读取消息等 本篇教你如何使用和查看部署的服务&#xff1a; Docker部署 Dashboard 获取镜像并下载部署服务 客户端连接 …
阅读更多...
python画房子

python画房子

前言 今天&#xff0c;我们来用Python画房子。 一、第一种 第一种比较简单。 代码&#xff1a; import turtle as t import timedef go(x, y):t.penup()t.goto(x, y)t.pendown() def rangle(h,w):t.left(180)t.forward(h)t.right(90)t.forward(w)t.left(-90)t.forward(h) de…
阅读更多...
Stable Diffusion 系列教程 - 6 Dreambooth及训练

Stable Diffusion 系列教程 - 6 Dreambooth及训练

Stable-Diffusion、Imagen等文生图大模型已经具备了强大的生成能力&#xff0c;假设我们的Prompt为 [Cyberpunk Style]&#xff0c;SD或许能很快画出赛博朋克风格的一幅画。但你作为一个不知名的人&#xff0c;不能奢求SD在训练的时候把你自己想要的风格也加进去吧&#xff1f;…
阅读更多...
鸿蒙应用开发学习路线（OpenHarmony/HarmonyOS）

鸿蒙应用开发学习路线（OpenHarmony/HarmonyOS）

鸿蒙应用开发学习路线&#xff08;OpenHarmony/HarmonyOS&#xff09; HarmonyOS应用开发学习路线网站汇总社区汇总视频学习路线 OpenHarmony应用开发学习路线与资料网站汇总社区汇总学习路线 MarkDown工具推荐 HarmonyOS应用开发学习路线 作者&#xff1a;坚果 团队&#xff1…
阅读更多...
Verilog 高级教程笔记——持续更新中

Verilog 高级教程笔记——持续更新中

Verilog advanced tutorial 转换函数 调用系统任务任务描述int_val $rtoi( real_val ) ;实数 real_val 转换为整数 int_val 例如 3.14 -> 3real_val $itor( int_val ) ;整数 int_vla 转换为实数 real_val 例如 3 -> 3.0vec_val $realtobits( real_val ) ;实数转换为…
阅读更多...
企业级快速开发平台可以用在什么行业？优点多吗？

企业级快速开发平台可以用在什么行业？优点多吗？

应用专业的企业级快速开发平台可以带来什么效果&#xff1f;目前&#xff0c;低代码技术平台在很多领域都获得了广泛应用和推广&#xff0c;在实现高效率办公、流程化办公和数字化发展中扮演了非常重要的角色&#xff0c;具有举足轻重的作用。针对这个话题&#xff0c;现在将给…
阅读更多...
react输入框检索树形（tree）结构

react输入框检索树形（tree）结构

input搜索框搜索树形子级内容1. input框输入搜索内容2. 获取tree结构数据3. 与tree匹配输入的内容&#xff0c;tree是多维数组&#xff0c;一级一级的对比输入的内容是否匹配&#xff0c;用forEach循环遍历数据&#xff0c;匹配不到在往下找&#xff0c;直到找到为null &#x…
阅读更多...
Golang中for和for range语句的使用技巧、对比及常见的避坑

Golang中for和for range语句的使用技巧、对比及常见的避坑

前言 基础语法不再赘述&#xff0c;写这个原因是之前的某次面试被问道了&#xff0c;我知道会导致问题但具体答下来不是很通顺。再回想自己开发过程中&#xff0c;很多地方都是使用到了for/for range&#xff0c;但是却从没注意过一些细节&#xff0c;因此专门学习一下进行记录…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023